feature(POS): added responsive table
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
f4dc6a241e
commit
526a7dd628
|
|
@ -9,7 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
### Added
|
||||
|
||||
- Added...
|
||||
- (Clientes) => Añadida nueva sección "Pagos Web" para gestionar los pagos de todos los clientes
|
||||
- (Tickets) => Añadida opción en el menú desplegable del ticket para enviar SMS al cliente
|
||||
- (Reclamaciones) => Añadida nueva sección "Registros de auditoría"
|
||||
- (Trabajadores) => Añádido módulo de trabajadores
|
||||
- (General) => Añadida barra de búsqueda general en los listados principales
|
||||
|
||||
### Changed
|
||||
|
||||
|
|
|
|||
|
|
@ -141,8 +141,11 @@ function formatValue(value) {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<div v-if="tags.length === 0" class="text-grey centered font-xs">
|
||||
{{ t(`You didn't enter any filter`) }}
|
||||
<div
|
||||
v-if="tags.length === 0"
|
||||
class="text-grey font-xs text-center full-width"
|
||||
>
|
||||
{{ t(`No filters applied`) }}
|
||||
</div>
|
||||
<div>
|
||||
<q-chip
|
||||
|
|
@ -194,7 +197,7 @@ function formatValue(value) {
|
|||
|
||||
<i18n>
|
||||
es:
|
||||
You didn't enter any filter: No has introducido ningún filtro
|
||||
No filters applied: No se han aplicado filtros
|
||||
Applied filters: Filtros aplicados
|
||||
Remove filters: Eliminar filtros
|
||||
Refresh: Refrescar
|
||||
|
|
|
|||
|
|
@ -51,18 +51,27 @@ const props = defineProps({
|
|||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const arrayData = useArrayData(props.dataKey, {
|
||||
url: props.url,
|
||||
filter: props.filter,
|
||||
where: props.where,
|
||||
limit: props.limit,
|
||||
order: props.order,
|
||||
userParams: props.userParams,
|
||||
});
|
||||
const store = arrayData.store;
|
||||
let arrayData = null;
|
||||
let store = null;
|
||||
const searchText = ref('');
|
||||
|
||||
onMounted(() => {
|
||||
const options = {};
|
||||
if (props.url) {
|
||||
options.url = props.url;
|
||||
}
|
||||
if (props.filter) {
|
||||
options.filter = props.filter;
|
||||
}
|
||||
|
||||
// url: props.url,
|
||||
// filter: props.filter,
|
||||
// where: props.where,
|
||||
// limit: props.limit,
|
||||
// order: props.order,
|
||||
// userParams: props.userParams,
|
||||
arrayData = useArrayData(props.dataKey, options);
|
||||
store = arrayData.store;
|
||||
const params = store.userParams;
|
||||
if (params && params.search) {
|
||||
searchText.value = params.search;
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export default {
|
|||
customers: 'Customers',
|
||||
list: 'List',
|
||||
createCustomer: 'Create customer',
|
||||
webPayments: 'Web Payments',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -61,8 +61,9 @@ export default {
|
|||
customers: 'Clientes',
|
||||
list: 'Listado',
|
||||
createCustomer: 'Crear cliente',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
summary: 'Resumen',
|
||||
webPayments: 'Web Payments'
|
||||
},
|
||||
list: {
|
||||
phone: 'Teléfono',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,245 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import Paginate from 'components/PaginateData.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
|
||||
import { toDate, toCurrency } from 'filters';
|
||||
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function confirm(transaction) {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
data: transaction,
|
||||
title: t('Confirm transaction'),
|
||||
promise: confirmTransaction,
|
||||
},
|
||||
})
|
||||
.onOk((row) => (row.isConfirmed = true));
|
||||
}
|
||||
|
||||
async function confirmTransaction(transaction) {
|
||||
const body = { id: transaction.id };
|
||||
await axios.post('Clients/confirmTransaction', body);
|
||||
quasar.notify({
|
||||
message: 'Transaction confirmed',
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
|
||||
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',
|
||||
},
|
||||
{
|
||||
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')),
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'dated',
|
||||
label: t('Dated'),
|
||||
field: (row) => toDate(row.created),
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'amount',
|
||||
label: t('Amount'),
|
||||
field: (row) => row.amount,
|
||||
format: (value) => toCurrency(value),
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: t('Actions'),
|
||||
grid: false,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<q-btn
|
||||
flat
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<q-tooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
<q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<CustomerPaymentsFilter data-key="CustomerTransactions" />
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page class="column items-center q-pa-md">
|
||||
<div class="card-list">
|
||||
<q-toolbar class="q-pa-none">
|
||||
<q-toolbar-title>Web Payments</q-toolbar-title>
|
||||
<q-btn icon="refresh" color="primary" class="q-mr-sm" round dense></q-btn>
|
||||
<q-btn @click="grid = !grid" icon="list" color="primary" round dense>
|
||||
<q-tooltip>Change view</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
<paginate
|
||||
data-key="CustomerTransactions"
|
||||
url="/Clients"
|
||||
order="created DESC"
|
||||
:limit="20"
|
||||
:offset="50"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<q-table
|
||||
:dense="$q.screen.lt.md"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
hide-pagination
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:grid="grid || $q.screen.lt.sm"
|
||||
>
|
||||
<template #body-cell-actions="{ row }">
|
||||
<q-td auto-width class="text-center">
|
||||
<q-btn
|
||||
v-if="!row.isConfirmed"
|
||||
icon="check"
|
||||
@click="confirm(row)"
|
||||
color="primary"
|
||||
size="md"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-tooltip>{{ t('Confirm transaction') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</template>
|
||||
<template #body-cell-customerId="{ row }">
|
||||
<q-td align="right">
|
||||
<span class="link">
|
||||
{{ row.clientFk }}
|
||||
<CustomerDescriptorProxy :id="row.clientFk" />
|
||||
</span>
|
||||
</q-td>
|
||||
</template>
|
||||
<template #item="{ cols, row }">
|
||||
<div class="q-mb-md col-12">
|
||||
<q-card>
|
||||
<q-item class="q-pa-none items-start">
|
||||
<q-item-section class="q-pa-md">
|
||||
<q-list>
|
||||
<template
|
||||
v-for="col of cols"
|
||||
:key="col.name"
|
||||
>
|
||||
<q-item
|
||||
v-if="col.grid !== false"
|
||||
class="q-pa-none"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ col.label }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ col.value }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
<!-- <q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
<q-skeleton />
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
><q-skeleton type="text"
|
||||
/></q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list> -->
|
||||
</q-item-section>
|
||||
<q-separator vertical />
|
||||
<q-card-actions vertical class="justify-between">
|
||||
<q-btn
|
||||
v-if="!row.isConfirmed"
|
||||
icon="check"
|
||||
@click="confirm(row)"
|
||||
color="primary"
|
||||
size="md"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-tooltip>{{
|
||||
t('Confirm transaction')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-item>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
</paginate>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
width: 100%;
|
||||
max-width: 60em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Confirm transaction: Confirmar transacción
|
||||
Transaction ID: ID transacción
|
||||
Customer ID: ID cliente
|
||||
Customer Name: Nombre cliente
|
||||
State: Estado
|
||||
Dated: Fecha
|
||||
Amount: Importe
|
||||
Actions: Acciones
|
||||
Confirmed: Confirmada
|
||||
Unconfirmed: Sin confirmar
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ params }">
|
||||
<q-list dense>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:label="t('Order ID')"
|
||||
v-model="params.orderFk"
|
||||
lazy-rules
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="vn:basket" size="sm"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:label="t('Customer ID')"
|
||||
v-model="params.clientFk"
|
||||
lazy-rules
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="vn:client" size="sm"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input :label="t('Amount')" v-model="params.amount" lazy-rules>
|
||||
<template #prepend>
|
||||
<q-icon name="euro" size="sm"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
orderFk: Order
|
||||
clientFk: Customer
|
||||
amount: Amount
|
||||
es:
|
||||
params:
|
||||
orderFk: Pedido
|
||||
clientFk: Cliente
|
||||
amount: Importe
|
||||
Order ID: ID pedido
|
||||
Customer ID: ID cliente
|
||||
Amount: Importe
|
||||
</i18n>
|
||||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'CustomerMain' },
|
||||
menus: {
|
||||
main: ['CustomerList', 'CustomerCreate'],
|
||||
main: ['CustomerList', 'CustomerPayments', 'CustomerCreate'],
|
||||
card: ['CustomerBasicData'],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -29,6 +29,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Customer/CustomerList.vue')
|
||||
},
|
||||
{
|
||||
path: 'payments',
|
||||
name: 'CustomerPayments',
|
||||
meta: {
|
||||
title: 'webPayments',
|
||||
icon: 'vn:onlinepayment',
|
||||
},
|
||||
component: () => import('src/pages/Customer/CustomerPayments.vue')
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'CustomerCreate',
|
||||
|
|
|
|||
Loading…
Reference in New Issue