ตัวเลข

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

@@ -111,12 +111,21 @@
                         <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
                     </a>
                 </li>
-                <li *ngFor="let item of page">
+                <li *ngFor="let item of page;let f = first;let l = last">
+                    <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
+                        </a>
+                    </ng-container>
+                    <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
                         <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
                             (click)="currentPage=item">{{item}}
                         </a>
-                    <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                    </a> -->
+                    </ng-container>
+                    <ng-container
+                        *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
+                        </a>
+                    </ng-container>
                 </li>
                 <li>
                     <a aria-label="anchor" class="page-link" href="javascript:void(0);"

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

+// .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;
+// }
+// .ti-modal-center{
+//   width: 100%;
+//   height: 45px;
+//   margin-top: 2px;
+// }
+// .ti-modal .ti-modal-body{
+//   padding: 16px;
+//   padding-top: 0rem;
+//   overflow-y: 0%;
+// }
 .button-clear {
   position: absolute;
   top: 96px;
@@ -10,6 +39,7 @@
   z-index: 1;
   right: 35vw;
 }
+
 table.ti-custom-table thead {
   height: 50px;
 }
@@ -17,6 +47,28 @@ table.ti-custom-table thead th span {
   font-size: 12px;
   font-weight: bold;
 }
+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;
+}
 .ti-modal-center{
   width: 100%;
   height: 45px;

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

@@ -86,7 +86,8 @@
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)"
                                 data-hs-overlay="#employee-group-unit-component-modal-edit"></i>
-                            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteEmp_group(item)" data-hs-overlay="#employee-group-unit-component-alert-delete-modal"></i>
+                            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteEmp_group(item)" 
+                                data-hs-overlay="#employee-group-unit-component-alert-delete-modal"></i>
                         </td>
                     </tr>
                 </tbody>
@@ -100,12 +101,21 @@
                         <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
                     </a>
                 </li>
-                <li *ngFor="let item of page">
+                <li *ngFor="let item of page;let f = first;let l = last">
+                    <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
+                        </a>
+                    </ng-container>
+                    <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
                         <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
                             (click)="currentPage=item">{{item}}
                         </a>
-                    <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                    </a> -->
+                    </ng-container>
+                    <ng-container
+                        *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
+                        </a>
+                    </ng-container>
                 </li>
                 <li>
                     <a aria-label="anchor" class="page-link" href="javascript:void(0);"

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

@@ -109,12 +109,21 @@
                   <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
               </a>
           </li>
-          <li *ngFor="let item of page">
+          <li *ngFor="let item of page;let f = first;let l = last">
+              <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                  <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
+                  </a>
+              </ng-container>
+              <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
                   <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
                       (click)="currentPage=item">{{item}}
                   </a>
-              <!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-              </a> -->
+              </ng-container>
+              <ng-container
+                  *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                  <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
+                  </a>
+              </ng-container>
           </li>
           <li>
               <a aria-label="anchor" class="page-link" href="javascript:void(0);"