forked from verdnatura/salix-front
141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref, toRefs, computed, watch, onMounted } from 'vue';
|
|
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
|
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
const emit = defineEmits(['update:modelValue', 'update:options']);
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
const postcodesOptions = ref([]);
|
|
const postcodesRef = ref(null);
|
|
|
|
const $props = defineProps({
|
|
modelValue: {
|
|
type: [String, Number, Object],
|
|
default: null,
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
optionLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
optionValue: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
filterOptions: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
isClearable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
defaultFilter: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const { options } = toRefs($props);
|
|
const myOptions = ref([]);
|
|
const myOptionsOriginal = ref([]);
|
|
|
|
const value = computed({
|
|
get() {
|
|
return $props.modelValue;
|
|
},
|
|
set(value) {
|
|
emit(
|
|
'update:modelValue',
|
|
postcodesOptions.value.find((p) => p.code === value)
|
|
);
|
|
},
|
|
});
|
|
|
|
onMounted(() => {
|
|
locationFilter($props.modelValue);
|
|
});
|
|
|
|
function setOptions(data) {
|
|
myOptions.value = JSON.parse(JSON.stringify(data));
|
|
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
|
|
}
|
|
setOptions(options.value);
|
|
|
|
watch(options, (newValue) => {
|
|
setOptions(newValue);
|
|
});
|
|
|
|
function showLabel(data) {
|
|
return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
|
|
}
|
|
|
|
function locationFilter(search = '') {
|
|
if (
|
|
search &&
|
|
(search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
|
|
)
|
|
return;
|
|
let where = { search };
|
|
postcodesRef.value.fetch({ filter: { where }, limit: 30 });
|
|
}
|
|
|
|
function handleFetch(data) {
|
|
postcodesOptions.value = data;
|
|
}
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
ref="postcodesRef"
|
|
url="Postcodes/filter"
|
|
@on-fetch="(data) => handleFetch(data)"
|
|
/>
|
|
<VnSelectDialog
|
|
v-if="postcodesRef"
|
|
:option-label="(opt) => showLabel(opt) ?? 'code'"
|
|
:option-value="(opt) => opt.code"
|
|
v-model="value"
|
|
:options="postcodesOptions"
|
|
:label="t('Location')"
|
|
:placeholder="t('search_by_postalcode')"
|
|
@input-value="locationFilter"
|
|
:default-filter="false"
|
|
:input-debounce="300"
|
|
:class="{ required: $attrs.required }"
|
|
v-bind="$attrs"
|
|
clearable
|
|
>
|
|
<template #form>
|
|
<CreateNewPostcode @on-data-saved="locationFilter()" />
|
|
</template>
|
|
<template #option="{ itemProps, opt }">
|
|
<QItem v-bind="itemProps">
|
|
<QItemSection v-if="opt">
|
|
<QItemLabel>{{ opt.code }}</QItemLabel>
|
|
<QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelectDialog>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.add-icon {
|
|
cursor: pointer;
|
|
background-color: $primary;
|
|
border-radius: 50px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
en:
|
|
search_by_postalcode: Search by postalcode, town, province or country
|
|
es:
|
|
Location: Ubicación
|
|
search_by_postalcode: Buscar por código postal, ciudad o país
|
|
</i18n>
|