UPDATE เปี่ลยน dialog

src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.ts

-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { BranchModel, MyBranchModel } from 'src/app/shared/model/branch.model';
 import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
@@ -33,6 +33,8 @@ import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
 import { StatusModel, MyStatusModel } from 'src/app/shared/model/status.model';
 import { MyBossModel } from 'src/app/shared/model/boss.model';
 import { ColumnModel } from '@syncfusion/ej2-grids';
+import { MatDialog } from '@angular/material/dialog';
+import Swal from 'sweetalert2';
 export interface DataModal {
   search: string,
   currentPage: number,
@@ -83,6 +85,9 @@ export class SubEmployeeRegistrationComponent {
     page: Array.from({ length: 1 }, (_, i) => i + 1),
     pageSize: 10
   }
+  pageSize: number = 10
+  page: number = 1
+  currentPage: number = 1
 
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
@@ -102,6 +107,29 @@ export class SubEmployeeRegistrationComponent {
   empType: { loading: boolean, dataList: EmpTypeModel[] } = { loading: false, dataList: [] }
   pl: { loading: boolean, dataList: PLModel[] } = { loading: false, dataList: [] }
   empStatus: { loading: boolean, dataList: StatusModel[] } = { loading: false, dataList: [] }
+
+  @ViewChild('employeeRegistrationModal') employeeRegistrationModal: any
+  dialogRef: any
+  @ViewChild('empGroupModal') empGroupModal: any
+  empGroupDialogRef: any
+  @ViewChild('employeeListModal') employeeListModal: any
+  employeeListDialogRef: any
+  @ViewChild('bu1Modal') bu1Modal: any
+  bu1DialogRef: any
+  @ViewChild('bu2Modal') bu2Modal: any
+  bu2DialogRef: any
+  @ViewChild('bu3Modal') bu3Modal: any
+  bu3DialogRef: any
+  @ViewChild('bu4Modal') bu4Modal: any
+  bu4DialogRef: any
+  @ViewChild('bu5Modal') bu5Modal: any
+  bu5DialogRef: any
+  @ViewChild('bu6Modal') bu6Modal: any
+  bu6DialogRef: any
+  @ViewChild('bu7Modal') bu7Modal: any
+  bu7DialogRef: any
+  
+
   constructor(private toastr: ToastrService,
     private employeeService: EmployeeService,
     private cdr: ChangeDetectorRef,
@@ -119,7 +147,9 @@ export class SubEmployeeRegistrationComponent {
     private empTypeService: EmpTypeService,
     private empStatusService: EmpStatusService,
     private fileService: FileService,
-    private pLService: PLService) { }
+    private pLService: PLService,
+    private dialog: MatDialog
+  ) { }
 
   ngOnInit(): void {
     this.getEmployeeList()
@@ -132,6 +162,87 @@ export class SubEmployeeRegistrationComponent {
     this.getPlList()
     this.getEmpStatusList()
   }
+  openDialog() {
+    this.dialogRef = this.dialog.open(this.employeeRegistrationModal, {
+      width: '800px',
+    })
+  }
+  closeDialog() {
+    this.dialogRef.close()
+  }
+  openEmpGroupDialog() {
+    this.empGroupDialogRef = this.dialog.open(this.empGroupModal, {
+      width: '800px',
+    })
+  }
+  closeEmpGroupDialog() {
+    this.empGroupDialogRef.close()
+  }
+  openEmployeeListDialog() {
+    this.employeeListDialogRef = this.dialog.open(this.employeeListModal, {
+      width: '800px',
+    })
+  }
+  closeEmployeeListDialog() {
+    this.employeeListDialogRef.close()
+  }
+  openBu1Dialog() {
+    this.bu1DialogRef = this.dialog.open(this.bu1Modal, {
+      width: '800px',
+    })
+  }
+  closeBu1Dialog() {
+    this.bu1DialogRef.close()
+  }
+  openBu2Dialog() {
+    this.bu2DialogRef = this.dialog.open(this.bu2Modal, {
+      width: '800px',
+    })
+  }
+  closeBu2Dialog() {
+    this.bu2DialogRef.close()
+  }
+  openBu3Dialog() {
+    this.bu3DialogRef = this.dialog.open(this.bu3Modal, {
+      width: '800px',
+    })
+  }
+  closeBu3Dialog() {
+    this.bu3DialogRef.close()
+  }
+  openBu4Dialog() {
+    this.bu4DialogRef = this.dialog.open(this.bu4Modal, {
+      width: '800px',
+    })
+  }
+  closeBu4Dialog() {
+    this.bu4DialogRef.close()
+  }
+  openBu5Dialog() {
+    this.bu5DialogRef = this.dialog.open(this.bu5Modal, {
+      width: '800px',
+    })
+  }
+  closeBu5Dialog() {
+    this.bu5DialogRef.close()
+  }
+  openBu6Dialog() {
+    this.bu6DialogRef = this.dialog.open(this.bu6Modal, {
+      width: '800px',
+    })
+  }
+  closeBu6Dialog() {
+    this.bu6DialogRef.close()
+  }
+  openBu7Dialog() {
+    this.bu7DialogRef = this.dialog.open(this.bu7Modal, {
+      width: '800px',
+    })
+  }
+  closeBu7Dialog() {
+    this.bu7DialogRef.close()
+  }
+
   onFileSelected(event: any) {
     this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
     this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
@@ -301,9 +412,9 @@ export class SubEmployeeRegistrationComponent {
     })
   }
   bu1ListFilter() {
-    return this.bu1.dataList.filter(x => x.bu1id.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.modal.search.toLowerCase()))
+    return this.bu1.dataList.filter(x => x.bu1id.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.search.toLowerCase()))
   }
   selectBu1(data?: Bu1Model) {
     this.employee.select.bu1 = new MyBu1Model(data)
@@ -334,9 +445,9 @@ export class SubEmployeeRegistrationComponent {
     })
   }
   bu2ListFilter() {
-    return this.bu2.dataList.filter(x => x.bu2id.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.modal.search.toLowerCase()))
+    return this.bu2.dataList.filter(x => x.bu2id.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.search.toLowerCase()))
   }
   selectBu2(data?: Bu2Model) {
     this.employee.select.bu2 = new MyBu2Model(data)
@@ -506,9 +617,9 @@ export class SubEmployeeRegistrationComponent {
     })
   }
   empGroupListFilter() {
-    return this.empGroup.dataList.filter(x => x.groupId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.edesc.toLowerCase().includes(this.modal.search.toLowerCase()))
+    return this.empGroup.dataList.filter(x => x.groupId.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.search.toLowerCase()))
   }
 
 
