From 331a45ad4ecdeb42cb8f9f9937f65d9c163bab2e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 23 Jul 2024 04:57:35 +0000
Subject: [PATCH] fix: 01 form responsive

---
 .../FormBranchContact.vue                     |  12 +-
 .../FormBranchInformation.vue                 | 193 +++++++++---------
 .../01_branch-management/FormImage.vue        |  10 +-
 .../01_branch-management/FormLocation.vue     |   7 +-
 .../01_branch-management/FormQr.vue           |  10 +-
 .../02_personnel-management/FormAddress.vue   |  30 +--
 src/components/FormDialog.vue                 |   2 +-
 7 files changed, 145 insertions(+), 119 deletions(-)

diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index 6cffdae2..42d60deb 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -17,14 +17,16 @@ defineProps<{
 </script>
 <template>
   <div class="row col-12">
-    <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-    <div class="col-9 row q-col-gutter-md">
+    <div class="col-md-3 col-12 app-text-muted q-pb-sm">
+      • {{ $t(`${title}`) }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
         :dense="dense"
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        class="col-md-5 col-12"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputEmailHq')
@@ -39,7 +41,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-7"
+        class="col-md-7 col-12"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputTelephoneHq')
@@ -54,7 +56,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        class="col-md-5 col-12"
         :label="$t('formDialogInputContactName')"
         v-model="contactName"
         for="input-contact-name"
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 80903a0c..4e52302a 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -16,103 +16,110 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-  <div class="col-9 row q-col-gutter-md">
-    <q-input
-      :dense="dense"
-      outlined
-      readonly
-      hide-bottom-space
-      :class="{
-        'col-6': typeBranch == 'headOffice',
-        'col-4': typeBranch != 'headOffice',
-      }"
-      :label="$t('formDialogInputCode')"
-      v-model="code"
-      for="input-code"
-    />
+  <div class="row col-12">
+    <div class="col-md-3 col-12 app-text-muted q-pb-sm">
+      • {{ $t(`${title}`) }}
+    </div>
+    <div class="col-md-9 col-12 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        outlined
+        readonly
+        hide-bottom-space
+        :class="{
+          'col-12': $q.screen.xs,
+          'col-6': typeBranch == 'headOffice',
+          'col-4': typeBranch != 'headOffice',
+        }"
+        :label="$t('formDialogInputCode')"
+        v-model="code"
+        for="input-code"
+      />
 
-    <q-input
-      v-if="typeBranch !== 'headOffice'"
-      :dense="dense"
-      outlined
-      readonly
-      hide-bottom-space
-      :class="{
-        'col-6': typeBranch == 'headOffice',
-        'col-4': typeBranch != 'headOffice',
-      }"
-      :label="$t('branchLabelCode')"
-      v-model="codeSubBranch"
-      for="input-code-sub-branch"
-    />
+      <q-input
+        v-if="typeBranch !== 'headOffice'"
+        :dense="dense"
+        outlined
+        readonly
+        hide-bottom-space
+        :class="{
+          'col-12': $q.screen.xs,
+          'col-6': typeBranch == 'headOffice',
+          'col-4': typeBranch != 'headOffice',
+        }"
+        :label="$t('branchLabelCode')"
+        v-model="codeSubBranch"
+        for="input-code-sub-branch"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      :class="{
-        'col-6': typeBranch === 'headOffice',
-        'col-4': typeBranch !== 'headOffice',
-      }"
-      :label="$t('formDialogInputTaxNo')"
-      v-model="taxNo"
-      lazy-rules
-      :rules="[
-        (val) =>
-          (val && val.length === 13 && /[0-9]+/.test(val)) ||
-          $t('formDialogInputTaxNoValidate'),
-      ]"
-      for="input-tax-no"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        :class="{
+          'col-12': $q.screen.xs,
+          'col-6': typeBranch === 'headOffice',
+          'col-4': typeBranch !== 'headOffice',
+        }"
+        :label="$t('formDialogInputTaxNo')"
+        v-model="taxNo"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length === 13 && /[0-9]+/.test(val)) ||
+            $t('formDialogInputTaxNoValidate'),
+        ]"
+        for="input-tax-no"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-12"
-      :label="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHq')
-          : $t('formDialogInputNameSubBranch')
-      "
-      v-model="name"
-      lazy-rules
-      :rules="[(val) => val && val.length > 0]"
-      :error-message="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHqValidate')
-          : $t('formDialogInputNameSubBranchValidate')
-      "
-      for="input-name"
-    />
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        :label="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHq')
+            : $t('formDialogInputNameSubBranch')
+        "
+        v-model="name"
+        lazy-rules
+        :rules="[(val) => val && val.length > 0]"
+        :error-message="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHqValidate')
+            : $t('formDialogInputNameSubBranchValidate')
+        "
+        for="input-name"
+      />
 
-    <q-input
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-12"
-      v-model="nameEN"
-      :label="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHqEn')
-          : $t('formDialogInputNameSubBranchEn')
-      "
-      :rules="[(val) => val && val.length > 0]"
-      :error-message="
-        typeBranch === 'headOffice'
-          ? $t('formDialogInputNameHqEnValidate')
-          : $t('formDialogInputNameSubBranchEnValidate')
-      "
-      for="input-name-en"
+      <q-input
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        v-model="nameEN"
+        :label="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHqEn')
+            : $t('formDialogInputNameSubBranchEn')
+        "
+        :rules="[(val) => val && val.length > 0]"
+        :error-message="
+          typeBranch === 'headOffice'
+            ? $t('formDialogInputNameHqEnValidate')
+            : $t('formDialogInputNameSubBranchEnValidate')
+        "
+        for="input-name-en"
+      />
+    </div>
+    <q-separator
+      v-if="separator"
+      class="col-12 q-mt-xl q-mb-md"
+      style="padding-block: 0.5px"
     />
   </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
 </template>
