0
0
Fork 0

feat: formatLocation when field is null

This commit is contained in:
Javier Segarra 2024-09-20 13:45:43 +02:00
parent 26f34619c0
commit b822c7722b
1 changed files with 61 additions and 7 deletions

View File

@ -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">