feat:ทำ dark ของ form code

src/pages/01_branch-management/MainPage.vue

@@ -48,6 +48,7 @@ const openBranchDrawer = ref<boolean>(false);
 const openCardDetails = ref<boolean>(false);
 const openTableCard = ref<boolean>(true);
 
+const formDialogRef = ref();
 const inputSelectBranch = ref<string>('ทั้งหมด');
 const inputFilter = ref<string>('คอลัมน์');
 const inputSearch = ref<string>('');
@@ -190,15 +191,17 @@ function triggerCreateSubBranch(code: string, id: string) {
   openDialog();
 }
 
-function triggerEditSubBranch(code: string, id: string) {
+async function triggerEditSubBranch(code: string, id: string) {
-  clearData();
+  await clearData();
   formType.value = 'edit';
   typeBranch.value = 'subBranch';
   inputCode.value = code;
   formData.value.headOfficeId = id;
   currentBranchIdEdit.value = id;
-  fetchFormEditBranch(id);
+  await fetchFormEditBranch(id);
-  fetchFormEditBranchContact(id);
+  await fetchFormEditBranchContact(id);
+  await formDialogRef.value.fetchDistrict(formData.value.provinceId);
+  await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
   openDialog();
 }
 
@@ -229,13 +232,17 @@ function triggerCreateHeadOffice() {
   openDialog();
 }
 
-function triggerEditHeadOffice(id: string) {
+async function triggerEditHeadOffice(id: string) {
-  clearData();
+  await clearData();
   formType.value = 'edit';
   typeBranch.value = 'headOffice';
   currentBranchIdEdit.value = id;
-  fetchFormEditBranch(id);
+  await fetchFormEditBranch(id);
-  fetchFormEditBranchContact(id);
+  await fetchFormEditBranchContact(id);
+
+  await formDialogRef.value.fetchDistrict(formData.value.provinceId);
+  await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
+
   openDialog();
 }
 
@@ -257,8 +264,6 @@ function triggerDeleteHeadOffice(id: string) {
     },
     cancel: () => {},
   });
-
-  // openDialog();
 }
 
 async function fetchFormEditBranch(id: string) {
@@ -339,9 +344,6 @@ async function submitForm(
       modal.value = false;
       return;
     }
-    if (typeSubmit === 'delete') {
-      return;
-    }
   }
 
   if (formTypeSubmit === 'subBranch') {
@@ -371,10 +373,6 @@ async function submitForm(
       modal.value = false;
       return;
     }
-
-    if (typeSubmit === 'delete') {
-      return;
-    }
   }
 }
 
