จัดการผู้ใช้งาน

src/app/components/company-components/account-settings/manage-user/manage-user.component.html

@@ -3,110 +3,21 @@
         <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" style="height: 40px;" [(ngModel)]="search"
-                    (ngModelChange)="searchChange()">
+                    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>
-        <!-- <div class="px-1">
-            <button type="button" 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>
 
 <div class="page px-rem">
-    <div class="overflow-auto shadow-md rounded-t-md">
-        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
-            <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">
-                                <i class="ti ti-dots-vertical fs-l"></i>
-                            </div>
-                        </th>
-                    </ng-container>
-                </tr>
-            </thead>
-            <tbody *ngIf="user.loading">
-                <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="!user.loading&&!userListFilter().length">
-                <tr>
-                    <td class="text-center" colspan="100%">
-                        ไม่พบข้อมูล
-                    </td>
-                </tr>
-            </tbody>
-            <tbody *ngIf="!user.loading&&userListFilter().length">
-                <tr
-                    *ngFor="let item of userListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
-                    <td class="text-center">{{item.data.usernameId}} </td>
-                    <td class="text-center">{{item.data.empId}}</td>
-                    <td>{{item.data.employee.fname}}</td>
-                    <td>{{item.data.employee.lname}}</td>
-                    <td class="text-center">{{item.data.status=='0'?'ไม่ใช้งาน':'ใช้งาน'}}</td>
-                    <td class="flex justify-center">
-                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="changePassword=false;selectUser(item.data)"
-                            data-hs-overlay="#manage-user-modal"></i>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
-        <ul class="ti-pagination">
-            <li>
-                <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                    (click)="currentPage = (currentPage-1 || 1)">
-                    <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                </a>
-            </li>
-            <li *ngFor="let item of page;let f = first;let l = last">
-                <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
-                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                    </a>
-                </ng-container>
-                <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
-                    <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
-                        (click)="currentPage=item">{{item}}
-                    </a>
-                </ng-container>
-                <ng-container
-                    *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
-                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
-                    </a>
-                </ng-container>
-            </li>
-            <li>
-                <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                    (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
-                    <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                </a>
-            </li>
-        </ul>
-        <ul class="nav-tabs mt-3">
-            <span>Show {{((currentPage-1) * 10)+1}} to {{userListFilter().length<10 ?userListFilter().length:
-                    (currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - userListFilter().length) )
-                    :(currentPage * 10) ) }} of {{userListFilter().length}} items</span>
-        </ul>
-    </nav>
+    <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="user.dataList"
+        [checkBoxSetting]="false" [columns]="columns" modalName="#manage-user-modal"
+        (sendSelectData)="selectUser($event)">
+    </app-datagrid-syncfution>
 </div>
 
 

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

 import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { MyUserModel, UserModel } from 'src/app/shared/model/user.model';
 import { FileService } from 'src/app/shared/services/file.service';
@@ -16,10 +17,8 @@ export interface DataPassword {
   styleUrls: ['./manage-user.component.scss']
 })
 export class ManageUserComponent {
-  currentPage = 1
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
   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: [] }
   search = ""
 
   userPassword: DataPassword = {
@@ -31,6 +30,38 @@ export class ManageUserComponent {
   }
 
   changePassword = false
+
+  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
+  }
   constructor(private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private userService: UserService) {
@@ -54,9 +85,10 @@ export class ManageUserComponent {
     this.user.loading = true
     this.userService.getList("false").subscribe({
       next: response => {
-        this.user.dataList = response.map(x => ({ check: false, data: new MyUserModel(x) }))
+        this.user.dataList = response.map(x => {
+          return new MyUserModel({ ...x, status: x.status == '1' ? 'ใช้งาน' : 'ไม่ใช้งาน' })
+        })
         this.user.loading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.user.loading = false
@@ -64,17 +96,9 @@ export class ManageUserComponent {
       }
     })
   }
-  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
-    })
-  }
+
   selectUser(data: UserModel) {
-    this.user.select = new MyUserModel(data)
+    this.user.select = new MyUserModel({ ...data, companyId: data?.companyId || this.companyId, status: data.status == 'ใช้งาน' ? '1' : '0' })
     this.userPassword = {
       usernameId: this.user.select.usernameId,
       empId: this.user.select.empId,
@@ -114,7 +138,6 @@ export class ManageUserComponent {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getUserList()
-          this.searchChange()
         } else {
           this.showAlert(response.message, 'error')
           this.user.loading = false
@@ -127,10 +150,6 @@ export class ManageUserComponent {
       }
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.userListFilter().length / 10) }, (_, i) => i + 1);
-  }
   selectDataModal(target: { [key: string]: any }, field: string, data: any) {
     target[field] = JSON.parse(JSON.stringify(data))
   }

src/app/components/company-components/account-settings/set-a-password/set-a-password.component.html

@@ -3,7 +3,7 @@
         <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" style="height: 40px;" [(ngModel)]="search">
+                    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>