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
|
||||
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" />
|
||||
</QChip>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ const components = {
|
|||
attrs: {
|
||||
...defaultAttrs,
|
||||
clearable: true,
|
||||
type: 'number',
|
||||
},
|
||||
forceAttrs,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -423,6 +423,7 @@ defineExpose({
|
|||
>
|
||||
<QBtn
|
||||
v-for="(btn, index) of col.actions"
|
||||
v-show="btn.show ? btn.show(row) : true"
|
||||
:key="index"
|
||||
:title="btn.title"
|
||||
:icon="btn.icon"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref, computed } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import { toDate, toCurrency } from 'filters/index';
|
||||
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
|
||||
import { toDate, toCurrency } from 'filters/index';
|
||||
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const arrayData = useArrayData('CustomerTransactions');
|
||||
|
||||
async function confirm(transaction) {
|
||||
quasar
|
||||
|
|
@ -36,59 +35,69 @@ async function confirmTransaction({ id }) {
|
|||
});
|
||||
}
|
||||
|
||||
const grid = ref(false);
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'id',
|
||||
label: t('Transaction ID'),
|
||||
field: (row) => row.id,
|
||||
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')),
|
||||
isId: true,
|
||||
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'),
|
||||
field: (row) => toDate(row.created),
|
||||
sortable: true,
|
||||
format: ({ created }) => toDate(created),
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
name: 'amount',
|
||||
label: t('Amount'),
|
||||
field: (row) => row.amount,
|
||||
format: (value) => toCurrency(value),
|
||||
sortable: true,
|
||||
format: ({ amount }) => toCurrency(amount),
|
||||
columnFilter: {
|
||||
component: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: t('Actions'),
|
||||
grid: false,
|
||||
align: 'right',
|
||||
name: 'tableActions',
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
@ -97,158 +106,22 @@ function stateColor(row) {
|
|||
<CustomerPaymentsFilter data-key="CustomerTransactions" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<QPage class="column items-center q-pa-md customer-payments">
|
||||
<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"
|
||||
url="Clients/transactions"
|
||||
order="created DESC"
|
||||
:limit="20"
|
||||
:offset="50"
|
||||
:auto-load="!!$route?.query.params"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:dense="$q.screen.lt.md"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
:grid="grid || $q.screen.lt.sm"
|
||||
class="q-mt-xs custom-table"
|
||||
>
|
||||
<template #body-cell-actions="{ 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">
|
||||
{{ row.clientFk }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</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 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>
|
||||
<VnTable
|
||||
data-key="CustomerTransactions"
|
||||
url="Clients/transactions"
|
||||
order="created DESC"
|
||||
:columns="columns"
|
||||
:right-search="false"
|
||||
auto-load
|
||||
>
|
||||
<template #column-clientFk="{ row }">
|
||||
<span class="link">
|
||||
{{ row.clientFk }} -
|
||||
{{ row.customerName }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -269,14 +142,11 @@ es:
|
|||
Web Payments: Pagos Web
|
||||
Confirm transaction: Confirmar transacción
|
||||
Transaction ID: ID transacción
|
||||
Customer ID: ID cliente
|
||||
Customer Name: Nombre cliente
|
||||
Customer: cliente
|
||||
State: Estado
|
||||
Dated: Fecha
|
||||
Amount: Importe
|
||||
Actions: Acciones
|
||||
Confirmed: Confirmada
|
||||
Unconfirmed: Sin confirmar
|
||||
Change view: Cambiar vista
|
||||
Payment confirmed: Pago confirmado
|
||||
</i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue