Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV

# Conflicts:
#	src/app/components/company-registration/branch-business-unit/department-register/department-register.component.html

src/app/components/account-settings/account-settings.component.html

@@ -2,10 +2,10 @@
 <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">
+    <div class="body-content" style="margin-left: 10px;">
         <ul class="nav-tabs">
             <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'สร้างชื่อผู้ใช้งาน'},
             {id:'tab2',text:'กำหนดรหัสผ่าน'},

src/app/components/account-settings/set-a-password/set-a-password.component.scss

+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 0;
+  right: 0; /* ย้ายไปที่มุมขวาบน */
+  margin: 4.2rem; /* เพิ่มระยะห่างจากขอบบนและขวา */
+}
+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 ให้เพิ่มขนาด */
+}
 /* สไตล์ของแถบเมนู */
 .nav-tabs {
   display: flex;
   width: 100%;
   cursor: pointer;
   margin-bottom: 10px;
-  }
+}
 
-  .nav-item {
+.nav-item {
   list-style: none;
   margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
+}
 
-  .nav-link {
+.nav-link {
   text-decoration: none;
   padding: 10px 20px;
   display: inline-block;
@@ -20,13 +42,13 @@
   border-style: solid;
   border-color: #ccc;
   border-radius: 5px 5px 0px 0px;
-  }
+}
 
-  .nav-link:hover {
+.nav-link:hover {
   background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
+}
 
-  .nav-link.active {
+.nav-link.active {
   color: #ffffff; /* สีตัวอักษรในสถานะ active */
   font-size: large;
   border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
@@ -35,31 +57,54 @@
   border-style: solid;
   border-color: rgb(var(--color-primary));
   border-radius: 5px 5px 0px 0px;
-  }
+}
 
-  .tab-content {
+.tab-content {
   margin-top: 20px;
-  }
+}
 
-  .tab-pane.active {
+.tab-pane.active {
   display: block;
-  }
+}
 
-  .nav-item-text {
+.nav-item-text {
   list-style: none;
   margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
+}
+.nav-link-text {
   text-decoration: none;
   display: inline-block;
   font-size: large;
   color: #569bf5;
   border-bottom: 2px solid #569bf5;
   line-height: 0.8;
-  }
-  .ti-pagination .page-link.active {
+}
+.ti-pagination .page-link.active {
   background-color: #569bf5;
   color: white;
   border-radius: 50%;
   padding: 8px 12px;
-  }
+}
\ No newline at end of file
+.box-body {
+padding: 0rem;
+}
+.page{
+  min-height: 0vh;
+}
+.ti-modal-content {
+  width: 50%;  /* ความกว้างที่คุณต้องการ */
+  height: 80%;
+  position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+  top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+  left: 50%;  /* ให้อยู่กลางในแนวนอน */
+  transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+}
+.ti-modal-body {
+  display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
+  justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
+  flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
+  height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
+  margin-left: 100px;
+}
+
+

src/app/components/account-settings/set-a-password/set-a-password.component.ts

@@ -15,4 +15,43 @@ export class SetAPasswordComponent {
     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/account-settings/user-settings/user-settings.component.scss

+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  right: 0vw;
+  margin: 4.2rem;
+}
+
+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 ให้เพิ่มขนาด */
+}
 /* สไตล์ของแถบเมนู */
 .nav-tabs {
   display: flex;
   width: 100%;
   cursor: pointer;
   margin-bottom: 10px;
-  }
+  height: 20%;
+}
 
