feat: formatLocation when field is null

src/components/common/VnLocation.vue

@@ -2,21 +2,68 @@
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
-
+import { ref } from 'vue';
 const { t } = useI18n();
-const value = defineModel({ type: [String, Number, Object] });
+const emit = defineEmits(['update:model-value', 'update:options']);
+
+const props = defineProps({
+    location: {
+        type: Object,
+        default: null,
+    },
+});
+const formatLocation = (obj, properties) => {
+    const parts = properties.map((prop) => {
+        if (typeof prop === 'string') {
+            return obj[prop];
+        } else if (typeof prop === 'function') {
+            return prop(obj);
+        }
+        return null;
+    });
+
+    const filteredParts = parts.filter(
+        (part) => part !== null && part !== undefined && part !== ''
+    );
+
+    return filteredParts.join(', ');
+};
+
+const locationProperties = [
+    'postcode',
+    (obj) =>
+        obj.city
+            ? `${obj.city}${obj.province?.name ? `(${obj.province.name})` : ''}`
+            : null,
+    (obj) => obj.country?.name,
+];
+
+const modelValue = ref(
+    props.location ? formatLocation(props.location, locationProperties) : null
+);
+
+const handleModelValue = (data) => {
+    emit('update:model-value', data);
+};
 
 function showLabel(data) {
-    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+    const dataProperties = [
+        'code',
+        (obj) => (obj.town ? `${obj.town}(${obj.province})` : null),
+        'country',
+    ];
+    return formatLocation(data, dataProperties);
 }
 </script>
 <template>
     <VnSelectDialog
-        v-model="value"
-        option-value="code"
+        v-model="modelValue"
         option-filter-value="search"
-        :option-label="(opt) => showLabel(opt)"
+        :option-label="
+            (opt) => (typeof modelValue === 'string' ? modelValue : showLabel(opt))
+        "
         url="Postcodes/filter"
+        @update:model-value="handleModelValue"
         :use-like="false"
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
@@ -27,7 +74,14 @@ function showLabel(data) {
         :emit-value="false"
     >
         <template #form>
-            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
+            <CreateNewPostcode
+                @on-data-saved="
+                    (newValue) => {
+                        modelValue = newValue;
+                        emit('update:model-value', newValue);
+                    }
+                "
+            />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">