กลุ่มพนักงาน

src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.html

@@ -120,7 +120,7 @@
                     </span>
                 </label>
                 <div class="relative flex rounded-md w-1/2">
-                    <input type="text" class="ti-form-input h-16"
+                    <input type="text" class="ti-form-input"
                         [class.!border-red]="currentModal=='add'&&checkPrimary()"
                         [class.!bg-input-readonly]="currentModal=='edit'" [readonly]="currentModal=='edit'"
                         [(ngModel)]="bu7.select.bu7id">

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

 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { EmpGroupModel, MyEmpGroupModel } from 'src/app/shared/model/emp-group.model';
 import { EmpGroupService } from 'src/app/shared/services/emp-group.service';
@@ -19,20 +20,35 @@ export interface DataModel {
 export class EmployeeGroupUnit implements OnInit {
   currentPage = 1
   pageSize = 10
-  selectedItems: string[] = [];
-  modalStatus: 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
+  currentModal: 'add' | 'edit' | 'delete' = 'add'
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-  dataLoading = false
-  dataSelect: DataModel = { groupId: "", tdesc: "", edesc: "", companyId: "", checked: false }
-  emp_groupList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
-  emp_group: EmpGroupModel = new MyEmpGroupModel({})
-  search = ""
+  emp_group: { loading: boolean, select: EmpGroupModel, dataList: EmpGroupModel[] } = { loading: false, select: new MyEmpGroupModel(), dataList: [] }
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
-  numDataListChecked = 0
-  isDataListChecked = false
-  isDataListCheckedAll = false
+  columns: ColumnModel[] = [{
+    field: "groupId",
+    headerText: "รหัสฝ่าย",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "tdesc",
+    headerText: "รายละเอียดฝ่าย(ไทย)",
+    type: "string"
+  },
+  {
+    field: "edesc",
+    headerText: "รายละเอียดฝ่าย(อังกฤษ)",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['groupId', 'tdesc', 'edesc'],
+    operator: 'contains',
+    ignoreCase: false
+  };
+  search = ''
+  selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
   constructor(private empGroupService: EmpGroupService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -55,7 +71,7 @@ export class EmployeeGroupUnit implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
-    this.dataLoading = true
+    this.emp_group.loading = true
     this.fileService.uploadExcel(formData, 'mgroup').subscribe({
       next: response => {
         if (response.success) {
@@ -63,11 +79,11 @@ export class EmployeeGroupUnit implements OnInit {
           this.getEmpGroupList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.emp_group.loading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.emp_group.loading = false
       }
     })
   }
@@ -92,66 +108,58 @@ export class EmployeeGroupUnit implements OnInit {
   }
 
   getEmpGroupList() {
-    this.dataLoading = true
+    this.emp_group.loading = true
+    this.selectedItems.data.clear()
     this.empGroupService.getList().subscribe({
       next: response => {
-        this.emp_groupList = response.map(x => ({ check: false, data: { groupId: x.groupId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId, checked: false } }))
-        this.dataLoading = false
-        this.searchChange()
-        this.isDataListCheckedAll = false
-        this.dataListCheckAll()
+        this.emp_group.dataList = response.map(x => {
+          this.selectedItems.data.set(x.groupId, false)
+          return new MyEmpGroupModel(x)
+        })
+        this.selectedItems.key = 'groupId'
+        this.selectedItems.count = 0
+        this.emp_group.loading = false
         this.cdr.detectChanges()
       }, error: error => {
-        this.dataLoading = false
-        console.error('Error fetching employee types:', error);
+        this.emp_group.loading = false
         this.cdr.detectChanges()
       }
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.emp_groupListFilter().length / 10) }, (_, i) => i + 1);
-    this.dataListCheck()
-  }
-  emp_groupListFilter() {
-    return this.emp_groupList.filter(x => {
-      const data = x.data
-      const match = data.groupId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
-      return match;
-    });
+
+  selectEmp_group(emp_group?: EmpGroupModel) {
+    if (emp_group) {
+      this.emp_group.select = new MyEmpGroupModel(emp_group)
+    } else if (this.currentModal == 'add') {
+      this.emp_group.select = new MyEmpGroupModel()
+    } else if (this.currentModal == 'edit') {
+      this.emp_group.select = new MyEmpGroupModel({ groupId: this.emp_group.select.groupId })
     }
-  setData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { groupId: "", tdesc: "", edesc: "", companyId: "" }));
   }
 
   addEmp_group() {
-    const body = new MyEmpGroupModel({ groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
-    this.dataLoading = true
-    this.empGroupService.post(body).subscribe({
+    this.emp_group.loading = true
+    this.empGroupService.post(this.emp_group.select).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getEmpGroupList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.emp_group.loading = false
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.emp_group.loading = false
         this.cdr.detectChanges()
       }
     })
   }
   deleteEmp_group() {
-    let body: EmpGroupModel | EmpGroupModel[] = [];
-    if (this.dataSelect.groupId) {
-      body = new MyEmpGroupModel({ groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId });
-    } else {
-      body = this.emp_groupList.filter(x => x.check).map(x => new MyEmpGroupModel({ groupId: x.data.groupId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }));
-    }
-    this.dataLoading = true
+    this.emp_group.loading = true
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const body = this.emp_group.dataList.filter(x => selectedKeys.includes(x.groupId) && this.selectedItems.data.get(x.groupId)).map(x => new MyEmpGroupModel(x))
     this.empGroupService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -159,35 +167,18 @@ export class EmployeeGroupUnit implements OnInit {
           this.getEmpGroupList();
         } else {
           this.showAlert(response.message, 'error');
-          this.dataLoading = false
+          this.emp_group.loading = false
           this.cdr.detectChanges()
         }
       },
       error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.emp_group.loading = false
         this.cdr.detectChanges()
       }
     });
   }
 
