src/components/ui/CardList.vue

@@ -44,6 +44,7 @@ const handleClick = () => {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    width: 100%;
 
     * {
         white-space: nowrap;

src/i18n/ca-ES/index.js

@@ -40,25 +40,35 @@ export default {
         ]
     },
     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ó',
-    checkout: 'Configurar encàrrec',
-    controlPanel: 'Panell de control',
-    adminConnections: 'Connexions',
-    adminItems: 'Articles',
-    adminVisits: 'Visites',
-    adminUsers: "Gestió d'usuaris",
-    adminPhotos: 'Imatges',
-    adminNews: 'Gestió de noticies',
-    adminNewsDetails: 'Afegir o editar notícia',
+
+    // Sections titles
+    Home: 'Inici',
+    Orders: 'Comandes',
+    Ticket: `Detall de l'encarrec`,
+    'Pending orders': 'Comandes pendents',
+    'Last orders': 'Comandes confirmades',
+    Invoices: 'Factures',
+    Basket: 'Cistella',
+    Catalog: 'Catàleg',
+    Administration: 'Administració',
+    'Control panel': 'Panell de control',
+    Users: 'Usuaris',
+    Connections: 'Connexions',
+    Visits: 'Visites',
+    News: 'Notícies',
+    Photos: 'Imatges',
+    Images: 'Imatges',
+    Items: 'Articles',
+    Agencies: 'Agències',
+    Reports: 'Informes',
+    Configuration: 'Configuració',
+    Shelves: 'Prestatgeries',
+    Account: 'Compte',
+    Addresses: 'Adreces',
+    Confirm: 'Confirmar',
+    Checkout: `Configurar l'encarrec`,
+    'Address details': 'Configuració',
+    'Admin news details': `Afegir o editar notícia`,
     //
     orderLoadedIntoBasket: 'Comanda carregada a la cistella!',
     loadAnOrder:
@@ -69,5 +79,8 @@ export default {
     remove: 'Esborrar',
     agency: 'Agència',
     noData: 'Sense dades',
-    confirm: 'Confirmar'
+    confirm: 'Confirmar',
+    delete: 'Esborrar',
+    confirmDelete: 'Estàs segur que vols esborrar la línia?',
+    emptyList: 'Llista buida'
 };

src/i18n/en-US/index.js

@@ -53,25 +53,34 @@ 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',
-    checkout: 'Configure order',
-    controlPanel: 'Control panel',
-    adminConnections: 'Connections',
-    adminItems: 'Items',
-    adminVisits: 'Visits',
-    adminUsers: 'User management',
-    adminPhotos: 'Images',
-    adminNews: 'News management',
-    adminNewsDetails: 'Add or edit new',
+    // Sections titles
+    Home: 'Home',
+    Orders: 'Orders',
+    Ticket: 'Detalle del pedido',
+    'Pending orders': 'Pending orders',
+    'Last orders': 'Confirmed orders',
+    Invoices: 'Invoices',
+    Basket: 'Basket',
+    Catalog: 'Catalog',
+    Administration: 'Administration',
+    'Control panel': 'Control panel',
+    Users: 'Users',
+    Connections: 'Connections',
+    Visits: 'Visits',
+    News: 'News',
+    Photos: 'Images',
+    Images: 'Images',
+    Items: 'Items',
+    Agencies: 'Agencies',
+    Reports: 'Reports',
+    Configuration: 'Configuration',
+    Shelves: 'Shelves',
+    Account: 'Account',
+    Addresses: 'Addresses',
+    Confirm: 'Confirm',
+    Checkout: 'Configure order',
+    'Address details': 'Configuration',
+    'Admin news details': 'Add or edit new',
     //
     orderLoadedIntoBasket: 'Order loaded into basket!',
     loadAnOrder: 'Please load a pending order to the cart or start a new one',
@@ -82,6 +91,9 @@ export default {
     agency: 'Agency',
     noData: 'No data',
     confirm: 'Confirm',
+    delete: 'Delete',
+    confirmDelete: 'Are you sure you want to delete the line?',
+    emptyList: 'Empty list',
 
     orders: 'Orders',
     order: 'Pending order',

src/i18n/es-ES/index.js

@@ -59,25 +59,34 @@ 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',
-    checkout: 'Configurar pedido',
-    controlPanel: 'Panel de control',
-    adminConnections: 'Conexiones',
-    adminItems: 'Artículos',
-    adminVisits: 'Visitas',
-    adminUsers: 'Gestión de usuarios',
-    adminPhotos: 'Imágenes',
-    adminNews: 'Gestión de noticias',
-    adminNewsDetails: 'Añadir o editar noticia',
+    // Sections titles
+    Home: 'Inicio',
+    Orders: 'Pedidos',
+    Ticket: 'Pedido',
+    'Pending orders': 'Pedidos pendientes',
+    'Last orders': 'Pedidos confirmados',
+    Invoices: 'Facturas',
+    Basket: 'Cesta',
+    Catalog: 'Catálogo',
+    Administration: 'Administración',
+    'Control panel': 'Panel de control',
+    Users: 'Usuarios',
+    Connections: 'Conexiones',
+    Visits: 'Visitas',
+    News: 'Noticias',
+    Photos: 'Imágenes',
+    Images: 'Imágenes',
+    Items: 'Artículos',
+    Agencies: 'Agencias',
+    Reports: 'Informes',
+    Configuration: 'Configuración',
+    Shelves: 'Estanterías',
+    Account: 'Cuenta',
+    Addresses: 'Direcciones',
+    Confirm: 'Confirmar',
+    Checkout: 'Configurar pedido',
+    'Address details': 'Configuración',
+    'Admin news details': 'Añadir o editar noticia',
     //
     orderLoadedIntoBasket: '¡Pedido cargado en la cesta!',
     loadAnOrder:
@@ -89,6 +98,9 @@ export default {
     agency: 'Agencia',
     noData: 'Sin datos',
     confirm: 'Confirmar',
+    delete: 'Borrar',
+    confirmDelete: '¿Estás seguro de que quieres borrar la línea?',
+    emptyList: 'Lista vacía',
 
     orders: 'Pedidos',
     order: 'Pedido pendiente',

src/i18n/fr-FR/index.js

@@ -40,25 +40,35 @@ export default {
         ]
     },
     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',
-    checkout: "Définissez l'ordre",
-    controlPanel: 'Panneau de configuration',
-    adminConnections: 'Connexions',
-    adminItems: 'Articles',
-    adminVisits: 'Visites',
-    adminUsers: 'Gestion des utilisateurs',
-    adminPhotos: 'Images',
-    adminNews: 'Gestion des nouvelles',
-    adminNewsDetails: 'Ajouter ou editer nouvelles',
+
+    // Sections titles
+    Home: 'Accueil',
+    Orders: 'Commandes',
+    Ticket: 'Détail de la commande',
+    'Pending orders': 'Commandes en attente',
+    'Last orders': 'Commandes confirmées',
+    Invoices: 'Factures',
+    Basket: 'Panier',
+    Catalog: 'Catalogue',
+    Administration: 'Administration',
+    'Control panel': 'Panneau de configuration',
+    Users: 'Utilisateurs',
+    Connections: 'Connexions',
+    Visits: 'Visites',
+    News: 'Nouvelles',
+    Photos: 'Images',
+    Images: 'Images',
+    Items: 'Articles',
+    Agencies: 'Agences',
+    Reports: 'Rapports',
+    Configuration: 'Configuration',
+    Shelves: 'Étagères',
+    Account: 'Compte',
+    Addresses: 'Adresses',
+    Confirm: 'Confirmer',
+    Checkout: 'Configurer la commande',
+    'Address details': 'Configuration',
+    'Admin news details': 'Ajouter ou éditer une nouvelle',
     //
     orderLoadedIntoBasket: 'Commande chargée dans le panier!',
     loadAnOrder:
@@ -69,5 +79,7 @@ export default {
     remove: 'Effacer',
     agency: 'Agence',
     noData: 'Aucune donnée',
-    confirm: 'Confirmer'
+    confirm: 'Confirmer',
+    delete: 'Effacer',
+    confirmDelete: 'Voulez-vous vraiment supprimer la ligne?'
 };

src/i18n/pt-PT/index.js

@@ -40,26 +40,34 @@ export default {
         ]
     },
     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',
-    checkout: 'Configurar encomenda',
-    controlPanel: 'Painel de controle',
-    adminConnections: 'Conexões',
-    adminItems: 'Artigos',
-    adminVisits: 'Visitas',
-    adminUsers: 'Gestão de usuários',
-    adminPhotos: 'Imagens',
-    adminNews: 'Gestão de notícias',
-    adminNewsDetails: 'Ajouter ou editer nouvelles',
+    // Sections titles
+    Home: 'Início',
+    Orders: 'Pedidos',
+    Ticket: 'Detalhe do pedido',
+    'Pending orders': 'Pedidos pendentes',
+    'Last orders': 'Pedidos confirmados',
+    Invoices: 'Faturas',
+    Basket: 'Carrinho',
+    Catalog: 'Catálogo',
+    Administration: 'Administração',
+    'Control panel': 'Painel de controle',
+    Users: 'Usuários',
+    Connections: 'Conexões',
+    Visits: 'Visitas',
+    News: 'Notícias',
+    Photos: 'Imagens',
+    Images: 'Imagens',
+    Items: 'Artigos',
+    Agencies: 'Agências',
+    Reports: 'Informes',
+    Configuration: 'Configuração',
+    Shelves: 'Estantes',
+    Account: 'Conta',
+    Addresses: 'Moradas',
+    Confirm: 'Confirme',
+    Checkout: 'Configurar encomenda',
+    'Address details': 'Configuração',
+    'Admin news details': 'Adicionar ou editar notícia',
     //
     orderLoadedIntoBasket: 'Pedido carregado na cesta!',
     loadAnOrder: 'Carregue um pedido pendente no carrinho ou inicie um novo',
@@ -69,5 +77,7 @@ export default {
     remove: 'Eliminar',
     agency: 'Agência',
     noData: 'Sem dados',
-    confirm: 'Confirme'
+    confirm: 'Confirme',
+    delete: 'Eliminar',
+    confirmDelete: 'Tens certeza que queres eliminar esta linha?'
 };

src/layouts/MainLayout.vue

@@ -95,12 +95,12 @@ const logoutSupplantedUser = async () => {
             <QList v-for="item in menuEssentialLinks" :key="item.id">
                 <QItem v-if="!item.childs" :to="`/${item.path}`">
                     <QItemSection>
-                        <QItemLabel>{{ item.description }}</QItemLabel>
+                        <QItemLabel>{{ $t(item.description) }}</QItemLabel>
                     </QItemSection>
                 </QItem>
                 <QExpansionItem
                     v-if="item.childs"
-                    :label="item.description"
+                    :label="$t(item.description)"
                     expand-separator
                 >
                     <QList>
@@ -112,7 +112,7 @@ const logoutSupplantedUser = async () => {
                         >
                             <QItemSection>
                                 <QItemLabel>
-                                    {{ subitem.description }}
+                                    {{ $t(subitem.description) }}
                                 </QItemLabel>
                             </QItemSection>
                         </QItem>

src/lib/filters.js

@@ -1,7 +1,7 @@
 import { i18n } from 'src/boot/i18n';
 import { date as qdate, format } from 'quasar';
-const { pad } = format;
 import { useAppStore } from 'stores/app';
+const { pad } = format;
 
 export function currency(val) {
     return typeof val === 'number' ? val.toFixed(2) + '€' : val;
@@ -18,7 +18,6 @@ export function date(val, format = 'YYYY-MM-DD') {
 export const formatDate = (timeStamp, format = 'YYYY-MM-DD') => {
     if (!timeStamp) return '';
     const appStore = useAppStore();
-
     return qdate.formatDate(timeStamp, format, appStore.localeDates);
 };
 

src/pages/Ecomerce/BasketView.vue

@@ -1,14 +1,153 @@
 <script setup>
-import { onBeforeMount } from 'vue';
+import { onBeforeMount, ref, inject, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useAppStore } from 'stores/app';
+import TicketDetails from 'src/pages/Ecomerce/TicketDetails.vue';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
 
+const jApi = inject('jApi');
+const { t } = useI18n();
 const appStore = useAppStore();
+const route = useRoute();
+const { basketOrderId, isHeaderMounted } = storeToRefs(appStore);
+
+const rows = ref([]);
+const ticket = ref({});
+const orderId = ref(null);
 
 onBeforeMount(() => {
     appStore.check();
 });
+
+onMounted(async () => {
+    orderId.value = route.params.id || basketOrderId.value;
+    if (orderId.value) await fetchData();
+});
+const getOrder = async () => {
+    try {
+        const [data] = await jApi.query(
+            `SELECT o.id, o.sent,
+            ag.description agency, v.code method,
+            ad.nickname, ad.postalCode, ad.city, ad.street
+            FROM myOrder o
+            JOIN vn.agencyMode ag ON ag.id = o.agencyModeFk
+            LEFT JOIN myAddress ad ON ad.id = o.addressFk
+            JOIN vn.deliveryMethod v ON v.id = o.deliveryMethodFk
+            WHERE o.id = #id;`,
+            { id: orderId.value }
+        );
+        const { sent, method, agency, id, nickname, street, postalCode, city } =
+            data;
+        const taxBase = rows.value.reduce(
+            (acc, row) => acc + row.price * row.quantity,
+            0
+        );
+        const formattedData = {
+            id,
+            landed: new Date(sent),
+            agency,
+            method,
+            nickname,
+            street,
+            postalCode,
+            city,
+            taxBase
+        };
+        ticket.value = formattedData;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getItems = async () => {
+    try {
+        const data = await jApi.query(
+            `SELECT bi.id, bi.amount, bi.price, i.longName item,
+            i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7,
+            i.image, im.updated
+						FROM myOrderRow bi
+            JOIN vn.item i ON i.id = bi.itemFk
+            LEFT JOIN image im
+            ON im.collectionFk = 'catalog'
+            AND im.name = i.image
+						WHERE orderFk = #id`,
+            { id: orderId.value }
+        );
+
+        const formattedData = data.map(i => {
+            const { amount: quantity, ...item } = i;
+
+            const formattedItem = {
+                quantity,
+                ...item
+            };
+            return formattedItem;
+        });
+
+        rows.value = formattedData;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const fetchData = async () => {
+    await getItems();
+    await getOrder();
+};
 </script>
+
 <template>
-    <div>basket view</div>
+    <Teleport v-if="isHeaderMounted" to="#actions">
+        <QBtn
+            icon="settings"
+            :label="t('configureOrder')"
+            :to="{ name: 'checkout', params: { id: orderId } }"
+            rounded
+            no-caps
+        />
+        <QBtn
+            icon="shopping_bag"
+            :label="t('catalog')"
+            :to="{ name: 'catalog' }"
+            rounded
+            no-caps
+        />
+        <QBtn
+            icon="shopping_cart_checkout"
+            :label="t('checkout')"
+            :to="{ name: 'confirm', params: { id: orderId } }"
+            rounded
+            no-caps
+        />
+    </Teleport>
+    <QPage>
+        <TicketDetails
+            :rows="rows"
+            :ticket="ticket"
+            is-basket
+            :show-tax="false"
+            can-delete-items
+            @on-row-deleted="fetchData"
+        />
+    </QPage>
 </template>
+
+<i18n lang="yaml">
+en-US:
+    configureOrder: Configure order
+    checkout: Checkout
+es-ES:
+    configureOrder: Configurar pedido
+    checkout: Finalizar pedido
+ca-ES:
+    configureOrder: Configurar encàrrec
+    checkout: Finalitzar comanda
+fr-FR:
+    configureOrder: Définissez l'ordre
+    checkout: Finir la commande
+pt-PT:
+    configureOrder: Configurar encomenda
+    checkout: Finalizar encomenda
+</i18n>

src/pages/Ecomerce/CheckoutView.vue

@@ -278,6 +278,8 @@ onMounted(async () => {
     today.value.setHours(0, 0, 0, 0);
 
     if (route.params.id) {
+        notify(t('rememberReconfiguringImpact'), 'warning');
+
         const [order] = await jApi.query(
             `SELECT m.code deliveryMethod, o.sent, o.agencyModeFk, o.addressFk
             FROM myOrder o
@@ -485,6 +487,7 @@ en-US:
     pickup: Pickup
     addressStepQuestion: Where do you want to receive the order?
     addressStepQuestionPickup: To which address do you want to associate the order? (Optional)
+    rememberReconfiguringImpact: Remember that if you reconfigure your order prices or quantities of your items may change
 es-ES:
     receiveOrPickOrder: ¿Quieres recibir o recoger el pedido?
     receiveOrder: Recibir en mi tienda
@@ -506,6 +509,7 @@ es-ES:
     pickup: Recogida
     addressStepQuestion: ¿Dónde quieres recibir el pedido?
     addressStepQuestionPickup: ¿A qué dirección quieres asociar el pedido? (Opcional)
+    rememberReconfiguringImpact: Recuerda que si vuelves a configurar el pedido los precios o cantidades de tus artículos podrían cambiar
 ca-ES:
     receiveOrPickOrder: Vols rebre o recollir la comanda?
     receiveOrder: Rebre en mi tenda
@@ -527,6 +531,7 @@ ca-ES:
     pickup: Recollida
     addressStepQuestion: On vols rebre la comanda?
     addressStepQuestionPickup: A què direcció vols associar la comanda? (Opcional)
+    rememberReconfiguringImpact: Recorda que si tornes a configurar la comanda els preus o quantitats dels teus articles podrien canviar
 fr-FR:
     receiveOrPickOrder: Voulez-vous recevoir ou récuperer l'ordre?
     receiveOrder: Livraison à la boutique
@@ -548,6 +553,7 @@ fr-FR:
     pickup: Retrait
     addressStepQuestion: Adresse livraison?
     addressStepQuestionPickup: À quelle adresse voulez-vous associer la commande? (Optionnel)
+    rememberReconfiguringImpact: Rappelez-vous que si jamais vous commandez des prix fixés ou les quantités de vos articles pourraient changer
 pt-PT:
     receiveOrPickOrder: Queres receber ou levantar a encomenda?
     receiveOrder: Receber na minha loja
@@ -569,4 +575,5 @@ pt-PT:
     pickup: Recolhida
     addressStepQuestion: Onde queres receber a encomenda?
     addressStepQuestionPickup: Para qual endereço deseja associar o pedido? (Opcional)
+    rememberReconfiguringImpact: Lembre-se que si voltas a configurar a encomenda os preços ou quantidades de ítens poderíam variar
 </i18n>

src/pages/Ecomerce/ConfirmView.vue

@@ -0,0 +1 @@
+<template>Confirm view</template>

src/pages/Ecomerce/InvoicesView.vue

@@ -63,7 +63,6 @@ const fetchInvoices = async () => {
           LIMIT 100`,
         params
     );
-    console.log(invoices.value);
 };
 
 onMounted(async () => {

src/pages/Ecomerce/TicketDetails.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { currency, formatDateTitle } from 'src/lib/filters.js';
+
 import VnImg from 'src/components/ui/VnImg.vue';
 
+import { currency, formatDateTitle } from 'src/lib/filters.js';
+import { useVnConfirm } from 'src/composables/useVnConfirm.js';
+
 defineProps({
     ticket: {
         type: Object,
@@ -11,10 +15,21 @@ defineProps({
     rows: {
         type: Array,
         default: () => []
+    },
+    showTax: {
+        type: Boolean,
+        default: true
+    },
+    canDeleteItems: {
+        type: Boolean,
+        default: false
     }
 });
 
+const emit = defineEmits(['onRowDeleted']);
+const jApi = inject('jApi');
 const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
 
 const lineDiscountSubtotal = line => {
     return line.quantity * line.price;
@@ -22,31 +37,42 @@ const lineDiscountSubtotal = line => {
 
 const lineSubtotal = line =>
     lineDiscountSubtotal(line) * ((100 - line.discount) / 100);
+
+const deleteRow = id => {
+    try {
+        jApi.execQuery(
+            `START TRANSACTION;
+            DELETE FROM hedera.myOrderRow WHERE ((id = #id));
+            COMMIT`,
+            {
+                id
+            }
+        );
+        emit('onRowDeleted');
+    } catch (error) {
+        console.error('Error deleting order item:', error);
+    }
+};
 </script>
 
 <template>
-    <QCard
-        class="vn-w-sm"
-        style="padding: 32px"
-    >
+    <QCard class="vn-w-sm" style="padding: 32px">
         <QCardSection class="no-padding q-mb-md">
-            <div class="text-h6">
-                #{{ ticket.id }}
-            </div>
+            <div class="text-h6">#{{ ticket.id }}</div>
         </QCardSection>
         <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
                 {{ t('shippingInformation') }}
             </div>
-            <div>
+            <div v-if="ticket.shipped">
                 {{ t('preparation') }}
                 {{ formatDateTitle(ticket.shipped) }}
             </div>
-            <div>
+            <div v-if="ticket.landed">
                 {{ t('delivery') }}
                 {{ formatDateTitle(ticket.landed) }}
             </div>
-            <div>
+            <div v-if="ticket.method && ticket.agency">
                 {{ t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
                 {{ ticket.agency }}
             </div>
@@ -58,9 +84,10 @@ const lineSubtotal = line =>
             <div>{{ ticket.nickname }}</div>
             <div>{{ ticket.street }}</div>
             <div>
-                {{ ticket.postalCode }} {{ ticket.city }} ({{
-                    ticket.province
-                }})
+                <span v-if="ticket.postalCode || ticket.city">
+                    {{ ticket.postalCode }}, {{ ticket.city }}
+                </span>
+                <span v-if="ticket.province"> ({{ ticket.province }})</span>
             </div>
         </QCardSection>
         <QCardSection
@@ -69,16 +96,41 @@ const lineSubtotal = line =>
             <span class="text-right">
                 {{ t('total') }} {{ currency(ticket.taxBase) }}
             </span>
-            <span class="text-right">
+            <span v-if="showTax" class="text-right">
                 {{ t('totalTax') }} {{ currency(ticket.total) }}
             </span>
         </QCardSection>
         <QSeparator inset />
-        <QList
-            v-for="row in rows"
-            :key="row.itemFk"
+        <div
+            v-if="!rows.length"
+            class="row items-center justify-center q-pa-md"
+            style="margin-top: 32px"
         >
-            <QItem>
+            <QIcon class="q-mr-md" name="block" size="sm" />
+            <span>{{ t('emptyList') }}</span>
+        </div>
+        <QList v-else v-for="(row, index) in rows" :key="index">
+            <QItem v-if="row">
+                <QItemSection v-if="canDeleteItems" avatar>
+                    <QBtn
+                        icon="delete"
+                        rounded
+                        no-caps
+                        dense
+                        flat
+                        @click.stop="
+                            openConfirmationModal(
+                                null,
+                                t('confirmDelete'),
+                                () => deleteRow(row.id)
+                            )
+                        "
+                    >
+                        <QTooltip>
+                            {{ t('delete') }}
+                        </QTooltip>
+                    </QBtn>
+                </QItemSection>
                 <QItemSection avatar>
                     <VnImg
                         storage="catalog"
@@ -88,32 +140,28 @@ const lineSubtotal = line =>
                     />
                 </QItemSection>
                 <QItemSection>
-                    <QItemLabel lines="1">
+                    <QItemLabel v-if="row.concept" lines="1">
                         {{ row.concept }}
                     </QItemLabel>
-                    <QItemLabel
-                        lines="1"
-                        caption
-                    >
+                    <QItemLabel v-if="row.item" lines="1">
+                        {{ row.item }}
+                    </QItemLabel>
+                    <QItemLabel lines="1" caption>
                         {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
                     </QItemLabel>
                     <QItemLabel lines="1">
-                        {{ row.quantity }} x {{ currency(row.price) }}
+                        {{ row.quantity }} x
+                        {{ currency(row.price) }}
                     </QItemLabel>
                 </QItemSection>
-                <QItemSection
-                    side
-                    class="total"
-                >
+                <QItemSection side class="total">
                     <QItemLabel>
-                        <span
-                            class="discount"
-                            v-if="row.discount"
-                        >
-                            {{ currency(lineDiscountSubtotal(row)) }} -
+                        <span> {{ currency(lineDiscountSubtotal(row)) }}</span>
+                        <span class="discount" v-if="row.discount">
+                            -
                             {{ currency(row.discount) }} =
-                        </span>
                             {{ currency(lineSubtotal(row)) }}
+                        </span>
                     </QItemLabel>
                 </QItemSection>
             </QItem>

src/router/index.js

@@ -41,7 +41,7 @@ export default route(function (/* { store, ssrContext } */) {
         if (from.name === to.name) return;
         const app = useAppStore();
         app.$patch({
-            title: i18n.global.t(to.name || 'home'),
+            title: i18n.global.t(to.meta.title || 'home'),
             subtitle: null,
             useRightDrawer: false,
             rightDrawerOpen: true

src/router/routes.js

@@ -32,101 +32,169 @@ const routes = [
             {
                 name: 'home',
                 path: '/cms/home',
+                meta: {
+                    title: 'Home'
+                },
                 component: () => import('src/pages/Cms/HomeView.vue')
             },
             {
                 name: 'confirmedOrders',
                 path: '/ecomerce/orders',
+                meta: {
+                    title: 'Last orders'
+                },
                 component: () => import('pages/Ecomerce/OrdersView.vue')
             },
             {
                 name: 'ticket',
                 path: '/ecomerce/ticket/:id',
+                meta: {
+                    title: 'Ticket'
+                },
                 component: () => import('pages/Ecomerce/TicketView.vue')
             },
             {
                 name: 'invoices',
                 path: '/ecomerce/invoices',
+                meta: {
+                    title: 'Invoices'
+                },
                 component: () => import('pages/Ecomerce/InvoicesView.vue')
             },
             {
                 name: 'pendingOrders',
                 path: '/ecomerce/pending',
+                meta: {
+                    title: 'Pending orders'
+                },
                 component: () => import('pages/Ecomerce/PendingOrders.vue')
             },
             {
                 name: 'catalog',
                 path: '/ecomerce/catalog/:category?/:type?',
+                meta: {
+                    title: 'Catalog'
+                },
                 component: () => import('pages/Ecomerce/Catalog.vue')
             },
             {
                 name: 'basket',
                 path: '/ecomerce/basket/:id?',
+                meta: {
+                    title: 'Basket'
+                },
                 component: () => import('pages/Ecomerce/BasketView.vue')
             },
+            {
+                name: 'confirm',
+                path: '/ecomerce/confirm/:id?',
+                meta: {
+                    title: 'Confirm'
+                },
+                component: () => import('pages/Ecomerce/ConfirmView.vue')
+            },
             {
                 name: 'checkout',
                 path: '/ecomerce/checkout/:id?',
+                meta: {
+                    title: 'Checkout'
+                },
                 component: () => import('pages/Ecomerce/CheckoutView.vue')
             },
             {
                 name: 'agencyPackages',
                 path: '/agencies/packages',
+                meta: {
+                    title: 'Agencies'
+                },
                 component: () => import('src/pages/Agencies/PackagesView.vue')
             },
             {
                 name: 'accountConfig',
                 path: '/account/conf',
+                meta: {
+                    title: 'Account'
+                },
                 component: () => import('pages/Account/AccountConfig.vue')
             },
             {
                 name: 'addressesList',
                 path: '/account/address-list',
+                meta: {
+                    title: 'Addresses'
+                },
                 component: () => import('pages/Account/AddressList.vue')
             },
             {
                 name: 'addressDetails',
                 path: '/account/address/:id?',
+                meta: {
+                    title: 'Address details'
+                },
                 component: () => import('pages/Account/AddressDetails.vue')
             },
             {
                 name: 'controlPanel',
                 path: 'admin/links',
+                meta: {
+                    title: 'Control panel'
+                },
                 component: () => import('pages/Admin/LinksView.vue')
             },
             {
                 name: 'adminUsers',
                 path: 'admin/users',
+                meta: {
+                    title: 'Users'
+                },
                 component: () => import('pages/Admin/UsersView.vue')
             },
             {
                 name: 'adminConnections',
                 path: 'admin/connections',
+                meta: {
+                    title: 'Connections'
+                },
                 component: () => import('pages/Admin/ConnectionsView.vue')
             },
             {
                 name: 'adminVisits',
                 path: 'admin/visits',
+                meta: {
+                    title: 'Visits'
+                },
                 component: () => import('pages/Admin/VisitsView.vue')
             },
             {
                 name: 'adminNews',
                 path: 'news/news',
+                meta: {
+                    title: 'News'
+                },
                 component: () => import('pages/Admin/NewsView.vue')
             },
             {
                 name: 'adminNewsDetails',
                 path: 'news/new/:id?',
+                meta: {
+                    title: 'Admin news details'
+                },
                 component: () => import('pages/Admin/NewsDetails.vue')
             },
             {
                 name: 'adminPhotos',
                 path: 'admin/photos',
+                meta: {
+                    title: 'Photos'
+                },
                 component: () => import('pages/Admin/PhotosView.vue')
             },
             {
                 name: 'adminItems',
                 path: 'admin/items',
+                meta: {
+                    title: 'Items'
+                },
                 component: () => import('pages/Admin/ItemsView.vue')
             }
         ]