From 0f5014088d670c3e5cdbf63913672f14c6c3a4bf Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 24 Sep 2024 17:11:43 -0300
Subject: [PATCH] Handle minQuantity

---
 src/i18n/ca-ES/index.js            |  1 +
 src/i18n/en-US/index.js            |  1 +
 src/i18n/es-ES/index.js            |  1 +
 src/i18n/fr-FR/index.js            |  1 +
 src/i18n/pt-PT/index.js            |  1 +
 src/pages/Ecomerce/CatalogCard.vue | 28 ++++++++++
 src/pages/Ecomerce/CatalogView.vue | 88 ++++++++++++++++++------------
 7 files changed, 86 insertions(+), 35 deletions(-)

diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 9cf1aba3..c21533d9 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -105,6 +105,7 @@ export default {
     modify: 'Modificar',
     shoppingCart: 'Cistella de la compra',
     available: 'Disponible',
+    minQuantity: 'Quantitat mínima',
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 20105461..6938af07 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -138,6 +138,7 @@ export default {
     modify: 'Modify',
     shoppingCart: 'Shopping cart',
     available: 'Available',
+    minQuantity: 'Minimum quantity',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index bbfaa58d..d826b2d8 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -137,6 +137,7 @@ export default {
     modify: 'Modificar',
     shoppingCart: 'Cesta de la compra',
     available: 'Disponible',
+    minQuantity: 'Cantidad mínima',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index af4dbf43..549eae58 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -105,6 +105,7 @@ export default {
     modify: 'Modifier',
     shoppingCart: 'Panier',
     available: 'Disponible',
+    minQuantity: 'Quantité minimum',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 9b6f8f96..80b9a222 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -103,6 +103,7 @@ export default {
     modify: 'Modificar',
     shoppingCart: 'Cesta da compra',
     available: 'Disponível',
+    minQuantity: 'Quantidade mínima',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',
diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
index ea440862..a53ce109 100644
--- a/src/pages/Ecomerce/CatalogCard.vue
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -48,6 +48,20 @@ const { t } = useI18n();
                         <span class="col ellipsis">{{ tag.value }}</span>
                     </div>
                 </div>
+                <div v-if="item.minQuantity" class="row justify-end">
+                    <QIcon
+                        name="production_quantity_limits"
+                        size="xs"
+                        color="negative"
+                    >
+                        <QTooltip>
+                            {{ t('minQuantity') }}
+                        </QTooltip>
+                    </QIcon>
+                    <span class="text-negative text-caption">{{
+                        item.minQuantity
+                    }}</span>
+                </div>
             </div>
             <div class="row justify-between items-cente q-gutter-x-xs">
                 <QBadge
@@ -113,6 +127,20 @@ const { t } = useI18n();
                     {{ tag.value }}
                 </span>
             </div>
+            <div v-if="item.minQuantity" class="row justify-end">
+                <QIcon
+                    name="production_quantity_limits"
+                    size="xs"
+                    color="negative"
+                >
+                    <QTooltip>
+                        {{ t('minQuantity') }}
+                    </QTooltip>
+                </QIcon>
+                <span class="text-negative text-caption">{{
+                    item.minQuantity
+                }}</span>
+            </div>
             <div class="row justify-end items-center q-gutter-x-xs q-mt-sm">
                 <QBadge
                     :label="`x${item.grouping}`"
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 28c6c47a..a6aad1b1 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -170,39 +170,61 @@
                 @click="showItem(_item)"
             />
         </div>
-        <QDialog v-model="showItemDialog">
+        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
             <QCard style="width: 25em" class="column">
-                <div class="q-pa-md" style="display: flex">
-                    <VnImg
-                        storage="catalog"
-                        size="200x200"
-                        :id="'asd'"
-                        width="112px"
-                        height="112px"
-                        rounded="bottom"
-                        class="q-mr-md"
-                    />
-                    <div class="column">
-                        <div class="text-subtitle2">
-                            {{ selectedItem.item }}
+                <div class="q-pa-md relative-position">
+                    <div class="q-mb-md" style="display: flex">
+                        <VnImg
+                            storage="catalog"
+                            size="200x200"
+                            :id="'asd'"
+                            width="112px"
+                            height="112px"
+                            rounded="bottom"
+                            class="q-mr-md"
+                        />
+                        <div class="column">
+                            <div class="text-subtitle2">
+                                {{ selectedItem.item }}
+                            </div>
+                            <span
+                                class="text-subtitle2 text-grey-7 text-uppercase"
+                            >
+                                {{ selectedItem.subName }}
+                            </span>
+                            <span class="text-grey-7">
+                                #{{ selectedItem.id }}</span
+                            >
+                        </div>
+                    </div>
+                    <div class="text-caption">
+                        <div
+                            v-for="(tag, index) in selectedItem.tags"
+                            :key="index"
+                            class="row"
+                        >
+                            <span class="text-grey-7" style="width: 35%">
+                                {{ tag.name }}
+                            </span>
+                            <span>{{ tag.value }}</span>
                         </div>
-                        <span class="text-subtitle2 text-grey-7 text-uppercase">
-                            {{ selectedItem.subName }}
-                        </span>
-                        <span class="text-grey-7"> #{{ selectedItem.id }}</span>
                     </div>
-                </div>
-
-                <div class="tags q-px-md text-caption">
                     <div
-                        v-for="(tag, index) in selectedItem.tags"
-                        :key="index"
-                        class="full-width row"
+                        v-if="selectedItem.minQuantity"
+                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
                     >
-                        <span class="text-grey-7 col-5">
-                            {{ tag.name }}
-                        </span>
-                        <span class="col">{{ tag.value }}</span>
+                        <QIcon
+                            name="production_quantity_limits"
+                            size="xs"
+                            color="negative"
+                        >
+                            <QTooltip>
+                                {{ t('minQuantity') }}
+                            </QTooltip>
+                        </QIcon>
+                        <span class="text-negative text-caption">{{
+                            selectedItem.minQuantity
+                        }}</span>
                     </div>
                 </div>
                 <div
@@ -808,6 +830,7 @@ const addItemToOrder = async params => {
         );
     } catch (error) {
         console.error('Error adding item to basket:', error);
+        throw error;
     }
 };
 
@@ -831,17 +854,14 @@ const onConfirmClick = async params => {
 
         if (amountSum > 0) {
             await Promise.all(addItemPromises);
-
             notify(
                 `${t('added')} ${amountSum} ${selectedItem.value.item}`,
                 'positive'
             );
         }
+        showItemDialog.value = false;
     } catch (error) {
         console.error('Error adding item to basket:', error);
-    } finally {
-        showItemDialog.value = false;
-        resetAmounts();
     }
 };
 
@@ -907,9 +927,6 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
-.search {
-    max-width: 250px;
-}
 .basket-info {
     display: flex;
     flex-direction: column;
@@ -919,6 +936,7 @@ onBeforeMount(async () => {
     border-radius: 7px;
     text-align: center;
 }
+
 .categories {
     display: flex;
     flex-wrap: wrap;