@@ -533,40 +644,52 @@ export class SubEmployeeRegistrationComponent {
     })
   }
   employeeModalListFilter() {
-    return this.employeeModal.dataList.filter(x => x.employeeId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.fname.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.lname.toLowerCase().includes(this.modal.search.toLowerCase()) ||
-      x.position.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()))
+    return this.employeeModal.dataList.filter(x => x.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.fname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.lname.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.position.tdesc.toLowerCase().includes(this.search.toLowerCase()))
   }
 
 
   updateEmployeeList(type: 'add' | 'update' | 'delete') {
     this.employee.loading = true
     let body: any = this.employee.select
-    switch (type) {
-      case 'delete': {
+    if (type == 'delete') {
+        if (this.numSelectItem() == 0) {
+          this.showAlert('กรุณาเลือกข้อมูลที่จะลบ', 'error')
+          return
+        }
         const selectedKeys = Array.from(this.selectedItems.data.keys());
         body = this.employee.dataList.filter(x => selectedKeys.includes(x.employeeId) && this.selectedItems.data.get(x.employeeId)).map(x => new MyEmployeeModel(x))
-        break;
-      }
     }
-    this.employeeService[type](body).subscribe({
-      next: response => {
-        if (response.success) {
-          this.showAlert(response.message, 'success')
-          this.search = ""
-          this.getEmployeeList()
-        } else {
-          this.showAlert(response.message, 'error')
-          this.employee.loading = false
-          this.cdr.detectChanges()
-        }
-      }, error: error => {
-        this.showAlert(error.message, 'error')
-        this.employee.loading = false
-        this.cdr.detectChanges()
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+      text: type == 'delete' ? 'ยืนยันการลบข้อมูลหรือไม่' : 'ยืนยันการบันทึกข้อมูลหรือไม่',
+      showCancelButton: true,
+      confirmButtonText: type == 'delete' ? 'ลบข้อมูล' : 'บันทึกข้อมูล',
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.employeeService[type](body).subscribe({
+          next: response => {
+            if (response.success) {
+              this.showAlert(response.message, 'success')
+              this.search = ""
+              this.getEmployeeList()
+            } else {
+              this.showAlert(response.message, 'error')
+              this.employee.loading = false
+              this.cdr.detectChanges()
+            }
+          }, error: error => {
+            this.showAlert(error.message, 'error')
+            this.employee.loading = false
+            this.cdr.detectChanges()
+          }
+        })
       }
     })
+
   }
   selectEmployee(data?: EmployeeModel) {
     if (this.currentModal == 'update' && !data) {
@@ -631,17 +754,21 @@ export class SubEmployeeRegistrationComponent {
   }
 
   searchModalChange(dataList: any[]) {
-    this.modal.currentPage = 1
-    this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
+    this.currentPage = 1
+    this.page = Math.ceil(dataList.length / this.pageSize);
   }
+ 
   selectDataModal(target: { [key: string]: any }, field: string, data: any) {
     target[field] = JSON.parse(JSON.stringify(data))
   }
 
   showAlert(text: string, type: 'success' | 'error') {
-    this.toastr[type](text, 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
+    Swal.fire({
+      icon: type,
+      title: 'แจ้งเตือน',
+      text: text,
+      showCancelButton: false,
+      confirmButtonText: 'ยืนยัน',
     })
   }