การประเมินสมรรถนะ > การจัดการสมรรถนะ > กำหนดผู้ประเมิน

src/app/components/competency-assessment/competency-management/set-approvers/set-approvers.component.ts

-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
 import { GroupApproveModel, MyGroupApproveModel } from 'src/app/shared/model/group-approve.model';
@@ -9,6 +11,7 @@ interface table {
   currentPage: number,
   page: number[],
   search: string
+  pageSize: number
 }
 
 @Component({
@@ -16,14 +19,15 @@ interface table {
   templateUrl: './set-approvers.component.html',
   styleUrls: ['./set-approvers.component.scss']
 })
-export class SetApproversComponent {
+export class SetApproversComponent implements OnInit{
 
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
+  searchModal = ""
+
   groupapprove_list: GroupApproveModel[] = []
   groupapprove_listLoading = false
   groupapprove: GroupApproveModel = new MyGroupApproveModel()
-  search = ""
 
   employee_list: EmployeeModel[] = []
   employee_listLoading = false
@@ -31,19 +35,67 @@ export class SetApproversComponent {
   employeeModal: table = {
     currentPage: 1,
     page: Array.from({ length: 1 }, (_, i) => i + 1),
-    search: ""
+    search: "",
+    pageSize: 10
   }
   empnumber = 0
 
-  currentModel: 'add' | 'edit' | 'delete' = "add"
+  currentModal: 'add' | 'edit' | 'delete' = "add"
+  
 
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
+
+  columns: ColumnModel[] = [{
+    field: "apsassessy.thFullName",
+    headerText: "ชื่อพนักงาน",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "apsapprove1.thFullName",
+    headerText: "ลำดับที่ 1",
+    type: "string"
+  },
+  {
+    field: "apsapprove2.thFullName",
+    headerText: "ลำดับที่ 2",
+    type: "string"
+  },
+  {
+    field: "apsapprove3.thFullName",
+    headerText: "ลำดับที่ 3",
+    type: "string"
+  },
+  {
+    field: "apsapprove4.thFullName",
+    headerText: "ลำดับที่ 4",
+    type: "string"
+  },
+  {
+    field: "apsapprove5.thFullName",
+    headerText: "ลำดับที่ 5",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['apsassessy.thFullName', 'apsapprove1.thFullName', 'apsapprove2.thFullName','apsapprove3.thFullName','apsapprove4.thFullName','apsapprove5.thFullName'],
+    operator: 'contains',
+    ignoreCase: false
+  };
+  search = ''
+  selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
+
+  @ViewChild("setApproversModal") setApproversModal: any;
+  @ViewChild("employeeTableModal") employeeTableModal: any;
+  dialogRef: any
+  dialogRefEmp: any
+
   constructor(private groupapproveService: GroupApproveService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private employeeService: EmployeeService,
-    private fileService: FileService
+    private fileService: FileService,
+    private dialog: MatDialog
   ) { }
   ngOnInit(): void {
     this.getGroupapprove_list()
@@ -114,8 +166,10 @@ export class SetApproversComponent {
     })
   }
   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.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.position.edesc.toLowerCase().includes(this.search.toLowerCase()))
 
   }
   searchEMP() {
@@ -139,15 +193,19 @@ export class SetApproversComponent {
     } else if (this.empnumber == 5) {
       this.groupapprove.apsapprove5 = data
     }
-
   }
   getGroupapprove_list() {
     this.groupapprove_listLoading = true
+    this.selectedItems.data.clear()
     this.groupapproveService.getList().subscribe({
       next: response => {
-        this.groupapprove_list = response.map(x => new MyGroupApproveModel(x))
+        this.groupapprove_list = response.map(x => {
+          this.selectedItems.data.set(x.personalLevel.plId, false)
+          return new MyGroupApproveModel(x)
+        })
+        this.selectedItems.key = 'personalLevel.plId'
+        this.selectedItems.count = 0
         this.groupapprove_listLoading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.groupapprove_listLoading = false
@@ -155,26 +213,33 @@ export class SetApproversComponent {
       }
     })
   }
+
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.groupapprove_listFilter().length / 10) }, (_, i) => i + 1)
   }
   groupapprove_listFilter() {
     return this.groupapprove_list.filter(x =>
-      x.apsassessy.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.apsapprove1.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.apsapprove2.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.apsapprove3.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.apsapprove4.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
-      x.apsapprove5.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
-      (x.apsassessy.fname.toLowerCase() + " " + x.apsassessy.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
-      (x.apsapprove1.fname.toLowerCase() + " " + x.apsapprove1.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
-      (x.apsapprove2.fname.toLowerCase() + " " + x.apsapprove2.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
-      (x.apsapprove3.fname.toLowerCase() + " " + x.apsapprove3.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
-      (x.apsapprove4.fname.toLowerCase() + " " + x.apsapprove4.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
-      (x.apsapprove5.fname.toLowerCase() + " " + x.apsapprove5.lname.toLowerCase()).includes(this.search.toLowerCase())
+      (x.apsassessy.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+       x.apsassessy.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
+  
+       x.apsapprove1.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+       x.apsapprove1.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
+  
+       x.apsapprove2.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+       x.apsapprove2.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
+  
+       x.apsapprove3.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+       x.apsapprove3.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
+  
+       x.apsapprove4.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+       x.apsapprove4.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
+  
+       x.apsapprove5.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+       x.apsapprove5.thFullName.toLowerCase().includes(this.search.toLowerCase()))
     )
   }
+  
 
   selectGroupapprove(groupapprove?: GroupApproveModel) {
     this.groupapprove = new MyGroupApproveModel(groupapprove)
@@ -232,4 +297,24 @@ export class SetApproversComponent {
     this.groupapprove.apsapprove4 = data
     this.groupapprove.apsapprove5 = data
   }
+
+  openDialog() {
+    this.dialogRef = this.dialog.open(this.setApproversModal, {
+      width: '500px',
+    })
+  }
+
+  closeDialog() {
+    this.dialogRef.close()
+  }
+
+  openDialogEmp() {
+    this.dialogRefEmp = this.dialog.open(this.employeeTableModal, {
+      width: '1200px',
+    })
+  }
+
+  closeDialogEmp() {
+    this.dialogRefEmp.close()
+  }
 }
\ No newline at end of file