*****************UPDATE เปลี่ยน modal แบบใหม่ ใช้ MatDialog

src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html

@@ -38,15 +38,14 @@
             </div>
             <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
-                    (click)="modalStatus='add';setData()" data-hs-overlay="#company-registration-page-modal">
+                    (click)="modalStatus='add';setData()" (click)="openDialog()">
                     <i class="ri-add-line"></i>
                     Add
                 </button>
             </div>
             <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
-                    (click)="modalStatus='deleteGroup';setData()"
-                    data-hs-overlay="#company-registration-page-alert-modal">
+                    (click)="modalStatus='deleteGroup';setData();deleteCompany()">
                     <i class="ri-delete-bin-6-line"></i>
                     Delete
                 </button>
@@ -109,8 +108,7 @@
                     <td>{{item.data.edesc}}</td>
                     <td class="flex justify-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
-                            (click)="modalStatus='edit';setData(item.data)"
-                            data-hs-overlay="#company-registration-page-modal"></i>
+                            (click)="modalStatus='edit';setData(item.data);openDialog()"></i>
                         <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.code!='100'"
                             (click)="modalStatus='delete';setData(item.data)"
                             data-hs-overlay="#company-registration-page-alert-modal"></i> -->
@@ -123,7 +121,54 @@
         (pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
 </div>
 
-
+<ng-template #registrationModal let-modal>
+    <h3 mat-dialog-title>
+        {{modalStatus=='add'?'เพิ่มข้อมูลบริษัท':'แก้ไขข้อมูลบริษัท'}}
+    </h3>
+    <div class="w-full flex justify-end">
+        <div class="absolute flex">
+            <div class="px-1">
+                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
+                    (click)="clearData()">
+                    <i class="ti ti-eraser text-base"></i>
+                    Clear
+                </button>
+            </div>
+        </div>
+    </div>
+    <mat-dialog-content class="mt-2">
+            <label for="input-label" class="ti-form-label mt-2rem">รหัสบริษัท<span class="text-danger">
+                *
+                <ng-container *ngIf="modalStatus=='add'&&checkPrimary()">
+                    รหัสบริษัทซ้ำ
+                </ng-container>
+            </span></label>
+        <input type="text" id="input-label" class="ti-form-input w-1/2"
+            [class.!border-red]="modalStatus=='add'&&checkPrimary()"
+            [ngClass]="{'!bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
+            [(ngModel)]="dataSelect.code" [maxLength]="5">
+        <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span
+                class="text-danger">*</span></label>
+        <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
+        <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
+        <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
+        <label for="input-label" class="ti-form-label mt-2rem">ที่อยู่ บริษัท</label>
+        <textarea type="text" rows="2" class="ti-form-input" [(ngModel)]="dataSelect.address"></textarea>
+        <label for="input-label" class="ti-form-label mt-2rem">ข้อมูล ติดต่อ</label>
+        <textarea type="text" rows="2" class="ti-form-input" [(ngModel)]="dataSelect.contact"></textarea>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        <button type="button"  mat-button [mat-dialog-close]
+        class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+        ย้อนกลับ
+    </button>
+    <button type="button" class="ti-btn ti-btn-success" mat-button [mat-dialog-close]="true"
+        [class.ti-btn-disabled]="!dataSelect.code||!dataSelect.tdesc||(modalStatus=='add'&&checkPrimary())"
+        [disabled]="!dataSelect.code||!dataSelect.tdesc||(modalStatus=='add'&&checkPrimary())">
+        บันทึกข้อมูล
+    </button>
+    </mat-dialog-actions>
+  </ng-template>
 
 <div id="company-registration-page-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">

src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.ts

-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
 import { CompanyModel, MyCompanyModel } from 'src/app/shared/model/company.model';
 import { CompanyService } from 'src/app/shared/services/company.service';
 import { FileService } from 'src/app/shared/services/file.service';
+import Swal from 'sweetalert2';
 export interface DataModel {
   code: string
   tdesc: string
@@ -16,6 +18,7 @@ export interface DataModel {
   styleUrls: ['./company-registration-page.component.scss']
 })
 export class CompanyRegistrationPageComponent {
+  @ViewChild("registrationModal") registrationModal: any;
   pageSize = 10
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
@@ -34,6 +37,7 @@ export class CompanyRegistrationPageComponent {
   constructor(private toastr: ToastrService,
     private companyService: CompanyService,
     private cdr: ChangeDetectorRef,
+    private dialog: MatDialog,
     private fileService: FileService) { }
   ngOnInit(): void {
     this.getCompanyList()
@@ -72,7 +76,18 @@ export class CompanyRegistrationPageComponent {
     this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", address: "", contact: "" }));
   }
 
+
   addCompany() {
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+       text: 'ยืนยันการบันทึกข้อมูลหรือไม่',  
+       showCancelButton: true,
+       confirmButtonText: 'บันทึกข้อมูล',
+       cancelButtonText: 'ย้อนกลับ',
+       reverseButtons: true,
+     }).then((result) => {
+       if (result.isConfirmed) {
         const body = new MyCompanyModel({ companyId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, addressText: this.dataSelect.address, contactText: this.dataSelect.contact })
     this.dataLoading = true
     this.companyService.post(body).subscribe({
@@ -91,8 +106,27 @@ export class CompanyRegistrationPageComponent {
         this.dataLoading = false
       }
     })
+       } else if (result.dismiss === Swal.DismissReason.cancel) {
+        this.openDialog();
+      }
+     });
+    
   }
   deleteCompany() {
+    if(!this.numDataListChecked){
+      this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
+      return
+    }
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+       text: 'ยืนยันการลบข้อมูลหรือไม่',  
+       showCancelButton: true,
+       confirmButtonText: 'ลบข้อมูล',
+       cancelButtonText: 'ย้อนกลับ',
+       reverseButtons: true,
+     }).then((result) => {
+       if (result.isConfirmed) {
         let body: CompanyModel | CompanyModel[] = []
         if (this.dataSelect.code) {
           body = new MyCompanyModel({ companyId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, addressText: this.dataSelect.address, contactText: this.dataSelect.contact })
@@ -117,11 +151,17 @@ export class CompanyRegistrationPageComponent {
           }
         })
        } 
+     });
+    
+   
+  }
 
   showAlert(text: string, type: 'success' | 'error') {
-    this.toastr[type](text, 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
+    Swal.fire({
+      title: 'แจ้งเตือน',
+      text: text,
+      icon: type,
+      confirmButtonText: 'ตกลง',
     });
   }
 
@@ -204,4 +244,17 @@ export class CompanyRegistrationPageComponent {
   checkPrimary() {
     return this.dataList.find(x => x.data.code == this.dataSelect.code)
   }
+
+    openDialog() {
+      const dialogRef = this.dialog.open(this.registrationModal, {
+        width: '500px', 
+        disableClose: false,
+      });
+      dialogRef.afterClosed().subscribe(result => {
+        console.log("🚀 ~ CompanyRegistrationPageComponent ~ dialogRef.afterClosed ~ result:", result)
+        if(result){
+          this.addCompany();
+        }
+      });
+    }
 }

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

@@ -169,7 +169,7 @@ 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';
-
+import { MatDialogModule } from '@angular/material/dialog';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -320,7 +320,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     MatIconModule,
     GridModule,
     DropDownListModule,
-    RatingModule
+    RatingModule,
+    MatDialogModule
   ],
   providers: [
     Bu1Service,

src/assets/css/style.css

@@ -9255,13 +9255,13 @@ span.flatpickr-weekday,
 }
 .swal2-styled.swal2-confirm {
   border-radius: 0.25rem !important;
-  background-color: rgb(var(--color-primary)) !important;
+  background-color: rgb(var(--color-success)) !important;
 }
 .swal2-styled.swal2-confirm:focus {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-  --tw-shadow-color: rgb(var(--color-primary)) !important;
+  --tw-shadow-color: rgb(var(--color-success)) !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
 .swal2-footer {
@@ -9275,7 +9275,7 @@ span.flatpickr-weekday,
   background-color: rgb(var(--color-danger)) !important;
 }
 .swal2-styled.swal2-cancel {
-  background-color: rgb(var(--color-secondary)) !important;
+  background-color: rgb(var(--color-danger)) !important;
 }
 .swal2-loader {
   border-top-color: rgb(var(--color-primary)) !important;

src/styles.scss

@@ -393,3 +393,17 @@ ngx-dropzone {
 -webkit-box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important;
 -moz-box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important;
 }
+
+.mat-mdc-dialog-container .mdc-dialog__title {
+  font-family: inherit!important;
+  color: rgb(var(--color-primary))!important;
+  font-weight: 700!important;
+  font-size: 1.25rem!important;
+  line-height: 2.5rem!important;
+  border-bottom-width: 1px!important;
+  border-bottom-color: rgb(226, 232, 240)!important;
+}
+.mdc-dialog__actions{
+  border-top-width: 1px!important;
+  border-top-color: rgb(226, 232, 240)!important;
+}
\ No newline at end of file