กำหนดผู้ประเมิน

src/app/components/performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component.html

@@ -20,12 +20,12 @@
                 import
             </button>
         </div>
-        <div class="px-1">
+        <!-- <div class="px-1">
             <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
                 <i class="ti ti-book fs-l"></i>
                 Help
             </button>
-        </div>
+        </div> -->
     </div>
 </div>
 
@@ -65,7 +65,7 @@
             </tbody>
             <tbody *ngIf="!groupapprove_listLoading&&groupapprove_listFilter().length">
                 <tr
-                    *ngFor="let item of groupapprove_listFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
+                    *ngFor="let item of groupapprove_listFilter() | slice:((currentPage-1) * pageSize) : (((currentPage-1) * pageSize) + pageSize);let i = index">
                     <td>{{item.apsassessy.fname}} {{item.apsassessy.lname}}</td>
                     <td>{{item.apsapprove1.fname}} {{item.apsapprove1.lname}}</td>
                     <td>{{item.apsapprove2.fname}} {{item.apsapprove2.lname}}</td>
@@ -81,38 +81,8 @@
             </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>
-        </ul>
-    </nav>
+    <app-pagination [totalItems]="groupapprove_listFilter().length" [pageSize]="pageSize"
+        (pageChange)="currentPage = $event" (pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
 </div>
 
 
@@ -180,7 +150,8 @@
                                 <i class="ti ti-circle-x cursor-pointer"></i>
                             </button>
                             <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                                (click)="empnumber = 1" data-hs-overlay="#assigning-approvers-table-modal-edit">
+                                (click)="empnumber = 1;searchEMP();employeeModal.search=''"
+                                data-hs-overlay="#assigning-approvers-table-modal-edit">
                                 <i class="ri-search-line cursor-pointer text-gray"></i>
                             </button>
                         </div>
@@ -201,7 +172,8 @@
                                     <i class="ti ti-circle-x cursor-pointer"></i>
                                 </button>
                                 <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                                    data-hs-overlay="#assigning-approvers-table-modal-edit" (click)="empnumber = 2">
+                                    data-hs-overlay="#assigning-approvers-table-modal-edit"
+                                    (click)="empnumber = 2;searchEMP();employeeModal.search=''">
                                     <i class="ri-search-line cursor-pointer text-gray"></i>
                                 </button>
                             </div>
@@ -223,7 +195,8 @@
                                     <i class="ti ti-circle-x cursor-pointer"></i>
                                 </button>
                                 <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                                    data-hs-overlay="#assigning-approvers-table-modal-edit" (click)="empnumber = 3">
+                                    data-hs-overlay="#assigning-approvers-table-modal-edit"
+                                    (click)="empnumber = 3;searchEMP();employeeModal.search=''">
                                     <i class="ri-search-line cursor-pointer text-gray"></i>
                                 </button>
                             </div>
@@ -245,7 +218,8 @@
                                     <i class="ti ti-circle-x cursor-pointer"></i>
                                 </button>
                                 <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                                    data-hs-overlay="#assigning-approvers-table-modal-edit" (click)="empnumber = 4">
+                                    data-hs-overlay="#assigning-approvers-table-modal-edit"
+                                    (click)="empnumber = 4;searchEMP();employeeModal.search=''">
                                     <i class="ri-search-line cursor-pointer text-gray"></i>
                                 </button>
                             </div>
@@ -267,7 +241,8 @@
                                     <i class="ti ti-circle-x cursor-pointer"></i>
                                 </button>
                                 <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
-                                    data-hs-overlay="#assigning-approvers-table-modal-edit" (click)="empnumber = 5">
+                                    data-hs-overlay="#assigning-approvers-table-modal-edit"
+                                    (click)="empnumber = 5;searchEMP();employeeModal.search=''">
                                     <i class="ri-search-line cursor-pointer text-gray"></i>
                                 </button>
                             </div>
@@ -311,8 +286,8 @@
                         <div class="relative shadow-md">
                             <input type="text" id="hs-leading-icon" name="hs-leading-icon"
                                 class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                placeholder="Search by No. or Name" [(ngModel)]="search"
-                                (ngModelChange)="searchChange()">
+                                placeholder="Search by No. or Name" [(ngModel)]="employeeModal.search"
+                                (ngModelChange)="searchEMP()">
                             <div
                                 class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
                                 <i class="ri-search-line text-gray"></i>
@@ -367,7 +342,7 @@
                             </tbody>
                             <tbody *ngIf="employee_listFilter().length">
                                 <ng-container *ngIf="currentModel=='edit'">
-                                    <tr *ngFor="let item of employee_listFilter() | slice:((employeeModal.currentPage-1) * 10) : (((employeeModal.currentPage-1) * 10) + 10);let i = index"
+                                    <tr *ngFor="let item of employee_listFilter() | slice:((employeeModal.currentPage-1) * employeeModal.pageSize) : (((employeeModal.currentPage-1) * employeeModal.pageSize) + employeeModal.pageSize);let i = index"
                                         class="cursor-pointer">
                                         <td style="font-size: 12px;">{{item.employeeId}}</td>
                                         <td style="font-size: 12px; width: 20%;">{{item.fname}}</td>
@@ -394,28 +369,9 @@
                         </table>
                     </div>
                 </div>
-                <nav class="pagination-style-3 overflow-auto my-5" *ngIf="employeeModal.page.length">
-                    <ul class="ti-pagination">
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="employeeModal.currentPage = (employeeModal.currentPage-1 || 1)">
-                                <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                        <li *ngFor="let item of employeeModal.page">
-                            <a class="page-link" href="javascript:void(0);"
-                                [class.active]="item==employeeModal.currentPage"
-                                (click)="employeeModal.currentPage=item">{{item}}
-                            </a>
-                        </li>
-                        <li>
-                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                (click)="employeeModal.currentPage = (employeeModal.currentPage > employeeModal.page.length-1 ? employeeModal.currentPage: employeeModal.currentPage+1 )">
-                                <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
+                <app-pagination [totalItems]="employee_listFilter().length" [pageSize]="employeeModal.pageSize"
+                    (pageChange)="employeeModal.currentPage = $event"
+                    (pageSizeChange)="employeeModal.pageSize = $event;employeeModal.currentPage = 1"></app-pagination>
             </div>
         </div>
     </div>

src/app/components/performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component.ts

@@ -4,9 +4,10 @@ import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.mo
 import { GroupApproveModel, MyGroupApproveModel } from 'src/app/shared/model/group-approve.model';
 import { EmployeeService } from 'src/app/shared/services/employee.service';
 import { FileService } from 'src/app/shared/services/file.service';
-import { PmsGroupApproveService } from 'src/app/shared/services/pms-group-approve.service';
+import { GroupApproveService } from 'src/app/shared/services/group-approve.service';
 interface table {
   currentPage: number,
+  pageSize: number,
   page: number[],
   search: string
 }
@@ -18,6 +19,7 @@ interface table {
 export class AssigningApproversComponent {
 
   currentPage = 1
+  pageSize = 10
   page = Array.from({ length: 1 }, (_, i) => i + 1);
   groupapprove_list: GroupApproveModel[] = []
   groupapprove_listLoading = false
@@ -29,6 +31,7 @@ export class AssigningApproversComponent {
   employee: EmployeeModel = new MyEmployeeModel({})
   employeeModal: table = {
     currentPage: 1,
+    pageSize: 10,
     page: Array.from({ length: 1 }, (_, i) => i + 1),
     search: ""
   }
@@ -39,7 +42,7 @@ export class AssigningApproversComponent {
 
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
-  constructor(private pmsGroupapproveService: PmsGroupApproveService,
+  constructor(private groupapproveService: GroupApproveService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private employeeService: EmployeeService,
@@ -113,8 +116,8 @@ export class AssigningApproversComponent {
     })
   }
   employee_listFilter() {
-    return this.employee_list.filter(x => x.fname.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.lname.toLowerCase().includes(this.search.toLowerCase()))
+    return this.employee_list.filter(x => x.fname.toLowerCase().includes(this.employeeModal.search.toLowerCase()) ||
+      x.lname.toLowerCase().includes(this.employeeModal.search.toLowerCase()))
   }
   searchEMP() {
     this.employeeModal.currentPage = 1
@@ -141,7 +144,7 @@ export class AssigningApproversComponent {
   }
   getGroupapprove_list() {
     this.groupapprove_listLoading = true
-    this.pmsGroupapproveService.getList().subscribe({
+    this.groupapproveService.getList().subscribe({
       next: response => {
         this.groupapprove_list = response.map(x => new MyGroupApproveModel(x))
         this.groupapprove_listLoading = false
@@ -187,7 +190,7 @@ export class AssigningApproversComponent {
   }
   addgroupapprove() {
     this.groupapprove_listLoading = true
-    this.pmsGroupapproveService.post(this.groupapprove).subscribe({
+    this.groupapproveService.post(this.groupapprove).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
@@ -206,7 +209,7 @@ export class AssigningApproversComponent {
   }
   deletegroupapprove() {
     this.groupapprove_listLoading = true
-    this.pmsGroupapproveService.delete(this.groupapprove).subscribe({
+    this.groupapproveService.delete(this.groupapprove).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')

src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.html

@@ -73,7 +73,7 @@
                     </tbody>
                     <tbody *ngIf="!pl.loading&&plListFilter().length">
                         <tr
-                            *ngFor="let item of plListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
+                            *ngFor="let item of plListFilter()| slice:((currentPage-1) * pageSize) : (((currentPage-1) * pageSize) + pageSize);let i = index">
                             <td style="font-size: 12px; padding-left: 4rem;">{{item.data.plId}}</td>
                             <td style="font-size: 12px; padding-left: 1.5rem; width: 600px;">{{item.data.tdesc}}
                             </td>
@@ -86,43 +86,8 @@
                 </table>
             </div>
         </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 !pl-0" 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>
-            </ul>
-            <ul class="nav-tabs mt-3">
-                <span>Show {{((currentPage-1) * 10)+1}} to {{plListFilter().length<10 ?plListFilter().length:
-                        (currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - plListFilter().length) )
-                        :(currentPage * 10) ) }} of {{plListFilter().length}} items</span>
-            </ul>
-        </nav>
+        <app-pagination [totalItems]="plListFilter().length" [pageSize]="pageSize" (pageChange)="currentPage = $event"
+            (pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
     </div>
 
     <div id="evaluation-grouping-upload-modal" class="hs-overlay hidden ti-modal">

src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.ts

@@ -15,6 +15,7 @@ export class EvaluationGroupingComponent {
 
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
+  pageSize = 10
   search = ""
   currentModal: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add"