feat: select district & sub when edit

src/components/FormDialog.vue

@@ -13,6 +13,11 @@ defineProps<{
   close?: (...args: unknown[]) => void;
 }>();
 
+defineExpose({
+  fetchDistrict,
+  fetchSubDistrict,
+});
+
 const adrressStore = useAddressStore();
 const modal = defineModel('modal', { default: false });
 const address = defineModel('address', { default: '' });
@@ -48,39 +53,38 @@ async function fetchSubDistrict(id: string | undefined) {
   if (id) {
     const result = await adrressStore.fetchSubDistrictByProvinceId(id);
     if (result) {
-      console.log(addrOptions.value.subDistrictOps);
       addrOptions.value.subDistrictOps = result;
     }
   }
 }
 
-onMounted(async () => {
+async function selectProvince(id: string) {
-  await fetchProvince();
+  if (!id) return;
-});
+  districtId.value = undefined;
-
-watch(provinceId, async (v) => {
-  await fetchDistrict(v);
-});
-
-watch(districtId, async (v) => {
   subDistrictId.value = undefined;
-  await fetchSubDistrict(v);
+  addrOptions.value.districtOps = [];
-});
+  addrOptions.value.subDistrictOps = [];
+  zipCode.value = '';
+  await fetchDistrict(id);
+}
 
-watch(subDistrictId, async (v) => {
+async function selectDistrict(id: string) {
+  if (!id) return;
+  subDistrictId.value = undefined;
+  zipCode.value = '';
+  await fetchSubDistrict(id);
+}
+
+async function selectSubDistrict(id: string) {
+  if (!id) return;
   zipCode.value =
     addrOptions.value.subDistrictOps
-      ?.filter((x) => x.id === v)
+      ?.filter((x) => x.id === id)
       .map((x) => x.zipCode)[0] ?? '';
-});
+}
 
-watch(provinceId, (v) => {
+onMounted(async () => {
-  if (v) {
+  await fetchProvince();
-    addrOptions.value.districtOps = [];
-    addrOptions.value.subDistrictOps = [];
-    districtId.value = undefined;
-    subDistrictId.value = undefined;
-  }
 });
 </script>
 <template>
@@ -144,7 +148,7 @@ watch(provinceId, (v) => {
               <q-input
                 dense
                 outlined
-                id="AddrL"
+                id="Addr"
                 label="ที่อยู่"
                 class="col-12"
                 v-model="address"
@@ -154,45 +158,48 @@ watch(provinceId, (v) => {
                 outlined
                 emit-value
                 map-options
-                id="selectProvinceL"
+                id="selectProvince"
                 v-model="provinceId"
                 option-value="id"
                 option-label="name"
                 label="จังหวัด"
                 class="col-3"
                 :options="addrOptions.provinceOps"
+                @update:model-value="(v: string) => selectProvince(v)"
               />
               <q-select
                 dense
                 outlined
                 emit-value
                 map-options
-                id="selectDistrictL"
+                id="selectDistrict"
                 v-model="districtId"
                 option-value="id"
                 option-label="name"
                 label="อำเภอ"
                 class="col-3"
                 :options="addrOptions.districtOps"
+                @update:model-value="(v: string) => selectDistrict(v)"
               />
               <q-select
                 dense
                 outlined
                 emit-value
                 map-options
-                id="SelectSubDistrictEN"
+                id="SelectSubDistrict"
                 v-model="subDistrictId"
                 option-value="id"
                 option-label="name"
                 label="ตำบล"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
+                @update:model-value="(v: string) => selectSubDistrict(v)"
               />
               <q-input
                 dense
                 readonly
                 outlined
-                id="zipL"
+                id="zip"
                 label="รหัสไปรษณีย์"
                 class="col-3"
                 v-model="zipCode"
@@ -220,6 +227,7 @@ watch(provinceId, (v) => {
                 label="จังหวัด"
                 class="col-3"
                 :options="addrOptions.provinceOps"
+                @update:model-value="(v: string) => selectProvince(v)"
               />
               <q-select
                 dense
@@ -233,6 +241,7 @@ watch(provinceId, (v) => {
                 label="อำเภอ"
                 class="col-3"
                 :options="addrOptions.districtOps"
+                @update:model-value="(v: string) => selectDistrict(v)"
               />
               <q-select
                 dense
@@ -246,6 +255,7 @@ watch(provinceId, (v) => {
                 label="ตำบล"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
+                @update:model-value="(v: string) => selectSubDistrict(v)"
               />
               <q-input
                 dense