-  .nav-item {
+.nav-item {
   list-style: none;
   margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
+}
 
-  .nav-link {
+.nav-link {
   text-decoration: none;
   padding: 10px 20px;
   display: inline-block;
@@ -20,13 +45,13 @@
   border-style: solid;
   border-color: #ccc;
   border-radius: 5px 5px 0px 0px;
-  }
+}
 
-  .nav-link:hover {
+.nav-link:hover {
   background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
+}
 
-  .nav-link.active {
+.nav-link.active {
   color: #ffffff; /* สีตัวอักษรในสถานะ active */
   font-size: large;
   border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
@@ -35,31 +60,52 @@
   border-style: solid;
   border-color: rgb(var(--color-primary));
   border-radius: 5px 5px 0px 0px;
-  }
+}
 
-  .tab-content {
+.tab-content {
   margin-top: 20px;
-  }
+}
 
-  .tab-pane.active {
+.tab-pane.active {
   display: block;
-  }
+}
 
-  .nav-item-text {
+.nav-item-text {
   list-style: none;
   margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
+}
+.nav-link-text {
   text-decoration: none;
   display: inline-block;
   font-size: large;
   color: #569bf5;
   border-bottom: 2px solid #569bf5;
   line-height: 0.8;
-  }
-  .ti-pagination .page-link.active {
+}
+.ti-pagination .page-link.active {
   background-color: #569bf5;
   color: white;
   border-radius: 50%;
   padding: 8px 12px;
 }
+.box-body{
+  padding: 0rem;
+}
+.page{
+  min-height: 0vh;
+}
+.ti-modal-content{
+  width: 70%;  /* ความกว้างที่คุณต้องการ */
+  position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+  top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+  left: 50%;  /* ให้อยู่กลางในแนวนอน */
+  transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+}
+.ti-modal-body {
+  display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
+  justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
+  flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
+  height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
+  margin-left: 100px;
+  margin-right: 50px;
+}
\ No newline at end of file

src/app/components/account-settings/user-settings/user-settings.component.ts

@@ -15,4 +15,42 @@ export class UserSettingsComponent {
     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/company-registration/branch-business-unit/department-list/department-list.component.html

@@ -49,12 +49,12 @@
                 <thead>
                     <tr>
                         <ng-container
-                            *ngFor="let item of ['ลำดับ','รหัสฝ่าย','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                            *ngFor="let item of ['ลำดับ','รหัสแผนก','รายละเอียดแผนก (ไทย)','รายละเอียดแผนก (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                             <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>
@@ -67,10 +67,10 @@
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index">
-                        <td class="flex justify-center">{{0+""+(i+1)}}</td>
-                        <td>{{item[0]}}</td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td>
+                        <td style="font-size: 12px;">{{item[0]}}</td>
+                        <td style="font-size: 12px;">{{item[1]}}</td>
+                        <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#department-list-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -55,7 +55,7 @@
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -54,7 +54,7 @@
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>
@@ -67,10 +67,10 @@
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index">
-                        <td class="flex justify-center">{{0+""+(i+1)}}</td>
-                        <td>{{item[0]}}</td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td>
+                        <td style="font-size: 12px;">{{item[0]}}</td>
+                        <td style="font-size: 12px;">{{item[1]}}</td>
+                        <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#section-registration-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -54,7 +54,7 @@
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>
@@ -67,10 +67,10 @@
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index">
-                        <td class="flex justify-center">{{0+""+(i+1)}}</td>
-                        <td>{{item[0]}}</td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td>
+                        <td style="font-size: 12px;">{{item[0]}}</td>
+                        <td style="font-size: 12px;">{{item[1]}}</td>
+                        <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-department-four-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -49,12 +49,12 @@
                 <thead>
                     <tr>
                         <ng-container
-                            *ngFor="let item of ['ลำดับ','รหัสฝ่าย','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                            *ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่1','รายละเอียดส่วนย่อยที่1 (ไทย)','รายละเอียดส่วนย่อยที่1 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                             <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>
@@ -67,10 +67,10 @@
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index">
-                        <td class="flex justify-center">{{0+""+(i+1)}}</td>
-                        <td>{{item[0]}}</td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td>
+                        <td style="font-size: 12px;">{{item[0]}}</td>
+                        <td style="font-size: 12px;">{{item[1]}}</td>
+                        <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-department-one-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -49,12 +49,12 @@
                 <thead>
                     <tr>
                         <ng-container
-                            *ngFor="let item of ['ลำดับ','รหัสฝ่าย','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                            *ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่3','รายละเอียดส่วนย่อยที่3 (ไทย)','รายละเอียดส่วนย่อยที่3 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
                             <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>
@@ -67,10 +67,10 @@
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index">
-                        <td class="flex justify-center">{{0+""+(i+1)}}</td>
-                        <td>{{item[0]}}</td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td>
+                        <td style="font-size: 12px;">{{item[0]}}</td>
+                        <td style="font-size: 12px;">{{item[1]}}</td>
+                        <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-department-three-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -54,7 +54,7 @@
                                 [class.!text-center]="f||l">
                                 <span class="text-sm">{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <i class="ti ti-dots-vertical fs-xl"></i>
+                                    <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>
                         </ng-container>
@@ -67,10 +67,10 @@
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'],
                     ['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index">
-                        <td class="flex justify-center">{{0+""+(i+1)}}</td>
-                        <td>{{item[0]}}</td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td>
+                        <td style="font-size: 12px;">{{item[0]}}</td>
+                        <td style="font-size: 12px;">{{item[1]}}</td>
+                        <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-department-two-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>

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

@@ -10,3 +10,10 @@
   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;
+}
\ No newline at end of file

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

@@ -11,7 +11,7 @@
     </div>
     <div class="px-1">
         <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
-            data-hs-overlay="#department-register-modal-add">
+            data-hs-overlay="#employee-group-unit-component-modal-add">
             <i class="ri-add-line"></i>
             Add
         </button>
@@ -38,7 +38,7 @@
                 นำเข้าข้อมูล
             </a>
             <a class="justify-center  -mb-px  inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
-                href="javascript:void(0);">
+                href="javascript:void(0);" data-hs-overlay="#employee-group-unit-component-modal-upload">
                 ดาวโหลดตัวอย่างไฟล์
             </a>
         </nav>
@@ -81,7 +81,7 @@
                         <td style="text-align: center; font-size: 12px;" >{{item[1]}}</td>
                         <td style="text-align: center; font-size: 12px;" >{{item[2]}}</td>
                         <td class="flex justify-center">
-                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#department-register-modal-edit"></i>
+                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#employee-group-unit-component-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>
                         </td>
                     </tr>
@@ -93,7 +93,7 @@
 </div>
 
 
-<div id="department-register-modal-add" class="hs-overlay hidden ti-modal">
+<div id="employee-group-unit-component-modal-add" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
@@ -125,7 +125,7 @@
                         </button>
                     </div>
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#department-register-modal-add">
+                        data-hs-overlay="#employee-group-unit-component-modal-add">
                         <span class="sr-only">Close</span>
                         <i class="ti ti-circle-x fs-xxl"></i>
                     </button>
@@ -141,7 +141,7 @@
                 <div class="flex justify-end mt-2rem mb-1rem space-x-2">
                     <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-register-modal-add">
+                        data-hs-overlay="#employee-group-unit-component-modal-add">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);">
@@ -153,7 +153,7 @@
     </div>
 </div>
 
-<div id="department-register-modal-edit" class="hs-overlay hidden ti-modal">
+<div id="employee-group-unit-component-modal-edit" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
@@ -185,7 +185,7 @@
                         </button>
                     </div>
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#department-register-modal-edit">
+                        data-hs-overlay="#employee-group-unit-component-modal-edit">
                         <span class="sr-only">Close</span>
                         <i class="ti ti-circle-x fs-xxl"></i>
                     </button>
@@ -201,7 +201,7 @@
                 <div class="flex justify-end mt-2rem mb-1rem">
                     <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-register-modal-edit">
+                        data-hs-overlay="#employee-group-unit-component-modal-edit">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);">
@@ -212,3 +212,30 @@
         </div>
     </div>
 </div>
+<div id="employee-group-unit-component-modal-upload" class="hs-overlay hidden ti-modal">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+      <div class="max-h-full overflow-hidden ti-modal-content-upload">
+        <div class="modal-headerupload bg-primary">
+          <h5 class="text-xxl font-bold text-white">
+            นำเข้าข้อมูลบริษัท
+          </h5>
+        </div>
+        <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
+        <div class="mt-2 px-2">
+          <div class="flex rounded-md">
+            <input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon"
+              class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
+            <button aria-label="button" type="button"
+              class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm">
+              <i class="ti ti-upload"></i>
+            </button>
+          </div>
+          <div class="flex justify-center mt-2rem mb-1rem space-x-4">
+              <a class="ti-btn ti-btn-primary" href="javascript:void(0);">
+                อัปโหลด
+              </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file

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

@@ -21,3 +21,22 @@ table.ti-custom-table thead th span {
 a.custom-link {
   padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
 }
+.ti-modal-content-upload{
+  background-color: white;
+  width: 25%;  /* ความกว้างที่คุณต้องการ */
+  height: 80%;
+  position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+  top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+  left: 50%;  /* ให้อยู่กลางในแนวนอน */
+  transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+}
+.modal-headerupload{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-width: 1px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
\ No newline at end of file

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

@@ -31,6 +31,11 @@ export class EmployeeGroupUnit {
         isModalOpen: false,
         modalSize: 'm',
         backdropClose: true,
+      },
+      "upload":{
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
       }
     }
 

src/app/components/job-description/employee-level/employee-level.component.html

@@ -38,7 +38,7 @@
         นำเข้าข้อมูล
       </a>
       <a class="justify-center  -mb-px  inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
-                href="javascript:void(0);">
+        href="javascript:void(0);" data-hs-overlay="#employee-level-modal-upload">
         ดาวโหลดตัวอย่างไฟล์
       </a>
     </nav>
@@ -50,20 +50,20 @@
           <tr>
             <ng-container
               *ngFor="let item of ['รหัสลักษณะงาน','รายละเอียด(ไทย) *','รายละเอียด(อังกฤษ)','Action']; let f = first; let l = last; let i = index">
-                            <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" style="text-align: center;"
-                                [class.!text-center]="f||l">
+              <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                style="text-align: center;" [class.!text-center]="f||l">
                 <span class="text-sm">{{ item }}</span>
                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
-                                    <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
-                                        height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" height="16"
+                    fill="currentColor" viewBox="0 0 16 16">
                     <path
                       d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                     </path>
                   </svg>
                 </div>
                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
-                                    <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="170"
-                                        height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="170" height="16"
+                    fill="currentColor" viewBox="0 0 16 16">
                     <path
                       d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                     </path>
@@ -197,7 +197,8 @@
       </div>
       <div class="ti-modal-body" style="margin-top: 40px;">
         <label for="input-label" class="ti-form-label mt-2rem">รหัสระดับพนักงาน(PL)</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" style="background-color: #B3B3B3;" placeholder="" readonly>
+        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly"
+          style="background-color: #B3B3B3;" placeholder="" readonly>
         <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
         <input type="text" id="detail_th" class="ti-form-input h-16" placeholder="">
         <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
@@ -216,3 +217,31 @@
     </div>
   </div>
 </div>
+
+<div id="employee-level-modal-upload" class="hs-overlay hidden ti-modal">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+    <div class="max-h-full overflow-hidden ti-modal-content-upload">
+      <div class="ti-modal-header-upload bg-primary">
+        <h5 class="text-xxl font-bold text-white">
+          นำเข้าข้อมูลบริษัท
+        </h5>
+      </div>
+      <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
+      <div class="mt-2 px-2">
+        <div class="flex rounded-md">
+          <input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon"
+            class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
+          <button aria-label="button" type="button"
+            class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm">
+            <i class="ti ti-upload"></i>
+          </button>
+        </div>
+        <div class="flex justify-center mt-2rem mb-1rem space-x-4">
+            <a class="ti-btn ti-btn-primary" href="javascript:void(0);">
+              อัปโหลด
+            </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -20,3 +20,22 @@ table.ti-custom-table thead th span {
 a.custom-link {
   padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
 }
+.ti-modal .ti-modal-header-upload{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-width: 1px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.ti-modal-content-upload{
+  background-color: white;
+  width: 25%;  /* ความกว้างที่คุณต้องการ */
+  height: 80%;
+  position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+  top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+  left: 50%;  /* ให้อยู่กลางในแนวนอน */
+  transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+}
\ No newline at end of file

src/app/components/job-description/employee-level/employee-level.component.ts

@@ -31,6 +31,11 @@ export class EmployeeLevel {
         isModalOpen: false,
         modalSize: 'm',
         backdropClose: true,
+      },
+      "upload": {
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
       }
     }
 

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

@@ -11,7 +11,7 @@
     </div>
     <div class="px-1">
         <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
-            data-hs-overlay="#department-register-modal-add">
+            data-hs-overlay="#position-unit-component-modal-add">
             <i class="ri-add-line"></i>
             Add
         </button>
@@ -38,7 +38,7 @@
                 นำเข้าข้อมูล
             </a>
             <a class="justify-center  -mb-px  inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
-                href="javascript:void(0);">
+                href="javascript:void(0);" data-hs-overlay="#position-unit-component-modal-upload">
                 ดาวโหลดตัวอย่างไฟล์
             </a>
         </nav>
@@ -81,7 +81,7 @@
                         <td style="text-align: center; font-size: 12px;" >{{item[1]}}</td>
                         <td style="text-align: center; font-size: 12px;" >{{item[2]}}</td>
                         <td class="flex justify-center">
-                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#department-register-modal-edit"></i>
+                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#position-unit-component-modal-edit"></i>
                             <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i>
                         </td>
                     </tr>
@@ -93,7 +93,7 @@
 </div>
 
 
-<div id="department-register-modal-add" class="hs-overlay hidden ti-modal">
+<div id="position-unit-component-modal-add" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
@@ -125,7 +125,7 @@
                         </button>
                     </div>
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#department-register-modal-add">
+                        data-hs-overlay="#position-unit-component-modal-add">
                         <span class="sr-only">Close</span>
                         <i class="ti ti-circle-x fs-xxl"></i>
                     </button>
@@ -141,7 +141,7 @@
                 <div class="flex justify-end mt-2rem mb-1rem space-x-2">
                     <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-register-modal-add">
+                        data-hs-overlay="#position-unit-component-modal-add">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);">
@@ -153,7 +153,7 @@
     </div>
 </div>
 
-<div id="department-register-modal-edit" class="hs-overlay hidden ti-modal">
+<div id="position-unit-component-modal-edit" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
@@ -185,7 +185,7 @@
                         </button>
                     </div>
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
-                        data-hs-overlay="#department-register-modal-edit">
+                        data-hs-overlay="#position-unit-component-modal-edit">
                         <span class="sr-only">Close</span>
                         <i class="ti ti-circle-x fs-xxl"></i>
                     </button>
@@ -201,7 +201,7 @@
                 <div class="flex justify-end mt-2rem mb-1rem">
                     <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-register-modal-edit">
+                        data-hs-overlay="#position-unit-component-modal-edit">
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);">
@@ -212,3 +212,30 @@
         </div>
     </div>
 </div>
+<div id="position-unit-component-modal-upload" class="hs-overlay hidden ti-modal">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+      <div class="max-h-full overflow-hidden ti-modal-content-upload">
+        <div class="modal-headerupload bg-primary">
+          <h5 class="text-xxl font-bold text-white">
+            นำเข้าข้อมูลบริษัท
+          </h5>
+        </div>
+        <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
+        <div class="mt-2" style="margin-left: 10px;">
+          <div class="flex rounded-md">
+            <input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon"
+              class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
+            <button aria-label="button" type="button"
+              class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm">
+              <i class="ti ti-upload"></i>
+            </button>
+          </div>
+          <div class="flex justify-center mt-2rem mb-1rem space-x-4">
+              <a class="ti-btn ti-btn-primary" href="javascript:void(0);">
+                อัปโหลด
+              </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file

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

@@ -20,3 +20,22 @@ table.ti-custom-table thead th span {
 a.custom-link {
   padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
 }
+.ti-modal-content-upload{
+  background-color: white;
+  width: 25%;  /* ความกว้างที่คุณต้องการ */
+  height: 80%;
+  position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
+  top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+  left: 50%;  /* ให้อยู่กลางในแนวนอน */
+  transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+}
+.modal-headerupload{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-width: 1px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
\ No newline at end of file

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

@@ -31,6 +31,11 @@ export class PositionUnitComponent {
         isModalOpen: false,
         modalSize: 'm',
         backdropClose: true,
+      },
+      "upload":{
+        isModalOpen: false,
+        modalSize: 'm',
+        backdropClose: true,
       }
     }