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

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

 <div class="w-full min-height-50px mb-10px justify-between items-center">
-    <div class="flex justify-between">
-        <div class="flex">
-            <div class="flex items-center">
-                <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
-                    [(ngModel)]="isDataListChecked">
-                <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
-                    {{numDataListChecked}} Selected</label>
-            </div>
-            <div class="mx-1 flex items-center">
-                <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id='check-boxall'
-                    class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
-                    <i class="fs-l transition-all duration-200"
-                        [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
-                </button>
-                <label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
-            </div>
-        </div>
-        <div class="flex justify-end">
-            <div class="px-1">
-                <div class="relative shadow-md">
-                    <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                        placeholder="Search by No. or Name" [(ngModel)]="search" (ngModelChange)="searchChange()">
-                    <div
-                        class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                        <i class="ri-search-line text-gray"></i>
-                    </div>
+    <div class="flex justify-end">
+        <div class="px-1">
+            <div class="relative shadow-md">
+                <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                    placeholder="Search by No. or Name" [(ngModel)]="search">
+                <div
+                    class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                    <i class="ri-search-line text-gray"></i>
                 </div>
             </div>
-            <div class="px-1">
-                <button type="button"
-                    class=" h-45px ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
-                    data-hs-overlay="#employee-categories-upload-modal"
-                    (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
-                    <i class="ti ti-file-plus"></i>
-                    import
-                </button>
-            </div>
-            <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
-                    data-hs-overlay="#employee-categories-page-modal" (click)="modalStatus='add';setData()">
-                    <i class="ri-add-line"></i>
-                    Add
-                </button>
-            </div>
-            <div class="px-1">
-                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
-                    data-hs-overlay="#employee-categories-page-alert-modal"
-                    (click)="modalStatus='deleteGroup';setData()">
-                    <i class="ri-delete-bin-6-line"></i>
-                    Delete
-                </button>
-            </div>
-            <!-- <div class="px-1">
-                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
-                    <i class="ti ti-book fs-l"></i>
-                    Help
-                </button>
-            </div> -->
+        </div>
+        <div class="px-1">
+            <button type="button"
+                class=" h-45px ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
+                data-hs-overlay="#employee-categories-upload-modal"
+                (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
+                <i class="ti ti-file-plus"></i>
+                import
+            </button>
+        </div>
+        <div class="px-1">
+            <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
+                data-hs-overlay="#employee-categories-page-modal" (click)="currentModal='add';selectEmp_type()">
+                <i class="ri-add-line"></i>
+                Add
+            </button>
+        </div>
+        <div class="px-1">
+            <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                data-hs-overlay="#employee-categories-page-alert-modal"
+                (click)="currentModal='delete';selectEmp_type()">
+                <i class="ri-delete-bin-6-line"></i>
+                Delete
+            </button>
         </div>
     </div>
 </div>
 
 <div class="page px-rem">
-    <div class="overflow-auto table-bordered rounded-t-md">
-        <div class="overflow-auto shadow-md rounded-t-md">
-            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                <thead>
-                    <tr>
-                        <ng-container
-                            *ngFor="let item of ['','รหัสประเภทพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
-                            <th scope="col"
-                                class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
-                                <span class="font-size-12px font-weight-700">{{ item }}</span>
-                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f">
-                                    <i class="ti ti-dots-vertical fs-l"></i>
-                                </div>
-                            </th>
-                        </ng-container>
-                    </tr>
-                </thead>
-                <tbody *ngIf="dataLoading">
-                    <tr>
-                        <td class="text-center" colspan="100%">
-                            <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
-                                role="status" aria-label="loading">
-                                <span class="sr-only">Loading...</span>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-                <tbody *ngIf="!dataLoading&&!emp_typeListFilter().length">
-                    <tr>
-                        <td class="text-center" colspan="100%">
-                            ไม่พบข้อมูล
-                        </td>
-                    </tr>
-                </tbody>
-                <tbody *ngIf="!dataLoading&&emp_typeListFilter().length">
-                    <tr
-                        *ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
-                        <td class="text-center">
-                            <input type="checkbox" class="ti-form-checkbox cursor-pointer"
-                                id="checkbox-{{item.data.codeId}}" [(ngModel)]="item.check"
-                                (ngModelChange)="dataListCheck()">
-                        </td>
-                        <td class="text-center">
-                            <label for="checkbox-{{item.data.codeId}}">&nbsp;{{item.data.codeId}}</label>
-                        </td>
-                        <td>{{item.data.tdesc}}</td>
-                        <td>{{item.data.edesc}}</td>
-                        <td class="flex justify-center">
-                            <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                                (click)="modalStatus='edit';setData(item.data)"
-                                data-hs-overlay="#employee-categories-page-modal"></i>
-                            <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
-                                (click)="modalStatus='delete';setData(item.data)"
-                                data-hs-overlay="#employee-categories-page-alert-modal"></i> -->
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-    <app-pagination [totalItems]="emp_typeListFilter().length" [pageSize]="pageSize" (pageChange)="currentPage = $event"
-        (pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
+    <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="emp_type.dataList"
+        [columns]="columns" [selectedItems]="selectedItems" modalName="#employee-categories-page-modal"
+        (sendSelectData)="currentModal='edit';selectEmp_type($event)" (sendSelectedItems)="onSelectItemChange($event)">
+    </app-datagrid-syncfution>
 </div>
 
 
@@ -132,7 +50,7 @@
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
                 <h3 class="text-xxl font-bold text-primary">
-                    {{modalStatus=='add'?'เพิ่มข้อมูลประเภทพนักงาน':'แก้ไขข้อมูลประเภทพนักงาน'}}
+                    {{currentModal=='add'?'เพิ่มข้อมูลประเภทพนักงาน':'แก้ไขข้อมูลประเภทพนักงาน'}}
                 </h3>
                 <div class="flex justify-end">
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
@@ -146,7 +64,7 @@
                 <div class="flex justify-end" style="padding-right: 1rem;">
                     <div class="px-1">
                         <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
-                            (click)="clearEmp_type(modalStatus)">
+                            (click)="selectEmp_type()">
                             <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
                                 transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
@@ -162,31 +80,25 @@
                             Clear
                         </button>
                     </div>
-                    <!-- <div class="px-1">
-                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
-                            <i class="ti ti-book fs-l"></i>
-                            Help
-                        </button>
-                    </div> -->
                 </div>
             </div>
             <div class="ti-modal-body" style="margin-top: 40px;">
                 <label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน
                     <span class="text-danger">
                         *
-                        <ng-container *ngIf="modalStatus=='add'&&checkPrimary()">
+                        <ng-container *ngIf="currentModal=='add'&&checkPrimary()">
                             รหัสประเภทพนักงานซ้ำ
                         </ng-container>
                     </span></label>
                 <input type="text" id="input-label" class="ti-form-input w-1/2"
-                    [class.!border-red]="modalStatus=='add'&&checkPrimary()"
-                    [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
-                    [(ngModel)]="dataSelect.codeId">
+                    [class.!border-red]="currentModal=='add'&&checkPrimary()"
+                    [ngClass]="{'bg-input-readonly':currentModal=='edit'}" [readonly]="currentModal=='edit'"
+                    [maxLength]="5" [(ngModel)]="emp_type.select.codeId">
                 <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดประเภทพนักงาน (ไทย)<span
                         class="text-danger">*</span></label>
-                <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
+                <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_type.select.tdesc">
                 <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดประเภทพนักงาน (อังกฤษ)</label>
-                <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
+                <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="emp_type.select.edesc">
                 <div class="flex justify-end mt-2rem mb-1rem space-x-4">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
@@ -195,8 +107,8 @@
                     </button>
                     <button type="button" class="ti-btn ti-btn-success"
                         data-hs-overlay="#employee-categories-page-alert-modal"
-                        [class.ti-btn-disabled]="!dataSelect.codeId||!dataSelect.tdesc||(modalStatus=='add'&&checkPrimary())"
-                        [disabled]="!dataSelect.codeId||!dataSelect.tdesc||(modalStatus=='add'&&checkPrimary())">
+                        [class.ti-btn-disabled]="!emp_type.select.codeId||!emp_type.select.tdesc||(currentModal=='add'&&checkPrimary())"
+                        [disabled]="!emp_type.select.codeId||!emp_type.select.tdesc||(currentModal=='add'&&checkPrimary())">
                         บันทึกข้อมูล
                     </button>
                 </div>
@@ -213,14 +125,14 @@
                     แจ้งเตือน
                 </h3>
                 <div class="flex justify-end">
-                    <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
+                    <ng-container *ngIf="currentModal=='add'||currentModal=='edit'">
                         <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
                             data-hs-overlay="#employee-categories-page-modal">
                             <span class="sr-only">Close</span>
                             <i class="ti ti-circle-x fs-xxl"></i>
                         </button>
                     </ng-container>
-                    <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
+                    <ng-container *ngIf="currentModal=='delete'">
                         <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
                             data-hs-overlay="#employee-categories-page-alert-modal">
                             <span class="sr-only">Close</span>
@@ -231,21 +143,21 @@
             </div>
             <div class="ti-modal-body ">
                 <p class="mt-1 text-gray-800 dark:text-white/70">
-                    <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
+                    <ng-container *ngIf="currentModal=='add'||currentModal=='edit'">
                         ยืนยันการบันทึกข้อมูลหรือไม่
                     </ng-container>
-                    <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
-                        <ng-container *ngIf="numDataListChecked">
+                    <ng-container *ngIf="currentModal=='delete'">
+                        <ng-container *ngIf="numSelectItem()">
                             ยืนยันการลบข้อมูลหรือไม่
                         </ng-container>
-                        <ng-container *ngIf="!numDataListChecked">
+                        <ng-container *ngIf="!numSelectItem()">
                             เลือกข้อมูลที่ต้องการลบ
                         </ng-container>
                     </ng-container>
                 </p>
 
                 <div class="flex justify-end mt-2rem mb-1rem">
-                    <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
+                    <ng-container *ngIf="currentModal=='add'||currentModal=='edit'">
                         <button type="button"
                             class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                             data-hs-overlay="#employee-categories-page-modal">
@@ -256,7 +168,7 @@
                             บันทึกข้อมูล
                         </a>
                     </ng-container>
-                    <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
+                    <ng-container *ngIf="currentModal=='delete'">
                         <button type="button"
                             class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                             data-hs-overlay="#employee-categories-page-alert-modal">
@@ -264,7 +176,7 @@
                         </button>
                         <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
                             data-hs-overlay="#employee-categories-page-alert-modal" (click)="deleteEmp_type()"
-                            *ngIf="numDataListChecked">
+                            *ngIf="numSelectItem()">
                             ลบข้อมูล
                         </a>
                     </ng-container>

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;
-    });
-  }
-  setData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" }));
+  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 })
+    }
   }
 
+
+
   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)
-  }
 
+  checkPrimary() {
+    return this.emp_type.dataList.find(x => x.codeId == this.emp_type.select.codeId)
+  }
 
-  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 = ''
-    }
+  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 || ""
     }
 }