ระดับพนักงาน (JL)

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

@@ -101,6 +101,7 @@ export class EmployeeCategories {
 
   getEmpTypeList() {
     this.emp_type.loading = true
+    this.selectedItems.data.clear()
     this.empTypeService.getList().subscribe({
       next: response => {
         this.emp_type.dataList = response.map(x => {
@@ -113,7 +114,6 @@ export class EmployeeCategories {
         this.cdr.detectChanges();
       }, error: error => {
         this.emp_type.loading = false
-        console.error('Error fetching employee types:', error);
         this.cdr.detectChanges()
       }
     });

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

 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
 import { FileService } from 'src/app/shared/services/file.service';
 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',
   templateUrl: './employee-level.component.html',
   styleUrls: ['./employee-level.component.scss']
 })
 export class EmployeeLevel implements OnInit {
-  currentPage = 1
-  pageSize = 10
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
   search = ""
-  modalStatus = 'add'
-  plList: { check: boolean, data: DataModel }[] = []
-  pl: PLModel = new MyPLModel({})
-  dataLoading = false
-  dataSelect: DataModel = { plId: "", tdesc: "", edesc: "", companyId: "" }
-  itemToDelete: PLModel | null = null;
+  currentModal: 'add' | 'edit' | 'delete' = 'add'
+  pl: { loading: boolean, select: PLModel, dataList: PLModel[] } = { loading: false, select: new MyPLModel(), dataList: [] }
+
 
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
 
-  numDataListChecked = 0
-  isDataListChecked = false
-  isDataListCheckedAll = false
+  columns: ColumnModel[] = [{
+    field: "plId",
+    headerText: "รหัสฝ่าย",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "tdesc",
+    headerText: "รายละเอียดฝ่าย(ไทย)",
+    type: "string"
+  },
+  {
+    field: "edesc",
+    headerText: "รายละเอียดฝ่าย(อังกฤษ)",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['plId', 'tdesc', 'edesc'],
+    operator: 'contains',
+    ignoreCase: false
+  }
+  selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
   constructor(private plService: PLService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -56,7 +63,7 @@ export class EmployeeLevel implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
-    this.dataLoading = true
+    this.pl.loading = true
     this.fileService.uploadExcel(formData, 'pl').subscribe({
       next: response => {
         if (response.success) {
@@ -64,12 +71,12 @@ export class EmployeeLevel implements OnInit {
           this.getPLList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.pl.loading = false
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.pl.loading = false
         this.cdr.detectChanges()
       }
     })
@@ -95,71 +102,59 @@ export class EmployeeLevel implements OnInit {
   }
 
   getPLList() {
-    this.dataLoading = true
+    this.pl.loading = true
+    this.selectedItems.data.clear()
     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.dataLoading = false
-        this.isDataListCheckedAll = false
-        this.dataListCheckAll()
-        this.searchChange();
+        this.pl.dataList = response.map(x => {
+          this.selectedItems.data.set(x.plId, false)
+          return new MyPLModel(x)
+        })
+        this.selectedItems.key = 'plId'
+        this.selectedItems.count = 0
+        this.pl.loading = false
         this.cdr.detectChanges();
       }, error: error => {
-        this.dataLoading = false
-        console.error('Error fetching employee types:', error);
+        this.pl.loading = false
         this.cdr.detectChanges()
       }
     });
   }
 
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
-    this.dataListCheck();
-    this.cdr.detectChanges()
+  selectPl(pl?: PLModel) {
+    if (pl) {
+      this.pl.select = new MyPLModel(pl)
+    } else if (this.currentModal == 'add') {
+      this.pl.select = new MyPLModel()
+    } else if (this.currentModal == 'edit') {
+      this.pl.select = new MyPLModel({ plId: this.pl.select.plId })
     }
-
-  plListFilter() {
-    return this.plList.filter(x => {
-      const data = x.data
-      const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
-      return match;
-    });
-  }
-
-  setData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { plId: "", tdesc: "", edesc: "", companyId: "" }));
   }
 
   addPL() {
-    const body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
-    this.dataLoading = true
-    this.plService.post(body).subscribe({
+    this.pl.loading = true
+    this.plService.post(this.pl.select).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getPLList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = true
+          this.pl.loading = true
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = true
+        this.pl.loading = true
         this.cdr.detectChanges()
       }
     })
   }
 
   deletePL() {
-    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.dataLoading = true
+    this.pl.loading = true
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const body = this.pl.dataList.filter(x => selectedKeys.includes(x.plId) && this.selectedItems.data.get(x.plId)).map(x => new MyPLModel(x))
     this.plService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -167,12 +162,12 @@ export class EmployeeLevel implements OnInit {
           this.getPLList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = true
+          this.pl.loading = true
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = true
+        this.pl.loading = true
         this.cdr.detectChanges()
       }
     })
@@ -185,36 +180,18 @@ export class EmployeeLevel implements OnInit {
     });
   }
 
-  dataListCheckAll() {
-    const selectAll = this.isDataListCheckedAll;
-    this.plList.filter(x => {
-      const data = x.data
-      const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
-      return match;
-    }).forEach(x => x.check = selectAll);
-    this.dataListCheck();
-  }
-  dataListCheck() {
-    const dataCheck = this.plListFilter();
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = this.plList.filter(x => x.check).length
-    this.isDataListChecked = Boolean(this.numDataListChecked)
-  }
-
 
-  clearPl(modalStatus: string) {
-    if (modalStatus == 'add') {
-      this.dataSelect.plId = ''
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
-    } else if (modalStatus == 'edit') {
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
-    }
+  checkPrimary() {
+    return this.pl.dataList.find(x => x.plId == this.pl.select.plId)
   }
 
+  numSelectItem() {
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const num = this.pl.dataList.filter(x => selectedKeys.includes(x.plId) && this.selectedItems.data.get(x.plId)).length
+    return num
+  }
 
-  checkPrimary() {
-    return this.plList.find(x => x.data.plId == this.dataSelect.plId)
+  onSelectItemChange(arg: any) {
+    this.selectedItems = arg
   }
 }