diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue index a040e6e1e..62d4783d0 100644 --- a/src/components/common/VnSelect.vue +++ b/src/components/common/VnSelect.vue @@ -3,6 +3,7 @@ import { ref, toRefs, computed, watch, onMounted } from 'vue'; import { useI18n } from 'vue-i18n'; import { useArrayData } from 'src/composables/useArrayData'; import { useAttrs } from 'vue'; +import FetchData from 'components/FetchData.vue'; const emit = defineEmits(['update:modelValue', 'update:options', 'remove']); const $props = defineProps({ @@ -104,20 +105,45 @@ const noOneOpt = ref({ [optionLabel.value]: noOneText, }); +const useURL = computed(() => $props.url); const selectValue = computed({ get() { return $props.modelValue; }, set(value) { - arrayData.store.page = 0; - arrayData.store.hasMoreData = true; - // setOptions(myOptionsOriginal.value); + // arrayData.store.page = 0; + // arrayData.store.hasMoreData = true; + setOptions(myOptionsOriginal.value); emit('update:modelValue', value); }, }); -watch(options, (newValue) => { - setOptions(newValue); +// watch(options, (newValue) => { +// setOptions(newValue); +// }); + +// watch(modelValue, (newValue) => { +// if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) +// fetchFilter(newValue); +// }); + +// onMounted(() => { +// setOptions(options.value); +// if (useURL.value && $props.modelValue && !findKeyInOptions()) +// fetchFilter($props.modelValue); +// if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); +// }); + +const $attrs = useAttrs(); +const arrayDataKey = + $props.dataKey ?? (useURL.value?.length > 0 ? useURL.value : $attrs.label); + +const arrayData = useArrayData(arrayDataKey, { url: useURL.value }); + +onMounted(async () => { + if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); + setOptions(options.value); + if (useURL.value) fetchFilter($props.modelValue); }); watch(modelValue, (newValue) => { @@ -127,43 +153,7 @@ watch(modelValue, (newValue) => { onMounted(() => { setOptions(options.value); - if ($props.url && $props.modelValue && !findKeyInOptions()) - fetchFilter($props.modelValue); - if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); -}); - -watch(modelValue, async (newValue) => { - if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) - await fetchFilter(newValue); - - if ($props.noOne) myOptions.value.unshift(noOneOpt.value); -}); - -onMounted(() => { - setOptions(options.value); - if ($props.url && $props.modelValue && !findKeyInOptions()) - fetchFilter($props.modelValue); - if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); -}); - -const useURL = computed(() => $props.url); - -const $attrs = useAttrs(); -const arrayDataKey = - $props.dataKey ?? ($props.url.length > 0 ? $props.url : $attrs.label); - -const arrayData = useArrayData(arrayDataKey, { url: $props.url }); - -watch(modelValue, async (newValue) => { - if (!myOptions.value.some((option) => option[optionValue.value] == newValue)) - await fetchFilter(newValue); - - if ($props.noOne) myOptions.value.unshift(noOneOpt.value); -}); - -onMounted(() => { - setOptions(options.value); - if ($props.url && $props.modelValue && !findKeyInOptions()) + if (useURL.value && $props.modelValue && !findKeyInOptions()) fetchFilter($props.modelValue); if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300); }); @@ -177,7 +167,6 @@ function setOptions(data, append = true) { myOptions.value = JSON.parse(JSON.stringify(data)); if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); } - function filter(val, options) { const search = val?.toString()?.toLowerCase(); @@ -198,11 +187,12 @@ function filter(val, options) { return id == search || optionLabel.includes(search); }); } - +// const dataRef = ref(); async function fetchFilter(val) { - if (!$props.url || !dataRef.value) return; + if (!useURL.value) return; + + const { fields, sortBy, include, limit } = $props; - const { fields, include, sortBy, limit } = $props; const key = optionFilterValue.value ?? (new RegExp(/\d/g).test(val) @@ -218,11 +208,10 @@ async function fetchFilter(val) { }, {}); } else defaultWhere = { [key]: getVal(val) }; const where = { ...(val ? defaultWhere : {}), ...$props.where }; - const fetchOptions = { where, include, limit }; + const fetchOptions = { where, order: sortBy, include, limit }; if (fields) fetchOptions.fields = fields; - if (sortBy) fetchOptions.order = sortBy; - arrayData.store.userFilter = fetchOptions; + arrayData.store.order = fetchOptions.order; arrayData.store.skip = 0; arrayData.store.filter.skip = 0; const { data } = await arrayData.fetch({ append: true, updateRouter: false }); @@ -239,10 +228,7 @@ async function filterHandler(val, update) { let newOptions; if (!$props.defaultFilter) return update(); - if ( - $props.url && - ($props.limit || (!$props.limit && Object.keys(myOptions.value).length === 0)) - ) { + if (useURL.value) { newOptions = await fetchFilter(val); } else newOptions = filter(val, myOptionsOriginal.value); update( @@ -265,9 +251,9 @@ async function onScroll({ to, direction, from, index }) { const lastIndex = myOptions.value.length - 1; if (from === 0 && index === 0) return; - if (!useURL.value && !$props.fetchRef) return; + if (!useURL.value) return; if (direction === 'decrease') return; - if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) { + if (to === lastIndex && !isLoading.value) { isLoading.value = true; await arrayData.loadMore(); setOptions(arrayData.store.data); @@ -275,7 +261,6 @@ async function onScroll({ to, direction, from, index }) { isLoading.value = false; } } - function nullishToTrue(value) { return value ?? true; } @@ -284,16 +269,16 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);