Flaschengeist
/
flaschengeist-pricelist
7
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api.d.ts vendored
View File

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

74
src/components/Pricelist.vue
View File

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

40
src/store.ts
View File

@ -76,6 +76,7 @@ export const usePricelistStore = defineStore({
state: () => ({
drinkTypes: [] as Array<FG.DrinkType>,
drinks: [] as Array<Drink>,
pricelist: [] as Array<FG.DrinkPrice>,
extraIngredients: [] as Array<FG.ExtraIngredient>,
min_prices: [] as Array<number>,
tags: [] as Array<FG.Tag>,
@ -180,7 +181,7 @@ export const usePricelistStore = defineStore({
}) {
if (!filter) filter = { limit: 10 };
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,
});
const drinks = [];
@ -195,12 +196,21 @@ export const usePricelistStore = defineStore({
calc_all_min_prices(drinks, this.min_prices);
return drinks;
},
sortPrices(volume: DrinkPriceVolume) {
volume.prices.sort((a, b) => {
if (a.price > b.price) return 1;
if (b.price > a.price) return -1;
return 0;
async getPricelist(filter: {
limit?: number;
offset?: number;
descending?: boolean;
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) {
await api.delete(`pricelist/prices/${price.id}`);
@ -344,7 +354,7 @@ export const usePricelistStore = defineStore({
},
},
getters: {
pricelist() {
/*pricelist() {
const retVal: Array<Pricelist> = [];
this.drinks.forEach((drink) => {
drink.volumes.forEach((volume) => {
@ -362,7 +372,21 @@ export const usePricelistStore = defineStore({
});
});
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,
})
})
}
},
});