refs #6280 feat VnLocation approach

src/components/common/VnLocation.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { ref, toRefs, computed, watch } from 'vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const countriesOptions = ref([]);
+const postcodesOptions = ref([]);
+const postcodeFetchDataRef = 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 locationsRef = ref();
+const locationsRefFilter = ref({ fields: ['code', 'nickname'], limit: 30 });
+
+const { optionLabel, optionValue, options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+const vnSelectRef = ref();
+const showForm = ref(false);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
+const filter = (val, options) => {
+    const search = val.toString().toLowerCase();
+
+    if (!search) return options;
+    // if (!search.length < 2) return options;
+
+    return options
+};
+
+const filterHandler = (val, update) => {
+    update(
+        () => {
+            // if (val.length>2)
+                myOptions.value = filter(val, myOptionsOriginal.value);
+        },
+        (ref) => {
+            if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1);
+                ref.moveOptionSelection(1, true);
+            }
+        }
+    );
+};
+
+function locationFilter(val) {
+    let where = { limit: 30 };
+    let params = {};
+    let key = 'nickname';
+
+    if (new RegExp(/\d/g).test(val)) {
+        key = 'id';
+    }
+    params = { [key]: { like: `%${val}%` } };
+    where = Object.assign(where, params);
+    locationsRef.value.fetch({ where });
+}
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+function showLabel(data){
+    return `${data.code} - ${data.town.name}(${data.town.province.name}), ${data.town.province.country.country}`;
+}
+
+</script>
+
+<template>
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <VnSelectCreate
+        v-model="value"
+        :options="postcodesOptions"
+        :label="t('Location')"
+        :option-label="showLabel"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        @filter="filterHandler"
+        clearable
+        hide-selected
+        fill-input
+        :class="{ required: $attrs.required }"
+    >
+        <template #form>
+            <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
+        </template>
+        <template #option="scope">
+            <QItem v-bind="scope.itemProps">
+                <QItemSection v-if="scope.opt">
+                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                    <QItemLabel caption
+                        >{{ showLabel(scope.opt)}}</QItemLabel
+                    >
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelectCreate>
+</template>
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Location: Ubicación
+</i18n>