กลุ่มพนักงานน ตำเเหน่ง

src/app/components/job-description/employee-group-unit/employee-group-unit.component.scss

-/* สไตล์ของแถบเมนู */
-.nav-tabs {
-    display: flex;
-    width: 100%;
-    cursor: pointer;
-    margin-bottom: 10px;
-  }
-  
-  .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;
-  }
-  
+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 35vw;
+}
+
+table.ti-custom-table thead {
+  height: 50px;
+}
+table.ti-custom-table thead th span {
+  font-size: 12px;
+  font-weight: bold;
+}
+a.custom-link {
+  padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+}
\ No newline at end of file
-  .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: 2px solid #569bf5;
-    line-height: 0.8;
-  }
\ No newline at end of file

src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts

@@ -15,4 +15,43 @@ export class EmployeeGroupUnit {
     this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
     this.activeTab = tab.id;
   }
+  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,
+      }
+    }
+
+  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/job-description/job-description.component.html

@@ -2,8 +2,8 @@
 <div class="bg-card-white">
 </div>
 <div class="block-main-content">
-    <div class="head-title">
-        ข้อมูลลักษณะงาน
+    <div>
+        <p class="text-xxl font-bold py-2 px-4 text-primary ltr:ml-5" style="margin-bottom: 15px;">ข้อมูลลักษณะงาน</p>
     </div>
     <div class="body-content">
         <ul class="nav-tabs">

src/app/components/job-description/job-description.component.scss

@@ -41,3 +41,6 @@
 .tab-pane.active {
     display: block;
 }
+.body-content {
+    margin-left: 10px;
+}
\ No newline at end of file

src/app/components/job-description/position/position-unit.component.scss

-/* สไตล์ของแถบเมนู */
-.nav-tabs {
-    display: flex;
-    width: 100%;
-    cursor: pointer;
-    margin-bottom: 10px;
-  }
-  
-  .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;
-  }
+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 35vw;
+}
+table.ti-custom-table thead {
+  height: 50px;
+}
+table.ti-custom-table thead th span {
+  font-size: 12px;
+  font-weight: bold;
+}
+a.custom-link {
+  padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+}
\ No newline at end of file
-  
-  .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: 2px solid #569bf5;
-    line-height: 0.8;
-  }
-  
\ No newline at end of file

src/app/components/job-description/position/position-unit.component.ts

@@ -15,4 +15,43 @@ export class PositionUnitComponent {
     this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
     this.activeTab = tab.id;
   }
+  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,
+      }
+    }
+
+  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 อื่นเปิด
+  }
+
 }