updates

src/components/FetchData.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted } from 'vue';
 import axios from 'axios';
-import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     autoLoad: {
@@ -36,7 +35,6 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch']);
 defineExpose({ fetch });
-// const fetchData = useFetchData({ ...$props });
 onMounted(async () => {
     if ($props.autoLoad) {
         await fetch();

src/components/common/VnSelect.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { ref, toRefs, computed, watch, h, onMounted } from 'vue';
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
-import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     modelValue: {
@@ -86,19 +85,18 @@ function setOptions(data, append = true) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-const useURL = computed(() => $props.url?.length > 0);
+const useURL = computed(() => $props.url);
 import { useAttrs } from 'vue';
 
 const $attrs = useAttrs();
 const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
-const arrayDataOptions =
+const arrayDataOptions = {
-    {
+    url: $props.url,
-        url: $props.url,
+    where: $props.where,
-        where: $props.where,
+    limit: $props.limit,
-        limit: $props.limit,
+    sortBy: $props.sortBy,
-        sortBy: $props.sortBy,
+    fields: $props.fields,
-        fields: $props.fields,
+};
-    } ?? {};
 const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
 onMounted(async () => {
     setOptions(options.value);
@@ -106,7 +104,7 @@ onMounted(async () => {
     if (useURL.value) {
         arrayData.store.userFilter = $props.where;
         arrayData.store.filter.where = $props.where;
-        const { data } = await arrayData.fetch({ append: true });
+        const { data } = await arrayData.fetch({ append: true, updateRouter: false });
         setOptions(data);
     }
 });

src/composables/useFetchData.js

@@ -1,30 +0,0 @@
-// import { ref } from 'vue';
-import axios from 'axios';
-
-export function useFetchData(props) {
-    // const data = ref(null);
-
-    async function fetch(fetchFilter = {}) {
-        try {
-            const filter = Object.assign(fetchFilter, props.filter);
-            if (props.where && !fetchFilter.where) filter.where = props.where;
-            if (props.sortBy) filter.order = props.sortBy;
-            if (props.limit) filter.limit = props.limit;
-
-            const response = await axios.get(props.url, {
-                params: { filter: JSON.stringify(filter), ...props.params },
-            });
-
-            // data.value = response.data;
-            return response.data;
-        } catch (e) {
-            // Manejo de errores
-            console.error(e);
-        }
-    }
-
-    return {
-        // data,
-        fetch,
-    };
-}

src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
+// import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -15,26 +15,15 @@ const props = defineProps({
     },
 });
 
-const salespersons = ref();
+// const salespersons = ref();
-const countries = ref();
+// const countries = ref();
-const authors = ref();
+// const authors = ref();
-const departments = ref();
+// const departments = ref();
 </script>
 
 <template>
-    <FetchData
+    <!-- <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" /> -->
-        :filter="{ where: { role: 'salesPerson' } }"
+    <!-- <FetchData @on-fetch="(data) => (departments = data)" auto-load /> -->
-        @on-fetch="(data) => (salespersons = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
-    <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
-    <FetchData
-        @on-fetch="(data) => (authors = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
-    <FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />
 
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -64,6 +53,7 @@ const departments = ref();
                     />
                 </QItemSection>
             </QItem>
+
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnSelect
@@ -87,11 +77,11 @@ const departments = ref();
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="departments">
+                <QItemSection>
                     <VnSelect
                         :input-debounce="0"
                         :label="t('Departments')"
-                        :options="departments"
+                        url="Departments"
                         dense
                         emit-value
                         hide-selected
@@ -105,40 +95,13 @@ const departments = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="departments">
+                <QItemSection>
-                    <VnSelect
-                        :input-debounce="0"
-                        :label="t('Departments')"
-                        :options="departments"
-                        dense
-                        emit-value
-                        hide-selected
-                        map-options
-                        option-label="name"
-                        option-value="id"
-                        outlined
-                        rounded
-                        use-input
-                        v-model="params.departmentFk"
-                        @update:model-value="searchFn()"
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
-            </QItem>
-
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="countries">
                     <VnSelect
                         :input-debounce="0"
                         :label="t('Country')"
-                        :options="countries"
+                        url="Countries"
                         dense
                         emit-value
                         hide-selected
@@ -152,9 +115,6 @@ const departments = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">