[pricelist] modify ingredients without saving

src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue

@@ -72,7 +72,11 @@
         </div>
       </div>
       <div class="q-pa-sm">
-        <ingredients v-model="volume.ingredients" :editable="editable" />
+        <ingredients
+          v-model="volume.ingredients"
+          :editable="editable"
+          @update="updateVolume(volume)"
+        />
       </div>
     </q-carousel-slide>
   </q-carousel>
@@ -80,10 +84,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
+import { computed, defineComponent, PropType, ref, onBeforeMount, unref } from 'vue';
 import { DrinkPriceVolume } from 'src/plugins/pricelist/store';
 import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
-
+import { calc_volume, clone } from '../../utils/utils';
 export default defineComponent({
   name: 'DrinkPriceVolume',
   components: { Ingredients },
@@ -102,7 +106,8 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     onBeforeMount(() => {
-      volumes.value = <Array<DrinkPriceVolume>>[...props.modelValue];
+      //volumes.value = <Array<DrinkPriceVolume>>JSON.parse(JSON.stringify(props.modelValue));
+      volumes.value = clone(props.modelValue);
     });
     const volumes = ref<Array<DrinkPriceVolume>>([]);
     const _volume = ref<number | undefined>();
@@ -126,8 +131,14 @@ export default defineComponent({
       return retVal;
     });
 
-    function updateVolume() {
-      emit('update:modelValue', volumes.value);
+    function updateVolume(_volume: DrinkPriceVolume) {
+      console.log('updateVolume', _volume);
+      const index = volumes.value.findIndex((a) => a.id === _volume.id);
+      if (index > -1) {
+        console.log('updateVolume old', volumes.value[index]);
+        volumes.value[index].volume = calc_volume(_volume);
+      }
+      emit('update:modelValue', unref(volumes));
     }
 
     return { volumes, volume, options, updateVolume };

src/plugins/pricelist/components/CalculationTable/Ingredients.vue

@@ -147,8 +147,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
+import { computed, defineComponent, PropType, ref, onBeforeMount, unref } from 'vue';
 import { usePricelistStore } from '../../store';
+import { clone } from '../../utils/utils';
 
 export default defineComponent({
   name: 'Ingredients',
@@ -164,14 +165,13 @@ export default defineComponent({
   },
   emits: {
     'update:modelValue': (val: Array<FG.Ingredient>) => val,
+    update: () => true,
   },
   setup(props, { emit }) {
     onBeforeMount(() => {
-      edit_ingredients.value = [];
-      props.modelValue.forEach((a) => {
-        edit_ingredients.value.push(Object.assign({}, a));
-      });
-      console.log(edit_ingredients);
+      //edit_ingredients.value = <Array<FG.Ingredient>>JSON.parse(JSON.stringify(props.modelValue))
+      //edit_ingredients.value = props.modelValue
+      edit_ingredients.value = clone(props.modelValue);
     });
 
     const store = usePricelistStore();
@@ -199,13 +199,15 @@ export default defineComponent({
         };
       }
       edit_ingredients.value.push(_ingredient);
-      emit('update:modelValue', edit_ingredients.value);
+      emit('update:modelValue', unref(edit_ingredients));
+      update();
       cancelAddIngredient();
     }
 
     function updateValue(value: number, initValue: number) {
       console.log('updateValue', value, initValue);
-      emit('update:modelValue', edit_ingredients.value);
+      emit('update:modelValue', unref(edit_ingredients));
+      update();
     }
 
     function cancelAddIngredient() {
@@ -218,7 +220,8 @@ export default defineComponent({
       if (index > -1) {
         edit_ingredients.value.splice(index, 1);
       }
-      emit('update:modelValue', edit_ingredients.value);
+      emit('update:modelValue', unref(edit_ingredients));
+      update();
     }
     const drinks = computed(() =>
       store.drinks.filter((drink) => {
@@ -232,6 +235,12 @@ export default defineComponent({
       return store.drinks.find((a) => a.id === id)?.name;
     }
 
+    function update() {
+      setTimeout(() => {
+        emit('update');
+      }, 500);
+    }
+
     return {
       addIngredient,
       drinks,

src/plugins/pricelist/components/DrinkModify.vue

@@ -47,7 +47,11 @@
       </div>
     </q-card-section>
     <q-card-section>
-      <drink-price-volumes v-model="edit_drink.volumes" editable />
+      <drink-price-volumes
+        v-model="edit_drink.volumes"
+        editable
+        @update:modelValue="updateVolume"
+      />
     </q-card-section>
     <q-card-actions class="justify-around">
       <q-btn label="Abbrechen" @click="cancel" />
@@ -57,9 +61,9 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType, ref, onBeforeMount } from 'vue';
-import { Drink, DrinkPriceVolume } from '../store';
+import { Drink } from '../store';
 import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
-import { calc_volume } from 'src/plugins/pricelist/utils/utils';
+import { clone } from '../utils/utils';
 export default defineComponent({
   name: 'DrinkModify',
   components: { DrinkPriceVolumes },
@@ -72,8 +76,8 @@ export default defineComponent({
   emits: { save: () => true, cancel: () => true },
   setup(props, { emit }) {
     onBeforeMount(() => {
-      edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
-      console.log('edit_drink', edit_drink.value)
+      //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
+      edit_drink.value = clone(props.drink);
     });
 
     const edit_drink = ref<Drink>();
@@ -83,11 +87,8 @@ export default defineComponent({
     function cancel() {
       emit('cancel');
     }
-    function updateVolume(volume: DrinkPriceVolume) {
-      if (volume) {
-        console.log('edit_volume', volume);
-        volume.volume = calc_volume(volume);
-      }
+    function updateVolume(test: Drink) {
+      console.log(test);
     }
     return { edit_drink, save, cancel, updateVolume };
   },

src/plugins/pricelist/utils/utils.ts

@@ -68,4 +68,8 @@ function calc_min_prices(
   return retVal;
 }
 
-export { calc_volume, calc_cost_per_volume, calc_all_min_prices, calc_min_prices };
+function clone<T>(o: T): T {
+  return <T>JSON.parse(JSON.stringify(o));
+}
+
+export { calc_volume, calc_cost_per_volume, calc_all_min_prices, calc_min_prices, clone };