wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

ref #5417 fix filters and view

This commit is contained in:
Jorge Penadés 2023-09-27 13:41:50 +02:00
parent 9fad8bf78d
commit 7ae098d779
4 changed files with 162 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ui/VnFilterPanel.vue
View File

@ -20,6 +20,10 @@ const props = defineProps({
required: false, required: false,
default: null, default: null,
}, },
showAll: {
type: Boolean,
default: true,
},
}); });
const emit = defineEmits(['refresh', 'clear']); const emit = defineEmits(['refresh', 'clear']);
@ -38,22 +42,27 @@ onMounted(() => {
const isLoading = ref(false); const isLoading = ref(false);
async function search() { async function search() {
const params = userParams.value; if (props.showAll) {
for (const param in params) { const params = userParams.value;
if (params[param] === '' || params[param] === null) { for (const param in params) {
delete userParams.value[param]; if (params[param] === '' || params[param] === null) {
delete store.userParams[param]; delete userParams.value[param];
delete store.userParams[param];
}
} }
}
isLoading.value = true; isLoading.value = true;
await arrayData.addFilter({ params }); await arrayData.addFilter({ params });
isLoading.value = false; isLoading.value = false;
} else {
store.data = [];
}
} }
async function reload() { async function reload() {
isLoading.value = true; isLoading.value = true;
await arrayData.fetch({ append: false }); if (props.showAll) await arrayData.fetch({ append: false });
else store.data = [];
isLoading.value = false; isLoading.value = false;
emit('refresh'); emit('refresh');
} }
@ -61,7 +70,8 @@ async function reload() {
async function clearFilters() { async function clearFilters() {
userParams.value = {}; userParams.value = {};
isLoading.value = true; isLoading.value = true;
await arrayData.applyFilter({ params: {} }); if (props.showAll) await arrayData.applyFilter({ params: {} });
else store.data = [];
isLoading.value = false; isLoading.value = false;
emit('clear'); emit('clear');

20
src/composables/useArrayData.js
View File

@ -38,11 +38,11 @@ export function useArrayData(key, userOptions) {
'limit', 'limit',
'skip', 'skip',
'userParams', 'userParams',
'userFilter' 'userFilter',
]; ];
if (typeof userOptions === 'object') { if (typeof userOptions === 'object') {
for (const option in userOptions) { for (const option in userOptions) {
const isEmpty = userOptions[option] == null || userOptions[option] == '' const isEmpty = userOptions[option] == null || userOptions[option] == '';
if (isEmpty || !allowedOptions.includes(option)) continue; if (isEmpty || !allowedOptions.includes(option)) continue;
if (Object.prototype.hasOwnProperty.call(store, option)) { if (Object.prototype.hasOwnProperty.call(store, option)) {
@ -73,12 +73,11 @@ export function useArrayData(key, userOptions) {
Object.assign(params, store.userParams); Object.assign(params, store.userParams);
store.isLoading = true store.isLoading = true;
const response = await axios.get(store.url, { const response = await axios.get(store.url, {
signal: canceller.signal, signal: canceller.signal,
params, params,
}); });
const { limit } = filter; const { limit } = filter;
hasMoreData.value = response.data.length === limit; hasMoreData.value = response.data.length === limit;
@ -94,7 +93,7 @@ export function useArrayData(key, userOptions) {
updateStateParams(); updateStateParams();
} }
store.isLoading = false store.isLoading = false;
canceller = null; canceller = null;
} }
@ -135,8 +134,9 @@ export function useArrayData(key, userOptions) {
await fetch({ append: true }); await fetch({ append: true });
} }
async function refresh() { async function refresh(showAll = true) {
await fetch({ append: false }); if (showAll) await fetch({ append: false });
if (!showAll) store.data = [];
} }
function updateStateParams() { function updateStateParams() {
@ -153,8 +153,8 @@ export function useArrayData(key, userOptions) {
}); });
} }
const totalRows = computed(() => store.data && store.data.length || 0); const totalRows = computed(() => (store.data && store.data.length) || 0);
const isLoading = computed(() => store.isLoading || false) const isLoading = computed(() => store.isLoading || false);
return { return {
fetch, fetch,
@ -167,6 +167,6 @@ export function useArrayData(key, userOptions) {
hasMoreData, hasMoreData,
totalRows, totalRows,
updateStateParams, updateStateParams,
isLoading isLoading,
}; };
} }

53
src/pages/Customer/CustomerPayments.vue
View File

@ -110,17 +110,23 @@ function stateColor(row) {
</div> </div>
</Teleport> </Teleport>
</template> </template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <QDrawer
v-model="stateStore.rightDrawer"
side="right"
:width="256"
show-if-above
:breakpoint="1600"
>
<QScrollArea class="fit text-grey-8"> <QScrollArea class="fit text-grey-8">
<CustomerPaymentsFilter data-key="CustomerTransactions" /> <CustomerPaymentsFilter data-key="CustomerTransactions" />
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md customer-payments">
<div class="card-list"> <div class="card-list">
<QToolbar class="q-pa-none"> <QToolbar class="q-pa-none">
<QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle> <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
<QBtn <QBtn
@click="arrayData.refresh()" @click="arrayData.refresh(false)"
:loading="isLoading" :loading="isLoading"
icon="refresh" icon="refresh"
color="primary" color="primary"
@ -138,7 +144,7 @@ function stateColor(row) {
order="created DESC" order="created DESC"
:limit="20" :limit="20"
:offset="50" :offset="50"
auto-load :show-all="false"
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QTable <QTable
@ -148,7 +154,7 @@ function stateColor(row) {
row-key="id" row-key="id"
:pagination="{ rowsPerPage: 0 }" :pagination="{ rowsPerPage: 0 }"
:grid="grid || $q.screen.lt.sm" :grid="grid || $q.screen.lt.sm"
class="q-mt-xs" class="q-mt-xs custom-table"
hide-pagination hide-pagination
> >
<template #body-cell-actions="{ row }"> <template #body-cell-actions="{ row }">
@ -167,6 +173,13 @@ function stateColor(row) {
</QBtn> </QBtn>
</QTd> </QTd>
</template> </template>
<template #body-cell-id="{ row }">
<QTd auto-width align="right">
<span>
{{ row.id }}
</span>
</QTd>
</template>
<template #body-cell-customerId="{ row }"> <template #body-cell-customerId="{ row }">
<QTd align="right"> <QTd align="right">
<span class="link"> <span class="link">
@ -175,6 +188,13 @@ function stateColor(row) {
</span> </span>
</QTd> </QTd>
</template> </template>
<template #body-cell-customer="{ row }">
<QTd auto-width align="left" :title="row.customerName">
<span>
{{ row.customerName }}
</span>
</QTd>
</template>
<template #body-cell-state="{ row }"> <template #body-cell-state="{ row }">
<QTd auto-width class="text-center"> <QTd auto-width class="text-center">
<QBadge :color="stateColor(row)"> <QBadge :color="stateColor(row)">
@ -188,9 +208,9 @@ function stateColor(row) {
</template> </template>
<template #item="{ cols, row }"> <template #item="{ cols, row }">
<div class="q-mb-md col-12"> <div class="q-mb-md col-12">
<QCard> <QCard class="q-pa-none">
<QItem class="q-pa-none items-start"> <QItem class="q-pa-none items-start">
<QItemSection class="q-pa-md"> <QItemSection class="q-pa-none">
<QList> <QList>
<template <template
v-for="col of cols" v-for="col of cols"
@ -257,10 +277,21 @@ function stateColor(row) {
</QPage> </QPage>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
.card-list { .customer-payments {
width: 100%; .card-list {
max-width: 60em; width: 100%;
max-width: 60em;
.q-table--dense .q-table th:first-child {
padding-left: 0;
}
td {
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
}
}
} }
</style> </style>

92
src/pages/Customer/CustomerPaymentsFilter.vue
View File

@ -9,10 +9,14 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
function isValidNumber(value) {
return /^(\d|\d+(\.|,)?\d+)$/.test(value);
}
</script> </script>
<template> <template>
<VnFilterPanel :data-key="props.dataKey" :search-button="true"> <VnFilterPanel :data-key="props.dataKey" :search-button="true" :show-all="false">
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong> <strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -49,9 +53,90 @@ const props = defineProps({
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('Amount')" v-model="params.amount" lazy-rules> <QInput
:label="t('Amount')"
v-model="params.amount"
lazy-rules
@update:model-value="
(value) => {
if (value.includes(','))
params.amount = params.amount.replace(',', '.');
}
"
:rules="[
(val) =>
isValidNumber(val) || !val || 'Please type a number',
]"
>
<template #prepend> <template #prepend>
<QIcon name="euro" size="sm"></QIcon> <QIcon name="euro" size="sm" />
</template>
</QInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput v-model="params.from" :label="t('From')" mask="date">
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.from" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection>
<QItemSection>
<QInput v-model="params.to" :label="t('To')" mask="date">
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.to" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template> </template>
</QInput> </QInput>
</QItemSection> </QItemSection>
@ -75,4 +160,5 @@ es:
Order ID: ID pedido Order ID: ID pedido
Customer ID: ID cliente Customer ID: ID cliente
Amount: Importe Amount: Importe
Please type a number: Por favor, escriba un número
</i18n> </i18n>