แก้ layout หน้าเพิ่มรายงาน Excel

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

+.ti-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom-width: 1px;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
\ No newline at end of file

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

@@ -17,7 +17,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { SharedModule } from '../../../../../shared/shared.module';
 import { MatPaginator } from '@angular/material/paginator';
 import { QuillModule } from 'ngx-quill';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { FileUploadModule } from 'ng2-file-upload';
 import { FormsModule, NgModel } from '@angular/forms';
 import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
@@ -57,6 +57,8 @@ 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 }
+    pageIndex: number = 0;
+    itemsPerPage: number = 10;
     page = 1
     pageSize = 10
     pageModal = 1
@@ -140,10 +142,18 @@ export class ExcelListComponent implements OnInit {
     gridLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
     pivotLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
     setPerspective = ""
+    isSearching = false;
+    modalRef: any;
+    modalRefaddChild: any;
+    searchText: string = '';
+
+    @ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
+    @ViewChild('addChildModal') addChildModal!: TemplateRef<any>;
     constructor(private excelReportService: ExcelReportService,
         private modalService: NgbModal,
         private customCubeService: CustomCubeService,
-        private cdr: ChangeDetectorRef) {
+        private cdr: ChangeDetectorRef,
+        private modal: MatDialog) {
 
     }
     ngOnInit(): void {
@@ -153,6 +163,31 @@ export class ExcelListComponent implements OnInit {
         this.getExcelPortalgGroupList()
         this.getExcelPortalTagsList()
     }
+    get totalItems(): number {
+        return this.searchText  == ''
+            ? this.template.data.length
+            : this.template.filter.length;
+    }
+
+    get totalPages(): number {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+
+    get totalPagesArray(): number[] {
+        return Array(this.totalPages).fill(0);
+    }
+
+    goToPage(index: number): void {
+        if (index < 0 || index >= this.totalPages) return;
+        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);
+    }
     getExcelPortalList() {
         this.excelPortal.loading = true
         this.excelReportService.getExcelPortalList().subscribe(response => {
@@ -235,9 +270,9 @@ export class ExcelListComponent implements OnInit {
         }, reason => {
         })
     }
-    openAddGroupModal(targetModal: TemplateRef<any>, data?: TemplateModel) {
+    openAddGroupModal(data?: TemplateModel) {
         if (data) {
-            this.bodyTemplate.status = 'edit'
+            this.bodyTemplate.status = 'edit';
             this.bodyTemplate.data = {
                 templateId: data.templateId,
                 tname: data.tname,
@@ -245,9 +280,9 @@ export class ExcelListComponent implements OnInit {
                 tdesc: data.tdesc,
                 edesc: data.edesc,
                 module: data.module
-            }
+            };
         } else {
-            this.bodyTemplate.status = 'add'
+            this.bodyTemplate.status = 'add';
             this.bodyTemplate.data = {
                 templateId: '',
                 tname: '',
@@ -255,32 +290,10 @@ export class ExcelListComponent implements OnInit {
                 tdesc: '',
                 edesc: '',
                 module: ''
-            }
+            };
         }
 
-        const modalRef = this.modalService.open(targetModal, {
-            centered: true,
-            backdrop: 'static',
-            size: 'lg'
-        })
-        modalRef.result.then(result => {
-            const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
-                centered: true,
-                backdrop: 'static',
-            })
-            modalConfirmRef.componentInstance.message = 'คุณต้องการบันทึกข้อมูลหรือไม่'
-            modalConfirmRef.result.then(result => {
-                this.excelReportService.postTemplate(this.bodyTemplate.data).subscribe((response: any) => {
-                    this.openAlertModal(response.message)
-                    if (response.success) {
-                        this.getExcelList()
-                        this.getModuleList()
-                    }
-
-                }, error => { this.openAlertModal(error.message) })
-            }, reject => { })
-        }, reject => { })
-
+        this.openModalAddGroup()
     }
 
     deleteTemplate(template: TemplateModel) {
@@ -302,7 +315,7 @@ export class ExcelListComponent implements OnInit {
             })
         }, reject => { })
     }
