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

Polishing

This commit is contained in:
Joan Sanchez 2023-03-21 09:49:47 +01:00
parent 526a7dd628
commit f1df8e83f5
5 changed files with 98 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
jsconfig.json
View File

@ -11,6 +11,7 @@
"assets/*": ["src/assets/*"], "assets/*": ["src/assets/*"],
"boot/*": ["src/boot/*"], "boot/*": ["src/boot/*"],
"stores/*": ["src/stores/*"], "stores/*": ["src/stores/*"],
"filters/*": ["src/filters/*"],
"vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"] "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
} }
}, },

20
src/components/ui/VnSearchbar.vue
View File

@ -51,27 +51,11 @@ const props = defineProps({
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
let arrayData = null; const arrayData = useArrayData(props.dataKey, { ...props });
let store = null; const store = arrayData.store;
const searchText = ref(''); const searchText = ref('');
onMounted(() => { 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; const params = store.userParams;
if (params && params.search) { if (params && params.search) {
searchText.value = params.search; searchText.value = params.search;

20
src/composables/useArrayData.js
View File

@ -30,9 +30,20 @@ export function useArrayData(key, userOptions) {
}); });
function setOptions() { function setOptions() {
const allowedOptions = [
'url',
'filter',
'where',
'order',
'limit',
'skip',
'userParams',
'userFilter'
];
if (typeof userOptions === 'object') { if (typeof userOptions === 'object') {
for (const option in userOptions) { for (const option in userOptions) {
if (userOptions[option] == null) continue; const isEmpty = userOptions[option] == null || userOptions[option] == ''
if (isEmpty || !allowedOptions.includes(option)) continue;
if (Object.prototype.hasOwnProperty.call(store, option)) { if (Object.prototype.hasOwnProperty.call(store, option)) {
store[option] = userOptions[option]; store[option] = userOptions[option];
@ -62,6 +73,7 @@ export function useArrayData(key, userOptions) {
Object.assign(params, store.userParams); Object.assign(params, store.userParams);
store.isLoading = true
const response = await axios.get(store.url, { const response = await axios.get(store.url, {
signal: canceller.signal, signal: canceller.signal,
params, params,
@ -82,6 +94,8 @@ export function useArrayData(key, userOptions) {
updateStateParams(); updateStateParams();
} }
store.isLoading = false
canceller = null; canceller = null;
} }
@ -139,7 +153,8 @@ export function useArrayData(key, userOptions) {
}); });
} }
const totalRows = computed(() => store.data && store.data.length | 0); const totalRows = computed(() => store.data && store.data.length || 0);
const isLoading = computed(() => store.isLoading || false)
return { return {
fetch, fetch,
@ -152,5 +167,6 @@ export function useArrayData(key, userOptions) {
hasMoreData, hasMoreData,
totalRows, totalRows,
updateStateParams, updateStateParams,
isLoading
}; };
} }

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

@ -4,15 +4,17 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import Paginate from 'components/PaginateData.vue'; import Paginate from 'components/PaginateData.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'; import { toDate, toCurrency } from 'filters/index';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue'; import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
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
@ -27,11 +29,10 @@ async function confirm(transaction) {
.onOk((row) => (row.isConfirmed = true)); .onOk((row) => (row.isConfirmed = true));
} }
async function confirmTransaction(transaction) { async function confirmTransaction({ id }) {
const body = { id: transaction.id }; await axios.post('Clients/confirmTransaction', { id });
await axios.post('Clients/confirmTransaction', body);
quasar.notify({ quasar.notify({
message: 'Transaction confirmed', message: t('Payment confirmed'),
type: 'positive', type: 'positive',
}); });
} }
@ -49,6 +50,7 @@ const columns = computed(() => [
label: t('Customer ID'), label: t('Customer ID'),
field: (row) => row.clientFk, field: (row) => row.clientFk,
align: 'right', align: 'right',
sortable: true,
}, },
{ {
name: 'customer', name: 'customer',
@ -60,6 +62,7 @@ const columns = computed(() => [
label: t('State'), label: t('State'),
field: (row) => row.isConfirmed, field: (row) => row.isConfirmed,
format: (value) => (value ? t('Confirmed') : t('Unconfirmed')), format: (value) => (value ? t('Confirmed') : t('Unconfirmed')),
align: 'left',
sortable: true, sortable: true,
}, },
{ {
@ -81,6 +84,12 @@ const columns = computed(() => [
grid: false, grid: false,
}, },
]); ]);
const isLoading = computed(() => arrayData.isLoading.value);
function stateColor(row) {
if (row.isConfirmed) return 'positive';
return 'primary';
}
</script> </script>
<template> <template>
@ -109,15 +118,23 @@ const columns = computed(() => [
<q-page class="column items-center q-pa-md"> <q-page class="column items-center q-pa-md">
<div class="card-list"> <div class="card-list">
<q-toolbar class="q-pa-none"> <q-toolbar class="q-pa-none">
<q-toolbar-title>Web Payments</q-toolbar-title> <q-toolbar-title>{{ t('Web Payments') }}</q-toolbar-title>
<q-btn icon="refresh" color="primary" class="q-mr-sm" round dense></q-btn> <q-btn
@click="arrayData.refresh()"
:loading="isLoading"
icon="refresh"
color="primary"
class="q-mr-sm"
round
dense
></q-btn>
<q-btn @click="grid = !grid" icon="list" color="primary" round dense> <q-btn @click="grid = !grid" icon="list" color="primary" round dense>
<q-tooltip>Change view</q-tooltip> <q-tooltip>{{ t('Change view') }}</q-tooltip>
</q-btn> </q-btn>
</q-toolbar> </q-toolbar>
<paginate <paginate
data-key="CustomerTransactions" data-key="CustomerTransactions"
url="/Clients" url="Clients/transactions"
order="created DESC" order="created DESC"
:limit="20" :limit="20"
:offset="50" :offset="50"
@ -129,9 +146,10 @@ const columns = computed(() => [
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
row-key="id" row-key="id"
hide-pagination
:pagination="{ rowsPerPage: 0 }" :pagination="{ rowsPerPage: 0 }"
:grid="grid || $q.screen.lt.sm" :grid="grid || $q.screen.lt.sm"
class="q-mt-xs"
hide-pagination
> >
<template #body-cell-actions="{ row }"> <template #body-cell-actions="{ row }">
<q-td auto-width class="text-center"> <q-td auto-width class="text-center">
@ -157,6 +175,17 @@ const columns = computed(() => [
</span> </span>
</q-td> </q-td>
</template> </template>
<template #body-cell-state="{ row }">
<q-td auto-width class="text-center">
<q-badge :color="stateColor(row)">
{{
row.isConfirmed
? t('Confirmed')
: t('Unconfirmed')
}}
</q-badge>
</q-td>
</template>
<template #item="{ cols, row }"> <template #item="{ cols, row }">
<div class="q-mb-md col-12"> <div class="q-mb-md col-12">
<q-card> <q-card>
@ -175,7 +204,20 @@ const columns = computed(() => [
<q-item-label caption> <q-item-label caption>
{{ col.label }} {{ col.label }}
</q-item-label> </q-item-label>
<q-item-label> <q-item-label
v-if="col.name == 'state'"
>
<q-badge
:color="
stateColor(row)
"
>
{{ col.value }}
</q-badge>
</q-item-label>
<q-item-label
v-if="col.name != 'state'"
>
{{ col.value }} {{ col.value }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
@ -195,23 +237,27 @@ const columns = computed(() => [
</q-item> </q-item>
</q-list> --> </q-list> -->
</q-item-section> </q-item-section>
<q-separator vertical /> <template v-if="!row.isConfirmed">
<q-card-actions vertical class="justify-between"> <q-separator vertical />
<q-btn <q-card-actions
v-if="!row.isConfirmed" vertical
icon="check" class="justify-between"
@click="confirm(row)"
color="primary"
size="md"
round
flat
dense
> >
<q-tooltip>{{ <q-btn
t('Confirm transaction') icon="check"
}}</q-tooltip> @click="confirm(row)"
</q-btn> color="primary"
</q-card-actions> size="md"
round
flat
dense
>
<q-tooltip>{{
t('Confirm transaction')
}}</q-tooltip>
</q-btn>
</q-card-actions>
</template>
</q-item> </q-item>
</q-card> </q-card>
</div> </div>
@ -232,6 +278,7 @@ const columns = computed(() => [
<i18n> <i18n>
es: es:
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 ID: ID cliente
@ -242,4 +289,6 @@ es:
Actions: Acciones Actions: Acciones
Confirmed: Confirmada Confirmed: Confirmada
Unconfirmed: Sin confirmar Unconfirmed: Sin confirmar
Change view: Cambiar vista
Payment confirmed: Pago confirmado
</i18n> </i18n>

1
src/stores/useArrayDataStore.js
View File

@ -18,6 +18,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
skip: 0, skip: 0,
order: '', order: '',
data: ref(), data: ref(),
isLoading: false
}; };
} }