UPDATE pagination

src/app/components/dashboard/dashboard.module.ts

@@ -159,6 +159,8 @@ import { TimeAttendanceComponent } from '../performance-management-evaluation/ti
 import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
 import { EvaluationIdpService } from 'src/app/shared/services/evaluation-Idp.service';
 import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
+import { PaginationComponent } from '../pagination/pagination.component';
+
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -283,7 +285,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     PmsGroupGradeComponent,
     PmsSubGradeRegistrationComponent,
     DayTypeRegistryComponent,
-    TimeAttendanceComponent
+    TimeAttendanceComponent,
+    PaginationComponent
   ],
   imports: [
     CommonModule,

src/app/components/job-detail-components/job-detail-management/import-data/import-data.component.html

@@ -102,51 +102,7 @@
                     </tbody>
                  </table>
              </div>
-             <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
-                <ul class="ti-pagination">
-                  <li>
-                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                      (click)="currentPage = (currentPage-1 || 1)">
-                      <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                    </a>
-                  </li>
-                  <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>
-                    </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);"
-                      (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
-                      <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                    </a>
-                  </li>
-                  <li>
-                    <select class="ti-form-select"  [(ngModel)]="pageSize" (ngModelChange)="searchChange()">
-                        <option [value]="10">10</option>
-                        <option [value]="20">20</option>
-                        <option [value]="50">50</option>
-                        <option [value]="100">100</option>
-                      </select>
-                  </li>
-                </ul>
-                <ul class="nav-tabs mt-3">
-                  <span>Show {{((currentPage-1) * pageSize)+1}} to {{(jobcodeFilter().length < pageSize) ?jobcodeFilter().length:
-                      (currentPage==page.length ? ((currentPage * pageSize) - ((currentPage * pageSize) - jobcodeFilter().length) )
-                      :(currentPage * pageSize) ) }} of {{jobcodeFilter().length}} items</span>
-                </ul>
-              </nav>
+                <app-pagination [totalItems]="jobcodeFilter().length" [pageSize]="pageSize" (pageChange)="currentPage = $event" (pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
         
          </div>
 

src/app/components/job-detail-components/job-detail-management/import-data/import-data.component.ts

@@ -441,4 +441,5 @@ export class ImportDataComponent {
       modal.classList.add("hidden"); // ซ่อน Modal
     }
   }
+
 }

src/app/components/pagination/pagination.component.html

+<nav class="pagination-style-3 overflow-auto my-5" *ngIf="totalItems > 0">
+  <ul class="ti-pagination">
+    <!-- ปุ่มย้อนกลับ -->
+    <li>
+      <a aria-label="Previous" class="page-link" href="javascript:void(0);" (click)="changePage(currentPage - 1)">
+        <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+      </a>
+    </li>
+
+    <!-- แสดงหมายเลขหน้า -->
+    <li *ngFor="let item of visiblePages">
+      <ng-container *ngIf="item === '...'">
+        <a aria-label="More" class="page-link" href="javascript:void(0);">
+          <i class="ri-more-line"></i>
+        </a>
+      </ng-container>
+      <ng-container *ngIf="item !== '...'">
+        <a class="page-link" href="javascript:void(0);" [class.active]="item === currentPage" (click)="changePage(item)">
+          {{ item }}
+        </a>
+      </ng-container>
+    </li>
+
+    <!-- ปุ่มถัดไป -->
+    <li>
+      <a aria-label="Next" class="page-link" href="javascript:void(0);" (click)="changePage(currentPage + 1)">
+        <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+      </a>
+    </li>
+
+    <!-- ตัวเลือกจำนวนรายการต่อหน้า -->
+    <li>
+      <select class="ti-form-select" [(ngModel)]="pageSize" (ngModelChange)="onPageSizeChange()">
+        <option *ngFor="let size of pageSizes" [value]="size">{{ size }}</option>
+      </select>
+    </li>
+  </ul>
+
+  <ul class="nav-tabs mt-3">
+    <span>Show {{ (currentPage - 1) * pageSize + 1 }} to {{ getEndIndex() }} of {{ totalItems }} items</span>
+  </ul>
+</nav>

src/app/components/pagination/pagination.component.ts

+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.scss']
+})
+export class PaginationComponent {
+  @Input() totalItems = 0;
+  @Input() pageSize = 10;
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() pageSizeChange = new EventEmitter<number>();
+
+  currentPage = 1;
+  pageSizes = [10, 20, 50, 100];
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get visiblePages(): (number | string)[] {
+    const total = this.totalPages;
+    const current = this.currentPage;
+    const pages: (number | string)[] = [];
+
+    if (total <= 7) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    pages.push(1);
+    if (current > 3) pages.push('...');
+    
+    const middlePages = [current - 1, current, current + 1].filter(p => p > 1 && p < total);
+    pages.push(...middlePages);
+
+    if (current < total - 2) pages.push('...');
+    pages.push(total);
+
+    return pages;
+  }
+
+  changePage(newPage: any) {
+    if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
+      this.currentPage = newPage;
+      this.pageChange.emit(this.currentPage);
+    }
+  }
+
+  onPageSizeChange() {
+    this.pageSizeChange.emit(this.pageSize);
+  }
+
+  getEndIndex(): number {
+    return Math.min(this.currentPage * this.pageSize, this.totalItems);
+  }
+}