add filter to search user
This commit is contained in:
parent
db4f3c45c4
commit
a52ab890e0
|
|
@ -1,76 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-page padding>
|
||||
<q-table v-model:pagination="pagination" :rows="rows" row-key="userid" :columns="columns" @request="onRequest">
|
||||
<template #top-right>
|
||||
<div class="full-width row q-gutter-sm">
|
||||
<q-input v-model.number="limit" label="Limit" type="number" step="0.01" suffix="€" filled dense />
|
||||
<q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<q-tr :props="props">
|
||||
<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) || 'Kein Limit' }}
|
||||
<q-popup-edit
|
||||
v-slot="scope"
|
||||
v-model="limit"
|
||||
buttons
|
||||
label-cancel="Abbrechen"
|
||||
label-set="Speichern"
|
||||
@save="setLimit(props.row.userid)"
|
||||
@cancel="limit = undefined"
|
||||
>
|
||||
<q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense />
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="balance" :props="props">
|
||||
{{ getBalance(props.row.debit, props.row.credit) }}€
|
||||
<q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="add" class="fit column q-gutter-sm">
|
||||
<balance-add-body
|
||||
:user="props.row.userid"
|
||||
:can-add-shortcut="false"
|
||||
@change-balance="updateBalance"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="transfer" class="fit column q-gutter-sm">
|
||||
<balance-transfer-body :user="props.row.userid" @change-balance="updateBalances" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card-section>
|
||||
<div v-if="$q.platform.is.mobile" class="full-width row justify-center">
|
||||
<q-btn v-close-popup label="Abbrechen" flat color="primary" />
|
||||
</div>
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
>
|
||||
<q-tab name="add" label="Anschreiben" />
|
||||
<q-tab name="transfer" label="Übertragen" />
|
||||
</q-tabs>
|
||||
</q-card>
|
||||
</q-menu>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</div>
|
||||
<q-page padding>
|
||||
<q-table
|
||||
v-model:pagination="pagination"
|
||||
:rows="rows"
|
||||
row-key="userid"
|
||||
:columns="columns"
|
||||
@request="onRequest"
|
||||
:filter="filter"
|
||||
>
|
||||
<template #top-right>
|
||||
<div class="full-width row q-gutter-sm">
|
||||
<q-input v-model="filter" label="Filter" filled dense debounce="300">
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input v-model.number="limit" label="Limit" type="number" step="0.01" suffix="€" filled dense />
|
||||
<q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<q-tr :props="props">
|
||||
<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) || 'Kein Limit' }}
|
||||
<q-popup-edit
|
||||
v-slot="scope"
|
||||
v-model="limit"
|
||||
buttons
|
||||
label-cancel="Abbrechen"
|
||||
label-set="Speichern"
|
||||
@save="setLimit(props.row.userid)"
|
||||
@cancel="limit = undefined"
|
||||
>
|
||||
<q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense />
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="balance" :props="props">
|
||||
{{ getBalance(props.row.debit, props.row.credit) }}€
|
||||
<q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="add" class="fit column q-gutter-sm">
|
||||
<balance-add-body
|
||||
:user="props.row.userid"
|
||||
:can-add-shortcut="false"
|
||||
@change-balance="updateBalance"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="transfer" class="fit column q-gutter-sm">
|
||||
<balance-transfer-body :user="props.row.userid" @change-balance="updateBalances" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card-section>
|
||||
<div v-if="$q.platform.is.mobile" class="full-width row justify-center">
|
||||
<q-btn v-close-popup label="Abbrechen" flat color="primary" />
|
||||
</div>
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
>
|
||||
<q-tab name="add" label="Anschreiben" />
|
||||
<q-tab name="transfer" label="Übertragen" />
|
||||
</q-tabs>
|
||||
</q-card>
|
||||
</q-menu>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -92,11 +102,12 @@ export default defineComponent({
|
|||
onBeforeMount(() => {
|
||||
void userStore.getUsers();
|
||||
void store.getLimits();
|
||||
void onRequest({ pagination: pagination.value, filter: undefined });
|
||||
void onRequest({ pagination: pagination.value, filter: filter.value });
|
||||
});
|
||||
|
||||
const rows = computed(() => store.balances);
|
||||
const limit = ref<number>();
|
||||
const filter = ref<string>();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -151,6 +162,7 @@ export default defineComponent({
|
|||
|
||||
async function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
|
||||
const { page, rowsPerPage, sortBy, descending } = props.pagination;
|
||||
const filter = props.filter;
|
||||
loading.value = true;
|
||||
const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
|
||||
const startRow = (page - 1) * rowsPerPage;
|
||||
|
|
@ -161,6 +173,7 @@ export default defineComponent({
|
|||
offset: startRow,
|
||||
descending: descending ? true : undefined,
|
||||
sortBy,
|
||||
filter,
|
||||
});
|
||||
pagination.value.page = page;
|
||||
pagination.value.rowsPerPage = rowsPerPage;
|
||||
|
|
@ -231,6 +244,7 @@ export default defineComponent({
|
|||
onRequest,
|
||||
getFirstname,
|
||||
getLastname,
|
||||
filter,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -77,7 +77,13 @@ export const useBalanceStore = defineStore({
|
|||
return data;
|
||||
},
|
||||
|
||||
async getBalances(filter?: { limit?: number; offset?: number; sortBy?: string; descending?: boolean }) {
|
||||
async getBalances(filter?: {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
sortBy?: string;
|
||||
descending?: boolean;
|
||||
filter?: string;
|
||||
}) {
|
||||
const { data } = await api.get<{ balances: BalancesResponse[]; count: number }>('/balance', {
|
||||
params: filter,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue