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/OrderCatalogItemDialog.vue

@@ -25,6 +25,25 @@ const total = computed(() => state.get('orderTotal'));
 // const onItemSaved = inject('onItemSaved');
 const prices = ref((props.item.prices || []).map((item) => ({ ...item, quantity: 0 })));
 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 totalSum = (items) =>
+//     items.reduce((acc, item) => {
+//         return acc + item.quantity * item.price;
+//     }, 0);
+// const totalQuantity = (items) =>
+//     items.reduce((acc, item) => {
+//         return acc + item.quantity;
+//     }, 0);
 const addToOrder = async () => {
     if (isLoading.value) return;
     isLoading.value = true;
@@ -33,10 +52,13 @@ const addToOrder = async () => {
         items,
         orderFk: Number(route.params.id),
     });
-    state.set('orderTotal', total.value + 100);
+
+    const { totalQuantity, totalSum } = calculateTotals(items);
+
+    state.set('orderTotal', total.value + totalSum);
     notify(t('globals.dataSaved'), 'positive');
     //  onItemSaved({ ...props, items, saved: true });
-    emit('added', items);
+    emit('added', -totalQuantity);
     isLoading.value = false;
 };
 const canAddToOrder = () => {