swal alert

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

@@ -9,8 +9,6 @@ import { ModuleModel, MyModuleModel } from '../../../../models/module.model';
 import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel, MyExcelPortalGroupModel, MyExcelPortalModel, MyExcelPortalTagsModel } from '../../../../models/excel-portal.model';
 import { ExcelReportService } from '../../../../services/excel-report.service';
 import { CustomCubeService } from '../../../../services/custom-cube.service';
-import { AlertModalComponent } from '../../../../../alert-modal/alert-modal.component';
-import { ConfirmModalComponent } from '../../../../../confirm-modal/confirm-modal.component';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -27,6 +25,8 @@ import Swal from 'sweetalert2';
 import { DatasourceTableModel, MyDatasourceTableModel } from '../../../../models/datasource-table.model';
 import { DatasourseTableService } from '../../../../services/datasourse-table.service';
 import swal from 'sweetalert';
+import { ConfirmModalComponent } from '../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }

src/app/DPU/myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component.html

@@ -160,7 +160,7 @@
                                                     <a aria-label="anchor" title="Print"
                                                         (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
                                                         (mouseleave)="buttonHover.clear()"
-                                                        class="ti-btn ti-btn-wave product-btn !gap-0 !m-0  bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning"
+                                                        class="ti-btn ti-btn-wave product-btn !gap-0 !m-0  bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning cursor-pointer"
                                                         (click)="openPrintModal(item);">
                                                         <i class="ri-printer-line"></i></a>
                                                 </td>
@@ -244,7 +244,7 @@
                     <i class="ri-close-line"></i>
                 </button>
             </div>
-            <div class="ti-modal-body px-4 mt-3">
+            <div class="ti-modal-body px-4 mt-3" style="min-height: 9.5rem;">
                 <div class="row">
                     <div class="d-flex col-12 justify-content-center" *ngIf="loading||loadingExcel">
                         <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">

src/app/DPU/myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component.ts

@@ -9,8 +9,6 @@ import { MyTemplateFileModel, MyTemplateModel, TemplateFileModel, TemplateModel
 import { ModuleModel } from '../../../../models/module.model';
 import { ExcelReportService } from '../../../../services/excel-report.service';
 import { CustomCubeService } from '../../../../services/custom-cube.service';
-import { ConfirmModalComponent } from '../../../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../../../alert-modal/alert-modal.component';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '../../../../../shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
@@ -22,6 +20,7 @@ import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dial
 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 'sweetalert';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }
@@ -230,26 +229,30 @@ export class ExcelReportToggleComponent implements OnInit {
     }
 
     menuActiveTemplateFile(templateFile: TemplateFileModel) {
-        const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
-            centered: true,
-            backdrop: 'static',
-        })
-        modalConfirmRef.componentInstance.message = 'คุณต้องการ' + (templateFile.menuActive == '1' ? 'ปิด' : 'เปิด') + 'การใช้งานหรือไม่'
-        modalConfirmRef.result.then(result => {
-            templateFile.menuActive = templateFile.menuActive == '1' ? '0' : '1'
-            this.excelReportService.postTemplateFile(templateFile).subscribe(response => {
-                if (response.success) {
-                    this.openAlertModal(response.message)
-                    this.getExcelList()
-                } else {
-                    this.openAlertModal(response.message)
-                }
-            }, error => {
-                this.openAlertModal(error.message)
-            })
-        }, reject => { })
+        swal({
+            title: "คุณแน่ใจหรือไม่?",
+            text: "คุณต้องการ" + (templateFile.menuActive == '1' ? 'ปิด' : 'เปิด') + "การใช้งานหรือไม่",
+            icon: "warning",
+            buttons: ["ยกเลิก", "ยืนยัน"],
+            dangerMode: true,
+        }).then((willChange: any) => {
+            if (willChange) {
+                templateFile.menuActive = templateFile.menuActive == '1' ? '0' : '1';
+                this.excelReportService.postTemplateFile(templateFile).subscribe(response => {
+                    if (response.success) {
+                        this.showAlert(response.message, "success");
+                        this.getExcelList();
+                    } else {
+                        this.showAlert(response.message, "error");
+                    }
+                }, error => {
+                    this.showAlert(error.message, "error");
+                });
+            }
+        });
     }
 
