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

5241-virtual_pos #44

Merged
alexandre merged 6 commits from 5241-virtual_pos into dev 2023-03-23 13:53:46 +00:00
Conversation 0 Commits 6 Files Changed 12 +98 -47
5 changed files with 98 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f1df8e83f5 - Show all commits

1
jsconfig.json
View File

@ -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"]
}
},

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

@ -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;

20
src/composables/useArrayData.js
View File

@ -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
};
}

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

@ -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 }) {
alexandre commented 2023-03-23 12:55:40 +00:00
Review
Copy Link

és correcte passar-li com a parametre el id dins de claus?

és correcte passar-li com a parametre el id dins de claus?
joan commented 2023-03-23 13:37:49 +00:00
Review
Copy Link

Si, el parámetre que li arriva es un objecte data, i ahí el que estic fent es desestructurar el objecte per a extraure directament les propietats

Igual com fer

const { id } = data

Si, el parámetre que li arriva es un objecte data, i ahí el que estic fent es desestructurar el objecte per a extraure directament les propietats Igual com fer `const { id } = data`
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>

1
src/stores/useArrayDataStore.js
View File

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