sub-department-four.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-sub-department-four',
  templateUrl: './sub-department-four.component.html',
  styleUrls: ['./sub-department-four.component.scss']
})
export class SubDepartmentFourComponent {
  modalOptions: {
    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
      isModalOpen: boolean; // เปิด/ปิด 
      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
    }
  } = {
      "add": {
        isModalOpen: false,
        modalSize: 'm',
        backdropClose: true,
      },
      "edit": {
        isModalOpen: false,
        modalSize: 'm',
        backdropClose: true,
      }
    }

  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
    this.modalOptions[name].modalSize = size;
    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
    this.modalOptions[name].isModalOpen = true;
    document.body.style.overflow = 'hidden'; // ล็อก Scroll
  }

  closeModal(name: string) {
    this.modalOptions[name].isModalOpen = false;
    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
    if (!this.isAnyModalOpen()) {
      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
    }
  }

  isAnyModalOpen(): boolean {
    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
  }

}