+
     formatISOToLocal(isoString: string) {
         const date = new Date(isoString);
         const day = String(date.getDate()).padStart(2, '0');
@@ -261,16 +264,8 @@ export class ExcelReportToggleComponent implements OnInit {
 
         return { date: `${day}-${month}-${year}`, time: `${hours}:${minutes}` };
     }
-
-    openAlertModal(message?: string) {
-        const modalRef = this.modalService.open(AlertModalComponent, {
-            centered: true,
-            backdrop: 'static'
-        })
-        modalRef.componentInstance.message = message ? message : ""
-        modalRef.result.then(result => {
-        }, reason => {
-        })
+    showAlert(text: string, type: 'success' | 'error') {
+        swal("แจ้งเตือน", text,type);
     }
 
     openPrintModal(templateFile: TemplateFileModel) {
@@ -285,7 +280,7 @@ export class ExcelReportToggleComponent implements OnInit {
         this.getTemplateFileSubscription = this.excelReportService.getTemplateFile(templateFile.templateId, templateFile.fileName).subscribe(response => {
             this.excelReport = response
             this.getExcelColumn()
-            if (this.excelReport.param) {
+            if (this.excelReport?.param) {
                 Object.entries(this.excelReport.param.variableSheet).forEach(([key, value]) => {
                     const data = value as any
                     if (data.type == 'text') {
@@ -367,7 +362,7 @@ export class ExcelReportToggleComponent implements OnInit {
     validateDate(control: NgModel) {
         if (!control.value) {
             // ว่าง หรือวันที่ไม่ถูกต้อง
-            this.openAlertModal('กรุณาเลือกวันที่ให้ถูกต้อง');
+            this.showAlert('กรุณาเลือกวันที่ให้ถูกต้อง', 'error')
         }
     }
 
@@ -395,7 +390,7 @@ export class ExcelReportToggleComponent implements OnInit {
             this.cdr.detectChanges()
         }, (err) => {
             this.loadingExcel = false
-            this.openAlertModal(err.message)
+            this.showAlert(err.message,'error')
             this.cdr.detectChanges()
         })
     }
@@ -426,39 +421,42 @@ export class ExcelReportToggleComponent implements OnInit {
     }
 
     getExcelColumn() {
-        const body = {
-            templateId: this.excelReport.templateId,
-            fileName: this.excelReport.fileName
-        }
-        this.searchSettings = {
-            fields: [],
-            operator: 'contains',
-            ignoreCase: false
-        };
-        this.columns = []
-        this.pivotColumns = []
-        this.customCubeService.getExcelColumn(body).subscribe((response: any) => {
+        if(this.excelReport){
+
+            const body = {
+                templateId: this.excelReport.templateId,
+                fileName: this.excelReport.fileName
+            }
             this.searchSettings = {
-                fields: response.map((e: any) => e.split(':')[0]),
+                fields: [],
                 operator: 'contains',
                 ignoreCase: false
             };
-            response.forEach((e: any, i: number) => {
-                const [field, headerText] = e.split(':')
-                this.columns.push({
-                    field: field,
-                    headerText: headerText,
-                    type: "string",
-                    isPrimaryKey: i == 0,
-                })
-                this.pivotColumns.push({
-                    name: field,
-                    caption: headerText
-                })
-            });
-        }, error => {
-
-        })
+            this.columns = []
+            this.pivotColumns = []
+            this.customCubeService.getExcelColumn(body).subscribe((response: any) => {
+                this.searchSettings = {
+                    fields: response.map((e: any) => e.split(':')[0]),
+                    operator: 'contains',
+                    ignoreCase: false
+                };
+                response.forEach((e: any, i: number) => {
+                    const [field, headerText] = e.split(':')
+                    this.columns.push({
+                        field: field,
+                        headerText: headerText,
+                        type: "string",
+                        isPrimaryKey: i == 0,
+                    })
+                    this.pivotColumns.push({
+                        name: field,
+                        caption: headerText
+                    })
+                });
+            }, error => {
+    
+            })
+        }
     }
     getExcelData(type: 'grid' | 'pivot') {
         this.loadingExcel = true
@@ -522,11 +520,15 @@ export class ExcelReportToggleComponent implements OnInit {
                     pivotStr: "",
                 }
                 this.customCubeService.saveExcelPerspective(body).subscribe(response => {
-                    this.loadingExcel = false
-                    this.openAlertModal(response.message)
+                    if(response.success) {
+                        this.loadingExcel = false
+                        this.showAlert(response.message, 'success')
+                    } else {
+                        this.showAlert(response.message, 'error')
+                    }
                 }, error => {
                     this.loadingExcel = false
-                    this.openAlertModal(error.message)
+                    this.showAlert(error.message, 'error')
                 })
                 this.cdr.detectChanges();
             }, 500);
@@ -540,11 +542,15 @@ export class ExcelReportToggleComponent implements OnInit {
                     pivotStr: this.pivotLayout.data,
                 }
                 this.customCubeService.saveExcelPerspective(body).subscribe(response => {
-                    this.loadingExcel = false
-                    this.openAlertModal(response.message)
+                    if(response.success) {
+                        this.loadingExcel = false
+                        this.showAlert(response.message, 'success')
+                    } else {
+                        this.showAlert(response.message, 'error')
+                    }
                 }, error => {
                     this.loadingExcel = false
-                    this.openAlertModal(error.message)
+                    this.showAlert(error.message, 'error')
                 })
                 this.cdr.detectChanges();
             }, 500);

src/app/DPU/services/excel-report.service.ts

@@ -41,7 +41,7 @@ export class ExcelReportService {
     edesc: string,
     module: string
   }) {
-    return this.http.post(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+    return this.http.post<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
   }
   deleteTemplate(body: TemplateModel): Observable<AlertModel> {
     let option = {

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

@@ -38,7 +38,6 @@ import {
 import { Query } from '@syncfusion/ej2-data';
 import { L10n, setCulture } from '@syncfusion/ej2-base';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { ColumnModel, FilterSettingsModel, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '../shared/shared.module';