ข้อมูลลักษณะงาน > ตำเเหน่ง แก้กดเปลี่ยนpage

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

@@ -52,8 +52,8 @@
                     <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="!l&&!f&&i!==2">
                                     <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
@@ -81,8 +81,8 @@
                             <input type="checkbox" style="margin-right: 20px; transform:scale(0.7)">
                             {{item.positionId}}
                         </td>
-                        <td class="text-center" >{{item.tdesc}}</td>
-                        <td class="text-center" >{{item.edesc}}</td>
+                        <td class="text-center">{{item.tdesc}}</td>
+                        <td class="text-center">{{item.edesc}}</td>
                         <td class="flex justify-center">
                             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPosition(item)"
                                 data-hs-overlay="#position-unit-component-modal-edit"></i>
@@ -101,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);"
@@ -230,7 +239,8 @@
             </div>
             <div class="ti-modal-body ">
                 <label for="input-label" class="ti-form-label mt-2rem">รหัสตำเเหน่ง</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="position.positionId">
+                <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
+                    [(ngModel)]="position.positionId">
                 <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
                 <input type="text" id="detail_th" class="ti-form-input" [(ngModel)]="position.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
@@ -261,7 +271,8 @@
             <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"
+                    <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">
@@ -276,7 +287,7 @@
             </div>
         </div>
     </div>
-  </div>
+</div>
 <div id="position-unit-component-alert-modal" 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)] flex items-center">
         <div class="max-h-full overflow-hidden ti-modal-content w-full">
@@ -340,7 +351,8 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#position-unit-component-alert-edit-modal" (click)="addPosition();showSuccesssEdit()">
+                        data-hs-overlay="#position-unit-component-alert-edit-modal"
+                        (click)="addPosition();showSuccesssEdit()">
                         บันทึกข้อมูล
                     </a>
                 </div>
@@ -377,7 +389,8 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#position-unit-component-alert-delete-modal" (click)="addPosition();showSuccessDelete()">
+                        data-hs-overlay="#position-unit-component-alert-delete-modal"
+                        (click)="addPosition();showSuccessDelete()">
                         ลบข้อมูล
                     </a>
                 </div>