Compare commits

...

2 Commits

Author SHA1 Message Date
Tim Gröger dff1e39347 [chore] add serverside pagination 2021-11-22 15:09:15 +01:00
Tim Gröger 00e1db5bf6 update gitignore (no .idea/folder) 2021-11-21 23:05:25 +01:00
4 changed files with 100 additions and 44 deletions

2
.gitignore vendored
View File

@ -1,3 +1,5 @@
node_modules
yarn-error.log
yarn.lock
.idea

View File

@ -1,7 +1,7 @@
<template>
<div>
<q-page padding>
<q-table :rows="rows" row-key="userid" :columns="columns">
<q-table :rows="rows" row-key="userid" :columns="columns" v-model:pagination="pagination" @request="onRequest">
<template #top-right>
<div class="full-width row q-gutter-sm">
<q-input
@ -18,11 +18,14 @@
</template>
<template #body="props">
<q-tr :props="props">
<q-td key="userid" :props="props">
{{ getName(props.row.userid) }}
<q-td key="firstname" :props="props">
{{ getFirstname(props.row.userid) }}
</q-td>
<q-td key="lastname" :props="props">
{{ getLastname(props.row.userid)}}
</q-td>
<q-td key="limit" :props="props">
{{ getLimit(props.row.userid) }}
{{ getLimit(props.row.userid) || 'Kein Limit' }}
<q-popup-edit
v-slot="scope"
v-model="limit"
@ -105,10 +108,8 @@ export default defineComponent({
const store = useBalanceStore();
const userStore = useUserStore();
onBeforeMount(() => {
void store.getBalances();
void userStore.getUsers();
void store.getLimits();
onBeforeMount( () => {
void onRequest({pagination: pagination.value, filter: undefined})
});
const rows = computed(() => store.balances);
@ -116,32 +117,26 @@ export default defineComponent({
const columns = [
{
name: 'userid',
label: 'Benutzer ID',
name: 'firstname',
label: 'Vorname',
field: 'userid',
required: true,
align: 'left',
sortable: true,
format: getName,
},
/*{
name: 'credit',
label: 'Haben',
field: 'credit',
format: (val: number) => val.toFixed(2),
sortable: true
},
{
name: 'debit',
label: 'Soll',
field: 'debit',
format: (val: number) => val.toFixed(2),
},*/
name: 'lastname',
label: 'Vorname',
field: 'userid',
align: 'left',
sortable: true
},
{
name: 'limit',
label: 'Limit',
align: 'right',
field: 'userid',
format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
sortable: true
},
{
name: 'balance',
@ -151,25 +146,61 @@ export default defineComponent({
format: (_: undefined, row: { debit: number; credit: number }) =>
getBalance(row.debit, row.credit),
sortable: true,
sort: (
_: undefined,
__: undefined,
a: { debit: number; credit: number },
b: { debit: number; credit: number }
) => {
return (
parseFloat(getBalance(a.debit, a.credit)) - parseFloat(getBalance(b.debit, b.credit))
);
},
},
];
interface PaginationInterface {
sortBy: string;
descending: boolean;
page: number;
rowsPerPage: number;
rowsNumber: number;
}
const pagination = ref<PaginationInterface>({
sortBy: 'lastname',
rowsPerPage: 5,
rowsNumber: 10,
descending: false,
page: 1,
})
const loading = ref(false)
async function onRequest(props: {pagination: PaginationInterface; filter?: string}) {
const {page, rowsPerPage, sortBy, descending} = props.pagination;
loading.value = true;
const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
const startRow = (page - 1) * rowsPerPage;
try {
const result = await store.getBalances({
limit: fetchCount,
offset: startRow,
descending: descending ? true : undefined,
sortBy,
})
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy;
pagination.value.descending = descending;
if (result.count) pagination.value.rowsNumber = result.count;
void userStore.getUsers(true, {userids: result.userids});
void store.getLimits({userids: result.userids});
} catch (error) {
console.warn(error)
}
console.log(pagination.value)
loading.value = false
}
function getName(val: string) {
return userStore.users.find((a) => a.userid === val)?.display_name;
}
function getLimit(val: string) {
return store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
const limit = store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
return limit ? `${limit}` : undefined
}
function getBalance(debit: number, credit: number) {
@ -194,6 +225,14 @@ export default defineComponent({
}, 100);
}
function getFirstname(userid: string) {
return userStore.users.find((a) => a.userid === userid)?.firstname
}
function getLastname(userid: string) {
return userStore.users.find((a) => a.userid === userid)?.lastname
}
const tab = ref('add');
return {
@ -208,6 +247,10 @@ export default defineComponent({
updateBalance,
updateBalances,
tab,
pagination,
onRequest,
getFirstname,
getLastname,
};
},
});

View File

@ -10,6 +10,7 @@
<q-table
v-model:pagination="pagination"
title="Buchungen"
flat
:rows="data"
:columns="columns"
row-key="id"

View File

@ -40,7 +40,7 @@ export const useBalanceStore = defineStore({
}),
getters: {
balance() {
balance(): BalancesResponse | undefined {
const mainStore = useMainStore();
return this.balances.find((v) => v.userid === mainStore.user?.userid);
},
@ -77,12 +77,20 @@ export const useBalanceStore = defineStore({
return data;
},
async getBalances(force = false) {
if (force || this.balances.length == 0 || new Date().getTime() - this._balances_dirty > 60000) {
const { data } = await api.get<BalancesResponse[]>('/balance');
this.balances = data;
}
return this.balances;
async getBalances(filter?: {limit?: number, offset?: number, sortBy?: string, descending?: boolean}) {
const { data } = await api.get<{balances: BalancesResponse[], count: number}>('/balance', {
params: filter
});
this.balances = data.balances;
let userids = ""
data.balances.forEach(response => {
userids += `,${response.userid}`
})
await api.get<FG.User>('/users', {
params: {userids: userids},
}
)
return {balances: this.balances, count: data.count, userids};
},
async changeBalance(amount: number, user: FG.User, sender: FG.User | undefined = undefined) {
@ -158,8 +166,10 @@ export const useBalanceStore = defineStore({
this._balances_dirty = 0;
},
async getLimits() {
const { data } = await api.get<Array<UserLimit>>('users/balance/limit');
async getLimits(filter?: {userids: undefined|string}) {
const { data } = await api.get<Array<UserLimit>>('users/balance/limit', {
params: filter
});
this.user_limits = data;
},