feat: fetch Province , District , SubDistrict

src/components/FormDialog.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 
+import { Province, District, SubDistrict } from 'stores/address';
+import useAddressStore from 'stores/address';
+
 defineProps<{
   title: string;
   addressTitle: string;
@@ -10,27 +13,64 @@ defineProps<{
   close?: (...args: unknown[]) => void;
 }>();
 
+const adrressStore = useAddressStore();
 const modal = defineModel('modal', { default: false });
 const address = defineModel('address', { default: '' });
 const addressEN = defineModel('addressEN', { default: '' });
-const provinceId = defineModel('provinceId');
+const provinceId = defineModel<string>('provinceId');
-const districtId = defineModel('districtId');
+const districtId = defineModel<string>('districtId');
-const subDistrictId = defineModel('subDistrictId');
+const subDistrictId = defineModel<string>('subDistrictId');
-const zipCode = defineModel('zipCode', { default: '' });
+const zipCode = defineModel<string>('zipCode', { default: '' });
 
-const addrOptions = ref({
+const addrOptions = ref<{
-  provinceOps: [
+  provinceOps?: Province[];
-    { label: 'เชียงใหม่', value: '1' },
+  districtOps?: District[];
-    { label: 'เชียงราย', value: '2' },
+  subDistrictOps?: SubDistrict[];
-  ],
+}>({});
-  districtOps: [
+
-    { label: 'อำเภอ1', value: '1' },
+async function fetchProvince() {
-    { label: 'อำเภอ2', value: '2' },
+  const result = await adrressStore.fetchProvince();
-  ],
+  if (result) {
-  subDistrictOps: [
+    addrOptions.value.provinceOps = result;
-    { label: 'ตำบล1', value: '1' },
+  }
-    { label: 'ตำบล2', value: '2' },
+}
-  ],
+
+async function fetchDistrict(id: string | undefined) {
+  if (id) {
+    const result = await adrressStore.fetchDistrictByProvinceId(id);
+    if (result) {
+      addrOptions.value.districtOps = result;
+    }
+  }
+}
+
+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 () => {
+  await fetchProvince();
+});
+
+watch(provinceId, async (v) => {
+  await fetchDistrict(v);
+});
+
+watch(districtId, async (v) => {
+  await fetchSubDistrict(v);
+});
+
+watch(subDistrictId, async (v) => {
+  zipCode.value =
+    addrOptions.value.subDistrictOps
+      ?.filter((x) => x.id === v)
+      .map((x) => x.zipCode)[0] ?? '';
 });
 </script>
 <template>
@@ -106,8 +146,8 @@ const addrOptions = ref({
                 map-options
                 id="selectProvinceL"
                 v-model="provinceId"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="name"
                 label="จังหวัด"
                 class="col-3"
                 :options="addrOptions.provinceOps"
@@ -119,8 +159,8 @@ const addrOptions = ref({
                 map-options
                 id="selectDistrictL"
                 v-model="districtId"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="name"
                 label="อำเภอ"
                 class="col-3"
                 :options="addrOptions.districtOps"
@@ -129,11 +169,11 @@ const addrOptions = ref({
                 dense
                 outlined
                 emit-value
-                map-
+                map-options
-                id="selectSubDistrictL"
+                id="SelectSubDistrictEN"
                 v-model="subDistrictId"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="name"
                 label="ตำบล"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
@@ -165,8 +205,8 @@ const addrOptions = ref({
                 map-options
                 id="selectProvinceEN"
                 v-model="provinceId"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="nameEN"
                 label="จังหวัด"
                 class="col-3"
                 :options="addrOptions.provinceOps"
@@ -178,8 +218,8 @@ const addrOptions = ref({
                 map-options
                 id="selectDistrictEN"
                 v-model="districtId"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="nameEN"
                 label="อำเภอ"
                 class="col-3"
                 :options="addrOptions.districtOps"
@@ -191,8 +231,8 @@ const addrOptions = ref({
                 map-options
                 id="SelectSubDistrictEN"
                 v-model="subDistrictId"
-                option-value="value"
+                option-value="id"
-                option-label="label"
+                option-label="nameEN"
                 label="ตำบล"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"