สร้างชื่อผู้ใช้งาน

src/app/components/company-components/account-settings/user-settings/user-settings.component.ts

 import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
 import { LevelModel, MyLevelModel } from 'src/app/shared/model/level.model';
@@ -20,24 +21,52 @@ export interface DataModal {
 export class UserSettingsComponent {
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
-  currentModal: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add"
-  currentPage = 1
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  currentModal: 'add' | 'edit' | 'delete' = "add"
+  search = ""
   modal: DataModal = {
     search: "",
     currentPage: 1,
     page: Array.from({ length: 1 }, (_, i) => i + 1)
   }
-  numDataListChecked = 0
-  isDataListChecked = false
-  isDataListCheckedAll = false
+
   companyId = ""
-  user: { loading: boolean, select: UserModel, dataList: { check: boolean, data: UserModel }[] } = { loading: false, select: new MyUserModel(), dataList: [] }
+  user: { loading: boolean, select: UserModel, dataList: UserModel[] } = { loading: false, select: new MyUserModel(), dataList: [] }
   employee: { loading: boolean, select: EmployeeModel, dataList: { check: boolean, data: EmployeeModel }[] } = { loading: false, select: new MyEmployeeModel(), dataList: [] }
   role: { loading: boolean, select: RoleModel, dataList: { check: boolean, data: RoleModel }[] } = { loading: false, select: new MyRoleModel(), dataList: [] }
   level: { loading: boolean, select: LevelModel, dataList: { check: boolean, data: LevelModel }[] } = { loading: false, select: new MyLevelModel(), dataList: [] }
 
-  search = ""
+  columns: ColumnModel[] = [{
+    field: "usernameId",
+    headerText: "ชื่อล็อกอิน",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "empId",
+    headerText: "รหัสพนักงาน",
+    type: "string"
+  },
+  {
+    field: "employee.fname",
+    headerText: "ชื่อ",
+    type: "string"
+  },
+  {
+    field: "employee.lname",
+    headerText: "นามสกุล",
+    type: "string"
+  },
+  {
+    field: "status",
+    headerText: "สถานะ",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['usernameId', 'empId', 'fname', 'lname', 'status'],
+    operator: 'contains',
+    ignoreCase: false
+  }
+  selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
   constructor(private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private userService: UserService,
@@ -66,7 +95,6 @@ export class UserSettingsComponent {
       next: response => {
         this.level.dataList = response.map(x => ({ check: false, data: new MyLevelModel(x) }))
         this.level.loading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.level.loading = false
@@ -92,7 +120,6 @@ export class UserSettingsComponent {
       next: response => {
         this.role.dataList = response.map(x => ({ check: false, data: new MyRoleModel(x) }))
         this.role.loading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.role.loading = false
@@ -118,7 +145,6 @@ export class UserSettingsComponent {
       next: response => {
         this.employee.dataList = response.map(x => ({ check: false, data: new MyEmployeeModel(x) }))
         this.employee.loading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.employee.loading = false
@@ -142,11 +168,13 @@ export class UserSettingsComponent {
     this.user.loading = true
     this.userService.getList().subscribe({
       next: response => {
-        this.user.dataList = response.map(x => ({ check: false, data: new MyUserModel(x) }))
-        this.isDataListCheckedAll = false
-        this.dataListCheckAll()
+        this.user.dataList = response.map(x => {
+          this.selectedItems.data.set(x.usernameId, false)
+          return new MyUserModel({ ...x, status: x.status == '1' ? 'ใช้งาน' : 'ไม่ใช้งาน' })
+        })
+        this.selectedItems.key = 'usernameId'
+        this.selectedItems.count = 0
         this.user.loading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.user.loading = false
@@ -154,17 +182,21 @@ export class UserSettingsComponent {
       }
     })
   }
-  userListFilter() {
-    return this.user.dataList.filter(x => {
-      const data = x.data
-      const match = data.usernameId.toLowerCase().includes(this.search.toLowerCase()) ||
-        data.empId.toLowerCase().includes(this.search.toLowerCase()) ||
-        data.employee.thFullName.toLowerCase().includes(this.search.toLowerCase())
-      return match
-    })
+
+  searchModalChange(dataList: any[]) {
+    this.modal.currentPage = 1
+    this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
+    this.cdr.markForCheck()
   }
+
   selectUser(data?: UserModel) {
-    this.user.select = new MyUserModel({ ...data, companyId: data?.companyId || this.companyId, status: data?.status || '0' })
+    if (data) {
+      this.user.select = new MyUserModel({ ...data, companyId: data?.companyId || this.companyId, status: data.status == 'ใช้งาน' ? '1' : '0' })
+    } else if (this.currentModal == 'add') {
+      this.user.select = new MyUserModel({ companyId: this.companyId, status: '0' })
+    } else if (this.currentModal == 'edit') {
+      this.user.select = new MyUserModel({ usernameId: this.user.select.usernameId, companyId: this.companyId, status: '0' })
+    }
   }
   onFileSelected(event: any) {
     this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
@@ -239,11 +271,8 @@ export class UserSettingsComponent {
     let body: UserModel | UserModel[]
     switch (this.currentModal) {
       case ('delete'): {
-        body = [new MyUserModel(this.user.select)]
-        break;
-      }
-      case ('deleteGroup'): {
-        body = this.user.dataList.filter(x => x.check).map(x => new MyUserModel(x.data))
+        const selectedKeys = Array.from(this.selectedItems.data.keys());
+        body = this.user.dataList.filter(x => selectedKeys.includes(x.usernameId) && this.selectedItems.data.get(x.usernameId)).map(x => new MyUserModel({ ...x, status: x.status == 'ใช้งาน' ? '1' : '0' }))
         break;
       }
       default: {
@@ -255,7 +284,6 @@ export class UserSettingsComponent {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getUserList()
-          this.searchChange()
         } else {
           this.showAlert(response.message, 'error')
           this.user.loading = false
@@ -268,16 +296,7 @@ export class UserSettingsComponent {
       }
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.userListFilter().length / 10) }, (_, i) => i + 1);
-    this.dataListCheck()
-  }
-  searchModalChange(dataList: any[]) {
-    this.modal.currentPage = 1
-    this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
-    this.cdr.markForCheck()
-  }
+
   selectDataModal(target: { [key: string]: any }, field: string, data: any) {
     target[field] = JSON.parse(JSON.stringify(data))
   }
@@ -298,26 +317,18 @@ export class UserSettingsComponent {
     })
   }
 
-  dataListCheckAll() {
-    const selectAll = this.isDataListCheckedAll;
-    this.user.dataList.filter(x => {
-      const data = x.data
-      const match = data.usernameId.toLowerCase().includes(this.search.toLowerCase()) ||
-        data.empId.toLowerCase().includes(this.search.toLowerCase()) ||
-        data.employee.thFullName.toLowerCase().includes(this.search.toLowerCase())
-      return match
-    }).forEach(x => x.check = selectAll);
-    this.dataListCheck();
+
+  checkPrimary() {
+    return this.user.dataList.find(x => x.usernameId == this.user.select.usernameId)
   }
 
-  dataListCheck() {
-    const dataCheck = this.userListFilter();
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = this.user.dataList.filter(x => x.check).length;
-    this.isDataListChecked = Boolean(this.numDataListChecked)
+  numSelectItem() {
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const num = this.user.dataList.filter(x => selectedKeys.includes(x.usernameId) && this.selectedItems.data.get(x.usernameId)).length
+    return num
   }
 
-  checkPrimary() {
-    return this.user.dataList.find(x => x.data.usernameId == this.user.select.usernameId)
+  onSelectItemChange(arg: any) {
+    this.selectedItems = arg
   }
 }