jsconfig.json

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

src/components/ui/VnSearchbar.vue

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

src/composables/useArrayData.js

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

src/pages/Customer/CustomerPayments.vue

@@ -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,10 +237,13 @@ const columns = computed(() => [
                                                 </q-item>
                                             </q-list> -->
                                         </q-item-section>
+                                        <template v-if="!row.isConfirmed">
                                             <q-separator vertical />
-                                        <q-card-actions vertical class="justify-between">
+                                            <q-card-actions
+                                                vertical
+                                                class="justify-between"
+                                            >
                                                 <q-btn
-                                                v-if="!row.isConfirmed"
                                                     icon="check"
                                                     @click="confirm(row)"
                                                     color="primary"
@@ -212,6 +257,7 @@ const columns = computed(() => [
                                                     }}</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>

src/stores/useArrayDataStore.js

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