fix: VnSelect

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);
 </script>
 
 <template>
-    <FetchData
+    <!-- <FetchData
         ref="dataRef"
-        :url="$props.url"
+        :url="useURL.value"
         @on-fetch="(data) => setOptions(data)"
         :where="where || { [optionValue]: value }"
         :limit="limit"
         :sort-by="sortBy"
         :fields="fields"
         :params="params"
-    />
+    /> -->
     <QSelect
         :input-debounce="$attrs.url ? 300 : 0"
         :loading="isLoading"

test/vitest/__tests__/components/common/VnSelect.spec.js

@@ -59,6 +59,9 @@ describe('VnSelect FETCH URL', () => {
                 optionLabel: 'name',
                 optionValue: 'id',
                 url: 'Suppliers',
+                sortBy: 'name DESC',
+                limit: '320',
+                fields: ['name'],
             },
             global: {
                 stubs: ['FetchData'],
@@ -79,7 +82,7 @@ describe('VnSelect FETCH URL', () => {
         const canceller = new AbortController();
         expect(axios.get).toHaveBeenCalledWith('Suppliers', {
             params: {
-                filter: '{"order":"","limit":"30","skip":0}',
+                filter: '{"limit":"320","where":{},"order":"name DESC","include":null,"fields":["name"],"skip":0}',
             },
             signal: canceller.signal,
         });