[chore] serverside pagination and filtering for pricelist

This commit is contained in:
Tim Gröger 2021-11-14 19:34:04 +01:00
parent ed0c74b031
commit 2cb72426a1
3 changed files with 95 additions and 23 deletions

2
src/api.d.ts vendored
View File

@ -23,11 +23,13 @@ declare namespace FG {
interface DrinkPrice { interface DrinkPrice {
id: number; id: number;
price: number; price: number;
volume: Array<DrinkPriceVolume>
public: boolean; public: boolean;
description?: string; description?: string;
} }
interface DrinkPriceVolume { interface DrinkPriceVolume {
id: number; id: number;
drink: Array<Drink>;
volume: number; volume: number;
min_prices: Array<MinPrices>; min_prices: Array<MinPrices>;
prices: Array<DrinkPrice>; prices: Array<DrinkPrice>;

View File

@ -5,11 +5,13 @@
:rows="drinks" :rows="drinks"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:filter="search" :filter="search"
:filter-method="filter"
dense dense
:pagination="pagination" v-model:pagination="pagination"
:fullscreen="fullscreen" :fullscreen="fullscreen"
@request="onRequest"
> >
<!--
:filter-method="filter"-->
<template #top-right> <template #top-right>
<div class="row justify-end q-gutter-sm"> <div class="row justify-end q-gutter-sm">
<search-input v-model="search" :keys="options" /> <search-input v-model="search" :keys="options" />
@ -109,7 +111,7 @@ export default defineComponent({
if (!props.public) { if (!props.public) {
user.value = useMainStore().currentUser.userid; user.value = useMainStore().currentUser.userid;
void store.getPriceListColumnOrder(user.value); void store.getPriceListColumnOrder(user.value);
void store.getDrinks(); onRequest({pagination: pagination.value, filter: {limit: 10}})
void store.getPriceCalcColumn(user.value); void store.getPriceCalcColumn(user.value);
} else { } else {
user.value = ''; user.value = '';
@ -170,28 +172,32 @@ export default defineComponent({
{ {
name: 'name', name: 'name',
label: 'Name', label: 'Name',
field: 'name', //field: 'name',
sortable: true, field: 'volume',
format: (val: FG.DrinkPriceVolume) => val.drink.name,
sortable: false,
filterable: true, filterable: true,
align: 'left', align: 'left',
}, },
{ {
name: 'type', name: 'type',
label: 'Kategorie', label: 'Kategorie',
field: 'type', //field: 'type',
sortable: true, field: 'volume',
sortable: false,
filterable: true, filterable: true,
format: (val: FG.DrinkType) => val.name, format: (val: FG.DrinkPriceVolume) => val.drink.type.name,
}, },
{ {
name: 'tags', name: 'tags',
label: 'Tags', label: 'Tags',
field: 'tags', //field: 'tags',
field: 'volume',
filterable: true, filterable: true,
format: (val: Array<FG.Tag>) => { format: (val: FG.DrinkPriceVolume) => {
let retVal = ''; let retVal = '';
val.forEach((tag, index) => { val.drink.tags.forEach((tag, index) => {
if (index >= val.length - 1 && index > 0) { if (index >= val.length - 1 && index > 0) {
retVal += ', '; retVal += ', ';
} }
@ -203,16 +209,17 @@ export default defineComponent({
{ {
name: 'volume', name: 'volume',
label: 'Inhalt', label: 'Inhalt',
//field: 'volume',
field: 'volume', field: 'volume',
filterable: true, filterable: true,
sortable: true, sortable: false,
format: (val: number) => `${val.toFixed(3)}L`, format: (val: FG.DrinkPriceVolume) => `${val.volume.toFixed(3)}L`,
}, },
{ {
name: 'price', name: 'price',
label: 'Preis', label: 'Preis',
field: 'price', field: 'price',
sortable: true, sortable: false,
filterable: true, filterable: true,
format: (val: number) => `${val.toFixed(2)}`, format: (val: number) => `${val.toFixed(2)}`,
}, },
@ -297,9 +304,46 @@ export default defineComponent({
label: '', label: '',
}); });
interface PaginationInterface {
sortBy: string;
descending: boolean;
page: number;
rowsPerPage: number;
rowsNumber: number;
}
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.getPricelist({
offset: startRow,
limit: fetchCount,
descending,
search_name: props.filter?.value,
search_key: props.filter?.key,
});
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy;
pagination.value.descending = descending;
console.log('result', result);
if (result) pagination.value.rowsNumber = result;
} catch (error) {
console.warn(error)
}
loading.value = false;
}
const loading = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: 'name', sortBy: 'name',
rowsPerPage: 10, rowsPerPage: 10,
rowsNumber: 10,
descending:false,
page: 1
}); });
const fullscreen = ref(false); const fullscreen = ref(false);
@ -314,6 +358,8 @@ export default defineComponent({
filter, filter,
pagination, pagination,
fullscreen, fullscreen,
loading,
onRequest,
}; };
}, },
}); });

View File

@ -76,6 +76,7 @@ export const usePricelistStore = defineStore({
state: () => ({ state: () => ({
drinkTypes: [] as Array<FG.DrinkType>, drinkTypes: [] as Array<FG.DrinkType>,
drinks: [] as Array<Drink>, drinks: [] as Array<Drink>,
pricelist: [] as Array<FG.DrinkPrice>,
extraIngredients: [] as Array<FG.ExtraIngredient>, extraIngredients: [] as Array<FG.ExtraIngredient>,
min_prices: [] as Array<number>, min_prices: [] as Array<number>,
tags: [] as Array<FG.Tag>, tags: [] as Array<FG.Tag>,
@ -180,7 +181,7 @@ export const usePricelistStore = defineStore({
}) { }) {
if (!filter) filter = { limit: 10 }; if (!filter) filter = { limit: 10 };
console.log('filter_api', filter); console.log('filter_api', filter);
const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks', { const { data } = await api.get<{drinks: Array<FG.Drink>; count: number}>('pricelist/drinks', {
params: filter, params: filter,
}); });
const drinks = []; const drinks = [];
@ -195,12 +196,21 @@ export const usePricelistStore = defineStore({
calc_all_min_prices(drinks, this.min_prices); calc_all_min_prices(drinks, this.min_prices);
return drinks; return drinks;
}, },
sortPrices(volume: DrinkPriceVolume) { async getPricelist(filter: {
volume.prices.sort((a, b) => { limit?: number;
if (a.price > b.price) return 1; offset?: number;
if (b.price > a.price) return -1; descending?: boolean;
return 0; search_name?: string;
}); search_key?: string;
}) {
const { data } = await api.get<{pricelist: Array<FG.DrinkPrice>; count: number}>('pricelist/list', {
params: filter,
});
this.pricelist = [];
console.log(data)
this.pricelist = data.pricelist;
console.log(this.pricelist);
return data.count
}, },
async deletePrice(price: FG.DrinkPrice) { async deletePrice(price: FG.DrinkPrice) {
await api.delete(`pricelist/prices/${price.id}`); await api.delete(`pricelist/prices/${price.id}`);
@ -344,7 +354,7 @@ export const usePricelistStore = defineStore({
}, },
}, },
getters: { getters: {
pricelist() { /*pricelist() {
const retVal: Array<Pricelist> = []; const retVal: Array<Pricelist> = [];
this.drinks.forEach((drink) => { this.drinks.forEach((drink) => {
drink.volumes.forEach((volume) => { drink.volumes.forEach((volume) => {
@ -362,7 +372,21 @@ export const usePricelistStore = defineStore({
}); });
}); });
return retVal; return retVal;
}, },*/
computed_pricelist() {
const retVal: Array<Pricelist> = [];
this.pricelist.forEach((price) => {
retVal.push({
name: price.volume.drink.name,
type: <FG.DrinkType>price.volume.drink.type,
tags: <Array<FG.Tag>>price.volume.drink.tags,
volume: <number>price.volume.volume,
public: price.public,
price: price.price,
description: <string>price.description,
})
})
}
}, },
}); });