เพิ่ม modal EXCCHILD, Template file excel, EXCEL_PORTAL ## npm i --force ด้วย เพิ่ม sweetalert ไป

package-lock.json

@@ -88,6 +88,7 @@
         "sass": "^1.69.7",
         "simplebar-angular": "^3.2.4",
         "sweetalert": "^2.1.2",
+        "sweetalert2": "^11.22.2",
         "swiper": "^8.4.7",
         "tslib": "^2.6.2",
         "zone.js": "~0.14.2"
@@ -19690,6 +19691,16 @@
         "promise-polyfill": "^6.0.2"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.22.2",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.2.tgz",
+      "integrity": "sha512-GFQGzw8ZXF23PO79WMAYXLl4zYmLiaKqYJwcp5eBF07wiI5BYPbZtKi2pcvVmfUQK+FqL1risJAMxugcPbGIyg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/swiper": {
       "version": "8.4.7",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz",

package.json

@@ -35,11 +35,11 @@
     "@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-angular-charts": "^29.2.4",
     "@syncfusion/ej2-grids": "^30.1.39",
     "@tailwindcss/forms": "^0.5.7",
     "@types/google.maps": "^3.58.1",
@@ -93,6 +93,7 @@
     "sass": "^1.69.7",
     "simplebar-angular": "^3.2.4",
     "sweetalert": "^2.1.2",
+    "sweetalert2": "^11.22.2",
     "swiper": "^8.4.7",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.2"
@@ -114,4 +115,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

@@ -17,12 +17,13 @@ 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 { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { FileUploadModule } from 'ng2-file-upload';
 import { FormsModule, NgModel } from '@angular/forms';
 import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
 import { PivotSyncfutionComponent } from "../../../../../pivot-syncfution/pivot-syncfution.component";
 import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
+import Swal from 'sweetalert2';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }
@@ -145,10 +146,14 @@ export class ExcelListComponent implements OnInit {
     isSearching = false;
     modalRef: any;
     modalRefaddChild: any;
+    modalRefexcel_portal: MatDialogRef<any>;
+    modalRefvideoModal: any;
     searchText: string = '';
 
     @ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
     @ViewChild('addChildModal') addChildModal!: TemplateRef<any>;
+    @ViewChild('excel_portalModal') excel_portalModal!: TemplateRef<any>;
+    @ViewChild('videoModal') videoModal!: TemplateRef<any>;
     constructor(private excelReportService: ExcelReportService,
         private modalService: NgbModal,
         private customCubeService: CustomCubeService,
@@ -164,7 +169,7 @@ export class ExcelListComponent implements OnInit {
         this.getExcelPortalTagsList()
     }
     get totalItems(): number {
-        return this.searchText  == ''
+        return this.searchText == ''
             ? this.template.data.length
             : this.template.filter.length;
     }
@@ -185,7 +190,7 @@ export class ExcelListComponent implements OnInit {
     updatePagedItems(): void {
         const start = this.pageIndex * this.itemsPerPage;
         const end = start + this.itemsPerPage;
-        const source = this.searchText  == '' ? this.template.data : this.template.filter;
+        const source = this.searchText == '' ? this.template.data : this.template.filter;
         this.template.filter = source.slice(start, end);
     }
     getExcelPortalList() {
@@ -329,25 +334,48 @@ export class ExcelListComponent implements OnInit {
         this.openModaladdChild()
     }
 
-    openExcelPortalModal(targetModal: TemplateRef<any>) {
-        this.pageModal = 1
-        this.pageSizeModal = 10
-        const modalRef = this.modalService.open(targetModal, {
-            centered: true,
-            backdrop: 'static',
-            size: 'xl'
-        })
-        modalRef.result.then(result => {
-            this.templateFile.portalId = result.excelId
-        }, reject => { })
+    openExcelPortalModal() {
+        this.pageModal = 1;
+        this.pageSizeModal = 10;
+
+        this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
+            width: '1500px',
+            height: '700px',
+            maxWidth: 'none',
+            disableClose: true,
+            data: {}
+        });
+
+        this.modalRefexcel_portal.afterClosed().subscribe(result => {
+            if (result?.excelId) {
+                this.templateFile.portalId = result.excelId;
+            }
+        });
     }
-    openVideoModal(targetModal: TemplateRef<any>, videoLink: string) {
-        this.videoLink = this.convertToEmbedUrl(videoLink)
-        this.modalService.open(targetModal, {
-            centered: true,
-            windowClass: 'my-dialog-video-preview'
-        })
+    // openVideoModal(targetModal: TemplateRef<any>, videoLink: string) {
+    //     this.videoLink = this.convertToEmbedUrl(videoLink)
+    //     this.modalService.open(targetModal, {
+    //         centered: true,
+    //         windowClass: 'my-dialog-video-preview'
+    //     })
+    // }
+    openVideoModal(videoLink: string) {
+        this.videoLink = this.convertToEmbedUrl(videoLink);
+        this.modalRefvideoModal = this.modal.open(this.videoModal, {
+            width: '50%',
+            height: '50%',
+            panelClass: 'video-preview-dialog',
+            backdropClass: 'video-backdrop'
+        });
     }
+//     openVideoModal(videoLink: string) {
+//     this.videoLink = this.convertToEmbedUrl(videoLink);
+//     this.modalRefvideoModal = this.modal.open(this.videoModal, {
+//       width: '100%',
+//       height: '100%',
+//       panelClass: 'video-dialog-custom'
+//     });
+//   }
     convertToEmbedUrl(youtubeUrl: string): string {
         try {
             const url = new URL(youtubeUrl);
@@ -690,20 +718,28 @@ export class ExcelListComponent implements OnInit {
     }
 
     templateFileTypeChange() {
-        if (this.templateFileName || this.templateFile.portalId) {
-            const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
-                centered: true,
-                backdrop: 'static',
-            })
-            modalConfirmRef.componentInstance.message = 'คุณต้องการยกเลิกไฟล์ที่เลือกหรือไม่'
-            modalConfirmRef.result.then(result => {
-                this.onToggleTemplateFile()
-            }, reject => { })
+        if (this.templateFileName || this.templateFile?.portalId) {
+            Swal.fire({
+                title: 'ยืนยันการดำเนินการ',
+                text: 'คุณต้องการยกเลิกไฟล์ที่เลือกหรือไม่',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'ใช่, ยกเลิกไฟล์',
+                cancelButtonText: 'ไม่',
+                confirmButtonColor: '#d33', // สีปุ่มยืนยัน (แดง)
+                cancelButtonColor: '#3085d6', // สีปุ่มยกเลิก (น้ำเงิน)
+                reverseButtons: true
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    this.onToggleTemplateFile();
+                }
+            });
         } else {
-            this.onToggleTemplateFile()
+            this.onToggleTemplateFile();
         }
     }
 
+
     onToggleTemplateFile() {
         if (this.templateFileType == 'portal') {
             this.templateFileType = 'upload'
@@ -838,7 +874,7 @@ export class ExcelListComponent implements OnInit {
 
     openModaladdChild() {
         this.modalRefaddChild = this.modal.open(this.addChildModal, {
-            width: '1000px',
+            width: '700px',
             height: '500px'
         })
     }
@@ -847,4 +883,26 @@ export class ExcelListComponent implements OnInit {
         this.modalRefaddChild?.close()
     }
 
+    openModalexcel_portal() {
+        this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
+            width: '1500px',
+            height: '700px'
+        })
+    }
+
+    closeModalexcel_portal() {
+        this.modalRefexcel_portal?.close()
+    }
+
+    openModvideoModal() {
+        this.modalRefvideoModal = this.modal.open(this.videoModal, {
+            width: '1500px',
+            height: '700px'
+        })
+    }
+
+    closeModvideoModal() {
+        this.modalRefexcel_portal?.close()
+    }
+
 }
\ No newline at end of file

src/app/DPU/models/excel-portal.model.ts

@@ -83,7 +83,7 @@ export class MyExcelPortalModel implements ExcelPortalModel {
         this.uploadTime = data?.uploadTime || ''
     }
     getImg() {
-        return this.thumbnail ? environment.baseUrl + "files/image/" + this.thumbnail : ''
+        return this.thumbnail ? environment.url + "files/image/" + this.thumbnail : ''
     }
 }
 

src/assets/css/style.css

@@ -3650,7 +3650,7 @@ label {
 }
 
 .swal2-container .swal2-styled.swal2-cancel {
-  @apply bg-light text-defaulttextcolor py-[0.375rem] px-3 text-[0.8125rem] !important;
+  @apply bg-danger text-white py-[0.375rem] px-3 text-[0.8125rem] !important;
 }
 
 /* end:: cart */