Polishing
This commit is contained in:
parent
526a7dd628
commit
f1df8e83f5
|
|
@ -11,6 +11,7 @@
|
|||
"assets/*": ["src/assets/*"],
|
||||
"boot/*": ["src/boot/*"],
|
||||
"stores/*": ["src/stores/*"],
|
||||
"filters/*": ["src/filters/*"],
|
||||
"vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -51,27 +51,11 @@ const props = defineProps({
|
|||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
let arrayData = null;
|
||||
let store = null;
|
||||
const arrayData = useArrayData(props.dataKey, { ...props });
|
||||
const store = arrayData.store;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -30,9 +30,20 @@ export function useArrayData(key, userOptions) {
|
|||
});
|
||||
|
||||
function setOptions() {
|
||||
const allowedOptions = [
|
||||
'url',
|
||||
'filter',
|
||||
'where',
|
||||
'order',
|
||||
'limit',
|
||||
'skip',
|
||||
'userParams',
|
||||
'userFilter'
|
||||
];
|
||||
if (typeof userOptions === 'object') {
|
||||
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)) {
|
||||
store[option] = userOptions[option];
|
||||
|
|
@ -62,6 +73,7 @@ export function useArrayData(key, userOptions) {
|
|||
|
||||
Object.assign(params, store.userParams);
|
||||
|
||||
store.isLoading = true
|
||||
const response = await axios.get(store.url, {
|
||||
signal: canceller.signal,
|
||||
params,
|
||||
|
|
@ -82,6 +94,8 @@ export function useArrayData(key, userOptions) {
|
|||
updateStateParams();
|
||||
}
|
||||
|
||||
store.isLoading = false
|
||||
|
||||
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 {
|
||||
fetch,
|
||||
|
|
@ -152,5 +167,6 @@ export function useArrayData(key, userOptions) {
|
|||
hasMoreData,
|
||||
totalRows,
|
||||
updateStateParams,
|
||||
isLoading
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,17 @@ import { ref, computed } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
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 { toDate, toCurrency } from 'filters/index';
|
||||
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const arrayData = useArrayData('CustomerTransactions');
|
||||
|
||||
async function confirm(transaction) {
|
||||
quasar
|
||||
|
|
@ -27,11 +29,10 @@ async function confirm(transaction) {
|
|||
.onOk((row) => (row.isConfirmed = true));
|
||||
}
|
||||
|
||||
async function confirmTransaction(transaction) {
|
||||
const body = { id: transaction.id };
|
||||
await axios.post('Clients/confirmTransaction', body);
|
||||
async function confirmTransaction({ id }) {
|
||||
await axios.post('Clients/confirmTransaction', { id });
|
||||
quasar.notify({
|
||||
message: 'Transaction confirmed',
|
||||
message: t('Payment confirmed'),
|
||||
type: 'positive',
|
||||
});
|
||||
}
|
||||
|
|
@ -49,6 +50,7 @@ const columns = computed(() => [
|
|||
label: t('Customer ID'),
|
||||
field: (row) => row.clientFk,
|
||||
align: 'right',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'customer',
|
||||
|
|
@ -60,6 +62,7 @@ const columns = computed(() => [
|
|||
label: t('State'),
|
||||
field: (row) => row.isConfirmed,
|
||||
format: (value) => (value ? t('Confirmed') : t('Unconfirmed')),
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -81,6 +84,12 @@ const columns = computed(() => [
|
|||
grid: false,
|
||||
},
|
||||
]);
|
||||
const isLoading = computed(() => arrayData.isLoading.value);
|
||||
|
||||
function stateColor(row) {
|
||||
if (row.isConfirmed) return 'positive';
|
||||
return 'primary';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -109,15 +118,23 @@ const columns = computed(() => [
|
|||
<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-toolbar-title>{{ t('Web Payments') }}</q-toolbar-title>
|
||||
<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-tooltip>Change view</q-tooltip>
|
||||
<q-tooltip>{{ t('Change view') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
<paginate
|
||||
data-key="CustomerTransactions"
|
||||
url="/Clients"
|
||||
url="Clients/transactions"
|
||||
order="created DESC"
|
||||
:limit="20"
|
||||
:offset="50"
|
||||
|
|
@ -129,9 +146,10 @@ const columns = computed(() => [
|
|||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
hide-pagination
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:grid="grid || $q.screen.lt.sm"
|
||||
class="q-mt-xs"
|
||||
hide-pagination
|
||||
>
|
||||
<template #body-cell-actions="{ row }">
|
||||
<q-td auto-width class="text-center">
|
||||
|
|
@ -157,6 +175,17 @@ const columns = computed(() => [
|
|||
</span>
|
||||
</q-td>
|
||||
</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 }">
|
||||
<div class="q-mb-md col-12">
|
||||
<q-card>
|
||||
|
|
@ -175,7 +204,20 @@ const columns = computed(() => [
|
|||
<q-item-label caption>
|
||||
{{ col.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 }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -195,23 +237,27 @@ const columns = computed(() => [
|
|||
</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
|
||||
<template v-if="!row.isConfirmed">
|
||||
<q-separator vertical />
|
||||
<q-card-actions
|
||||
vertical
|
||||
class="justify-between"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
t('Confirm transaction')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-btn
|
||||
icon="check"
|
||||
@click="confirm(row)"
|
||||
color="primary"
|
||||
size="md"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-tooltip>{{
|
||||
t('Confirm transaction')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</template>
|
||||
</q-item>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -232,6 +278,7 @@ const columns = computed(() => [
|
|||
|
||||
<i18n>
|
||||
es:
|
||||
Web Payments: Pagos Web
|
||||
Confirm transaction: Confirmar transacción
|
||||
Transaction ID: ID transacción
|
||||
Customer ID: ID cliente
|
||||
|
|
@ -242,4 +289,6 @@ es:
|
|||
Actions: Acciones
|
||||
Confirmed: Confirmada
|
||||
Unconfirmed: Sin confirmar
|
||||
Change view: Cambiar vista
|
||||
Payment confirmed: Pago confirmado
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
|
|||
skip: 0,
|
||||
order: '',
|
||||
data: ref(),
|
||||
isLoading: false
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue