wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Pagination changes

This commit is contained in:
Joan Sanchez 2023-01-10 14:58:24 +01:00
parent 2fe05f23d1
commit 20051d7246
4 changed files with 125 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/PaginateData.vue
View File

@ -45,21 +45,7 @@ const $props = defineProps({
}); });
const emit = defineEmits(['onFetch', 'onPaginate']); const emit = defineEmits(['onFetch', 'onPaginate']);
// defineExpose({ refresh });
onMounted(() => {
if ($props.autoLoad) paginate();
});
watch(
() => $props.data,
() => {
rows.value = $props.data;
}
);
const isLoading = ref(false); const isLoading = ref(false);
const hasMoreData = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: $props.sortBy, sortBy: $props.sortBy,
rowsPerPage: $props.rowsPerPage, rowsPerPage: $props.rowsPerPage,
@ -68,71 +54,50 @@ const pagination = ref({
const arrayData = useArrayData('customers', { const arrayData = useArrayData('customers', {
url: $props.url, url: $props.url,
filter: $props.filter,
where: $props.where,
limit: $props.rowsPerPage, limit: $props.rowsPerPage,
order: $props.sortBy,
}); });
const rows = arrayData.data; const store = arrayData.store;
// async function fetch() { onMounted(() => {
// const { page, rowsPerPage, sortBy } = pagination.value; if ($props.autoLoad) paginate();
});
// if (!$props.url) return; watch(
() => $props.data,
// const filter = { () => {
// limit: rowsPerPage, store.data = $props.data;
// skip: rowsPerPage * (page - 1), }
// }; );
// Object.assign(filter, $props.filter);
// if ($props.where) filter.where = $props.where;
// if ($props.sortBy) filter.order = $props.sortBy;
// if ($props.limit) filter.limit = $props.limit;
// if (sortBy) filter.order = sortBy;
// arrayData.apply()
// const { data } = await axios.get($props.url, {
// params: { filter },
// });
// isLoading.value = false;
// return data;
// }
async function paginate() { async function paginate() {
const { page, rowsPerPage, sortBy, descending } = pagination.value; const { page, rowsPerPage, sortBy, descending } = pagination.value;
if (!$props.url) return; if (!$props.url) return;
const filter = { // const filter = {
limit: rowsPerPage, // limit: rowsPerPage,
skip: rowsPerPage * (page - 1), // skip: rowsPerPage * (page - 1),
}; // };
Object.assign(filter, $props.filter); // Object.assign(filter, $props.filter);
if ($props.where) filter.where = $props.where; // if ($props.where) filter.where = $props.where;
if ($props.sortBy) filter.order = $props.sortBy; // if ($props.sortBy) filter.order = $props.sortBy;
if ($props.limit) filter.limit = $props.limit; // if ($props.limit) filter.limit = $props.limit;
if (sortBy) filter.order = sortBy; // if (sortBy) filter.order = sortBy;
const data = await arrayData.apply(filter); await arrayData.loadMore();
if (!data) { if (!arrayData.hasMoreData.value) {
isLoading.value = false; isLoading.value = false;
return; return;
} }
hasMoreData.value = data.length === rowsPerPage; pagination.value.rowsNumber = store.data.length;
console.log(hasMoreData.value);
// if (!rows.value) rows.value = [];
// for (const row of data) rows.value.push(row);
pagination.value.rowsNumber = rows.length;
pagination.value.page = page; pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage; pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy; pagination.value.sortBy = sortBy;
@ -140,48 +105,28 @@ async function paginate() {
isLoading.value = false; isLoading.value = false;
emit('onFetch', rows); emit('onFetch', store.data);
emit('onPaginate', data); emit('onPaginate');
} }
// async function refresh() {
// const { rowsPerPage } = pagination.value;
// const data = await fetch();
// if (!data) {
// isLoading.value = false;
// return;
// }
// hasMoreData.value = data.length === rowsPerPage;
// if (!rows.value) rows.value = [];
// rows.value = data;
// isLoading.value = false;
// emit('onFetch', rows);
// }
async function onLoad(...params) { async function onLoad(...params) {
const done = params[1]; const done = params[1];
if (!rows || rows.length === 0 || !$props.url) return done(false); if (!store.data || store.data.length === 0 || !$props.url) return done(false);
pagination.value.page = pagination.value.page + 1; pagination.value.page = pagination.value.page + 1;
await paginate(); await paginate();
const endOfPages = !hasMoreData.value; const endOfPages = !arrayData.hasMoreData.value;
done(endOfPages); done(endOfPages);
} }
</script> </script>
<template> <template>
<q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center"> <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
<div v-if="rows" class="card-list q-gutter-y-md"> <div v-if="store" class="card-list q-gutter-y-md">
<slot name="body" :rows="rows"></slot> <slot name="body" :rows="store.data"></slot>
<div v-if="!rows.length && !isLoading" class="info-row q-pa-md text-center"> <div v-if="!store.data.length && !isLoading" class="info-row q-pa-md text-center">
<h5> <h5>
{{ t('components.smartCard.noData') }} {{ t('components.smartCard.noData') }}
</h5> </h5>
@ -190,7 +135,7 @@ async function onLoad(...params) {
<q-spinner color="orange" size="md" /> <q-spinner color="orange" size="md" />
</div> </div>
</div> </div>
<div v-if="!rows" class="card-list q-gutter-y-md"> <div v-if="!store" class="card-list q-gutter-y-md">
<q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index"> <q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable"> <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
<q-item-section class="q-pa-md"> <q-item-section class="q-pa-md">

80
src/composables/useArrayData.js
View File

@ -1,46 +1,82 @@
import { ref, onUnmounted } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { useArrayDataStore } from 'stores/useArrayDataStore'; import { useArrayDataStore } from 'stores/useArrayDataStore';
const arrayDataStore = useArrayDataStore(); const arrayDataStore = useArrayDataStore();
const options = {
limit: 10,
};
export function useArrayData(key, userOptions) { export function useArrayData(key, userOptions) {
if (!key) throw new Error('ArrayData: A key is required to use this composable'); if (!key) throw new Error('ArrayData: A key is required to use this composable');
arrayDataStore.set(key, []); if (!arrayDataStore.get(key)) {
arrayDataStore.set(key);
}
const data = arrayDataStore.get(key); const store = arrayDataStore.get(key);
const filter = ref({});
const userFilter = ref({});
const userParams = ref({});
const hasMoreData = ref(true);
const options = ref({
limit: 10,
skip: 0,
});
const page = ref(1);
if (typeof userOptions === 'object') { if (typeof userOptions === 'object') {
Object.assign(options, userOptions); Object.assign(options.value, userOptions);
} }
async function fetch() { // if (typeof userOptions === 'object' && userOptions.filter) {
if (!options.url) return; // Object.assign(filter.value, userOptions.filter);
// }
onUnmounted(() => {
if (arrayDataStore.get(key)) {
arrayDataStore.clear(key);
}
});
const filter = { async function fetch({ append = false }) {
limit: options.limit, if (!options.value.url) return;
const fetchFilter = {
order: options.value.order,
limit: options.value.limit,
skip: options.value.skip,
}; };
const requestOptions = { params: { filter } }; Object.assign(fetchFilter, userFilter.value);
filter.value = fetchFilter;
const response = await axios.get(options.url, requestOptions); const requestOptions = { params: { filter: filter.value } };
for (const row of response.data) data.push(row); const response = await axios.get(options.value.url, requestOptions);
return response.data; const { limit } = filter.value;
hasMoreData.value = response.data.length === limit;
if (append === true) {
for (const row of response.data) store.data.push(row);
} }
async function apply(filter) { if (append === false) {
if (!options.url) return; store.data = response.data;
}
}
const requestOptions = { params: { filter } }; async function apply({ filter, params }) {
if (filter) userFilter.value = filter;
if (params) userParams.value = params;
const response = await axios.get(options.url, requestOptions); await fetch({ append: false });
for (const row of response.data) data.push(row); }
return response.data; async function loadMore() {
if (!hasMoreData.value) return;
options.value.skip = options.value.limit * (page.value - 1);
page.value += 1;
await fetch({ append: true });
} }
async function refresh() { async function refresh() {
@ -51,6 +87,8 @@ export function useArrayData(key, userOptions) {
fetch, fetch,
apply, apply,
refresh, refresh,
data, loadMore,
store,
hasMoreData,
}; };
} }

33
src/pages/Customer/CustomerList.vue
View File

@ -1,24 +1,21 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue'; import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
// import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
const router = useRouter(); const router = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
// const arrayData = useArrayData('customers', { const arrayData = useArrayData('customers', {
// url: 'Clients', url: 'Clients',
// }); });
// onMounted(async () => {
// await arrayData.fetch();
// console.log(arrayData.data);
// });
function navigate(id) { function navigate(id) {
router.push({ path: `/customer/${id}` }); router.push({ path: `/customer/${id}` });
@ -32,9 +29,27 @@ function viewSummary(id) {
}, },
}); });
} }
const search = ref('');
async function doSearch() {
let filter = {};
if (search.value != '') {
filter = {
where: {
id: search,
},
};
}
await arrayData.apply({ filter });
}
</script> </script>
<template> <template>
<teleport-slot to="#searchbar">
<q-form @submit="doSearch">
<q-input v-model="search" label="Search" dense />
</q-form>
</teleport-slot>
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<paginate url="/Clients" sort-by="id DESC" auto-load> <paginate url="/Clients" sort-by="id DESC" auto-load>
<template #body="{ rows }"> <template #body="{ rows }">

13
src/stores/useArrayDataStore.js
View File

@ -2,18 +2,23 @@ import { ref } from 'vue';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
export const useArrayDataStore = defineStore('arrayDataStore', () => { export const useArrayDataStore = defineStore('arrayDataStore', () => {
const store = ref({}); const state = ref({});
function get(key) { function get(key) {
return store.value[key]; return state.value[key];
} }
function set(key, data) { function set(key) {
store.value[key] = data; state.value[key] = { data: ref([]) };
}
function clear(key) {
delete state.value[key];
} }
return { return {
get, get,
set, set,
clear
}; };
}); });