เพิ่ม datagird sysfunction ## npm i --force

package-lock.json

@@ -35,7 +35,12 @@
         "@syncfusion/ej2-angular-grids": "^29.2.4",
         "@syncfusion/ej2-angular-inputs": "^29.2.4",
         "@syncfusion/ej2-angular-pivotview": "^29.2.4",
-        "@syncfusion/ej2-grids": "^29.2.11",
+        "@syncfusion/ej2-base": "^29.2.4",
+        "@syncfusion/ej2-buttons": "^29.2.4",
+        "@syncfusion/ej2-data": "^29.2.4",
+        "@syncfusion/ej2-dropdowns": "^29.2.4",
+        "@syncfusion/ej2-grids": "^29.2.4",
+        "@syncfusion/ej2-inputs": "^29.2.4",
         "@tailwindcss/forms": "^0.5.7",
         "@types/google.maps": "^3.58.1",
         "@types/googlemaps": "^3.43.3",

package.json

@@ -35,12 +35,17 @@
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "@syncfusion/ej2-angular-base": "^29.2.4",
-    "@syncfusion/ej2-angular-charts": "^29.2.4",
     "@syncfusion/ej2-angular-dropdowns": "^29.2.4",
     "@syncfusion/ej2-angular-grids": "^29.2.4",
     "@syncfusion/ej2-angular-inputs": "^29.2.4",
     "@syncfusion/ej2-angular-pivotview": "^29.2.4",
-    "@syncfusion/ej2-grids": "^29.2.11",
+    "@syncfusion/ej2-base": "^29.2.4",
+    "@syncfusion/ej2-buttons": "^29.2.4",
+    "@syncfusion/ej2-data": "^29.2.4",
+    "@syncfusion/ej2-dropdowns": "^29.2.4",
+    "@syncfusion/ej2-grids": "^29.2.4",
+    "@syncfusion/ej2-inputs": "^29.2.4",
+    "@syncfusion/ej2-angular-charts": "^29.2.4",
     "@tailwindcss/forms": "^0.5.7",
     "@types/google.maps": "^3.58.1",
     "@types/googlemaps": "^3.43.3",
@@ -115,4 +120,4 @@
     "tailwindcss": "^3.3.2",
     "typescript": "~5.2.2"
   }
-}
+}
\ No newline at end of file

src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.ts

@@ -58,11 +58,12 @@ export class ExcelListComponent implements OnInit {
     template: { data: TemplateModel[], filter: TemplateModel[], loading: boolean } = { data: [], filter: [], loading: false }
     templateFile: TemplateFileModel = new MyTemplateFileModel()
     module: { data: ModuleModel[], loading: boolean } = { data: [], loading: false }
+    pagedItems: TemplateModel[] = [];
     pageIndex: number = 0;
     itemsPerPage: number = 10;
-    page = 1
+    page = 0
     pageSize = 10
-    pageModal = 1
+    pageModal = 0
     pageSizeModal = 10
     searchBy = ''
     condition = ''
@@ -150,8 +151,8 @@ export class ExcelListComponent implements OnInit {
     modalRefvideoModal: any;
     modalRefprintModal: any;
     modalRefmodalData: any;
-    modalRefgridModal: any;
-    modalRefpivotModal: any;
+    modalRefgridModal: MatDialogRef<any>;
+    modalRefpivotModal: MatDialogRef<any>;
     searchText: string = '';
 
     @ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
@@ -195,12 +196,15 @@ export class ExcelListComponent implements OnInit {
         this.pageIndex = index;
         this.updatePagedItems();
     }
-    updatePagedItems(): void {
-        const start = this.pageIndex * this.itemsPerPage;
-        const end = start + this.itemsPerPage;
-        const source = this.searchText == '' ? this.template.data : this.template.filter;
-        this.template.filter = source.slice(start, end);
+    updatePagedItems() {
+        const data = this.searchText == '' ? this.template.data : this.template.filter;
+
+        const start = this.page * this.pageSize; // ถ้า page = 1 → เริ่มที่ index 10
+        const end = start + this.pageSize;
+
+        this.pagedItems = data.slice(start, end);
     }
+
     getExcelPortalList() {
         this.excelPortal.loading = true
         this.excelReportService.getExcelPortalList().subscribe(response => {
@@ -343,8 +347,8 @@ export class ExcelListComponent implements OnInit {
     }
 
     openExcelPortalModal() {
-        this.pageModal = 1;
-        this.pageSizeModal = 10;
+        this.pageModal = 0;
+        this.pageSizeModal = 5;
 
         this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
             width: '1500px',
@@ -802,7 +806,7 @@ export class ExcelListComponent implements OnInit {
             this.dataList = response.excelData as any
             this.loadingExcel = false
             if (type === 'grid') {
-                this.modal.open(this.gridModal, {
+                this.modalRefgridModal = this.modal.open(this.gridModal, {
                     width: '1000px',
                     height: '700px',
                     data: {
@@ -813,8 +817,8 @@ export class ExcelListComponent implements OnInit {
                     autoFocus: false
                 });
             } else if (type === 'pivot') {
-                this.modal.open(this.pivotModal, {
-                    width: '800px',
+                this.modalRefpivotModal = this.modal.open(this.pivotModal, {
+                    width: '1000px',
                     height: '580px',
                     data: {
                         pivotData: (response.excelPerspective as any).pivotStr,
@@ -939,7 +943,7 @@ export class ExcelListComponent implements OnInit {
     closeModalgridModal() {
         this.modalRefgridModal?.close()
     }
-    
+
     closeModalpivotModal() {
         this.modalRefpivotModal?.close()
     }

src/styles.scss

@@ -31,6 +31,23 @@
 @import "../node_modules/angular-calendar/scss/angular-calendar.scss";
 @import '../node_modules/quill/dist/quill.core.css';
 @import '../node_modules/quill/dist/quill.snow.css';
+@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800');
+@import url("https://fonts.googleapis.com/css?family=Kanit:300,400,600,700,800");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.css';
 // @import "../node_modules/angular-calendar/scss/angular-calendar.scss";
 
 //swiperjs