หน้า ข้อมูลลักษณะงาน หัวข้อ ประเภทพนักงาน, ระดับพนักงาน (PL) ลบหลายอัน

src/app/components/company-components/job-description/employee-categories/employee-categories.component.ts

@@ -2,6 +2,12 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angu
 import { ToastrService } from 'ngx-toastr';
 import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
 import { EmpTypeService } from 'src/app/shared/services/employee-type.service';
+export interface DataModel {
+  codeId: string
+  tdesc: string
+  edesc: string
+  companyId: string
+}
 
 @Component({
   selector: 'app-employee-categories',
@@ -21,10 +27,14 @@ export class EmployeeCategories {
 
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-  emp_typeList: EmpTypeModel[] = []
-  emp_type: EmpTypeModel = new MyEmpTypeModel({})
   search = ""
+  modalStatus = 'add'
+  emp_typelist: { check: boolean, data: DataModel }[] = []
+  emp_type: EmpTypeModel = new MyEmpTypeModel({})
+  dataLoading = false
+  dataSelect: DataModel = { codeId: "", tdesc: "", edesc: "", companyId: "" }
   itemToDelete: EmpTypeModel | null = null;
+
   constructor(private empTypeService: EmpTypeService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef
@@ -33,125 +43,78 @@ export class EmployeeCategories {
     this.getEmpTypeList()
   }
 
-  modalOptions: {
-    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
-      isModalOpen: boolean; // เปิด/ปิด 
-      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
-      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
-    }
-  } = {
-      "add": {
-        isModalOpen: false,
-        modalSize: 'm',
-        backdropClose: true,
-      },
-      "edit": {
-        isModalOpen: false,
-        modalSize: 'm',
-        backdropClose: true,
+  getEmpTypeList() {
+    this.empTypeService.getList().subscribe({
+      next: response => {
+        this.emp_typelist = response.map(x => ({ check: false, data: { codeId: x.codeId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
+        this.searchChange();
+        this.cdr.detectChanges();
       },
-      "upload": {
-        isModalOpen: false,
-        modalSize: 'm',
-        backdropClose: true,
+      error: err => {
+        console.error('Error fetching employee types:', err);
       }
-    }
-
-  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
-    this.modalOptions[name].modalSize = size;
-    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
-    this.modalOptions[name].isModalOpen = true;
-    document.body.style.overflow = 'hidden'; // ล็อก Scroll
-  }
-
-  closeModal(name: string) {
-    this.modalOptions[name].isModalOpen = false;
-    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
-    if (!this.isAnyModalOpen()) {
-      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
-    }
+    });
   }
 
-  isAnyModalOpen(): boolean {
-    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
-    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
-  }
-  getEmpTypeList() {
-    this.empTypeService.getList().subscribe(response => {
-      this.emp_typeList = response.map(x => new MyEmpTypeModel(x))
-      this.searchChange()
-      this.cdr.detectChanges()
-    })
-  }
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
   }
   emp_typeListFilter() {
-    return this.emp_typeList.filter(x =>
-      x.codeId.includes(this.search) ||
-      x.tdesc.includes(this.search) ||
-      x.edesc.includes(this.search))
+    return this.emp_typelist.filter(x => {
+      const data = x.data
+      const match = data.codeId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
+      return match;
+    });
   }
-  selectEmp_type(emp_type?: EmpTypeModel) {
-    // this.showSuccess()
-    this.emp_type = new MyEmpTypeModel(emp_type || {})
+  setData(data?: DataModel) {
+    this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" }));
   }
+  // selectEmp_type(emp_type?: EmpTypeModel) {
+  //   // this.showSuccess()
+  //   this.emp_type = new MyEmpTypeModel(emp_type || {})
+  // }
   addEmp_type() {
-    this.empTypeService.post(this.emp_type).subscribe((response: any) => {
-      if (response.success) {
-        this.getEmpTypeList()
-        this.showSuccessAdd()
+    const body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    this.empTypeService.post(body).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getEmpTypeList()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
       }
     })
   }
+
   deleteEmp_type() {
-    this.empTypeService.delete(this.emp_type).subscribe((response: any) => {
-      if (response.success) {
-        this.getEmpTypeList()
-        this.showSuccessDelete()
+    let body: EmpTypeModel | EmpTypeModel[] = []
+    if (this.dataSelect.codeId) {
+      body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    } else {
+      body = this.emp_typelist.filter(x => x.check).map(x => new MyEmpTypeModel({ codeId: x.data.codeId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }))
+    }
+    this.empTypeService.delete(body).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getEmpTypeList()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
       }
     })
   }
 
-
-  openDeleteModal(item: EmpTypeModel) {
-    this.itemToDelete = item; // เก็บข้อมูลที่ต้องการลบ
-  }
-
-  deleteSelected() {
-    if (this.itemToDelete) {
-      // ลบ item ที่ถูกเลือกออกจาก emp_typeList
-      this.emp_typeList = this.emp_typeList.filter(item => item !== this.itemToDelete);
-    }
-  }
-
-  // ฟังก์ชันลบข้อมูลที่เลือก
-  deleteSelectedItems() {
-    this.emp_typeList = this.emp_typeList.filter(item => !item['selected']);
-  }
-
-  onCheckboxChange(emp_type: EmpTypeModel) {
-    console.log('Checkbox changed:', emp_type);
-  }
-
-  showSuccessAdd() {
-    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
     });
   }
-  showSuccessEdit() {
-    this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
-  }
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
-  }
-
 }

src/app/components/company-components/job-description/employee-level/employee-level.component.ts

@@ -2,6 +2,12 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } fro
 import { ToastrService } from 'ngx-toastr';
 import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
 import { PLService } from 'src/app/shared/services/pl.service';
+export interface DataModel {
+  plId: string
+  tdesc: string
+  edesc: string
+  companyId: string
+}
 
 @Component({
   selector: 'app-employee-level',
@@ -20,66 +26,92 @@ export class EmployeeLevel implements OnInit {
   }
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-  plList: PLModel[] = []
-  pl: PLModel = new MyPLModel({})
   search = ""
+  modalStatus = 'add'
+  plList: { check: boolean, data: DataModel }[] = []
+  pl: PLModel = new MyPLModel({})
+  dataLoading = false
+  dataSelect: DataModel = { plId: "", tdesc: "", edesc: "", companyId: "" }
+  itemToDelete: PLModel | null = null;
+
   constructor(private plService: PLService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef
   ) { }
+
   ngOnInit(): void {
     this.getPLList()
   }
+
   getPLList() {
-    this.plService.getList().subscribe(response => {
-      this.plList = response.map(x => new MyPLModel(x))
-      this.searchChange()
-      this.cdr.detectChanges()
-    })
+    this.plService.getList().subscribe({
+      next: response => {
+        this.plList = response.map(x => ({ check: false, data: { plId: x.plId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
+        this.searchChange();
+        this.cdr.detectChanges();
+      },
+      error: err => {
+        console.error('Error fetching employee types:', err);
+      }
+    });
   }
+
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
   }
+
   plListFilter() {
-    return this.plList.filter(x => x.plId.includes(this.search) ||
-      x.tdesc.includes(this.search) ||
-      x.edesc.includes(this.search))
+    return this.plList.filter(x => {
+      const data = x.data
+      const match = data.plId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
+      return match;
+    });
   }
-  selectPL(pl?: PLModel) {
-    // this.showSuccess()
-    this.pl = new MyPLModel(pl || {})
+
+  setData(data?: DataModel) {
+    this.dataSelect = JSON.parse(JSON.stringify(data || { plId: "", tdesc: "", edesc: "", companyId: "" }));
   }
+
   addPL() {
-    this.plService.post(this.pl).subscribe((response: any) => {
-      if (response.success) {
-        this.getPLList()
-        this.showSuccessAdd()
+    const body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    this.plService.post(body).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getPLList()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
       }
     })
   }
+
   deletePL() {
-    this.plService.delete(this.pl).subscribe((response: any) => {
-      if (response.success) {
-        this.getPLList()
-        this.showSuccessDelete()
+    let body: PLModel | PLModel[] = []
+    if (this.dataSelect.plId) {
+      body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    } else {
+      body = this.plList.filter(x => x.check).map(x => new MyPLModel({ plId: x.data.plId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }))
+    }
+    this.plService.delete(body).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getPLList()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
       }
     })
   }
-  showSuccessAdd() {
-    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
-  }
-  showSuccessEdit() {
-    this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
-  }
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
+
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
     });

src/app/shared/services/employee-type.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { EmpTypeModel } from '../model/employee-type.model';
+import { AlertModel } from '../model/alert.model';
 
 @Injectable({
     providedIn: 'root'
@@ -18,16 +19,16 @@ export class EmpTypeService {
     getById(codeId: string): Observable<EmpTypeModel> {
         return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId)
     }
-    post(body: EmpTypeModel) {
-        return this.http.post(this.urlApi, body)
+    post(body: EmpTypeModel): Observable<AlertModel> {
+        return this.http.post<AlertModel>(this.urlApi, body)
     }
-    delete(body: EmpTypeModel) {
+    delete(body: EmpTypeModel | EmpTypeModel[]): Observable<AlertModel> {
         const options = {
             headers: new HttpHeaders({
                 "Content-Type": "application/json",
             }),
             body: body
         };
-        return this.http.delete(this.urlApi, options)
+        return this.http.delete<AlertModel>(this.urlApi, options)
     }
 }

src/app/shared/services/pl.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { PLModel } from '../model/pl.model';
+import { AlertModel } from '../model/alert.model';
 @Injectable({
   providedIn: 'root'
 })
@@ -17,16 +18,16 @@ export class PLService {
   getList(): Observable<PLModel[]> {
     return this.http.get<PLModel[]>(this.urlApi + "/lists")
   }
-  post(body: PLModel) {
-    return this.http.post(this.urlApi, body)
+  post(body: PLModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi, body)
   }
-  delete(body: PLModel) {
+  delete(body: PLModel | PLModel[]): Observable<AlertModel> {
     const options = {
       headers: new HttpHeaders({
         "Content-Type": "application/json",
       }),
       body: body
     };
-    return this.http.delete(this.urlApi, options)
+    return this.http.delete<AlertModel>(this.urlApi, options)
   }
 }
\ No newline at end of file