ตำเเหน่ง

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

@@ -18,10 +18,7 @@ export interface DataModel {
   styleUrls: ['./employee-group-unit.component.scss']
 })
 export class EmployeeGroupUnit implements OnInit {
-  currentPage = 1
-  pageSize = 10
   currentModal: 'add' | 'edit' | 'delete' = 'add'
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
   emp_group: { loading: boolean, select: EmpGroupModel, dataList: EmpGroupModel[] } = { loading: false, select: new MyEmpGroupModel(), dataList: [] }
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';

src/app/components/company-components/job-description/position/position-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 { MyPositionModel, PositionModel } from 'src/app/shared/model/position.model';
 import { FileService } from 'src/app/shared/services/file.service';
@@ -18,22 +19,34 @@ export interface DataModel {
   styleUrls: ['./position-unit.component.scss']
 })
 export class PositionUnitComponent implements OnInit {
-  currentPage = 1
-  pageSize = 10
-  selectedItems: string[] = [];
-  search = ""
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
-  modalStatus = 'add'
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
-  positionList: { check: boolean, data: DataModel }[] = []
-  position: PositionModel = new MyPositionModel({})
-  dataLoading = false
-  dataSelect: DataModel = { positionId: "", tdesc: "", edesc: "", consolidate: "", shortName: "", companyId: "" }
+  currentModal: 'add' | 'edit' | 'delete' = 'add'
+  position: { loading: boolean, select: PositionModel, dataList: PositionModel[] } = { loading: false, select: new MyPositionModel(), dataList: [] }
 
-  numDataListChecked = 0
-  isDataListChecked = false
-  isDataListCheckedAll = false
+  columns: ColumnModel[] = [{
+    field: "positionId",
+    headerText: "รหัสฝ่าย",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "tdesc",
+    headerText: "รายละเอียดฝ่าย(ไทย)",
+    type: "string"
+  },
+  {
+    field: "edesc",
+    headerText: "รายละเอียดฝ่าย(อังกฤษ)",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['positionId', '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 positionService: PositionService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -55,7 +68,7 @@ export class PositionUnitComponent implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
-    this.dataLoading = true
+    this.position.loading = true
     this.fileService.uploadExcel(formData, 'mposition').subscribe({
       next: response => {
         if (response.success) {
@@ -63,12 +76,12 @@ export class PositionUnitComponent implements OnInit {
           this.getPositionList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.position.loading = false
           this.cdr.detectChanges();
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.position.loading = false
         this.cdr.detectChanges();
       }
     })
@@ -93,67 +106,59 @@ export class PositionUnitComponent implements OnInit {
 
   }
   getPositionList() {
-    this.dataLoading = true
+    this.position.loading = true
+    this.selectedItems.data.clear()
     this.positionService.getList().subscribe({
       next: response => {
-        this.positionList = response.map(x => new MyPositionModel(x)).map(x => ({ check: false, data: { positionId: x.positionId, tdesc: x.tdesc, edesc: x.edesc, consolidate: x.consolidate, shortName: x.shortName, companyId: x.companyId } }))
-        this.dataLoading = false
-        this.isDataListCheckedAll = false
-        this.dataListCheckAll()
-        this.searchChange()
+        this.position.dataList = response.map(x => {
+          this.selectedItems.data.set(x.positionId, false)
+          return new MyPositionModel(x)
+        })
+        this.selectedItems.key = 'positionId'
+        this.selectedItems.count = 0
+        this.position.loading = false
         this.cdr.detectChanges();
       }, error: error => {
-        this.dataLoading = false
+        this.position.loading = false
         console.error('Error fetching employee types:', error);
         this.cdr.detectChanges()
       }
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.positionListFilter().length / 10) }, (_, i) => i + 1);
-    this.dataListCheck()
-  }
-  positionListFilter() {
-    return this.positionList.filter(x => {
-      const data = x.data
-      const match = data.positionId.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 || { positionId: "", tdesc: "", edesc: "", consolidate: "", shortName: "", companyId: "" }));
+  selectPosition(position?: PositionModel) {
+    if (position) {
+      this.position.select = new MyPositionModel(position)
+    } else if (this.currentModal == 'add') {
+      this.position.select = new MyPositionModel()
+    } else if (this.currentModal == 'edit') {
+      this.position.select = new MyPositionModel({ positionId: this.position.select.positionId })
+    }
   }
 
   addPosition() {
-    const body = new MyPositionModel({ positionId: this.dataSelect.positionId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, consolidate: this.dataSelect.consolidate, shortName: this.dataSelect.shortName, companyId: this.dataSelect.companyId })
-    this.dataLoading = true
-    this.positionService.post(body).subscribe({
+    this.position.loading = true
+    this.positionService.post(this.position.select).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getPositionList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.position.loading = false
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.position.loading = false
         this.cdr.detectChanges()
       }
     })
   }
   deletePosition() {
-    let body: PositionModel | PositionModel[] = []
-    if (this.dataSelect.positionId) {
-      body = new MyPositionModel({ positionId: this.dataSelect.positionId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, consolidate: this.dataSelect.consolidate, shortName: this.dataSelect.shortName, companyId: this.dataSelect.companyId })
-    } else {
-      body = this.positionList.filter(x => x.check).map(x => new MyPositionModel({ positionId: x.data.positionId, tdesc: x.data.tdesc, edesc: x.data.edesc, consolidate: x.data.consolidate, shortName: x.data.shortName, companyId: x.data.companyId }))
-    }
-    this.dataLoading = true
+    this.position.loading = true
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const body = this.position.dataList.filter(x => selectedKeys.includes(x.positionId) && this.selectedItems.data.get(x.positionId)).map(x => new MyPositionModel(x))
     this.positionService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -161,12 +166,12 @@ export class PositionUnitComponent implements OnInit {
           this.getPositionList()
         } else {
           this.showAlert(response.message, 'error')
-          this.dataLoading = false
+          this.position.loading = false
           this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
-        this.dataLoading = false
+        this.position.loading = false
         this.cdr.detectChanges()
       }
     })
@@ -178,36 +183,20 @@ export class PositionUnitComponent implements OnInit {
     });
   }
 
-  dataListCheckAll() {
-    const selectAll = this.isDataListCheckedAll;
-    this.positionList.filter(x => {
-      const data = x.data
-      const match = data.positionId.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.positionListFilter();
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = this.positionList.filter(x => x.check).length;
-    this.isDataListChecked = Boolean(this.numDataListChecked)
-  }
 
 
-  clearPosition(modalStatus: string) {
-    if (modalStatus == 'add') {
-      this.dataSelect.positionId = ''
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
-    } else if (modalStatus == 'edit') {
-      this.dataSelect.tdesc = ''
-      this.dataSelect.edesc = ''
+  checkPrimary() {
+    return this.position.dataList.find(x => x.positionId == this.position.select.positionId)
   }
+
+  numSelectItem() {
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const num = this.position.dataList.filter(x => selectedKeys.includes(x.positionId) && this.selectedItems.data.get(x.positionId)).length
+    return num
   }
 
-  checkPrimary() {
-    return this.positionList.find(x => x.data.positionId == this.dataSelect.positionId)
+  onSelectItemChange(arg: any) {
+    this.selectedItems = arg
   }
 }
 

src/app/shared/model/position.model.ts

@@ -15,13 +15,13 @@ export class MyPositionModel implements PositionModel {
     consolidate: string
     shortName: string
     companyId: string
-    constructor(data: Partial<PositionModel>) {
-        this.positionId = data.positionId || ""
-        this.tdesc = data.tdesc || ""
-        this.edesc = data.edesc || ""
-        this.consolidate = data.consolidate || ""
-        this.shortName = data.shortName || ""
-        this.companyId = data.companyId || ""
+    constructor(data?: Partial<PositionModel>) {
+        this.positionId = data?.positionId || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+        this.consolidate = data?.consolidate || ""
+        this.shortName = data?.shortName || ""
+        this.companyId = data?.companyId || ""
 
     }
 }