forked from verdnatura/salix-front
refactor: CustomerPayments use VnTable
This commit is contained in:
parent
81a9719207
commit
fd11259f74
|
|
@ -35,7 +35,9 @@ function stopEventPropagation(event) {
|
||||||
dense
|
dense
|
||||||
square
|
square
|
||||||
>
|
>
|
||||||
<span v-if="!col.chip.icon">{{ row[col.name] }}</span>
|
<span v-if="!col.chip.icon">
|
||||||
|
{{ col.format ? col.format(row) : row[col.name] }}
|
||||||
|
</span>
|
||||||
<QIcon v-else :name="col.chip.icon" color="primary-light" />
|
<QIcon v-else :name="col.chip.icon" color="primary-light" />
|
||||||
</QChip>
|
</QChip>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,7 @@ const components = {
|
||||||
attrs: {
|
attrs: {
|
||||||
...defaultAttrs,
|
...defaultAttrs,
|
||||||
clearable: true,
|
clearable: true,
|
||||||
|
type: 'number',
|
||||||
},
|
},
|
||||||
forceAttrs,
|
forceAttrs,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -423,6 +423,7 @@ defineExpose({
|
||||||
>
|
>
|
||||||
<QBtn
|
<QBtn
|
||||||
v-for="(btn, index) of col.actions"
|
v-for="(btn, index) of col.actions"
|
||||||
|
v-show="btn.show ? btn.show(row) : true"
|
||||||
:key="index"
|
:key="index"
|
||||||
:title="btn.title"
|
:title="btn.title"
|
||||||
:icon="btn.icon"
|
:icon="btn.icon"
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,18 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { ref, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import { useArrayData } from 'composables/useArrayData';
|
import { toDate, toCurrency } from 'filters/index';
|
||||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
|
||||||
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||||
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
|
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
|
||||||
import { toDate, toCurrency } from 'filters/index';
|
|
||||||
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
|
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
|
||||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||||
|
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const arrayData = useArrayData('CustomerTransactions');
|
|
||||||
|
|
||||||
async function confirm(transaction) {
|
async function confirm(transaction) {
|
||||||
quasar
|
quasar
|
||||||
|
|
@ -36,59 +35,69 @@ async function confirmTransaction({ id }) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const grid = ref(false);
|
|
||||||
const columns = computed(() => [
|
const columns = computed(() => [
|
||||||
{
|
{
|
||||||
name: 'id',
|
name: 'id',
|
||||||
label: t('Transaction ID'),
|
label: t('Transaction ID'),
|
||||||
field: (row) => row.id,
|
isId: true,
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'customerId',
|
|
||||||
label: t('Customer ID'),
|
|
||||||
field: (row) => row.clientFk,
|
|
||||||
align: 'right',
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'customer',
|
|
||||||
label: t('Customer Name'),
|
|
||||||
field: (row) => row.customerName,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'state',
|
|
||||||
label: t('State'),
|
|
||||||
field: (row) => row.isConfirmed,
|
|
||||||
format: (value) => (value ? t('Confirmed') : t('Unconfirmed')),
|
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true,
|
columnFilter: {
|
||||||
|
inWhere: true,
|
||||||
|
alias: 't',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'dated',
|
align: 'left',
|
||||||
|
name: 'clientFk',
|
||||||
|
label: t('Customer'),
|
||||||
|
columnFilter: {
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Clients',
|
||||||
|
fields: ['id', 'name'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
class: 'expand',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'isConfirmed',
|
||||||
|
label: t('State'),
|
||||||
|
align: 'left',
|
||||||
|
format: ({ isConfirmed }) => (isConfirmed ? t('Confirmed') : t('Unconfirmed')),
|
||||||
|
chip: {
|
||||||
|
condition: () => true,
|
||||||
|
color: ({ isConfirmed }) => (isConfirmed ? 'bg-positive' : 'bg-primary'),
|
||||||
|
},
|
||||||
|
visible: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'created',
|
||||||
label: t('Dated'),
|
label: t('Dated'),
|
||||||
field: (row) => toDate(row.created),
|
format: ({ created }) => toDate(created),
|
||||||
sortable: true,
|
columnFilter: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'amount',
|
name: 'amount',
|
||||||
label: t('Amount'),
|
label: t('Amount'),
|
||||||
field: (row) => row.amount,
|
format: ({ amount }) => toCurrency(amount),
|
||||||
format: (value) => toCurrency(value),
|
columnFilter: {
|
||||||
sortable: true,
|
component: 'number',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'actions',
|
align: 'right',
|
||||||
label: t('Actions'),
|
name: 'tableActions',
|
||||||
grid: false,
|
actions: [
|
||||||
|
{
|
||||||
|
title: t('Confirm transaction'),
|
||||||
|
icon: 'check',
|
||||||
|
action: (row) => confirm(row),
|
||||||
|
show: ({ isConfirmed }) => !isConfirmed,
|
||||||
|
isPrimary: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const isLoading = computed(() => arrayData.isLoading.value);
|
|
||||||
|
|
||||||
function stateColor(row) {
|
|
||||||
if (row.isConfirmed) return 'positive';
|
|
||||||
return 'primary';
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -97,158 +106,22 @@ function stateColor(row) {
|
||||||
<CustomerPaymentsFilter data-key="CustomerTransactions" />
|
<CustomerPaymentsFilter data-key="CustomerTransactions" />
|
||||||
</template>
|
</template>
|
||||||
</RightMenu>
|
</RightMenu>
|
||||||
<QPage class="column items-center q-pa-md customer-payments">
|
<VnTable
|
||||||
<div class="vn-card-list">
|
|
||||||
<QToolbar class="q-pa-none justify-end">
|
|
||||||
<QBtn
|
|
||||||
@click="arrayData.refresh()"
|
|
||||||
:loading="isLoading"
|
|
||||||
icon="refresh"
|
|
||||||
color="primary"
|
|
||||||
class="q-mr-sm"
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
/>
|
|
||||||
<QBtn @click="grid = !grid" icon="list" color="primary" round dense>
|
|
||||||
<QTooltip>{{ t('Change view') }}</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</QToolbar>
|
|
||||||
<VnPaginate
|
|
||||||
data-key="CustomerTransactions"
|
data-key="CustomerTransactions"
|
||||||
url="Clients/transactions"
|
url="Clients/transactions"
|
||||||
order="created DESC"
|
order="created DESC"
|
||||||
:limit="20"
|
|
||||||
:offset="50"
|
|
||||||
:auto-load="!!$route?.query.params"
|
|
||||||
>
|
|
||||||
<template #body="{ rows }">
|
|
||||||
<QTable
|
|
||||||
:dense="$q.screen.lt.md"
|
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:rows="rows"
|
:right-search="false"
|
||||||
row-key="id"
|
auto-load
|
||||||
:grid="grid || $q.screen.lt.sm"
|
|
||||||
class="q-mt-xs custom-table"
|
|
||||||
>
|
>
|
||||||
<template #body-cell-actions="{ row }">
|
<template #column-clientFk="{ row }">
|
||||||
<QTd auto-width class="text-center">
|
|
||||||
<QBtn
|
|
||||||
v-if="!row.isConfirmed"
|
|
||||||
icon="check"
|
|
||||||
@click="confirm(row)"
|
|
||||||
color="primary"
|
|
||||||
size="md"
|
|
||||||
round
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
>
|
|
||||||
<QTooltip>{{ t('Confirm transaction') }}</QTooltip>
|
|
||||||
</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">
|
<span class="link">
|
||||||
{{ row.clientFk }}
|
{{ row.clientFk }} -
|
||||||
|
{{ row.customerName }}
|
||||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||||
</span>
|
</span>
|
||||||
</QTd>
|
|
||||||
</template>
|
</template>
|
||||||
<template #body-cell-customer="{ row }">
|
</VnTable>
|
||||||
<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 text-color="black" :color="stateColor(row)">
|
|
||||||
{{
|
|
||||||
row.isConfirmed
|
|
||||||
? t('Confirmed')
|
|
||||||
: t('Unconfirmed')
|
|
||||||
}}
|
|
||||||
</QBadge>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #item="{ cols, row }">
|
|
||||||
<div class="q-mb-md col-12">
|
|
||||||
<QCard class="q-pa-none">
|
|
||||||
<QItem class="q-pa-none items-start">
|
|
||||||
<QItemSection class="q-pa-none">
|
|
||||||
<QList>
|
|
||||||
<template
|
|
||||||
v-for="col of cols"
|
|
||||||
:key="col.name"
|
|
||||||
>
|
|
||||||
<QItem
|
|
||||||
v-if="col.grid !== false"
|
|
||||||
class="q-pa-none"
|
|
||||||
>
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel caption>
|
|
||||||
{{ col.label }}
|
|
||||||
</QItemLabel>
|
|
||||||
<QItemLabel
|
|
||||||
v-if="col.name == 'state'"
|
|
||||||
>
|
|
||||||
<QBadge
|
|
||||||
text-color="black"
|
|
||||||
:color="
|
|
||||||
stateColor(row)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ col.value }}
|
|
||||||
</QBadge>
|
|
||||||
</QItemLabel>
|
|
||||||
<QItemLabel
|
|
||||||
v-if="col.name != 'state'"
|
|
||||||
>
|
|
||||||
{{ col.value }}
|
|
||||||
</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</QList>
|
|
||||||
</QItemSection>
|
|
||||||
<template v-if="!row.isConfirmed">
|
|
||||||
<QSeparator vertical />
|
|
||||||
<QCardActions
|
|
||||||
vertical
|
|
||||||
class="justify-between"
|
|
||||||
>
|
|
||||||
<QBtn
|
|
||||||
icon="check"
|
|
||||||
@click="confirm(row)"
|
|
||||||
color="primary"
|
|
||||||
size="md"
|
|
||||||
round
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('Confirm transaction') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</QCardActions>
|
|
||||||
</template>
|
|
||||||
</QItem>
|
|
||||||
</QCard>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</QTable>
|
|
||||||
</template>
|
|
||||||
</VnPaginate>
|
|
||||||
</div>
|
|
||||||
</QPage>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -269,14 +142,11 @@ es:
|
||||||
Web Payments: Pagos Web
|
Web Payments: Pagos Web
|
||||||
Confirm transaction: Confirmar transacción
|
Confirm transaction: Confirmar transacción
|
||||||
Transaction ID: ID transacción
|
Transaction ID: ID transacción
|
||||||
Customer ID: ID cliente
|
Customer: cliente
|
||||||
Customer Name: Nombre cliente
|
|
||||||
State: Estado
|
State: Estado
|
||||||
Dated: Fecha
|
Dated: Fecha
|
||||||
Amount: Importe
|
Amount: Importe
|
||||||
Actions: Acciones
|
|
||||||
Confirmed: Confirmada
|
Confirmed: Confirmada
|
||||||
Unconfirmed: Sin confirmar
|
Unconfirmed: Sin confirmar
|
||||||
Change view: Cambiar vista
|
|
||||||
Payment confirmed: Pago confirmado
|
Payment confirmed: Pago confirmado
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue