syncfution

การจัดการข้อมูลองค์กร
ทะเบียนบริษัท
หน่วยธุรกิจ
ทะเบียนฝ่าย

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

@@ -21,7 +21,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" [(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>
@@ -66,9 +66,12 @@
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
-                <h3 class="text-xxl font-bold text-primary">
+                <h3 class="text-xxl font-bold text-primary" *ngIf="currentModel=='add'">
                     เพิ่มข้อมูลทะเบียนฝ่าย
                 </h3>
+                <h3 class="text-xxl font-bold text-primary" *ngIf="currentModel=='edit'">
+                    แก้ไขข้อมูลทะเบียนฝ่าย
+                </h3>
                 <div class="flex justify-end">
                     <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
                         data-hs-overlay="#department-register-modal">

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.ts

@@ -22,26 +22,25 @@ export class DepartmentRegisterComponent implements OnInit {
   currentModel: 'add' | 'edit' | 'delete' = "add"
   bu1: { loading: boolean, select: Bu1Model, dataList: Bu1Model[] } = { loading: false, select: new MyBu1Model(), dataList: [] }
   columns: ColumnModel[] = [{
-    "field": "bu1id",
-    "headerText": "รหัสกลุ่มการอนุมัติ",
+    field: "bu1id",
+    headerText: "รหัสกลุ่มการอนุมัติ",
+    type: "string",
     isPrimaryKey: true,
   },
   {
-    "field": "tdesc",
-    "headerText": "รายละเอียดฝ่าย(ไทย)"
+    field: "tdesc",
+    headerText: "รายละเอียดฝ่าย(ไทย)",
+    type: "string"
   },
   {
-    "field": "edesc",
-    "headerText": "รายละเอียดฝ่าย(อังกฤษ)"
+    field: "edesc",
+    headerText: "รายละเอียดฝ่าย(อังกฤษ)",
+    type: "string"
   }]
   searchSettings = {
     fields: ['bu1id', 'tdesc', 'edesc'],
     operator: 'contains',
-    ignoreCase: true,
-    // customMatchCase: (cellValue: string, searchValue: string) => {
-    //   return cellValue.toString().toLowerCase() === '00';
-    // }
-
+    ignoreCase: false
   };
   constructor(private bu1Service: Bu1Service,
     private toastr: ToastrService,
@@ -96,10 +95,8 @@ export class DepartmentRegisterComponent implements OnInit {
         this.showAlert(error.message, 'error')
       }
     })
-
   }
 
