src/plugins/pricelist/components/CalculationTable.vue

@@ -141,7 +141,11 @@
             </div>
           </q-card-section>
           <q-card-section v-if="props.row.volumes.length > 0 && notLoading">
-            <drink-price-volumes :model-value="props.row.volumes" :public="public" :nodetails="nodetails" />
+            <drink-price-volumes
+              :model-value="props.row.volumes"
+              :public="public"
+              :nodetails="nodetails"
+            />
           </q-card-section>
         </q-card>
       </div>
@@ -276,7 +280,7 @@ export default defineComponent({
         field: 'package_size',
         sortable: true,
         sort,
-        public: false
+        public: false,
       },
       {
         name: 'cost_per_package',
@@ -327,7 +331,7 @@ export default defineComponent({
         },
         filterable: true,
         sortable: false,
-        public: false
+        public: false,
       },
     ];
     const column_calc = [
@@ -372,7 +376,11 @@ export default defineComponent({
       },
     });
 
-    const search_keys = computed(() => columns.filter((column) => column.filterable && ((props.public || props.nodetails) ? column.public : true)));
+    const search_keys = computed(() =>
+      columns.filter(
+        (column) => column.filterable && (props.public || props.nodetails ? column.public : true)
+      )
+    );
 
     const pagination = ref({
       sortBy: 'name',

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

@@ -31,7 +31,7 @@ export default defineComponent({
   name: 'BuildManual',
   props: {
     steps: {
-      type: Array as PropType<Array<string>> || undefined,
+      type: (Array as PropType<Array<string>>) || undefined,
       required: true,
     },
     editable: {

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

@@ -7,11 +7,12 @@
     swipeable
     control-color="primary"
     arrows
+    :keep-alive="false"
   >
     <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
       <div class="full-width row">
         <q-input
-          v-model.number="volume.volume"
+          v-model.number="volume._volume"
           class="q-pa-sm col-10"
           :outlined="!editable || !volume_can_edit"
           :filled="editable && volume_can_edit"
@@ -23,6 +24,7 @@
           suffix="L"
           min="0"
           step="0.001"
+          @update:model-value="updateVolume(volume)"
         />
         <div v-if="deleteable && editable" class="q-pa-sm col-2 text-right">
           <q-btn round icon="mdi-delete" size="sm" color="negative" @click="deleteVolume">
@@ -93,7 +95,7 @@
       </div>
       <div class="q-pa-sm">
         <ingredients
-            v-if="!public"
+          v-if="!public"
           v-model="volume.ingredients"
           :editable="editable"
           @update="updateVolume(volume)"
@@ -139,7 +141,7 @@ export default defineComponent({
     nodetails: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   emits: {
     'update:modelValue': (val: Array<DrinkPriceVolume>) => val,
@@ -179,10 +181,8 @@ export default defineComponent({
     });
 
     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);
       }
       change();

src/plugins/pricelist/components/DrinkModify.vue

@@ -122,9 +122,9 @@
         />
       </div>
     </q-card-section>
-    <q-card-section>
+    <q-card-section :key="key">
       <drink-price-volumes
-        v-model="edit_drink.volumes"
+        v-model="edit_volumes"
         editable
         @update="updateVolume"
         @delete-volume="deleteVolume"
@@ -172,8 +172,11 @@ export default defineComponent({
     onBeforeMount(() => {
       //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
       edit_drink.value = clone(props.drink);
+      edit_volumes.value = clone(props.drink.volumes);
     });
 
+    const key = ref(0);
+
     const store = usePricelistStore();
 
     const toDeleteObjects = ref<DeleteObjects>({
@@ -183,7 +186,9 @@ export default defineComponent({
     });
 
     const edit_drink = ref<Drink>();
+    const edit_volumes = ref<Array<DrinkPriceVolume>>([]);
     function save() {
+      (<Drink>edit_drink.value).volumes = edit_volumes.value;
       emit('save', <Drink>edit_drink.value, toDeleteObjects.value, drinkPic.value, deletePic.value);
     }
 
@@ -191,15 +196,25 @@ export default defineComponent({
       emit('cancel');
     }
     function updateVolume(index: number) {
-      if (index > -1 && edit_drink.value) {
-        edit_drink.value.volumes[index].min_prices = calc_min_prices(
-          edit_drink.value.volumes[index],
-          edit_drink.value.cost_per_volume,
+      if (index > -1 && edit_volumes.value) {
+        edit_volumes.value[index].min_prices = calc_min_prices(
+          edit_volumes.value[index],
+          //edit_drink.value.cost_per_volume,
+          cost_per_volume.value,
           store.min_prices
         );
       }
     }
 
+    function updateVolumes() {
+      setTimeout(() => {
+        edit_volumes.value?.forEach((_, index) => {
+          updateVolume(index);
+        });
+        key.value++;
+      }, 50);
+    }
+
     function deletePrice(price: FG.DrinkPrice) {
       toDeleteObjects.value.prices.push(price);
     }
@@ -287,10 +302,14 @@ export default defineComponent({
 
     const cost_per_volume = computed({
       get: () => {
+        let retVal: number;
         if (auto_cost_per_volume.value) {
-          return <number>calc_cost_per_volume(<Drink>edit_drink.value);
+          retVal = <number>calc_cost_per_volume(<Drink>edit_drink.value);
+        } else {
+          retVal = <number>(<Drink>edit_drink.value).cost_per_volume;
         }
-        return <number>(<Drink>edit_drink.value).cost_per_volume;
+        updateVolumes();
+        return retVal;
       },
       set: (val: number) => ((<Drink>edit_drink.value).cost_per_volume = val),
     });
@@ -316,6 +335,8 @@ export default defineComponent({
       delete_drink,
       auto_cost_per_volume,
       cost_per_volume,
+      edit_volumes,
+      key,
     };
   },
 });

src/plugins/pricelist/pages/InnerPricelist.vue

@@ -6,7 +6,7 @@ import { defineComponent } from 'vue';
 import CalculationTable from '../components/CalculationTable.vue';
 export default defineComponent({
   name: 'InnerPricelist',
-  components: {CalculationTable},
+  components: { CalculationTable },
   setup() {
     return {};
   },