modal

src/app/components/company-registration/branch-business-unit/department-register/department-register.component.scss

@@ -56,3 +56,163 @@
   color: #569bf5;
   border-bottom: 3.5px solid #569bf5;
 }
+
+//modal
+$modal-padding: 20px;
+$header-footer-color: #f4f4f400;
+$border-color: #ddd;
+$header-footer-height: 60px; // กำหนดความสูงของ header + footer รวมกัน
+
+$modal-sizes: (
+  s: 300px,
+  m: 500px,
+  l: 800px,
+  vw10: 10vw,
+  vw20: 20vw,
+  vw30: 30vw,
+  vw40: 40vw,
+  vw50: 50vw,
+  vw60: 60vw,
+  vw70: 70vw,
+  vw80: 80vw,
+  vw90: 90vw,
+  vw100: 100vw
+);
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh; // จำกัดความสูงของ Modal ทั้งหมด
+
+  @each $size, $width in $modal-sizes {
+    &.#{$size} {
+      width: $width;
+    }
+  }
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .modal-header {
+    background-color: $header-footer-color;
+    padding: $modal-padding;
+    border-bottom: 1px solid $border-color;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: $header-footer-height; // กำหนดความสูงของ Header
+    .modal-head-title {
+      color: rgb(var(--color-primary));
+      font-weight: 700;
+      font-size: large;
+    }
+  }
+
+  .modal-body {
+    flex: 1;
+    overflow-y: auto; // ทำให้สามารถ scroll ได้
+    padding: $modal-padding;
+    max-height: calc(80vh - #{$header-footer-height * 2}); // คำนวณความสูงของ Body หลังจากหัก Header และ Footer
+  }
+
+  .modal-footer {
+    background-color: $header-footer-color;
+    padding: $modal-padding;
+    border-top: 1px solid $border-color;
+    display: flex;
+    justify-content: flex-end;
+    height: $header-footer-height; // กำหนดความสูงของ Footer
+  }
+  .button-clear {
+    position: absolute;
+    right: 105px;
+    top: 60px;
+    z-index: 1;
+    .modal-button {
+      border-radius: 7px !important;
+    }
+  }
+  .button-help {
+    position: absolute;
+    right: 15px;
+    top: 60px;
+    z-index: 1;
+    .modal-button {
+      border-radius: 7px !important;
+    }
+  }
+
+  .modal-input-small {
+    width: 50%;
+  }
+  .modal-input-full {
+    width: 100%;
+  }
+
+  .modal-button-green {
+    min-width: 5rem;
+    background-color: #1dbe5a;
+    --tw-text-opacity: 1;
+    color: #ffffff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    border-width: 1px;
+    border-color: transparent;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .modal-button-white {
+    min-width: 5rem;
+    background-color: #ffffff;
+    --tw-text-opacity: 1;
+    color: #475569;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    border-width: 1px;
+    border-color: transparent;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    --tw-border-opacity: 1;
+    border-color: rgb(226 232 240 / var(--tw-border-opacity));
+  }
+}

src/app/components/company-registration/branch-business-unit/department-register/department-register.component.ts

@@ -6,4 +6,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./department-register.component.scss']
 })
 export class DepartmentRegisterComponent {
+  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 อื่นเปิด
+  }
+
 }

src/assets/css/style.css

@@ -1604,7 +1604,7 @@ select option:active,
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 .box-body{
-  padding: 0rem;
+  padding: 1.5rem;
 }
 .box-footer{
   border-bottom-right-radius: 0.25rem;

src/styles.scss

@@ -357,8 +357,6 @@ ngx-dropzone {
   display: flex;
   padding: 1rem 1rem 0.5rem 1rem;
   font-size: x-large;
-  margin-bottom: 10px;
-  margin-left: 15px;
 }
 .bg-card-white {
   background-color: #ffffff;
@@ -479,9 +477,9 @@ ngx-dropzone {
 }
 .button-red-light {
   min-width: 5rem;
-  background-color: #FEDDDE;
+  background-color: #feddde;
   --tw-text-opacity: 1;
-  color: #F23354;
+  color: #f23354;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -500,12 +498,11 @@ ngx-dropzone {
   transition-duration: 150ms;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
 }
-
-.button-red-light {
+.button-indigo-light {
   min-width: 5rem;
-  background-color: #FEDDDE;
+  background-color: #dce3fe;
   --tw-text-opacity: 1;
-  color: #F23354;
+  color: #595bea;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -524,7 +521,6 @@ ngx-dropzone {
   transition-duration: 150ms;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
 }
-
 .shadow-gray-smoke {
   box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
 }
@@ -532,10 +528,9 @@ ngx-dropzone {
 .head-table {
   padding: 10px 20px; /* เพิ่มระยะขอบ */
   font-weight: bold !important;
-  font-size: 12px !important;
-  background-color: #E6F0FF !important; /* พื้นหลังสำหรับ header */
+  font-size: large !important;
+  background-color: #e6f0ff !important; /* พื้นหลังสำหรับ header */
   color: rgb(var(--color-primary));
-  text-align: center !important;
 }
 
 .head-table-icon {
@@ -546,7 +541,11 @@ ngx-dropzone {
   display: flex;
   justify-content: center;
 }
-.body-table-left{
+.body-table-left {
   display: flex;
   margin-left: 20px;
 }
+
+.input-disabled {
+  background-color: #aaaaaa !important;
+}