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

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

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 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';
+import { EmployeeService } from 'src/app/shared/services/employee.service';
+import { GroupApproveService } from 'src/app/shared/services/group-approve.service';
+interface table {
+  currentPage: number,
+  page: number[],
+  search: string
+}
 
 @Component({
   selector: 'app-set-approvers',
@@ -9,77 +18,155 @@ import { ToastrService } from 'ngx-toastr';
 export class SetApproversComponent {
   @Input() pathTitle = ['การประเมินจัดประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'กำหนดผู้ประเมิน'];
   @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-
+  activeTab: string = 'tab1';
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
   changeTab(tab: { id: string, text: string }) {
     this.sendPathTitle.emit(['การสมรรถนะจัดประเมินสมรรถนะ', 'การจัดการประเมิน', tab.text]);
     this.activeTab = tab.id;
   }
 
-  // การจัดการการเปิดปิด modal
-  modalOptions: {
-    [nameModal: string]: {
-      isModalOpen: boolean;
-      modalSize: string;
-      backdropClose: boolean;
-    };
-  } = {
-    "add": {
-      isModalOpen: false,
-      modalSize: 'm',
-      backdropClose: true,
-    },
-    "edit": {
-      isModalOpen: false,
-      modalSize: 'm',
-      backdropClose: true,
-    }
-  };
-
-  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
-    this.modalOptions[name].modalSize = size;
-    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
-    this.modalOptions[name].isModalOpen = true;
-    this.currentModal = name;  // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
-    document.body.style.overflow = 'hidden';
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  groupapprove_list: GroupApproveModel[] = []
+  groupapprove_listLoading = false
+  groupapprove: GroupApproveModel = new MyGroupApproveModel()
+  search = ""
+
+  employee_list: EmployeeModel[] = []
+  employee_listLoading = false
+  employee: EmployeeModel = new MyEmployeeModel({})
+  employeeModal: table = {
+    currentPage: 1,
+    page: Array.from({ length: 1 }, (_, i) => i + 1),
+    search: ""
+  }
+  empnumber = 0
+
+  currentModel: 'add' | 'edit' | 'delete' = "add"
+  constructor(private groupapproveService: GroupApproveService,
+    private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private employeeService: EmployeeService,
+  ) { }
+  ngOnInit(): void {
+    this.getGroupapprove_list()
+    this.getEemployeeList()
   }
 
-  closeModal(name: string) {
-    this.modalOptions[name].isModalOpen = false;
-    if (!this.isAnyModalOpen()) {
-      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+  getEemployeeList() {
+    this.employee_listLoading = true
+    this.employeeService.getList().subscribe({
+      next: response => {
+        this.employee_list = response.map(x => {
+          return new MyEmployeeModel(x)
+        })
+        this.employee_listLoading = false
+        this.searchEMP()
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.employee_listLoading = false
+        this.cdr.detectChanges()
       }
+    })
   }
-
-  isAnyModalOpen(): boolean {
-    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
+  employee_listFilter() {
+    console.log(this.employee)
+    return this.employee_list.filter(x => x.fname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.lname.toLowerCase().includes(this.search.toLowerCase()))
   }
-
-  // ฟังก์ชัน toggle checkbox
-  isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
-
-  toggleCheckbox() {
-    this.isChecked = !this.isChecked; // สลับสถานะ
+  searchEMP() {
+    this.employeeModal.currentPage = 1
+    this.employeeModal.page = Array.from({ length: Math.ceil(this.employee_listFilter().length / 10) }, (_, i) => i + 1);
   }
-
-  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
-  addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
+  empChange() {
+    const employee = this.employee_list.find(x => x.employeeId == this.employee.employeeId)
+    this.selectEMP(employee || new MyEmployeeModel({ employeeId: this.employee.employeeId }))
   }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
+  selectEMP(employee?: EmployeeModel) {
+    const data = new MyEmployeeModel(employee || {});
+    if (this.empnumber == 1) {
+      this.groupapprove.apsapprove1 = data
+    } else if (this.empnumber == 2) {
+      this.groupapprove.apsapprove2 = data
+    } else if (this.empnumber == 3) {
+      this.groupapprove.apsapprove3 = data
+    } else if (this.empnumber == 4) {
+      this.groupapprove.apsapprove4 = data
+    } else if (this.empnumber == 5) {
+      this.groupapprove.apsapprove5 = data
     } 
 
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
+  }
+  getGroupapprove_list() {
+    this.groupapprove_listLoading = true
+    this.groupapproveService.getList().subscribe({
+      next: response => {
+        this.groupapprove_list = response.map(x => new MyGroupApproveModel(x))
+        this.groupapprove_listLoading = false
+        this.searchChange()
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.groupapprove_listLoading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.groupapprove_listFilter().length / 10) }, (_, i) => i + 1);
+  }
+  groupapprove_listFilter() {
+    console.log(this.groupapprove)
+    return this.groupapprove_list.filter(x => x.apsapprove1.employeeId||x.apsapprove2.employeeId||x.apsapprove3.employeeId||x.apsapprove4.employeeId||x.apsapprove5.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.apsapprove1.fname || x.apsapprove1.lname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.apsapprove2.fname || x.apsapprove2.lname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.apsapprove3.fname || x.apsapprove3.lname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.apsapprove4.fname || x.apsapprove4.lname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.apsapprove5.fname || x.apsapprove5.lname.toLowerCase().includes(this.search.toLowerCase()))
   }
 
-  currentModal = "";
+  selectGroupapprove(groupapprove?: GroupApproveModel) {
+    this.groupapprove = new MyGroupApproveModel(groupapprove)
+  }
 
-  constructor(private toastr: ToastrService) { }
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    })
+  }
+  addgroupapprove() {
+    this.groupapprove_listLoading = true
+    this.groupapproveService.post(this.groupapprove).subscribe({
+      next: response => {
+        if (response.success) {
+          this.getGroupapprove_list()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.groupapprove_listLoading = false
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.groupapprove_listLoading = false
+      }
+    })
+  }
+  deletegroupapprove() {
+    this.groupapprove_listLoading = true
+    this.groupapproveService.delete(this.groupapprove).subscribe({
+      next: response => {
+        if (response.success) {
+          this.getGroupapprove_list()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.groupapprove_listLoading = false
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.groupapprove_listLoading = false
+      }
+    })
+  }
 
   showSuccess() {
     this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {

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

@@ -134,6 +134,7 @@ import { FileService } from 'src/app/shared/services/file.service';
 import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
 import { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service';
 import { IdpDevelopmentService } from 'src/app/shared/services/idp-development.service';
+import { GroupApproveService } from 'src/app/shared/services/group-approve.service';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -298,6 +299,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     CompetencyGroupGradeService,
     IndicatorsCoursesService,
     IdpDevelopmentService,
+    GroupApproveService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/model/group-approve.model.ts

+import { EmployeeModel, MyEmployeeModel } from "./employee.model";
+import { MyPLModel, PLModel } from "./pl.model";
+
+
+export interface GroupApproveModel {
+    personalLevel: PLModel;
+    apsassessy: EmployeeModel;
+    companyId: string;
+    apsapprove1: EmployeeModel;
+    apsapprove2: EmployeeModel;
+    apsapprove3: EmployeeModel;
+    apsapprove4: EmployeeModel;
+    apsapprove5: EmployeeModel;
+}
+
+
+export class MyGroupApproveModel implements GroupApproveModel {
+    personalLevel: PLModel;
+    apsassessy: EmployeeModel
+    companyId: string;
+    apsapprove1: EmployeeModel;
+    apsapprove2: EmployeeModel;
+    apsapprove3: EmployeeModel;
+    apsapprove4: EmployeeModel;
+    apsapprove5: EmployeeModel;
+    constructor(data: Partial<GroupApproveModel> = {}) {
+        this.personalLevel = new MyPLModel(data.personalLevel || {});
+        this.apsassessy = new MyEmployeeModel(data.apsassessy || {})
+        this.companyId = data.companyId || '';
+        this.apsapprove1 = new MyEmployeeModel(data.apsapprove1 || {});
+        this.apsapprove2 = new MyEmployeeModel(data.apsapprove2 || {});
+        this.apsapprove3 = new MyEmployeeModel(data.apsapprove3 || {});
+        this.apsapprove4 = new MyEmployeeModel(data.apsapprove4 || {});
+        this.apsapprove5 = new MyEmployeeModel(data.apsapprove5 || {});
+    }
+}
\ No newline at end of file

src/app/shared/services/group-approve.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { GroupApproveModel } from '../model/group-approve.model';
+import { AlertModel } from '../model/alert.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupApproveService {
+  api = "/group-approve"
+  urlApi = environment.baseUrl + this.api
+  constructor(private http: HttpClient) {
+  }
+  getByPersonalLevel(plId: string): Observable<GroupApproveModel> {
+    return this.http.get<GroupApproveModel>(this.urlApi + "/" + plId);
+  }
+  getList(): Observable<GroupApproveModel[]> {
+    return this.http.get<GroupApproveModel[]>(this.urlApi + "/lists")
+  }
+  post(body: GroupApproveModel): Observable<AlertModel> {
+          return this.http.post<AlertModel>(this.urlApi, body)
+      }
+  delete(body: GroupApproveModel) : Observable<AlertModel> {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    };
+    return this.http.delete<AlertModel>(this.urlApi, options)
+  }
+}
\ No newline at end of file