Basket

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

@@ -66,5 +66,7 @@ export default {
     at: 'a les',
     back: 'Tornar',
     remove: 'Esborrar',
-    agency: 'Agència'
+    agency: 'Agència',
+    delete: 'Esborrar',
+    reallyDelete: 'Estàs segur que vols esborrar la línia?'
 };

src/i18n/en-US/index.js

@@ -79,6 +79,8 @@ export default {
     back: 'Back',
     remove: 'Remove',
     agency: 'Agency',
+    delete: 'Delete',
+    reallyDelete: 'Are you sure you want to delete the line?',
 
     orders: 'Orders',
     order: 'Pending order',

src/i18n/es-ES/index.js

@@ -86,6 +86,8 @@ export default {
     back: 'Volver',
     remove: 'Borrar',
     agency: 'Agencia',
+    delete: 'Borrar',
+    reallyDelete: '¿Estás seguro de que quieres borrar la línea?',
 
     orders: 'Pedidos',
     order: 'Pedido pendiente',

src/i18n/fr-FR/index.js

@@ -66,5 +66,7 @@ export default {
     at: 'à',
     back: 'Retour',
     remove: 'Effacer',
-    agency: 'Agence'
+    agency: 'Agence',
+    delete: 'Effacer',
+    reallyDelete: 'Voulez-vous vraiment supprimer la ligne?'
 };

src/i18n/pt-PT/index.js

@@ -66,5 +66,7 @@ export default {
     at: 'às',
     back: 'Voltar',
     remove: 'Eliminar',
-    agency: 'Agência'
+    agency: 'Agência',
+    delete: 'Eliminar',
+    reallyDelete: 'Tens certeza que queres eliminar esta linha?'
 };

src/pages/Ecomerce/BasketView.vue

@@ -1,5 +1,6 @@
 <script setup>
 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';
@@ -7,9 +8,10 @@ import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 
 const jApi = inject('jApi');
+const { t } = useI18n();
 const appStore = useAppStore();
 const route = useRoute();
-const { basketOrderId } = storeToRefs(appStore);
+const { basketOrderId, isHeaderMounted } = storeToRefs(appStore);
 
 const rows = ref([]);
 const ticket = ref({});
@@ -83,24 +85,71 @@ const getItems = async () => {
     }
 };
 
+const fetchData = async () => {
+    await getItems();
+    await getOrder();
+};
+
 onBeforeMount(() => {
     appStore.check();
 });
 
 onMounted(async () => {
     orderId.value = route.params.id || basketOrderId.value;
-    await getItems();
+    await fetchData();
-    await getOrder();
 });
 </script>
 
 <template>
-    <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"
         />
-    </div>
+    </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

@@ -277,6 +277,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
@@ -441,7 +443,6 @@ onMounted(async () => {
                 </QStepperNavigation>
             </QStep>
         </QStepper>
-        <pre>{{ orderForm }}</pre>
     </QPage>
 </template>
 
@@ -467,6 +468,7 @@ en-US:
     pleaseSelectAWarehouse: Please select a store
     warehouse: Warehouse
     pickup: Pickup
+    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
@@ -486,6 +488,7 @@ es-ES:
     pleaseSelectAWarehouse: Por favor elige un almacén
     warehouse: Almacén
     pickup: Recogida
+    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
@@ -505,6 +508,7 @@ ca-ES:
     pleaseSelectAWarehouse: Si us plau tria un magatzem
     warehouse: Magatzem
     pickup: Recollida
+    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
@@ -524,6 +528,7 @@ fr-FR:
     pleaseSelectAWarehouse: Veuillez choisir un entrepôt
     warehouse: Entrepôt
     pickup: Retrait
+    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
@@ -542,4 +547,5 @@ pt-PT:
     pleaseSelectAWarehouse: Por favor, escolha um armazém
     warehouse: Armazém
     pickup: Recolhida
+    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/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,
@@ -15,10 +19,17 @@ defineProps({
     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;
@@ -26,6 +37,22 @@ 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>
@@ -76,6 +103,24 @@ const lineSubtotal = line =>
         <QSeparator inset />
         <QList v-for="(row, index) in rows" :key="index">
             <QItem v-if="row">
+                <QItemSection avatar>
+                    <QBtn
+                        icon="delete"
+                        rounded
+                        no-caps
+                        dense
+                        flat
+                        @click.stop="
+                            openConfirmationModal(null, t('reallyDelete'), () =>
+                                deleteRow(row.id)
+                            )
+                        "
+                    >
+                        <QTooltip>
+                            {{ t('delete') }}
+                        </QTooltip>
+                    </QBtn>
+                </QItemSection>
                 <QItemSection avatar>
                     <VnImg
                         storage="catalog"

src/router/routes.js

@@ -64,6 +64,11 @@ const routes = [
                 path: '/ecomerce/basket/:id?',
                 component: () => import('pages/Ecomerce/BasketView.vue')
             },
+            {
+                name: 'confirm',
+                path: '/ecomerce/confirm/:id?',
+                component: () => import('pages/Ecomerce/ConfirmView.vue')
+            },
             {
                 name: 'checkout',
                 path: '/ecomerce/checkout/:id?',