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