Merge pull request 'fix_orderCatalog_reload' (!1081) from fix_orderCatalog_reload into dev

Reviewed-on: #1081
Reviewed-by: Jon Elias <jon@verdnatura.es>

src/components/ui/CatalogItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnLv from 'components/ui/VnLv.vue';
@@ -13,7 +13,7 @@ const DEFAULT_PRICE_KG = 0;
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
     item: {
         type: Object,
         required: true,
@@ -25,57 +25,63 @@ defineProps({
 });
 
 const dialog = ref(null);
+const card = toRef(props, 'item');
 </script>
 
 <template>
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <VnImg :id="item.id" class="image" zoom-resolution="1600x900" />
-                <div v-if="item.hex && isCatalog" class="item-color-container">
+                <VnImg :id="card.id" class="image" zoom-resolution="1600x900" />
+                <div v-if="card.hex && isCatalog" class="item-color-container">
                     <div
                         class="item-color"
-                        :style="{ backgroundColor: `#${item.hex}` }"
+                        :style="{ backgroundColor: `#${card.hex}` }"
                     ></div>
                 </div>
             </div>
             <div class="content">
                 <span class="link">
-                    {{ item.name }}
-                    <ItemDescriptorProxy :id="item.id" />
+                    {{ card.name }}
+                    <ItemDescriptorProxy :id="card.id" />
                 </span>
-                <p class="subName">{{ item.subName }}</p>
+                <p class="subName">{{ card.subName }}</p>
                 <template v-for="index in 4" :key="`tag-${index}`">
                     <VnLv
-                        v-if="item?.[`tag${index + 4}`]"
-                        :label="item?.[`tag${index + 4}`] + ':'"
-                        :value="item?.[`value${index + 4}`]"
+                        v-if="card?.[`tag${index + 4}`]"
+                        :label="card?.[`tag${index + 4}`] + ':'"
+                        :value="card?.[`value${index + 4}`]"
                     />
                 </template>
-                <div v-if="item.minQuantity" class="min-quantity">
+                <div v-if="card.minQuantity" class="min-quantity">
                     <QIcon name="production_quantity_limits" size="xs" />
-                    {{ item.minQuantity }}
+                    {{ card.minQuantity }}
                 </div>
                 <div class="footer">
                     <div class="price">
                         <p v-if="isCatalog">
-                            {{ item.available }} {{ t('to') }}
-                            {{ toCurrency(item.price) }}
+                            {{ card.available }} {{ t('to') }}
+                            {{ toCurrency(card.price) }}
                         </p>
                         <slot name="price" />
                         <QIcon v-if="isCatalog" name="add_circle" class="icon">
                             <QTooltip>{{ t('globals.add') }}</QTooltip>
                             <QPopupProxy ref="dialog">
                                 <OrderCatalogItemDialog
-                                    :item="item"
-                                    @added="() => dialog.hide()"
+                                    :item="card"
+                                    @added="
+                                        (quantityAdded) => {
+                                            card.available += quantityAdded;
+                                            dialog.hide();
+                                        }
+                                    "
                                 />
                             </QPopupProxy>
                         </QIcon>
                     </div>
-                    <p v-if="item.priceKg" class="price-kg">
+                    <p v-if="card.priceKg" class="price-kg">
                         {{ t('price-kg') }}
-                        {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
+                        {{ toCurrency(card.priceKg) || DEFAULT_PRICE_KG }}
                     </p>
                 </div>
             </div>

src/pages/Order/Card/OrderCatalog.vue

@@ -75,19 +75,6 @@ watch(
     },
     { immediate: true }
 );
-const onItemSaved = (updatedItem) => {
-    requestAnimationFrame(() => {
-        scrollToItem(updatedItem.items[0].itemFk);
-    });
-};
-
-const scrollToItem = async (id) => {
-    const element = itemRefs.value[id]?.$el;
-    if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-};
-provide('onItemSaved', onItemSaved);
 </script>
 
 <template>

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -65,7 +65,6 @@ const selectCategory = async (params, category, search) => {
     params.typeFk = null;
     params.categoryFk = category.id;
     await loadTypes(category?.id);
-    await search();
 };
 
 const loadTypes = async (id) => {

src/pages/Order/Card/OrderCatalogItemDialog.vue

@@ -1,12 +1,12 @@
 <script setup>
 import toCurrency from 'src/filters/toCurrency';
-import { inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useRoute } from 'vue-router';
 import useNotify from 'composables/useNotify';
-import { useArrayData } from 'composables/useArrayData';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import { useState } from 'src/composables/useState';
 
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -18,10 +18,23 @@ const props = defineProps({
         required: true,
     },
 });
-const onItemSaved = inject('onItemSaved');
+const state = useState();
+
+const total = computed(() => state.get('orderTotal'));
+
 const prices = ref((props.item.prices || []).map((item) => ({ ...item, quantity: 0 })));
-const descriptorData = useArrayData('orderData');
 const isLoading = ref(false);
+const calculateTotals = (items) => {
+    return items.reduce(
+        (acc, item) => {
+            acc.totalQuantity += item.quantity;
+            acc.totalSum += item.quantity * item.price;
+            return acc;
+        },
+        { totalQuantity: 0, totalSum: 0 }
+    );
+};
+
 const addToOrder = async () => {
     if (isLoading.value) return;
     isLoading.value = true;
@@ -30,10 +43,12 @@ const addToOrder = async () => {
         items,
         orderFk: Number(route.params.id),
     });
+
+    const { totalQuantity, totalSum } = calculateTotals(items);
+
+    state.set('orderTotal', total.value + totalSum);
     notify(t('globals.dataSaved'), 'positive');
-    await descriptorData.fetch({});
-    onItemSaved({ ...props, items, saved: true });
-    emit('added', items);
+    emit('added', -totalQuantity);
     isLoading.value = false;
 };
 const canAddToOrder = () => {

src/pages/Order/Card/OrderDescriptor.vue

@@ -63,21 +63,26 @@ const setData = (entity) => {
     if (!entity) return;
     getTotalRef.value && getTotalRef.value.fetch();
     data.value = useCardDescription(entity?.client?.name, entity?.id);
-    state.set('orderData', entity);
+    state.set('orderTotal', total);
 };
 
 const getConfirmationValue = (isConfirmed) => {
     return t(isConfirmed ? 'globals.confirmed' : 'order.summary.notConfirmed');
 };
 
-const total = ref(null);
+const orderTotal = computed(() => state.get('orderTotal') ?? 0);
+const total = ref(0);
 </script>
 
 <template>
     <FetchData
         ref="getTotalRef"
         :url="`Orders/${entityId}/getTotal`"
-        @on-fetch="(response) => (total = response)"
+        @on-fetch="
+            (response) => {
+                total = response;
+            }
+        "
     />
     <CardDescriptor
         ref="descriptor"
@@ -112,7 +117,7 @@ const total = ref(null);
                 :label="t('order.summary.items')"
                 :value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
             />
-            <VnLv :label="t('order.summary.total')" :value="toCurrency(total)" />
+            <VnLv :label="t('order.summary.total')" :value="toCurrency(orderTotal)" />
         </template>
         <template #actions="{ entity }">
             <QCardActions>