syncfution

package.json

@@ -78,7 +78,17 @@
     "swiper": "^8.4.6",
     "tslib": "^2.5.3",
     "wnumb": "^1.2.0",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.13.1",
+    "@syncfusion/ej2-angular-base": "26.2.10",
+    "@syncfusion/ej2-angular-dropdowns": "26.2.13",
+    "@syncfusion/ej2-angular-grids": "26.2.14",
+    "@syncfusion/ej2-angular-inputs": "26.2.14",
+    "@syncfusion/ej2-base": "26.2.10",
+    "@syncfusion/ej2-buttons": "26.2.10",
+    "@syncfusion/ej2-data": "26.2.14",
+    "@syncfusion/ej2-dropdowns": "26.2.13",
+    "@syncfusion/ej2-grids": "26.2.14",
+    "@syncfusion/ej2-inputs": "26.2.14"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.1.1",

src/app/components/dashboard/dashboard.module.ts

@@ -165,6 +165,10 @@ import { ConfigPermissionService } from 'src/app/shared/services/config-permissi
 import { TimeAttendanceManageComponent } from '../performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component';
 import { TimeAttendanceStatisticsComponent } from '../performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component';
 import { TokenService } from 'src/app/shared/services/token.service';
+import { GridModule } from '@syncfusion/ej2-angular-grids'
+import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
+import { RatingModule } from '@syncfusion/ej2-angular-inputs';
+import { DatagridSyncfutionComponent } from '../datagrid-syncfution/datagrid-syncfution.component';
 
 
 export const MY_DATE_FORMATS = {
@@ -295,6 +299,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     RolePermissionConfigComponent,
     TimeAttendanceManageComponent,
     TimeAttendanceStatisticsComponent,
+    DatagridSyncfutionComponent
   ],
   imports: [
     CommonModule,
@@ -313,6 +318,9 @@ export class CustomDateAdapter extends NativeDateAdapter {
     MatInputModule,
     MatFormFieldModule,
     MatIconModule,
+    GridModule,
+    DropDownListModule,
+    RatingModule
   ],
   providers: [
     Bu1Service,

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

+<ejs-grid #grid id='Grid' [dataSource]="dataSource" [allowFiltering]="allowFiltering" [filterSettings]="filterSettings"
+  [groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings"
+  (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"
+  (rowSelected)="onRowSelectedCheckbox($event.data)" (rowDeselected)="onRowDeselectedCheckbox($event.data)"
+  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 *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
+      [format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="col.editType"
+      [validationRules]="col.validationRules" [allowEditing]="'true'" [allowSorting]="'true'" [allowFiltering]="true"
+      [visible]="col.visible" [type]="col.type">
+      <ng-template #headerTemplate let-data>
+        <span class="font-size-12px font-weight-700 text-primary">{{ col.headerText }}</span>
+      </ng-template>
+    </e-column>
+    <e-column headerText='action' width='150' textAlign='Center' *ngIf="actionSetting">
+      <ng-template #headerTemplate let-data>
+        <span class="font-size-12px font-weight-700 text-primary">การจัดการ</span>
+      </ng-template>
+      <ng-template #template let-data>
+        <i class="ti ti-eye cursor-pointer i-gray fs-l px-1" (click)="onNextPage(data)" *ngIf="canChild"></i>
+        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#modal-detail" *ngIf="canEdit"
+          (click)="onViewSelected(data)"></i>
+        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#modal-delete" *ngIf="canDelete"
+          (click)="onRemoveSelected(data)"></i>
+      </ng-template>
+    </e-column>
+  </e-columns>
+
+  <!-- Add Aggregates -->
+  <!-- <e-aggregates>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let col of columns" [field]="col.field" [type]="'Count'"
+          [footerTemplate]="'รวมทั้งหมด: ${Count}'" [textAlign]="'Right'">
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+  </e-aggregates> -->
+
+</ejs-grid>

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

+// th{
+//   position: relative;         // เทียบเท่า class "relative"
+//   padding: 10px;              // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
+//   background-color: rgb(96 165 250 / 0.1);  // ตัวอย่างแทน "bg-soft-secondary"
+//   color: #2b2b2b;             // ตัวอย่างแทน "text-primary"
+//   text-align: center !important;  // เทียบเท่า "!text-center"
+
+//   // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
+//   font-weight: 600;
+//   border-bottom: 1px solid #eee;
+// }
+.e-headercell,
+.e-detailheadercell {
+  background-color: rgb(96 165 250 / 0.1) !important;
+}
+
+.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
+  background: rgb(96 165 250) !important;
+  color: #fff;
+  opacity: 1 !important;
+}
+
+
+.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
+  background-color: rgb(96 165 250) !important;
+  border-color: transparent;
+  color: #fff;
+}
+
+.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
+  border: 1px solid !important;
+  border-radius: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "e-icons";
+  height: 18px;
+  line-height: 10px;
+  padding: 2px 0;
+  text-align: center;
+  vertical-align: middle;
+  width: 1rem !important;
+  border-color: #64748b !important;
+}
+
+.e-grid td.e-selectionbackground {
+  background-color: #aec2ec !important;
+}

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

+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewEncapsulation,
+  OnInit,
+  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 { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
+import { Query } from '@syncfusion/ej2-data';
+import { L10n, setCulture } from '@syncfusion/ej2-base';
+setCulture('th-TH');
+
+L10n.load({
+  'en-US': {
+    'pager': {
+      'currentPageInfo': '',
+      'totalItemsInfo': '{1} to {2} of {0}',
+    }
+  },
+  'th-TH': {
+    'pager': {
+      'currentPageInfo': '',
+      'totalItemsInfo': '{0} รายการ',
+      'totalRecordsInfo': '{0} รายการ',
+      'firstPageTooltip': 'หน้าแรก',
+      'lastPageTooltip': 'หน้าสุดท้าย',
+      'nextPageTooltip': 'ถัดไป',
+      'previousPageTooltip': 'ก่อนหน้า',
+      'nextPagerTooltip': 'ถัดไป',
+      'previousPagerTooltip': 'ก่อนหน้า',
+      'pageInput': '{0}',
+      'page': 'หน้า',
+      'pagerDropDown': 'รายการ',
+      'pagerAll': 'ทั้งหมด',
+      'pageSize': 'รายการต่อหน้า',
+      'pageSizeAll': 'ทั้งหมด',
+      'pageCount': 'จำนวนหน้า',
+      'pageCountAll': 'ทั้งหมด'
+    }
+  }
+});
+@Component({
+  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],
+  encapsulation: ViewEncapsulation.None
+})
+export class DatagridSyncfutionComponent implements OnInit {
+
+  /**
+   *  ======================
+   *  @Input() ส่วนรับค่า
+   *  ======================
+   */
+  @ViewChild('grid') public grid?: GridComponent;
+  @Input() checkBoxSetting = true
+  @Input() actionSetting = true
+  @Input() detailSetting = false
+  @Input() childList = ''
+  @Input() searchText = ''
+  @Input() dataSource: any[] = [];  // ข้อมูลที่จะแสดงในตาราง
+  @Input() columns: ColumnModel[] = []; // กำหนดโครงสร้างของคอลัมน์
+  @Input() childColumns: ColumnModel[] = [];
+  @Input() allowSorting = true;
+  @Input() allowFiltering = true;
+  @Input() filterSettings?: FilterSettingsModel = { type: 'Excel' };;
+  @Input() groupSettings?: GroupSettingsModel = { allowReordering: true, showGroupedColumn: true, showDropArea: false };
+  public selectionOptions?: SelectionSettingsModel = { checkboxOnly: true };
+  // ตัวอย่างการตั้งค่าอื่น ๆ ตามต้องการ
+  @Input() toolbarOptions?: ToolbarItems[] = ['Print', 'ExcelExport', 'CsvExport'];
+  @Input() editSettings? = { allowEditing: true, mode: 'Batch' };
+  @Input() initialPage? = { pageSizes: true, pageSize: 10 };
+  @Input() canDelete = true
+  @Input() canChild = false
+  @Input() canEdit = true
+  // ... เป็นต้น
+  public query: Query = new Query().addParams('dataCount', '1000');
+  loadingIndicator : LoadingIndicatorModel = { indicatorType: 'Shimmer' };
+  /**
+   *  ======================
+   *  @Output() ส่วนส่ง Event
+   *  ======================
+   */
+  // ตัวอย่าง event เมื่อเลือกแถว
+  @Output() rowSelected = new EventEmitter<any>();
+  @Output() childSelected = new EventEmitter<any>();
+  @Output() rowRemoveSelected = new EventEmitter<any>();
+  @Output() rowSelectedCheckbox = new EventEmitter<any>();
+  @Output() rowDeselectedCheckbox = new EventEmitter<any>();
+
+  // ตัวอย่าง event เมื่อมีการลบ / แก้ไข
+  @Output() actionBegin = new EventEmitter<any>();
+  @Output() actionComplete = new EventEmitter<any>();
+  public selectedRecord?: any;
+  // อาจมี event อื่น ๆ เช่น pageChange, filterChange, ฯลฯ
+  // แล้วแต่ logic ที่ต้องการให้ parent รู้
+  // @Output() pageChanged = new EventEmitter<number>();
+  // @Output() filterChanged = new EventEmitter<FilterEventArgs>();
+  // ...
+
+  ngOnInit(): void {
+    // this.query = new Query().addParams('dataCount', '1000');
+    this.loadingIndicator = { indicatorType: 'Shimmer' };
+    // ถ้ามี logic ของ child เอง เช่นตั้งค่าเริ่มต้น
+    // ให้เขียนตรงนี้ได้
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(changes)
+    this.query = new Query().addParams('dataCount', '1000');
+    this.loadingIndicator = {indicatorType: 'Shimmer'};
+    if (changes) {
+      if (changes['searchText']) {
+        this.search(changes['searchText'].currentValue)
+      }
+
+    }
+    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+    //Add '${implements OnChanges}' to the class.
+
+  }
+
+  /**
+   *  =============================
+   *  ฟังก์ชันที่ผูกกับ Event ของ <ejs-grid>
+   *  =============================
+   */
+
+  public onViewSelected(args: any) {
+    // เมื่อมีการ select row
+    this.rowSelected.emit(args);
+  }
+
+  public onNextPage(args: any) {
+    // เมื่อมีการ select row
+    this.childSelected.emit(args);
+  }
+
+  public onRemoveSelected(args: any) {
+    // เมื่อมีการ select row
+    this.rowRemoveSelected.emit(args);
+  }
+
+  public onRowSelectedCheckbox(args: any) {
+    // เมื่อมีการ select row
+    this.rowSelectedCheckbox.emit(args);
+  }
+
+  public onRowDeselectedCheckbox(args: any) {
+    // เมื่อมีการ select row
+    this.rowDeselectedCheckbox.emit(args);
+
+  }
+
+  public onActionBegin(args: any) {
+    this.actionBegin.emit(args);
+  }
+  public onActionComplete(args: any) {
+    this.actionComplete.emit(args);
+  }
+
+  toolbarClick(args: any): void {
+    // if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
+    //   const pdfExportProperties: PdfExportProperties = {
+    //     exportType: 'CurrentPage'
+    //   };
+    //   this.grid/pdfExport(pdfExportProperties);
+
+    // }
+    if (args.item.id === 'Grid_excelexport') {
+      // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
+      this.grid?.excelExport();
+    }
+    else if (args.item.id === 'Grid_csvexport') {
+      // 'Grid_csvexport' -> Grid component id + _ + toolbar item name
+      this.grid?.csvExport();
+    }
+
+    // (this.grid as GridComponent).excelExport();
+  }
+
+  showDetails(data: any) {
+    console.log(data)
+    this.selectedRecord = data;
+    this.rowSelected.emit(this.selectedRecord);
+  }
+
+  search(text?: string) {
+    if(text){
+      (this.grid as GridComponent).search(text);
+    }
+  }
+
+  detailDataBound(e: DetailDataBoundEventArgs) {
+    console.log(e)
+    let detail = new Grid({
+      // ─────────────────────────────────────────────────────────────
+      // เดิมเป็น data.filter(...) เทียบ EmployeeID
+      // เปลี่ยนมาใช้ e.data.massessesList โดยตรง
+      // ─────────────────────────────────────────────────────────────
+      dataSource: (e.data as any)[this.childList.toString()],
+
+      columns: this.childColumns
+    });
+    detail.appendTo((e.detailElement as HTMLElement).querySelector('.custom-grid') as HTMLElement);
+    // let detail = new Grid({
+    //   dataSource: data.filter((item: Object) => (item as ColumnSpanDataType)[this.childList] === (e.data as any)[this.childList]),
+    //   columns: [
+    //     { field: 'OrderID', headerText: 'Order ID', width: 110 },
+    //     { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
+    //     { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
+    //   ]
+    // });
+    // detail.appendTo((e.detailElement as HTMLElement).querySelector('.custom-grid') as HTMLElement);
+  }
+
+
+}

src/main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
-
+import { registerLicense } from '@syncfusion/ej2-base';
+// Registering Syncfusion license key
+registerLicense('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5ad0VjXH9ac3NRQWhc');
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));

src/styles.scss

@@ -35,6 +35,17 @@
 // dark styles start
 @import "../src/assets/iconfonts/flag-icon-css/flag-icon.min.css";
 
+
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
+
 @media (min-width: 992px) {
   [data-nav-layout="horizontal"][dir="rtl"] .main-menu-container {
     .slide-right {