src/components/common/VnForm.vue

@@ -197,7 +197,7 @@ defineExpose({
                 :class="{ 'q-mt-md': showBottomActions }"
             >
                 <QBtn
-                    v-if="defaultActions"
+                    v-if="defaultActions && showBottomActions"
                     :label="t('cancel')"
                     :icon="showBottomActions ? undefined : 'check'"
                     rounded

src/components/ui/CardList.vue

@@ -14,26 +14,26 @@ const handleClick = () => {
 </script>
 
 <template>
-    <QCard
+    <QItem
         v-bind="$attrs"
         v-ripple="clickable"
-        flat
+        :clickable="clickable"
-        class="full-width row items-center justify-between card no-border-radius"
+        class="full-width row items-center justify-between card no-border-radius bg-white"
         :class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
         @click="handleClick()"
     >
-        <QCardSection class="no-padding">
+        <QItemSection class="no-padding">
             <div class="row">
                 <slot name="prepend" />
-                <div>
+                <div class="column">
                     <slot name="content" />
                 </div>
             </div>
-        </QCardSection>
+        </QItemSection>
-        <QCardSection class="no-padding" side>
+        <QItemSection class="no-padding" side>
             <slot name="actions" />
-        </QCardSection>
+        </QItemSection>
-    </QCard>
+    </QItem>
 </template>
 
 <style lang="scss" scoped>

src/filters/index.js

@@ -0,0 +1,3 @@
+import toCurrency from './toCurrency';
+
+export { toCurrency };

src/filters/toCurrency.js

@@ -0,0 +1,18 @@
+import { useI18n } from 'vue-i18n';
+
+export default function (value, symbol = 'EUR', fractionSize = 2) {
+    if (value == null || value === '') value = 0;
+
+    const { locale } = useI18n();
+
+    const options = {
+        style: 'currency',
+        currency: symbol,
+        minimumFractionDigits: fractionSize,
+        maximumFractionDigits: fractionSize
+    };
+
+    const lang = locale.value === 'es' ? 'de' : locale.value;
+
+    return new Intl.NumberFormat(lang, options).format(value);
+}

src/i18n/ca-ES/index.js

@@ -0,0 +1,53 @@
+export default {
+    date: {
+        days: [
+            'Diumenge',
+            'Dilluns',
+            'Dimarts',
+            'Dimecres',
+            'Dijous',
+            'Divendres',
+            'Dissabte'
+        ],
+        daysShort: ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'],
+        months: [
+            'Gener',
+            'Febrer',
+            'Març',
+            'Abril',
+            'Maig',
+            'Juny',
+            'Juliol',
+            'Agost',
+            'Setembre',
+            'Octubre',
+            'Novembre',
+            'Desembre'
+        ],
+        shortMonths: [
+            'Gen',
+            'Feb',
+            'Mar',
+            'Abr',
+            'Mai',
+            'Jun',
+            'Jul',
+            'Ago',
+            'Set',
+            'Oct',
+            'Nov',
+            'Des'
+        ]
+    },
+    of: 'de',
+    // Menu
+    home: 'Inici',
+    catalog: 'Catàleg',
+    pendingOrders: 'Comandes pendents',
+    confirmedOrders: 'Comandes confirmades',
+    invoices: 'Factures',
+    agencyPackages: 'Paquets per agència',
+    accountConfig: 'Configuració',
+    addressesList: 'Adreces',
+    addressDetails: 'Configuració'
+};

src/i18n/en-US/index.js

@@ -56,6 +56,14 @@ export default {
     // menu
     home: 'Home',
     catalog: 'Catalog',
+    pendingOrders: 'Pending orders',
+    confirmedOrders: 'Confirmed orders',
+    invoices: 'Invoices',
+    agencyPackages: 'Bundles by agency',
+    accountConfig: 'Configuration',
+    addressesList: 'Addresses',
+    addressDetails: 'Configuration',
+
     orders: 'Orders',
     order: 'Pending order',
     ticket: 'Order',
@@ -76,5 +84,6 @@ export default {
     addressEdit: 'Edit address',
     dataSaved: 'Data saved',
     save: 'Save',
-    cancel: 'Cancel'
+    cancel: 'Cancel',
+    of: 'of'
 };

src/i18n/es-ES/index.js

@@ -65,6 +65,14 @@ export default {
     // Menu
     home: 'Inicio',
     catalog: 'Catálogo',
+    pendingOrders: 'Pedidos pendientes',
+    confirmedOrders: 'Pedidos confirmados',
+    invoices: 'Facturas',
+    agencyPackages: 'Bultos por agencia',
+    accountConfig: 'Configuración',
+    addressesList: 'Direcciones',
+    addressDetails: 'Configuración',
+
     orders: 'Pedidos',
     order: 'Pedido pendiente',
     ticket: 'Pedido',
@@ -94,5 +102,6 @@ export default {
     addressEdit: 'Editar dirección',
     dataSaved: 'Datos guardados',
     save: 'Guardar',
-    cancel: 'Cancelar'
+    cancel: 'Cancelar',
+    of: 'de'
 };

src/i18n/fr-FR/index.js

@@ -0,0 +1,53 @@
+export default {
+    date: {
+        days: [
+            'Dimanche',
+            'Lundi',
+            'Mardi',
+            'Mercredi',
+            'Jeudi',
+            'Vendredi',
+            'Samedi'
+        ],
+        daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+        months: [
+            'Janvier',
+            'Février',
+            'Mars',
+            'Avril',
+            'Mai',
+            'Juin',
+            'Juillet',
+            'Août',
+            'Septembre',
+            'Octobre',
+            'Novembre',
+            'Décembre'
+        ],
+        shortMonths: [
+            'Jan',
+            'Fév',
+            'Mar',
+            'Avr',
+            'Mai',
+            'Juin',
+            'Juil',
+            'Aoû',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Déc'
+        ]
+    },
+    of: 'de',
+    // Menu
+    home: 'Accueil',
+    catalog: 'Catalogue',
+    pendingOrders: 'Commandes en attente',
+    confirmedOrders: 'Commandes confirmées',
+    invoices: 'Factures',
+    agencyPackages: 'Liste par agence',
+    accountConfig: 'Configuration',
+    addressesList: 'Adresses',
+    addressDetails: 'Configuration'
+};

src/i18n/index.js

@@ -1,7 +1,13 @@
-import enUS from './en-US'
+import enUS from './en-US';
-import esES from './es-ES'
+import esES from './es-ES';
+import frFR from './fr-FR';
+import ptPT from './pt-PT';
+import caES from './ca-ES';
 
 export default {
     'en-US': enUS,
-    'es-ES': esES
+    'es-ES': esES,
-}
+    'fr-FR': frFR,
+    'pt-PT': ptPT,
+    'ca-ES': caES
+};

src/i18n/pt-PT/index.js

@@ -0,0 +1,54 @@
+export default {
+    date: {
+        days: [
+            'Domingo',
+            'Segunda-feira',
+            'Terça-feira',
+            'Quarta-feira',
+            'Quinta-feira',
+            'Sexta-feira',
+            'Sábado'
+        ],
+        daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
+        months: [
+            'Janeiro',
+            'Fevereiro',
+            'Março',
+            'Abril',
+            'Maio',
+            'Junho',
+            'Julho',
+            'Agosto',
+            'Setembro',
+            'Outubro',
+            'Novembro',
+            'Dezembro'
+        ],
+        shortMonths: [
+            'Jan',
+            'Fev',
+            'Mar',
+            'Abr',
+            'Mai',
+            'Jun',
+            'Jul',
+            'Ago',
+            'Set',
+            'Out',
+            'Nov',
+            'Dez'
+        ]
+    },
+    of: 'de',
+
+    // Menu
+    home: 'Principio',
+    catalog: 'Catálogo',
+    pendingOrders: 'Pedidos pendentes',
+    confirmedOrders: 'Pedidos confirmados',
+    invoices: 'Facturas',
+    agencyPackages: 'Bultos por agencia',
+    accountConfig: 'Configuração',
+    addressesList: 'Moradas',
+    addressDetails: 'Configuração'
+};

src/pages/Account/AccountConfig.vue

@@ -50,7 +50,7 @@ onMounted(() => fetchLanguagesSql());
                     icon="location_on"
                     rounded
                     no-caps
-                    :to="{ name: 'AddressesList' }"
+                    :to="{ name: 'addressesList' }"
                 />
                 <QBtn
                     :label="t('changePassword')"

src/pages/Account/AddressDetails.vue

@@ -32,7 +32,7 @@ watch(
     async val => await getProvinces(val)
 );
 
-const goBack = () => router.push({ name: 'AddressesList' });
+const goBack = () => router.push({ name: 'addressesList' });
 
 const getCountries = async () => {
     countriesOptions.value = await jApi.query(

src/pages/Account/AddressList.vue

@@ -19,7 +19,7 @@ const defaultAddress = ref(null);
 const clientId = ref(null);
 
 const goToAddressDetails = (id = 0) =>
-    router.push({ name: 'AddressDetails', params: { id } });
+    router.push({ name: 'addressDetails', params: { id } });
 
 const getDefaultAddress = async () => {
     try {
@@ -95,12 +95,8 @@ onMounted(async () => {
             no-caps
         />
     </Teleport>
-    <QPage class="column items-center">
+    <QPage class="vn-w-sm">
-        <QList
+        <QList class="rounded-borders shadow-1 shadow-transition" separator>
-            class="full-width rounded-borders shadow-1 shadow-transition"
-            style="max-width: 544px"
-            separator
-        >
             <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
@@ -116,16 +112,14 @@ onMounted(async () => {
                     />
                 </template>
                 <template #content>
-                    <div>
+                    <span class="text-bold q-mb-sm">
-                        <QItemLabel class="text-bold q-mb-sm">
+                        {{ address.nickname }}
-                            {{ address.nickname }}
+                    </span>
-                        </QItemLabel>
+                    <span>{{ address.street }}</span>
-                        <QItemLabel>{{ address.street }}</QItemLabel>
+                    <span>
-                        <QItemLabel>
+                        {{ address.postalCode }},
-                            {{ address.postalCode }},
+                        {{ address.city }}
-                            {{ address.city }}
+                    </span>
-                        </QItemLabel>
-                    </div>
                 </template>
                 <template #actions>
                     <QBtn

src/pages/Ecomerce/PendingOrders.vue

@@ -1,7 +1,133 @@
-<script setup></script>
+<script setup>
+import { ref, inject, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date } from 'quasar';
 
-<template></template>
+import CardList from 'src/components/ui/CardList.vue';
+import { toCurrency } from 'src/filters/index';
+import { useVnConfirm } from 'src/composables/useVnConfirm.js';
+import useNotify from 'src/composables/useNotify.js';
+
+const jApi = inject('jApi');
+const { t, locale } = useI18n();
+const globalI18n = useI18n({ useScope: 'global' });
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+
+const orders = ref([]);
+
+const getOrders = async () => {
+    try {
+        orders.value = await jApi.query(
+            `SELECT o.id, o.sent, o.deliveryMethodFk, o.taxableBase,
+        a.nickname, am.description agency
+        FROM myOrder o
+        JOIN myAddress a ON a.id = o.addressFk
+        JOIN vn.agencyMode am ON am.id = o.agencyModeFk
+        WHERE NOT o.isConfirmed
+        ORDER BY o.sent DESC`
+        );
+    } catch (error) {
+        console.error('Error getting orders:', error);
+    }
+};
+
+const formatDateTitle = timeStamp => {
+    const formattedString = date.formatDate(
+        timeStamp,
+        `dddd, D [${t('of')}] MMMM [${t('of')}] YYYY`,
+        {
+            days: globalI18n.messages.value[locale.value].date.days,
+            months: globalI18n.messages.value[locale.value].date.months
+        }
+    );
+    return formattedString;
+};
+
+const removeOrder = async (id, index) => {
+    try {
+        await jApi.execQuery(
+            `START TRANSACTION;
+            DELETE FROM hedera.myOrder WHERE ((id = #id));
+            COMMIT`,
+            {
+                id
+            }
+        );
+        orders.value.splice(index, 1);
+        notify(t('dataSaved'), 'positive');
+    } catch (error) {
+        console.error('Error removing order:', error);
+    }
+};
+
+onMounted(async () => {
+    getOrders();
+});
+</script>
+
+<template>
+    <Teleport :to="$actions">
+        <QBtn
+            to="/ecomerce/basket"
+            icon="shopping_cart"
+            :label="$t('shoppingCart')"
+            rounded
+            no-caps
+        />
+    </Teleport>
+    <QPage class="vn-w-sm">
+        <CardList v-for="(order, index) in orders" :key="index">
+            <template #content>
+                <span class="text-bold q-mb-sm">{{
+                    formatDateTitle(order.sent)
+                }}</span>
+                <span> #{{ order.id }} </span>
+                <span>{{ order.nickname }}</span>
+                <span>{{ order.agency }}</span>
+                <span>{{ toCurrency(order.taxableBase) }}</span>
+            </template>
+            <template #actions>
+                <QBtn
+                    icon="delete"
+                    flat
+                    rounded
+                    @click.stop="
+                        openConfirmationModal(
+                            null,
+                            t('areYouSureDeleteOrder'),
+                            () => removeOrder(order.id, index)
+                        )
+                    "
+                />
+                <QBtn
+                    icon="shopping_bag"
+                    flat
+                    rounded
+                    :to="{ name: 'basket', params: { id: order.id } }"
+                    @click.stop="goToAddressDetails(address.id)"
+                />
+            </template>
+        </CardList>
+    </QPage>
+</template>
 
 <style lang="scss" scoped></style>
 
-<i18n lang="yaml"></i18n>
+<i18n lang="yaml">
+en-US:
+    newOrder: New order
+    areYouSureDeleteOrder: Are you sure you want to delete the order?
+es-ES:
+    newOrder: Nuevo pedido
+    areYouSureDeleteOrder: ¿Seguro que quieres borrar el pedido?
+ca-ES:
+    newOrder: Nova comanda
+    areYouSureDeleteOrder: Segur que vols esborrar la comanda?
+fr-FR:
+    newOrder: Nouvelle commande
+    areYouSureDeleteOrder: Êtes-vous sûr de vouloir supprimer la commande?
+pt-PT:
+    newOrder: Novo pedido
+    areYouSureDeleteOrder: Tem certeza de que deseja excluir o pedido?
+</i18n>

src/router/index.js

@@ -1,12 +1,13 @@
-import { route } from 'quasar/wrappers'
+import { route } from 'quasar/wrappers';
-import { appStore } from 'stores/app'
+import { appStore } from 'stores/app';
 import {
     createRouter,
     createMemoryHistory,
     createWebHistory,
     createWebHashHistory
-} from 'vue-router'
+} from 'vue-router';
-import routes from './routes'
+import routes from './routes';
+import { i18n } from 'src/boot/i18n';
 
 /*
  * If not building with SSR mode, you can
@@ -22,7 +23,7 @@ export default route(function (/* { store, ssrContext } */) {
         ? createMemoryHistory
         : process.env.VUE_ROUTER_MODE === 'history'
             ? createWebHistory
-            : createWebHashHistory
+            : createWebHashHistory;
 
     const Router = createRouter({
         scrollBehavior: () => ({ left: 0, top: 0 }),
@@ -34,18 +35,18 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(
             process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
         )
-    })
+    });
 
     Router.afterEach((to, from) => {
-        if (from.name === to.name) return
+        if (from.name === to.name) return;
-        const app = appStore()
+        const app = appStore();
         app.$patch({
-            title: window.i18n.t(to.name || 'home'),
+            title: i18n.global.t(to.name || 'home'),
             subtitle: null,
             useRightDrawer: false,
             rightDrawerOpen: true
-        })
+        });
-    })
+    });
 
-    return Router
+    return Router;
-})
+});

src/router/routes.js

@@ -4,7 +4,7 @@ const routes = [
         component: () => import('layouts/LoginLayout.vue'),
         children: [
             {
-                name: 'Login',
+                name: 'login',
                 path: '/login/:email?',
                 component: () => import('pages/Login/LoginView.vue')
             },
@@ -35,7 +35,7 @@ const routes = [
                 component: () => import('src/pages/Cms/HomeView.vue')
             },
             {
-                name: 'orders',
+                name: 'confirmedOrders',
                 path: '/ecomerce/orders',
                 component: () => import('pages/Ecomerce/Orders.vue')
             },
@@ -50,7 +50,7 @@ const routes = [
                 component: () => import('pages/Ecomerce/Invoices.vue')
             },
             {
-                name: 'PendingOrders',
+                name: 'pendingOrders',
                 path: '/ecomerce/pending',
                 component: () => import('pages/Ecomerce/PendingOrders.vue')
             },
@@ -60,22 +60,22 @@ const routes = [
                 component: () => import('pages/Ecomerce/Catalog.vue')
             },
             {
-                name: 'packages',
+                name: 'agencyPackages',
                 path: '/agencies/packages',
                 component: () => import('src/pages/Agencies/PackagesView.vue')
             },
             {
-                name: 'Account',
+                name: 'accountConfig',
                 path: '/account/conf',
                 component: () => import('pages/Account/AccountConfig.vue')
             },
             {
-                name: 'AddressesList',
+                name: 'addressesList',
                 path: '/account/address-list',
                 component: () => import('pages/Account/AddressList.vue')
             },
             {
-                name: 'AddressDetails',
+                name: 'addressDetails',
                 path: '/account/address/:id?',
                 component: () => import('pages/Account/AddressDetails.vue')
             }