usersetting accountsetting positionunit

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/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/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="ti-modal-header 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,12 @@ 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 กลับมาให้ตรงกลาง */
+}
\ 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/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="ti-modal-header 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,12 @@ 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 กลับมาให้ตรงกลาง */
+}
\ 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,
       }
     }