-    openAddChildModal(targetModal: TemplateRef<any>, data: TemplateModel | TemplateFileModel, status: 'add' | 'edit') {
+    openAddChildModal(data: TemplateModel | TemplateFileModel, status: 'add' | 'edit') {
         if (status == 'add') {
             this.templateFile = new MyTemplateFileModel({ templateId: data.templateId, module: data.module })
             this.templateFileType = 'portal'
@@ -313,11 +326,7 @@ export class ExcelListComponent implements OnInit {
             this.templateFileName = this.templateFile.portalId ? '' : this.templateFile.fileName
             this.templateFile.realFileNameOld = this.templateFile.fileName
         }
-        this.addChildModalRef = this.modalService.open(targetModal, {
-            centered: true,
-            backdrop: 'static',
-            size: 'lg'
-        })
+        this.openModaladdChild()
     }
 
     openExcelPortalModal(targetModal: TemplateRef<any>) {
@@ -362,29 +371,42 @@ export class ExcelListComponent implements OnInit {
     }
 
     templateListSearch() {
-        if (!this.searchBy || !this.condition || !this.searchValue) {
-            this.template.filter = this.template.data.map(e => new MyTemplateModel(e))
-        }
-        const conditionMap: { [key: string]: (a: any, b: any) => boolean } = {
-            includes: (a, b) => (a || '').toString().toLowerCase().includes((b || '').toString().toLowerCase()),
-            lt: (a, b) => parseFloat(a) < parseFloat(b),
-            gt: (a, b) => parseFloat(a) > parseFloat(b),
-            eq: (a, b) => a == b,
-            lte: (a, b) => parseFloat(a) <= parseFloat(b),
-            gte: (a, b) => parseFloat(a) >= parseFloat(b),
-            neq: (a, b) => a != b,
-        };
+        this.isSearching = true;
 
-        const compareFn = conditionMap[this.condition];
-        if (!compareFn) {
-            this.template.filter = this.template.data.map(e => new MyTemplateModel(e))
-        }
 
+        setTimeout(() => {
+            if (!this.searchBy || !this.condition || !this.searchValue) {
+                this.template.filter = this.template.data.map(e => new MyTemplateModel(e));
+                this.isSearching = false;
+                return;
+            }
+
+            const conditionMap: { [key: string]: (a: any, b: any) => boolean } = {
+                includes: (a, b) => (a || '').toString().toLowerCase().includes((b || '').toString().toLowerCase()),
+                lt: (a, b) => parseFloat(a) < parseFloat(b),
+                gt: (a, b) => parseFloat(a) > parseFloat(b),
+                eq: (a, b) => a == b,
+                lte: (a, b) => parseFloat(a) <= parseFloat(b),
+                gte: (a, b) => parseFloat(a) >= parseFloat(b),
+                neq: (a, b) => a != b,
+            };
+
+            const compareFn = conditionMap[this.condition];
+            if (!compareFn) {
+                this.template.filter = this.template.data.map(e => new MyTemplateModel(e));
+                this.isSearching = false;
+                return;
+            }
+
+            this.template.filter = this.template.data
+                .filter(item => {
+                    const value = (item as any)[this.searchBy];
+                    return compareFn(value, this.searchValue);
+                })
+                .map(e => new MyTemplateModel(e));
 
-        this.template.filter = this.template.data.filter(item => {
-            const value = (item as any)[this.searchBy];
-            return compareFn(value, this.searchValue);
-        }).map(e => new MyTemplateModel(e));
+            this.isSearching = false;
+        }, 1000); // delay mock loading
     }
 
     onFileSelected(event: any) {
@@ -802,4 +824,27 @@ export class ExcelListComponent implements OnInit {
             }, 500);
         }
     }
+
+    openModalAddGroup() {
+        this.modalRef = this.modal.open(this.addGroupModal, {
+            width: '1000px',
+            height: '500px'
+        })
+    }
+
+    closeModalAddGroup() {
+        this.modalRef?.close()
+    }
+
+    openModaladdChild() {
+        this.modalRefaddChild = this.modal.open(this.addChildModal, {
+            width: '1000px',
+            height: '500px'
+        })
+    }
+
+    closeModaladdChild() {
+        this.modalRefaddChild?.close()
+    }
+
 }
\ No newline at end of file

src/app/DPU/common/pdpa-manage/pdpa-manage.component.ts

@@ -29,11 +29,10 @@ import { MyPdpaModel, PdpaModel } from "../../models/pdpa.model";
     TranslateModule,
     NgSelectModule,
     FormsModule,
-    MatPaginator,
     FileUploadModule,
     PdpaConfigComponent,
     QuillModule
-  ],
+],
   templateUrl: './pdpa-manage.component.html',
   styleUrl: './pdpa-manage.component.css'
 })

src/app/DPU/common/user-management/user-setting/user-setting.component.ts

@@ -23,9 +23,8 @@ import { TokenService } from "../../../../shared/services/token.service";
     TranslateModule,
     NgSelectModule,
     FormsModule,
-    MatPaginator,
     FileUploadModule
-  ],
+],
   templateUrl: './user-setting.component.html',
   styleUrl: './user-setting.component.css'
 })