-  dataListCheckAll() {
-    const selectAll = this.isDataListCheckedAll;
-    this.emp_groupList.filter(x => {
-      const data = x.data
-      const match = data.groupId.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_groupListFilter();
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = this.emp_groupList.filter(x => x.check).length;
-    this.isDataListChecked = Boolean(this.numDataListChecked)
-  }
-
   showAlert(text: string, type: 'success' | 'error') {
     this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
@@ -195,18 +186,17 @@ export class EmployeeGroupUnit implements OnInit {
     })
   }
 
-  clearEmp_group(modalStatus: string) {
-    if (modalStatus == 'add') {
-      this.dataSelect.groupId = ''
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
-    } else if (modalStatus == 'edit') {
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
+  checkPrimary() {
+    return this.emp_group.dataList.find(x => x.groupId == this.emp_group.select.groupId)
   }
+
+  numSelectItem() {
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const num = this.emp_group.dataList.filter(x => selectedKeys.includes(x.groupId) && this.selectedItems.data.get(x.groupId)).length
+    return num
   }
 
-  checkPrimary() {
-    return this.emp_groupList.find(x => x.data.groupId == this.dataSelect.groupId)
+  onSelectItemChange(arg: any) {
+    this.selectedItems = arg
   }
 }

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

-export interface EmpGroupModel{
+export interface EmpGroupModel {
     groupId: string;
     tdesc: string;
     edesc: string;
@@ -11,11 +11,11 @@ export class MyEmpGroupModel implements EmpGroupModel {
     tdesc: string;
     edesc: string;
     companyId: string;
-    constructor(data: Partial<EmpGroupModel>) {
-        this.groupId = data.groupId || ""
-        this.tdesc = data.tdesc || ""
-        this.edesc = data.edesc || ""
-        this.companyId = data.companyId || ""
+    constructor(data?: Partial<EmpGroupModel>) {
+        this.groupId = data?.groupId || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+        this.companyId = data?.companyId || ""
     }
 }