@@ -737,6 +735,7 @@ onMounted(async () => {
   />
 
   <FormDialog
+    ref="formDialogRef"
     v-model:modal="modal"
     addressTitle="ที่อยู่"
     addressENTitle="address"
@@ -753,20 +752,28 @@ onMounted(async () => {
       <div class="row full-width">
         <div class="col">
           <q-input
+            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="inputCode"
             dense
             outlined
-            label="รหัสสำนักงานใหญ่"
+            :label="$t('formDialogInputCode')"
             readonly
           />
         </div>
 
         <div class="col q-pl-md">
           <q-input
+            hide-bottom-space
+            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="formData.taxNo"
             dense
             outlined
-            label="เลขประจำตัวผู้เสียภาษี"
+            :label="$t('formDialogInputTaxNo')"
+            lazy-rules
+            :rules="[
+              (val) =>
+                (val && val.length > 0) || $t('formDialogInputTaxNoValidate'),
+            ]"
           />
         </div>
       </div>
@@ -774,68 +781,93 @@ onMounted(async () => {
       <div class="row full-width">
         <div class="col">
           <q-input
+            hide-bottom-space
+            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="formData.name"
             dense
             outlined
-            label="ชื่อสำนักงานใหญ่"
+            :label="
+              typeBranch === 'headOffice'
+                ? $t('formDialogInputNameHq')
+                : $t('formDialogInputNameSubBranch')
+            "
+            lazy-rules
+            :rules="[(val) => val && val.length > 0]"
+            :error-message="
+              typeBranch === 'headOffice'
+                ? $t('formDialogInputNameHqValidate')
+                : $t('formDialogInputNameSubBranchValidate')
+            "
           />
         </div>
 
         <div class="col q-pl-md">
           <q-input
+            hide-bottom-space
+            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="formData.nameEN"
             dense
             outlined
-            label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
+            :label="
+              typeBranch === 'headOffice'
+                ? $t('formDialogInputNameHqEn')
+                : $t('formDialogInputNameSubBranchEn')
+            "
+            :rules="[(val) => val && val.length > 0]"
+            :error-message="
+              typeBranch === 'headOffice'
+                ? $t('formDialogInputNameHqEnValidate')
+                : $t('formDialogInputNameSubBranchEnValidate')
+            "
           />
         </div>
       </div>
     </template>
 
     <template #append>
-      <AppBox class="q-mt-md" style="background: var(--gray-1)">
+      <AppBox
+        class="q-mt-md branch-form-input-Contact"
+        :class="{ 'dark-form-input-Contact': $q.dark.isActive }"
+      >
         <div class="row q-mb-md">
           <div class="col">
             <q-input
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              hide-bottom-space
               v-model="formDataContact.telephoneNo"
               dense
               outlined
-              label="เบอร์โทรศัพท์"
+              :label="$t('formDialogInputTelephoneContact')"
             />
           </div>
           <div class="col q-pl-md">
             <q-input
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              hide-bottom-space
               v-model="formDataContact.lineId"
               dense
               outlined
-              label="id line"
+              label="Line Id"
             />
           </div>
         </div>
 
         <div
-          style="
+          class="branch-form-show-qr-code q-pa-md column items-center justify-center full-width"
-            border: 2px dashed var(--gray-4);
+          :class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
-            border-radius: 10px;
-            background-image: linear-gradient(
-              180deg,
-              var(--indigo-0),
-              var(--sand-0)
-            );
-          "
-          class="q-pa-md column items-center justify-center full-width"
         >
-          <div class="col q-pb-md" style="opacity: 0.3">
+          <div class="col q-pb-md">
             <q-img
               v-if="urlQrCode"
               :src="urlQrCode as string"
               style="width: 100px; height: 100px"
             />
             <q-btn
+              class="branch-form-btn-qr-code"
               v-else
               unelevated
-              class="bg-white"
+              :color="$q.dark.isActive ? 'grey-10' : 'grey-2'"
-              style="border: 3px solid grey; border-radius: 6px"
+              :text-color="$q.dark.isActive ? 'white' : 'grey-5'"
             >
               <Icon icon="teenyicons:add-outline" width="20px" height="50px" />
             </q-btn>
@@ -849,7 +881,7 @@ onMounted(async () => {
               "
               unelevated
               rounded
-              label="อัปโหลด QR Code"
+              :label="$t('formDialogUploadQrCode')"
               @click="inputFile.click()"
             ></q-btn>
           </div>
@@ -865,7 +897,7 @@ onMounted(async () => {
               v-model="formData.telephoneNo"
               dense
               outlined
-              label="เบอร์โทรศัพท์สำนักงานใหฐ่"
+              :label="$t('formDialogInputTelephoneHq')"
             />
           </div>
           <div class="col">
@@ -873,7 +905,7 @@ onMounted(async () => {
               v-model="formData.email"
               dense
               outlined
-              label="อีเมลติดต่อสำนักงานใหญ่ "
+              :label="$t('formDialogInputEmailHq')"
             />
           </div>
         </div>
@@ -908,6 +940,40 @@ onMounted(async () => {
   background-size: auto;
 }
 
+.branch-form-show-qr-code {
+  --_bg-branch-form-show-qr-code: linear-gradient(
+    180deg,
+    var(--indigo-0),
+    var(--sand-0)
+  );
+
+  --_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
+  border: var(--_border-branch-form-show-qr-code);
+  border-radius: 10px;
+  background-image: var(--_bg-branch-form-show-qr-code);
+
+  &.dark-form-show-qr-code {
+    background: var(--gray-9);
+  }
+}
+
+.branch-form-btn-qr-code {
+  --_color-btn-qr-code: 3px solid var(--gray-4);
+
+  border: var(--_color-btn-qr-code);
+  border-radius: 6px;
+}
+
+.branch-form-input-Contact {
+  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
+  background: hsl(var(--_bg-branch-form-input-Contact));
+
+  &.dark-form-input-Contact {
+    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
+    border: 2px solid var(--gray-9);
+  }
+}
+
 .branch-container {
   --_color-branch-tree-text: var(--blue-6-hsl);
   --_color-branch-title: var(--blue-10-hsl);