From 53c7cad8628d43c4ee90569c5fbed6d1bda20bce Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 11 Apr 2024 14:54:16 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormDialog.vue | 57 ++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 895f1199..d3d3ca38 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -89,7 +89,7 @@ onMounted(async () => {
 </script>
 <template>
   <q-dialog full-width v-model="modal">
-    <AppBox style="padding: 0; border-radius: var(--radius-2)">
+    <AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
         <q-card-section class="form-header">
@@ -146,14 +146,22 @@ onMounted(async () => {
                 {{ $t(addressTitle || 'address') }}
               </div>
               <q-input
+                hide-bottom-space
                 dense
                 outlined
                 id="Addr"
-                label="ที่อยู่"
+                :label="$t('address')"
                 class="col-12"
                 v-model="address"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputAddressValidate'),
+                ]"
               />
               <q-select
+                hide-bottom-space
                 dense
                 outlined
                 emit-value
@@ -162,12 +170,19 @@ onMounted(async () => {
                 v-model="provinceId"
                 option-value="id"
                 option-label="name"
-                label="จังหวัด"
+                :label="$t('province')"
                 class="col-3"
                 :options="addrOptions.provinceOps"
                 @update:model-value="(v: string) => selectProvince(v)"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputProvinceValidate'),
+                ]"
               />
               <q-select
+                hide-bottom-space
                 dense
                 outlined
                 emit-value
@@ -176,12 +191,19 @@ onMounted(async () => {
                 v-model="districtId"
                 option-value="id"
                 option-label="name"
-                label="อำเภอ"
+                :label="$t('district')"
                 class="col-3"
                 :options="addrOptions.districtOps"
                 @update:model-value="(v: string) => selectDistrict(v)"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputDistrictValidate'),
+                ]"
               />
               <q-select
+                hide-bottom-space
                 dense
                 outlined
                 emit-value
@@ -190,28 +212,41 @@ onMounted(async () => {
                 v-model="subDistrictId"
                 option-value="id"
                 option-label="name"
-                label="ตำบล"
+                :label="$t('subDistrict')"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
                 @update:model-value="(v: string) => selectSubDistrict(v)"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputSubDistrictValidate'),
+                ]"
               />
               <q-input
                 dense
                 readonly
                 outlined
                 id="zip"
-                label="รหัสไปรษณีย์"
+                :label="$t('zipCode')"
                 class="col-3"
                 v-model="zipCode"
               />
               <span class="col-12">{{ $t(addressTitle || 'address') }} EN</span>
               <q-input
+                hide-bottom-space
                 dense
                 outlined
                 id="addressEN"
-                label="ที่อยู่"
+                :label="$t('address')"
                 class="col-12"
                 v-model="addressEN"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputAddressValidate'),
+                ]"
               />
               <q-select
                 dense
@@ -222,7 +257,7 @@ onMounted(async () => {
                 v-model="provinceId"
                 option-value="id"
                 option-label="nameEN"
-                label="จังหวัด"
+                :label="$t('province')"
                 class="col-3"
                 :options="addrOptions.provinceOps"
                 @update:model-value="(v: string) => selectProvince(v)"
@@ -236,7 +271,7 @@ onMounted(async () => {
                 v-model="districtId"
                 option-value="id"
                 option-label="nameEN"
-                label="อำเภอ"
+                :label="$t('district')"
                 class="col-3"
                 :options="addrOptions.districtOps"
                 @update:model-value="(v: string) => selectDistrict(v)"
@@ -250,7 +285,7 @@ onMounted(async () => {
                 v-model="subDistrictId"
                 option-value="id"
                 option-label="nameEN"
-                label="ตำบล"
+                :label="$t('subDistrict')"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
                 @update:model-value="(v: string) => selectSubDistrict(v)"
@@ -260,7 +295,7 @@ onMounted(async () => {
                 readonly
                 outlined
                 zip="zipEN"
-                label="รหัสไปรษณีย์"
+                :label="$t('zipCode')"
                 class="col-3"
                 v-model="zipCode"
               />