[chore] add server side pagination and filtering for receipts

This commit is contained in:
Tim Gröger 2021-11-13 15:44:44 +01:00
parent 672124385a
commit f5c6bcff6f
3 changed files with 65 additions and 8 deletions

View File

@ -5,7 +5,8 @@
<div v-if="ingredient.drink_ingredient"> <div v-if="ingredient.drink_ingredient">
<div class="full-width row q-gutter-sm q-py-sm"> <div class="full-width row q-gutter-sm q-py-sm">
<div class="col"> <div class="col">
{{ name(ingredient.drink_ingredient?.ingredient_id) }} <!--{{ name(ingredient.drink_ingredient?.ingredient_id) }}-->
{{ ingredient.drink_ingredient?.name }}
</div> </div>
<div class="col"> <div class="col">
{{ {{

View File

@ -1,14 +1,17 @@
<template> <template>
<q-table <q-table
v-model:pagination="pagination"
grid grid
title="Rezepte" title="Rezepte"
:rows="drinks" :rows="drinks"
row-key="id" row-key="id"
hide-header hide-header
:filter="search" @request="onRequest"
:filter-method="filter"
:columns="options" :columns="options"
:filter="search"
> >
<!--:filter="search"
:filter-method="filter"-->
<template #top-right> <template #top-right>
<search-input v-model="search" :keys="search_keys" /> <search-input v-model="search" :keys="search_keys" />
</template> </template>
@ -68,12 +71,18 @@ export default defineComponent({
setup() { setup() {
const store = usePricelistStore(); const store = usePricelistStore();
onBeforeMount(() => { onBeforeMount(() => {
void store.getDrinks(); //void store.getDrinks();
onRequest({
pagination: pagination.value,
filter: { limit: 10, receipt: true },
});
}); });
const drinks = computed(() => const drinks = computed(
store.drinks.filter((drink) => { () =>
return drink.volumes.some((volume) => volume.ingredients.length > 0); //store.drinks.filter((drink) => {
}) // return drink.volumes.some((volume) => volume.ingredients.length > 0);
//})
store.drinks
); );
const columns_drinks = [ const columns_drinks = [
@ -81,6 +90,7 @@ export default defineComponent({
name: 'picture', name: 'picture',
label: 'Bild', label: 'Bild',
align: 'center', align: 'center',
filterable: false,
}, },
{ {
name: 'name', name: 'name',
@ -120,6 +130,7 @@ export default defineComponent({
label: 'Preise', label: 'Preise',
field: 'volumes', field: 'volumes',
align: 'center', align: 'center',
filterable: false,
}, },
]; ];
const columns_volumes = [ const columns_volumes = [
@ -161,6 +172,47 @@ export default defineComponent({
} }
return 'no-image.svg'; return 'no-image.svg';
} }
const loading = ref(false);
const pagination = ref({
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 10,
rowsNumber: 10,
});
async function onRequest(props: { pagination: PaginationInterface; filter?: Search }) {
const { page, rowsPerPage, sortBy, descending } = props.pagination;
loading.value = true;
console.log('search_keys', search_keys);
const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
const startRow = (page - 1) * rowsPerPage;
try {
const result = await store.getDrinks({
offset: startRow,
limit: fetchCount,
descending,
search_name: props.filter.value,
search_key: props.filter.key,
receipt: true,
});
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy;
pagination.value.descending = descending;
if (result.count) pagination.value.rowsNumber = result.count;
} catch (error) {
//..
}
loading.value = false;
}
interface PaginationInterface {
sortBy: string;
descending: boolean;
page: number;
rowsPerPage: number;
rowsNumber: number;
}
return { return {
drinks, drinks,
options: [...columns_drinks, ...columns_volumes, ...columns_prices], options: [...columns_drinks, ...columns_volumes, ...columns_prices],
@ -168,6 +220,9 @@ export default defineComponent({
filter, filter,
search_keys, search_keys,
image, image,
onRequest,
loading,
pagination,
}; };
}, },
}); });

View File

@ -144,6 +144,7 @@ export const usePricelistStore = defineStore({
descending?: boolean; descending?: boolean;
search_name?: string; search_name?: string;
search_key?: string; search_key?: string;
receipt?: boolean;
}) { }) {
if (!filter) filter = { limit: 10 }; if (!filter) filter = { limit: 10 };
console.log('filter_api', filter); console.log('filter_api', filter);