ทะเบียนเเผนก ส่วนย่อย1 ส่วนย่อย3

src/app/components/company-registration/branch-business-unit/department-list/department-list.component.scss

-/* สไตล์ของแถบเมนู */
-.nav-tabs {
-    display: flex;
-    border-bottom: 2px solid #ccc; /* เส้นใต้ */
-    width: 100%;
-    cursor: pointer;
-  }
-  
-  .nav-item {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  
-  .nav-link {
-    text-decoration: none;
-    padding: 10px 20px;
-    display: inline-block;
-    font-size: large;
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: #ccc;
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .nav-link:hover {
-    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
-  
-  .nav-link.active {
-    color: #ffffff; /* สีตัวอักษรในสถานะ active */
-    font-size: large;
-    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
-    background-color: rgb(var(--color-primary));
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: rgb(var(--color-primary));
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .tab-content {
-    margin-top: 20px;
-  }
-  
-  .tab-pane.active {
-    display: block;
-  }
-  
-  .nav-item-text {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
-    text-decoration: none;
-    display: inline-block;
-    font-size: large;
-    color: #569bf5;
-    border-bottom: 3.5px solid #569bf5;
-  }
-  
\ No newline at end of file
+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 35vw;
+}
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts

@@ -6,13 +6,44 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./department-list.component.scss']
 })
 export class DepartmentListComponent {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  modalOptions: {
+    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
+      isModalOpen: boolean; // เปิด/ปิด 
+      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
+      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
+    }
+  } = {
+      "add": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
+      },
+      "edit": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
+      }
+    }
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
-    this.activeTab = tab.id;
+  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
+    this.modalOptions[name].modalSize = size;
+    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
+    this.modalOptions[name].isModalOpen = true;
+    document.body.style.overflow = 'hidden'; // ล็อก Scroll
   }
+
+  closeModal(name: string) {
+    this.modalOptions[name].isModalOpen = false;
+    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
+    if (!this.isAnyModalOpen()) {
+      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+    }
+  }
+
+  isAnyModalOpen(): boolean {
+    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
+    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
+  }
+
 }
+

src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.scss

-/* สไตล์ของแถบเมนู */
-.nav-tabs {
-    display: flex;
-    border-bottom: 2px solid #ccc; /* เส้นใต้ */
-    width: 100%;
-    cursor: pointer;
-  }
-  
-  .nav-item {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  
-  .nav-link {
-    text-decoration: none;
-    padding: 10px 20px;
-    display: inline-block;
-    font-size: large;
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: #ccc;
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .nav-link:hover {
-    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
-  
-  .nav-link.active {
-    color: #ffffff; /* สีตัวอักษรในสถานะ active */
-    font-size: large;
-    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
-    background-color: rgb(var(--color-primary));
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: rgb(var(--color-primary));
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .tab-content {
-    margin-top: 20px;
-  }
-  
-  .tab-pane.active {
-    display: block;
-  }
-  
-  .nav-item-text {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
-    text-decoration: none;
-    display: inline-block;
-    font-size: large;
-    color: #569bf5;
-    border-bottom: 3.5px solid #569bf5;
-  }
-  
\ No newline at end of file
+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 35vw;
+}
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts

@@ -6,13 +6,45 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./sub-department-one.component.scss']
 })
 export class SubDepartmentOneComponent {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  modalOptions: {
+    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
+      isModalOpen: boolean; // เปิด/ปิด 
+      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
+      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
+    }
+  } = {
+      "add": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
+      },
+      "edit": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
+      }
+    }
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
-    this.activeTab = tab.id;
+  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
+    this.modalOptions[name].modalSize = size;
+    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
+    this.modalOptions[name].isModalOpen = true;
+    document.body.style.overflow = 'hidden'; // ล็อก Scroll
   }
+
+  closeModal(name: string) {
+    this.modalOptions[name].isModalOpen = false;
+    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
+    if (!this.isAnyModalOpen()) {
+      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+    }
+  }
+
+  isAnyModalOpen(): boolean {
+    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
+    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
+  }
+
 }
+
+

src/app/components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.scss

-/* สไตล์ของแถบเมนู */
-.nav-tabs {
-    display: flex;
-    border-bottom: 2px solid #ccc; /* เส้นใต้ */
-    width: 100%;
-    cursor: pointer;
-  }
-  
-  .nav-item {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  
-  .nav-link {
-    text-decoration: none;
-    padding: 10px 20px;
-    display: inline-block;
-    font-size: large;
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: #ccc;
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .nav-link:hover {
-    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
-  
-  .nav-link.active {
-    color: #ffffff; /* สีตัวอักษรในสถานะ active */
-    font-size: large;
-    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
-    background-color: rgb(var(--color-primary));
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: rgb(var(--color-primary));
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .tab-content {
-    margin-top: 20px;
-  }
-  
-  .tab-pane.active {
-    display: block;
-  }
-  
-  .nav-item-text {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
-    text-decoration: none;
-    display: inline-block;
-    font-size: large;
-    color: #569bf5;
-    border-bottom: 3.5px solid #569bf5;
-  }
-  
\ No newline at end of file
+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 35vw;
+}
\ No newline at end of file

src/app/components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts

@@ -6,13 +6,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./sub-department-three.component.scss']
 })
 export class SubDepartmentThreeComponent {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  modalOptions: {
+    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
+      isModalOpen: boolean; // เปิด/ปิด 
+      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
+      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
+    }
+  } = {
+      "add": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
+      },
+      "edit": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
+      }
+    }
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
-    this.activeTab = tab.id;
+  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
+    this.modalOptions[name].modalSize = size;
+    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
+    this.modalOptions[name].isModalOpen = true;
+    document.body.style.overflow = 'hidden'; // ล็อก Scroll
   }
+
+  closeModal(name: string) {
+    this.modalOptions[name].isModalOpen = false;
+    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
+    if (!this.isAnyModalOpen()) {
+      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+    }
+  }
+
+  isAnyModalOpen(): boolean {
+    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
+    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
+  }
+
 }