แก้ ทะเบียนแผนก ,ส่วน 1 ,ส่วน3 เพิ่ม ประเภทพนักงาน ,ระดับพนักงาน(PL)

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

@@ -231,11 +231,11 @@
                         <input type="text" id="input-label" class="ti-form-input w-full pr-10 " style="background-color: #B3B3B3;" value="01">
                     </div>
                 </div>
-                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
-                <input type="text" id="detail_th" class="ti-form-input" placeholder="">
-                <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
-                <input type="text" id="detail_eng" class="ti-form-input" placeholder="">
-                <div class="flex justify-end mt-2rem mb-1rem space-x-2 ">
+                <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
+                <input type="text" id="detail_th" class="ti-form-input h-16" placeholder="" value="แผนก 1">
+                <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
+                <input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
+                <div class="flex justify-end mt-2rem mb-1rem space-x-4 ">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                         data-hs-overlay="#department-list-modal-edit">

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

@@ -231,11 +231,11 @@
                             <input type="text" id="input-label" class="ti-form-input w-full pr-10 " style="background-color: #B3B3B3;" value="01">
                         </div>
                     </div>
-                    <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
-                    <input type="text" id="detail_th" class="ti-form-input" placeholder="">
-                    <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
-                    <input type="text" id="detail_eng" class="ti-form-input" placeholder="">
-                <div class="flex justify-end mt-2rem mb-1rem space-x-2">
+                    <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
+                    <input type="text" id="detail_th" class="ti-form-input h-16" placeholder="" value="ส่วนย่อย 1">
+                    <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
+                    <input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
+                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                         data-hs-overlay="#sub-department-one-modal-edit">

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

@@ -231,11 +231,11 @@
                             <input type="text" id="input-label" class="ti-form-input w-full pr-10 " style="background-color: #B3B3B3;" value="01">
                         </div>
                     </div>
-                    <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
-                    <input type="text" id="detail_th" class="ti-form-input" placeholder="">
-                    <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
-                    <input type="text" id="detail_eng" class="ti-form-input" placeholder="">
-                <div class="flex justify-end mt-2rem mb-1rem space-x-2">
+                    <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
+                    <input type="text" id="detail_th" class="ti-form-input h-16" placeholder="" value="ส่วนย่อย 3">
+                    <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
+                    <input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
+                <div class="flex justify-end mt-2rem mb-1rem space-x-4">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                         data-hs-overlay="#sub-department-three-modal-edit">

src/app/components/job-description/employee-categories/employee-categories.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-categories/employee-categories.component.ts

@@ -15,4 +15,43 @@ export class EmployeeCategories {
     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/employee-level/employee-level.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-level/employee-level.component.ts

@@ -15,4 +15,43 @@ export class EmployeeLevel {
     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 อื่นเปิด
+  }
+
 }