-
   getBu1List() {
     this.bu1.loading = true
     this.bu1Service.getList().subscribe({
@@ -109,9 +106,8 @@ export class DepartmentRegisterComponent implements OnInit {
           return new MyBu1Model(x)
         })
         this.selectedItems.key = 'bu1id'
-        console.log(" 🐒 this.selectedItems:", this.selectedItems)
+        this.selectedItems.count = 0
         this.bu1.loading = false
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.bu1.loading = false
@@ -119,19 +115,15 @@ export class DepartmentRegisterComponent implements OnInit {
       }
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.bu1ListFilter().length / 10) }, (_, i) => i + 1)
-  }
-  bu1ListFilter() {
-    return this.bu1.dataList.filter(x => {
-      return x.bu1id.toLowerCase().includes(this.search.toLowerCase()) ||
-        x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
-        x.edesc.toLowerCase().includes(this.search.toLowerCase())
-    })
-  }
+
   selectBu1(bu1?: Bu1Model) {
-    this.bu1.select = new MyBu1Model(bu1)
+    if (bu1) {
+      this.bu1.select = new MyBu1Model(bu1)
+    } else if (this.currentModel == 'add') {
+      this.bu1.select = new MyBu1Model()
+    } else if (this.currentModel == 'edit') {
+      this.bu1.select = new MyBu1Model({ bu1id: this.bu1.select.bu1id })
+    }
   }
 
   showAlert(text: string, type: 'success' | 'error') {
@@ -159,28 +151,22 @@ export class DepartmentRegisterComponent implements OnInit {
   }
   deleteBu1() {
     this.bu1.loading = true
-    const body = this.bu1.dataList.filter(x => {
-      if (Array.from(this.selectedItems.data.keys()).find((y: any) => y == x.bu1id) && Array.from(this.selectedItems.data.values()).find((y: any) => y)) {
-        return true
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const body = this.bu1.dataList.filter(x => selectedKeys.includes(x.bu1id) && this.selectedItems.data.get(x.bu1id)).map(x => new MyBu1Model(x))
+    this.bu1Service.delete(body).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getBu1List()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.bu1.loading = false
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.bu1.loading = false
       }
-      return false
-    }
-    ).map(x => new MyBu1Model(x))
-    console.log(" 🐒 body:", body)
-    // this.bu1Service.delete(body).subscribe({
-    //   next: response => {
-    //     if (response.success) {
-    //       this.showAlert(response.message, 'success')
-    //       this.getBu1List()
-    //     } else {
-    //       this.showAlert(response.message, 'error')
-    //       this.bu1.loading = false
-    //     }
-    //   }, error: error => {
-    //     this.showAlert(error.message, 'error')
-    //     this.bu1.loading = false
-    //   }
-    // })
+    })
   }
 
   checkPrimary() {

src/app/components/datagrid-syncfution/datagrid-syncfution.component.html

-<ejs-grid #grid id='Grid' [dataSource]="dataSource" [allowFiltering]="allowFiltering" [filterSettings]="filterSettings"
-  [searchSettings]="searchSettings" [groupSettings]="groupSettings" [toolbar]='toolbarOptions'
-  [editSettings]="editSettings" showColumnMenu='true' allowPaging='true' allowGrouping='true' allowSorting='true'
-  showColumnMenu='true' allowFiltering='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'
-  [allowExcelExport]='true' [selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)'
-  width="auto" allowReordering='true' [loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60'
-  allowEditing='false' [pageSettings]='initialPage' [allowMultiSorting]='true'>
+<ejs-grid #grid id='Grid' [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
+  [filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
+  [groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" showColumnMenu='true'
+  allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true' allowFiltering='true'
+  [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
+  [selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)' width="auto" allowReordering='true'
+  [loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
+  [allowMultiSorting]='true'>
 
   <e-columns>
-    <!-- <e-column type='checkbox' width='50' *ngIf="checkBoxSetting"></e-column> -->
     <e-column [textAlign]="'center'" *ngIf="checkBoxSetting" [allowEditing]="false">
       <ng-template #headerTemplate let-data>
         <input type="checkbox" [id]="'checkbox-all'" class="ti-form-checkbox cursor-pointer"
           [checked]="selectedItemsAll" (click)="toggleSelectionAll()">
-        <label [for]="'checkbox-all'" class="text-sm text-gray-500 mx-2">
-          {{selectedItems.count}} Selected</label>
+        <label [for]="'checkbox-all'" class="font-size-12px font-weight-700 text-primary">
+          &nbsp;{{selectedItems.count}} Selected</label>
       </ng-template>
       <ng-template #template let-data>
         <input type="checkbox" class="ti-form-checkbox cursor-pointer"

src/app/components/datagrid-syncfution/datagrid-syncfution.component.ts

@@ -8,11 +8,31 @@ import {
   ViewChild,
   SimpleChanges
 } from '@angular/core';
-import { EditService, ReorderService, SortService, GroupService, ColumnMenuService, PageService, FilterService, SelectionSettingsModel, ToolbarItems, ToolbarService, GridComponent, PdfExportService, ExcelExportService, DetailRowService, DetailDataBoundEventArgs, Grid, AggregateService, PdfExportProperties, LoadingIndicatorModel } from '@syncfusion/ej2-angular-grids';
+import {
+  EditService,
+  SearchService,
+  ReorderService,
+  SortService,
+  GroupService,
+  ColumnMenuService,
+  PageService,
+  FilterService,
+  SelectionSettingsModel,
+  ToolbarItems,
+  ToolbarService,
+  GridComponent,
+  PdfExportService,
+  ExcelExportService,
+  DetailRowService,
+  DetailDataBoundEventArgs,
+  Grid,
+  AggregateService,
+  PdfExportProperties,
+  LoadingIndicatorModel
+} from '@syncfusion/ej2-angular-grids';
 import { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { L10n, setCulture } from '@syncfusion/ej2-base';
-
 setCulture('th-TH');
 
 L10n.load({
@@ -48,17 +68,23 @@ L10n.load({
   selector: 'app-datagrid-syncfution',
   templateUrl: './datagrid-syncfution.component.html',
   styleUrls: ['./datagrid-syncfution.component.scss'],
-  providers: [AggregateService, SortService, GroupService, ColumnMenuService, PageService, FilterService, ToolbarService, PdfExportService, ExcelExportService, DetailRowService, ReorderService, EditService],
+  providers: [AggregateService, SortService, GroupService, ColumnMenuService, PageService, FilterService, ToolbarService, PdfExportService, ExcelExportService, DetailRowService, ReorderService, EditService, SearchService],
   encapsulation: ViewEncapsulation.None
 })
 export class DatagridSyncfutionComponent implements OnInit {
   @ViewChild('grid') public grid?: GridComponent;
   @Input() dataSource: any[] = [];
+  dataSourceSearch: any[] = [];
+  dataSourceFilter: any[] = [];
   @Output() sendSelectData = new EventEmitter<any>();
   @Input() columns: ColumnModel[] = [];
   // @Input() toolbarOptions?: ToolbarItems[]
   @Input() toolbarOptions?: ToolbarItems[] = ['Print', 'ExcelExport', 'CsvExport'];
-  @Input() searchSettings = {}
+  @Input() searchSettings: any = {
+    fields: [],
+    operator: 'contains',
+    ignoreCase: true,
+  };
   @Input() selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
   selectedItemsAll = false
   @Output() sendSelectedItems = new EventEmitter<any>();
@@ -90,7 +116,6 @@ export class DatagridSyncfutionComponent implements OnInit {
 
   // ตัวอย่าง event เมื่อมีการลบ / แก้ไข
   @Output() actionBegin = new EventEmitter<any>();
-  @Output() actionComplete = new EventEmitter<any>();
   // อาจมี event อื่น ๆ เช่น pageChange, filterChange, ฯลฯ
   // แล้วแต่ logic ที่ต้องการให้ parent รู้
   // @Output() pageChanged = new EventEmitter<number>();
@@ -108,17 +133,20 @@ export class DatagridSyncfutionComponent implements OnInit {
     this.query = new Query().addParams('dataCount', '1000');
     this.loadingIndicator = { indicatorType: 'Shimmer' };
     if (changes) {
-      console.log('this.dataSource', this.dataSource)
       if (changes['searchText']) {
         this.search(changes['searchText'].currentValue)
       }
+      if (changes['dataSource']) {
+        this.dataSourceSearch = JSON.parse(JSON.stringify(this.dataSource || []))
+        this.dataSourceFilter = JSON.parse(JSON.stringify(this.dataSource || []))
+      }
     }
   }
   onSelectData(args: any) {
     this.sendSelectData.emit(args);
   }
   onNextPage(args: any) {
-    console.log(args)
+    // console.log(args)
   }
 
   toolbarClick(args: any): void {
@@ -133,15 +161,23 @@ export class DatagridSyncfutionComponent implements OnInit {
 
   search(text: string) {
     if (this.grid) {
-      (this.grid as GridComponent).search(this.searchText);
-      // let filteredData = (this.grid as GridComponent).getCurrentViewRecords();
-      // console.log(filteredData);
-      // const clonedData = JSON.parse(JSON.stringify(this.dataSource));
-      // new DataManager(clonedData).executeQuery(new Query().search(this.searchText, [], undefined, true)).then((e: any) => {
-      //   console.log('Searched Records:', e.result)
-      // });
+      if (this.searchSettings.fields.length) {
+        this.dataSourceSearch = JSON.parse(JSON.stringify(this.filterData(text, this.searchSettings.fields)));
+        this.dataSourceFilter = JSON.parse(JSON.stringify(this.filterData(text, this.searchSettings.fields)));
+      } else {
+        (this.grid as GridComponent).search(text);
+      }
     }
   }
+  filterData(text: string, fields: string[]): any[] {
+    return this.dataSource.filter(item => {
+      return fields.some(field =>
+        item[field]?.toString().toLowerCase().includes(text.toLowerCase())
+      );
+    });
+  }
+
+
 
   detailDataBound(e: DetailDataBoundEventArgs) {
     let detail = new Grid({
@@ -174,9 +210,19 @@ export class DatagridSyncfutionComponent implements OnInit {
   toggleSelectionAll() {
     this.selectedItemsAll = !this.selectedItemsAll;
     this.selectedItems.data.forEach((_, key) => {
-      this.selectedItems.data.set(key, this.selectedItemsAll);
+      if (this.dataSourceFilter.find((x: any) => x[this.selectedItems.key] == key)) {
+        this.selectedItems.data.set(key, this.selectedItemsAll);
+      }
     });
-    this.selectedItems.count = this.selectedItemsAll ? this.selectedItems.data.size : 0;
+    this.selectedItems.count = Array.from(this.selectedItems.data.values()).filter(v => v).length;
     this.sendSelectedItems.emit(this.selectedItems);
   }
+
+  actionComplete(args: any) {
+    if (args.requestType === 'filtering') {
+      if (this.grid) {
+        this.dataSourceFilter = ((this.grid as GridComponent).getFilteredRecords() as any).length ? ((this.grid as GridComponent).getFilteredRecords() as any) : JSON.parse(JSON.stringify(this.dataSourceSearch || []));
+      }
+    }
+  }
 }