ประเภทพนักงาน

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

 import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 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';
 import { FileService } from 'src/app/shared/services/file.service';
-export interface DataModel {
-  codeId: string
-  tdesc: string
-  edesc: string
-  companyId: string
-}
-
 @Component({
   selector: 'app-employee-categories',
   templateUrl: './employee-categories.component.html',
   styleUrls: ['./employee-categories.component.scss']
 })
 export class EmployeeCategories {
-  currentPage = 1
-  pageSize = 10
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
   search = ""
-  modalStatus = 'add'
-  emp_typelist: { check: boolean, data: DataModel }[] = []
-  emp_type: EmpTypeModel = new MyEmpTypeModel({})
-  dataLoading = false
-  dataSelect: DataModel = { codeId: "", tdesc: "", edesc: "", companyId: "" }
+  currentModal: 'add' | 'edit' | 'delete' = 'add'
+  emp_type: { loading: boolean, select: EmpTypeModel, dataList: EmpTypeModel[] } = { loading: false, select: new MyEmpTypeModel(), dataList: [] }
   itemToDelete: EmpTypeModel | null = null;
 
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
-  numDataListChecked = 0
-  isDataListChecked = false
-  isDataListCheckedAll = false
+  columns: ColumnModel[] = [{
+    field: "codeId",
+    headerText: "รหัสฝ่าย",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "tdesc",
+    headerText: "รายละเอียดฝ่าย(ไทย)",
+    type: "string"
+  },
+  {
+    field: "edesc",
+    headerText: "รายละเอียดฝ่าย(อังกฤษ)",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['codeId', '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 empTypeService: EmpTypeService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -53,7 +60,7 @@ export class EmployeeCategories {
       return
     }
     const formData = new FormData();
-    this.dataLoading = true
+    this.emp_type.loading = true
     formData.append('file', this.selectedFile);
     this.fileService.uploadExcel(formData, 'employment_type').subscribe({
       next: response => {
@@ -62,12 +69,12 @@ export class EmployeeCategories {
           this.getEmpTypeList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.emp_type.loading = false
           this.cdr.detectChanges();
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.emp_type.loading = false
         this.cdr.detectChanges();
       }
     })
@@ -93,68 +100,61 @@ export class EmployeeCategories {
   }
 
   getEmpTypeList() {
-    this.dataLoading = true
+    this.emp_type.loading = true
     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.dataLoading = false
-        this.isDataListCheckedAll = false
-        this.dataListCheckAll()
-        this.searchChange();
+        this.emp_type.dataList = response.map(x => {
+          this.selectedItems.data.set(x.codeId, false)
+          return new MyEmpTypeModel(x)
+        })
+        this.selectedItems.key = 'codeId'
+        this.selectedItems.count = 0
+        this.emp_type.loading = false
         this.cdr.detectChanges();
       }, error: error => {
-        this.dataLoading = false
+        this.emp_type.loading = false
         console.error('Error fetching employee types:', error);
         this.cdr.detectChanges()
       }
     });
   }
 
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
-    this.dataListCheck()
-  }
-  emp_typeListFilter() {
-    return this.emp_typelist.filter(x => {
-      const data = x.data
-      const match = data.codeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
-      return match;
-    });
+  selectEmp_type(emp_type?: EmpTypeModel) {
+    if (emp_type) {
+      this.emp_type.select = new MyEmpTypeModel(emp_type)
+    } else if (this.currentModal == 'add') {
+      this.emp_type.select = new MyEmpTypeModel()
+    } else if (this.currentModal == 'edit') {
+      this.emp_type.select = new MyEmpTypeModel({ codeId: this.emp_type.select.codeId })
     }
-  setData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" }));
   }
 
+
+
   addEmp_type() {
-    const body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
-    this.dataLoading = true
-    this.empTypeService.post(body).subscribe({
+    this.emp_type.loading = true
+    this.empTypeService.post(this.emp_type.select).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getEmpTypeList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.emp_type.loading = false
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.emp_type.loading = false
         this.cdr.detectChanges()
       }
     })
   }
 
   deleteEmp_type() {
-    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.dataLoading = true
+    this.emp_type.loading = true
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const body = this.emp_type.dataList.filter(x => selectedKeys.includes(x.codeId) && this.selectedItems.data.get(x.codeId)).map(x => new MyEmpTypeModel(x))
     this.empTypeService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -162,12 +162,12 @@ export class EmployeeCategories {
           this.getEmpTypeList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.emp_type.loading = false
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.emp_type.loading = false
         this.cdr.detectChanges()
       }
     })
@@ -180,35 +180,18 @@ export class EmployeeCategories {
     });
   }
 
-  dataListCheckAll() {
-    const selectAll = this.isDataListCheckedAll;
-    this.emp_typelist.filter(x => {
-      const data = x.data
-      const match = data.codeId.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.emp_typeListFilter();
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = this.emp_typelist.filter(x => x.check).length;
-    this.isDataListChecked = Boolean(this.numDataListChecked)
-  }
-
 
-  clearEmp_type(modalStatus: string) {
-    if (modalStatus == 'add') {
-      this.dataSelect.codeId = ''
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
-    } else if (modalStatus == 'edit') {
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
+  checkPrimary() {
+    return this.emp_type.dataList.find(x => x.codeId == this.emp_type.select.codeId)
   }
+
+  numSelectItem() {
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const num = this.emp_type.dataList.filter(x => selectedKeys.includes(x.codeId) && this.selectedItems.data.get(x.codeId)).length
+    return num
   }
 
-  checkPrimary() {
-    return this.emp_typelist.find(x => x.data.codeId == this.dataSelect.codeId)
+  onSelectItemChange(arg: any) {
+    this.selectedItems = arg
   }
 }

src/app/components/company-components/job-description/position/position-unit.component.ts

@@ -4,15 +4,6 @@ import { ToastrService } from 'ngx-toastr';
 import { MyPositionModel, PositionModel } from 'src/app/shared/model/position.model';
 import { FileService } from 'src/app/shared/services/file.service';
 import { PositionService } from 'src/app/shared/services/position.service';
-export interface DataModel {
-  positionId: string
-  tdesc: string
-  edesc: string
-  consolidate: string
-  shortName: string
-  companyId: string
-}
-
 @Component({
   selector: 'app-position-unit',
   templateUrl: './position-unit.component.html',

src/app/shared/model/employee-type.model.ts

@@ -12,11 +12,11 @@ export class MyEmpTypeModel implements EmpTypeModel {
     tdesc: string;
     edesc: string;
     companyId: string;
-    constructor(data: Partial<EmpTypeModel>) {
-        this.codeId = data.codeId || ""
-        this.tdesc = data.tdesc || ""
-        this.edesc = data.edesc || ""
-        this.companyId = data.companyId || ""
+    constructor(data?: Partial<EmpTypeModel>) {
+        this.codeId = data?.codeId || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+        this.companyId = data?.companyId || ""
     }
 }