Handle minQuantity

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',

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',

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',

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',

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',

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}`"

src/pages/Ecomerce/CatalogView.vue

@@ -170,9 +170,10 @@
                 @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">
+                <div class="q-pa-md relative-position">
+                    <div class="q-mb-md" style="display: flex">
                         <VnImg
                             storage="catalog"
                             size="200x200"
@@ -186,23 +187,44 @@
                             <div class="text-subtitle2">
                                 {{ selectedItem.item }}
                             </div>
-                        <span class="text-subtitle2 text-grey-7 text-uppercase">
+                            <span
+                                class="text-subtitle2 text-grey-7 text-uppercase"
+                            >
                                 {{ selectedItem.subName }}
                             </span>
-                        <span class="text-grey-7"> #{{ selectedItem.id }}</span>
+                            <span class="text-grey-7">
+                                #{{ selectedItem.id }}</span
+                            >
                         </div>
                     </div>
-
+                    <div class="text-caption">
-                <div class="tags q-px-md text-caption">
                         <div
                             v-for="(tag, index) in selectedItem.tags"
                             :key="index"
-                        class="full-width row"
+                            class="row"
                         >
-                        <span class="text-grey-7 col-5">
+                            <span class="text-grey-7" style="width: 35%">
                                 {{ tag.name }}
                             </span>
-                        <span class="col">{{ tag.value }}</span>
+                            <span>{{ tag.value }}</span>
+                        </div>
+                    </div>
+                    <div
+                        v-if="selectedItem.minQuantity"
+                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
+                    >
+                        <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;