diff --git a/src/components/01_branch-management/FormImage.vue b/src/components/01_branch-management/FormImage.vue
index 40855137..679fb8e6 100644
--- a/src/components/01_branch-management/FormImage.vue
+++ b/src/components/01_branch-management/FormImage.vue
@@ -14,10 +14,14 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ title }}</div>
+  <div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
   <div
-    :class="{ 'dark-form-show-img-qh': $q.dark.isActive }"
-    class="col-9 row q-mt-lg branch-form-show-img-hq"
+    :class="{
+      'dark-form-show-img-qh': $q.dark.isActive,
+      'q-mt-lg': !$q.screen.xs,
+      'q-mt-sm': $q.screen.xs,
+    }"
+    class="col-md-9 col-12 row branch-form-show-img-hq"
     style="min-height: 150px"
   >
     <div class="col-12 flex flex-center" v-if="image">
diff --git a/src/components/01_branch-management/FormLocation.vue b/src/components/01_branch-management/FormLocation.vue
index a07253b0..4d707588 100644
--- a/src/components/01_branch-management/FormLocation.vue
+++ b/src/components/01_branch-management/FormLocation.vue
@@ -18,8 +18,11 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-  <div class="col-9 q-mt-lg bordered rounded row no-padding">
+  <div class="col-md-3 col-12 app-text-muted">• {{ $t(`${title}`) }}</div>
+  <div
+    class="col-md-9 col-12 bordered rounded row no-padding"
+    :class="{ 'q-mt-lg': !$q.screen.xs, 'q-mt-sm': $q.screen.xs }"
+  >
     <div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
 
     <div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">
diff --git a/src/components/01_branch-management/FormQr.vue b/src/components/01_branch-management/FormQr.vue
index 67172ff4..d026815b 100644
--- a/src/components/01_branch-management/FormQr.vue
+++ b/src/components/01_branch-management/FormQr.vue
@@ -16,10 +16,14 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ title }}</div>
+  <div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
   <div
-    :class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
-    class="col-9 row q-mt-lg branch-form-show-qr-code"
+    :class="{
+      'dark-form-show-qr-code': $q.dark.isActive,
+      'q-mt-lg': !$q.screen.xs,
+      'q-mt-sm': $q.screen.xs,
+    }"
+    class="col-md-9 col-12 row branch-form-show-qr-code"
   >
     <div class="col-12 flex flex-center">
       <q-img v-if="qr" :src="qr as string" style="width: 150px; height: 150px">
diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 3ff32e8b..f8c7e3b9 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -113,10 +113,13 @@ watch(districtId, fetchSubDistrict);
     </div>
 
     <div class="col-12 row q-col-gutter-y-md">
-      <div class="col-3 q-pl-xl app-text-muted">
+      <div
+        class="col-md-3 col-12 app-text-muted"
+        :class="{ 'q-pl-xl': !$q.screen.xs }"
+      >
         {{ addressTitle || $t('formDialogTitleAddressPure') }}
       </div>
-      <div class="col-9 row q-col-gutter-md">
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
@@ -149,7 +152,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="name"
           :label="$t('province')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.provinceOps"
           :rules="
             disabledRule
@@ -176,7 +179,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="name"
           :label="$t('district')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.districtOps"
           :rules="
             disabledRule
@@ -202,7 +205,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="name"
           :label="$t('subDistrict')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.subDistrictOps"
           :rules="
             disabledRule
@@ -221,14 +224,17 @@ watch(districtId, fetchSubDistrict);
           outlined
           readonly
           :label="$t('zipCode')"
-          class="col-3"
+          class="col-md-3 col-6"
           v-model="zipCode"
         />
       </div>
-      <div class="col-3 q-pl-xl app-text-muted">
+      <div
+        class="col-md-3 col-12 app-text-muted"
+        :class="{ 'q-pl-xl': !$q.screen.xs }"
+      >
         {{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
       </div>
-      <div class="col-9 row q-col-gutter-md">
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
@@ -261,7 +267,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="nameEN"
           :label="$t('province')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.provinceOps"
           :rules="
             disabledRule
@@ -287,7 +293,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="nameEN"
           :label="$t('district')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.districtOps"
           :rules="
             disabledRule
@@ -313,7 +319,7 @@ watch(districtId, fetchSubDistrict);
           option-value="id"
           option-label="nameEN"
           :label="$t('subDistrict')"
-          class="col-3"
+          class="col-md-3 col-6"
           :options="addrOptions.subDistrictOps"
           :rules="
             disabledRule
@@ -334,7 +340,7 @@ watch(districtId, fetchSubDistrict);
           readonly
           zip="zip-en"
           :label="$t('zipCode')"
-          class="col-3"
+          class="col-md-3 col-6"
           v-model="zipCode"
         />
       </div>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 6cfd74bc..28097805 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -49,7 +49,7 @@ const currentTab = defineModel<string>('currentTab');
     <div
       class="surface-1"
       style="padding: 0; border-radius: var(--radius-2); height: 100%"
-      :style="`max-width:${maxWidth ? maxWidth : '85%'}; width: ${width ? width : '85%'}; height: ${height ? height : '85vh'} `"
+      :style="`max-width:${$q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%'}; width: ${$q.screen.xs ? '100%' : width ? width : '85%'}; height: ${height ? height : '85vh'} `"
     >
       <q-form
         greedy