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

20
src/composables/useArrayData.js
View File

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

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

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

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

@ -9,10 +9,14 @@ const props = defineProps({
required: true,
},
});
function isValidNumber(value) {
return /^(\d|\d+(\.|,)?\d+)$/.test(value);
}
</script>
<template>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<VnFilterPanel :data-key="props.dataKey" :search-button="true" :show-all="false">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -49,9 +53,90 @@ const props = defineProps({
</QItem>
<QItem>
<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>
<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>
</QInput>
</QItemSection>
@ -75,4 +160,5 @@ es:
Order ID: ID pedido
Customer ID: ID cliente
Amount: Importe
Please type a number: Por favor, escriba un número
</i18n>