verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 97 Releases Wiki Activity

ref #5417 fix filters and view #97

Merged
jorgep merged 12 commits from 5417-fixCustomerPayments into dev 2023-10-18 07:25:29 +00:00
Conversation 0 Commits 12 Files Changed 5 +165 -25
5 changed files with 165 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
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']);
@ -29,31 +33,34 @@ const store = arrayData.store;
const userParams = ref({}); const userParams = ref({});
onMounted(() => { onMounted(() => {
if (props.params) userParams.value = props.params; if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
const params = store.userParams; if (Object.keys(store.userParams).length > 0) {
if (Object.keys(params).length > 0) { userParams.value = JSON.parse(JSON.stringify(store.userParams));
userParams.value = Object.assign({}, params);
} }
}); });
const isLoading = ref(false); const isLoading = ref(false);
async function search() { async function search() {
const params = userParams.value; const params = JSON.parse(JSON.stringify(userParams.value));
for (const param in params) { for (const param in params) {
if (params[param] === '' || params[param] === null) { if (params[param] === '' || params[param] === null) {
delete userParams.value[param]; delete userParams.value[param];
delete store.userParams[param]; delete store.userParams[param];
} }
} }
isLoading.value = true; isLoading.value = true;
await arrayData.addFilter({ params }); await arrayData.addFilter({ params });
if (!props.showAll && !Object.values(params).length) store.data = [];
jorgep marked this conversation as resolved
jorgep commented 2023-10-11 08:57:59 +00:00
Review
Copy Link

Por algún motivo, no se eliminan params.from ni params.to. Solo se elimina su valor, aunque se haga el delete, en la store.userParams si que se eliminan. @alexm

Por algún motivo, no se eliminan params.from ni params.to. Solo se elimina su valor, aunque se haga el delete, en la store.userParams si que se eliminan. @alexm
isLoading.value = false; isLoading.value = false;
} }
async function reload() { async function reload() {
isLoading.value = true; isLoading.value = true;
const params = Object.values(userParams.value).filter((param) => param);
jorgep commented 2023-10-11 10:36:03 +00:00
Review
Copy Link

He probado a copiar el objeto con JSON.parse pero no funciona en este caso. @alexm

He probado a copiar el objeto con JSON.parse pero no funciona en este caso. @alexm
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!props.showAll && !params.length) store.data = [];
isLoading.value = false; isLoading.value = false;
emit('refresh'); emit('refresh');
} }
@ -62,6 +69,7 @@ async function clearFilters() {
userParams.value = {}; userParams.value = {};
isLoading.value = true; isLoading.value = true;
await arrayData.applyFilter({ params: {} }); await arrayData.applyFilter({ params: {} });
if (!props.showAll) store.data = [];
isLoading.value = false; isLoading.value = false;
emit('clear'); emit('clear');

2
src/composables/useArrayData.js
View File

@ -136,7 +136,7 @@ export function useArrayData(key, userOptions) {
} }
async function refresh() { async function refresh() {
await fetch({ append: false }); if (Object.values(store.userParams).length) await fetch({ append: false });
jorgep marked this conversation as resolved Outdated
jgallego commented 2023-10-02 05:33:33 +00:00
Outdated
Review
Copy Link

!showAll sobraria no?

!showAll sobraria no?
} }
function updateStateParams() { function updateStateParams() {

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

@ -110,12 +110,18 @@ 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>
@ -138,7 +144,7 @@ function stateColor(row) {
order="created DESC" order="created DESC"
:limit="20" :limit="20"
:offset="50" :offset="50"
auto-load :auto-load="!!$route?.query.params"
> >
<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>

107
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,99 @@ 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"
placeholder="yyyy/mm/dd"
>
<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"
placeholder="yyyy/mm/dd"
>
<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
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template> </template>
</QInput> </QInput>
</QItemSection> </QItemSection>
@ -67,12 +161,19 @@ en:
orderFk: Order orderFk: Order
clientFk: Customer clientFk: Customer
amount: Amount amount: Amount
from: From
to: To
es: es:
params: params:
orderFk: Pedido orderFk: Pedido
clientFk: Cliente clientFk: Cliente
amount: Importe amount: Importe
from: Desde
to: Hasta
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
From: Desde
To: Hasta
</i18n> </i18n>

10
test/cypress/integration/workerList.spec.js
View File

@ -8,18 +8,18 @@ describe('WorkerList', () => {
it('should load workers', () => { it('should load workers', () => {
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span') cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
.eq(0) .eq(0)
.should('have.text', 'victorvd');
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
.eq(1)
.should('have.text', 'JessicaJones'); .should('have.text', 'JessicaJones');
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span') cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
.eq(2) .eq(1)
.should('have.text', 'BruceBanner'); .should('have.text', 'BruceBanner');
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
.eq(2)
.should('have.text', 'CharlesXavier');
}); });
it('should open the worker summary', () => { it('should open the worker summary', () => {
cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click(); cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones'); cy.get('.summaryHeader div').should('have.text', '1109 - Bruce Banner');
cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data'); cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
cy.get('.summary .header').eq(1).should('have.text', 'User data'); cy.get('.summary .header').eq(1).should('have.text', 'User data');
}); });