forked from verdnatura/salix-front
Reviewed-on: verdnatura/salix-front#97 Reviewed-by: Javi Gallego <jgallego@verdnatura.es> Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
commit
59b5daed51
|
|
@ -20,6 +20,10 @@ const props = defineProps({
|
|||
required: false,
|
||||
default: null,
|
||||
},
|
||||
showAll: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refresh', 'clear']);
|
||||
|
|
@ -29,31 +33,34 @@ const store = arrayData.store;
|
|||
const userParams = ref({});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.params) userParams.value = props.params;
|
||||
const params = store.userParams;
|
||||
if (Object.keys(params).length > 0) {
|
||||
userParams.value = Object.assign({}, params);
|
||||
if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
|
||||
if (Object.keys(store.userParams).length > 0) {
|
||||
userParams.value = JSON.parse(JSON.stringify(store.userParams));
|
||||
}
|
||||
});
|
||||
|
||||
const isLoading = ref(false);
|
||||
async function search() {
|
||||
const params = userParams.value;
|
||||
const params = JSON.parse(JSON.stringify(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 });
|
||||
if (!props.showAll && !Object.values(params).length) store.data = [];
|
||||
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
isLoading.value = true;
|
||||
const params = Object.values(userParams.value).filter((param) => param);
|
||||
|
||||
await arrayData.fetch({ append: false });
|
||||
if (!props.showAll && !params.length) store.data = [];
|
||||
isLoading.value = false;
|
||||
emit('refresh');
|
||||
}
|
||||
|
|
@ -62,6 +69,7 @@ async function clearFilters() {
|
|||
userParams.value = {};
|
||||
isLoading.value = true;
|
||||
await arrayData.applyFilter({ params: {} });
|
||||
if (!props.showAll) store.data = [];
|
||||
isLoading.value = false;
|
||||
|
||||
emit('clear');
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export function useArrayData(key, userOptions) {
|
|||
}
|
||||
|
||||
async function refresh() {
|
||||
await fetch({ append: false });
|
||||
if (Object.values(store.userParams).length) await fetch({ append: false });
|
||||
}
|
||||
|
||||
function updateStateParams() {
|
||||
|
|
|
|||
|
|
@ -110,12 +110,18 @@ 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>
|
||||
|
|
@ -138,7 +144,7 @@ function stateColor(row) {
|
|||
order="created DESC"
|
||||
:limit="20"
|
||||
:offset="50"
|
||||
auto-load
|
||||
:auto-load="!!$route?.query.params"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,99 @@ 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"
|
||||
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>
|
||||
</QInput>
|
||||
</QItemSection>
|
||||
|
|
@ -67,12 +161,19 @@ en:
|
|||
orderFk: Order
|
||||
clientFk: Customer
|
||||
amount: Amount
|
||||
from: From
|
||||
to: To
|
||||
es:
|
||||
params:
|
||||
orderFk: Pedido
|
||||
clientFk: Cliente
|
||||
amount: Importe
|
||||
from: Desde
|
||||
to: Hasta
|
||||
Order ID: ID pedido
|
||||
Customer ID: ID cliente
|
||||
Amount: Importe
|
||||
Please type a number: Por favor, escriba un número
|
||||
From: Desde
|
||||
To: Hasta
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -8,18 +8,18 @@ describe('WorkerList', () => {
|
|||
it('should load workers', () => {
|
||||
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
|
||||
.eq(0)
|
||||
.should('have.text', 'victorvd');
|
||||
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
|
||||
.eq(1)
|
||||
.should('have.text', 'JessicaJones');
|
||||
cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
|
||||
.eq(2)
|
||||
.eq(1)
|
||||
.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', () => {
|
||||
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(1).should('have.text', 'User data');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue