updates

2024-05-25 10:00:58 +02:00 · 2024-05-25 10:00:58 +02:00 · 1ca6bce7fe
parent e67c5e17f4
commit 1ca6bce7fe
6 changed files with 59 additions and 82 deletions
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-import { useArrayData } from 'composables/useArrayData';
+import { onMounted } from 'vue';
+import axios from 'axios';

 const $props = defineProps({
    autoLoad: {
@ -24,12 +24,8 @@ const $props = defineProps({
        default: '',
    },
    limit: {
-        type: Number,
-        default: 30,
-    },
-    skip: {
-        type: Number,
-        default: 0,
+        type: String,
+        default: '',
    },
    params: {
        type: Object,
@ -37,27 +33,8 @@ const $props = defineProps({
    },
 });

-const arrayData = useArrayData($props.url ?? $props.dataKey, {
-    autoLoad: $props.autoLoad,
-    url: $props.url,
-    filter: $props.filter,
-    where: $props.where,
-    sortBy: $props.sortBy,
-    limit: $props.limit,
-    params: $props.params,
-});
-const store = arrayData.store;
-
-const pagination = ref({
-    sortBy: $props.sortBy,
-    skip: $props.skip,
-    rowsPerPage: +$props.limit,
-    page: 0,
-    hasMoreData: true,
-});
-
 const emit = defineEmits(['onFetch']);
-defineExpose({ fetch, pagination });
+defineExpose({ fetch });

 onMounted(async () => {
    if ($props.autoLoad) {
@ -71,17 +48,10 @@ async function fetch(fetchFilter = {}) {
        if ($props.where && !fetchFilter.where) filter.where = $props.where;
        if ($props.sortBy) filter.order = $props.sortBy;
        if ($props.limit) filter.limit = $props.limit;
-        if ($props.skip) filter.skip = $props.skip;
-        else {
-            const skip = pagination.value.page * $props.limit;
-            pagination.value.skip = skip;
-            filter.skip = skip;
-        }
-        await arrayData.applyFilter({ filter });

-        const { data } = store;
-        pagination.value.hasMoreData = data.length === pagination.value.rowsPerPage;
-        pagination.value.page += 1;
+        const { data } = await axios.get($props.url, {
+            params: { filter: JSON.stringify(filter), ...$props.params },
+        });

        emit('onFetch', data);
        return data;
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -4,6 +4,7 @@ import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useArrayData } from 'src/composables/useArrayData';

 const $props = defineProps({
    modelValue: {
@ -42,10 +43,10 @@ const $props = defineProps({
        type: Boolean,
        default: true,
    },
-    paginate: {
-        type: Boolean,
-        default: true,
-    },
+    // paginate: {
+    //     type: Boolean,
+    //     default: true,
+    // },
    fields: {
        type: Array,
        default: null,
@ -58,18 +59,18 @@ const $props = defineProps({
        type: String,
        default: null,
    },
-    orderBy: {
-        type: String,
-        default: null,
-    },
+    // orderBy: {
+    //     type: String,
+    //     default: null,
+    // },
    limit: {
        type: [Number, String],
        default: '30',
    },
-    fetchRef: {
-        type: Object,
-        default: null,
-    },
+    // fetchRef: {
+    //     type: Object,
+    //     default: null,
+    // },
 });

 const { t } = useI18n();
@ -90,13 +91,30 @@ const value = computed({
    },
 });

-function setOptions(data) {
+function setOptions(data, append = false) {
    if (isLoading.value) {
        data.unshift(...myOptions.value);
    }
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    if (arrayData.store) {
+        //     arrayData.store.data = data;
+        arrayData.store.hasMoreData = data.length === +$props.limit;
+        append && myOptions.value.concat(data);
+        // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    } else {
+        myOptions.value = JSON.parse(JSON.stringify(data));
+        myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    }
 }
+const useURL = computed(() => $props.url?.length > 0);
+const arrayData = useURL.value
+    ? useArrayData($props.url, {
+          url: $props.url,
+          fields: $props.fields,
+          where: $props.where,
+          sortBy: $props.sortBy,
+          limit: $props.limit,
+      })
+    : ref(null);
 onMounted(() => {
    setOptions(options.value);
    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
@ -166,15 +184,23 @@ watch(modelValue, (newValue) => {
 const isLoading = ref(false);

 async function onScroll(scrollEv) {
-    const { to, direction } = scrollEv;
+    const { to, direction, from, index } = scrollEv;
    const lastIndex = myOptions.value.length - 1;

+    if (from === 0 && index === 0) return;
    if (!$props.url && !$props.fetchRef) return;
    if (direction === 'decrease') return;
-    if (to === lastIndex && dataRef.value.pagination.hasMoreData && !isLoading.value) {
+    if (to === lastIndex && arrayData.store.hasMoreData && !isLoading.value) {
        isLoading.value = true;
        !$props.url && (await $props.fetchRef.paginate());
-        $props.url && (await fetchFilter(''));
+        $props.url && (await arrayData.loadMore());
+        setOptions(
+            arrayData.store.data.slice(
+                myOptions.value.length,
+                myOptions.value.length + 5
+            ),
+            true
+        );
        isLoading.value = false;
    }
 }
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@ -79,7 +79,8 @@ export function useArrayData(key, userOptions) {
            exprFilter = where ? { where } : null;
        }

-        Object.assign(store.filter, filter, store.userFilter, exprFilter);
+        Object.assign(filter, store.userFilter, exprFilter);
+        Object.assign(store.filter, filter);
        const params = {
            filter: JSON.stringify(store.filter),
        };
@ -111,6 +112,8 @@ export function useArrayData(key, userOptions) {
        return response;
    }

+    function isHasMoreData() {}
+
    function destroy() {
        if (arrayDataStore.get(key)) {
            arrayDataStore.clear(key);
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@ -8,7 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';

 const route = useRoute();
 const { t } = useI18n();
@ -40,23 +40,6 @@ const filterOptions = {
 };
 </script>
 <template>
-    <fetch-data
-        url="ContactChannels"
-        @on-fetch="(data) => (contactChannels = data)"
-        auto-load
-    />
-    <fetch-data
-        url="BusinessTypes"
-        @on-fetch="(data) => (businessTypes = data)"
-        auto-load
-    />
-    <fetch-data
-        :filter="filter"
-        @on-fetch="(data) => (clients = data)"
-        auto-load
-        url="Clients"
-    />
-
    <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
        <template #form="{ data, validate, filter }">
            <VnRow class="row q-gutter-md q-mb-md">
@ -118,7 +101,7 @@ const filterOptions = {
                />
            </VnRow>
            <VnRow class="row q-gutter-md q-mb-md">
-                <QSelect
+                <VnSelect
                    :input-debounce="0"
                    :label="t('customer.basicData.salesPerson')"
                    :options="workers"
@ -142,7 +125,7 @@ const filterOptions = {
                            />
                        </QAvatar>
                    </template>
-                </QSelect>
+                </VnSelect>
                <QSelect
                    v-model="data.contactChannelFk"
                    :options="contactChannels"
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@ -8,7 +8,6 @@ import CustomerFilter from '../CustomerFilter.vue';
        data-key="Client"
        base-url="Clients"
        :descriptor="CustomerDescriptor"
-        :filter-panel="CustomerFilter"
        search-data-key="CustomerList"
        search-url="Clients/filter"
        searchbar-label="Search customer"
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@ -27,7 +27,6 @@ function handleLocation(data, location) {
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
 }
-const businessTypesRef = ref();
 </script>

 <template>
@ -37,10 +36,8 @@ const businessTypesRef = ref();
        url="Workers/search?departmentCodes"
    />
    <FetchData
-        ref="businessTypesRef"
        @on-fetch="(data) => (businessTypesOptions = data)"
        auto-load
-        limit="10"
        url="BusinessTypes"
    />
    <QPage>
@ -70,7 +67,6 @@ const businessTypesRef = ref();
                        option-label="description"
                        option-value="code"
                        v-model="data.businessTypeFk"
-                        :fetch-ref="businessTypesRef"
                    />
                    <QInput v-model="data.fi" :label="t('Tax number')" />
                </VnRow>