Fix the sorting of nutrition options during editing

CHANGELOG.md

@@ -25,6 +25,8 @@
   [#1977](https://github.com/nextcloud/cookbook/pull/1977) @christianlupus
 - Remove unclear nutrition option for deleting nutrition info items and replace with designated delete button
   [#1978](https://github.com/nextcloud/cookbook/pull/1978) @seyfeb
+- Make reordering of nutrition data more smooth
+  [#1979](https://github.com/nextcloud/cookbook/pull/1979) @christianlupus
 
 ### Maintenance
 - Add PHP lint checker to ensure valid (legacy) PHP syntax

src/components/FormComponents/EditMultiselectInputGroup.vue

@@ -1,8 +1,11 @@
 <template>
     <fieldset>
         <label>{{ fieldLabel }}</label>
-        <ul ref="list">
-            <li v-for="(row, index) in rowsFromValue" :key="index">
+        <transition-group name="list" tag="ul">
+            <li
+                v-for="(row, index) in rowsFromValue"
+                :key="String(rowKeys[row.selectedOption.key])"
+            >
                 <NcSelect
                     :value="row.selectedOption"
                     :options="availableOptions[index]"
@@ -30,7 +33,7 @@
                     </template>
                 </NcButton>
             </li>
-            <li v-if="showAdditionalRow">
+            <li v-if="showAdditionalRow" key="new">
                 <NcSelect
                     :value="additionalRow.selectedOption"
                     :options="unusedOptions"
@@ -47,12 +50,20 @@
                     class="val"
                 />
             </li>
-        </ul>
+        </transition-group>
     </fieldset>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, computed } from 'vue';
+import {
+    ref,
+    defineProps,
+    defineEmits,
+    computed,
+    onBeforeMount,
+    set,
+    del,
+} from 'vue';
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js';
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js';
@@ -93,12 +104,21 @@ const additionalRow = ref({
     customText: '',
 });
 
-// All resistered keys in the options set in props
+// A fixed index for a row to identify it in the process of changes
+// This is a map from the option key to a unique index.
+const rowKeys = ref({});
+// The next index to provide
+const nextKey = ref(0);
+
+// All registered keys in the options set in props
 const optionKeys = computed(() => props.options.map((x) => x.key));
 
+// The currently available options
+const currentKeys = computed(() => Object.keys(props.value));
+
 // All possible keys that are provided in the prop value
 const valueFilteredKeys = computed(() =>
-    Object.keys(props.value).filter((x) => optionKeys.value.includes(x)),
+    optionKeys.value.filter((x) => currentKeys.value.includes(x)),
 );
 
 const rowsFromValue = computed(() =>
@@ -146,13 +166,16 @@ function deleteEntry(index) {
     const data = { ...props.value };
     const { key } = rowsFromValue.value[index].selectedOption;
     delete data[key];
+    del(rowKeys.value, key);
     emits('input', data);
 }
 
 // Add a new row to the model
 function newRowByOption(ev) {
     const data = { ...props.value };
     data[ev.key] = '';
+    set(rowKeys.value, ev.key, nextKey.value);
+    nextKey.value += 1;
     emits('input', data);
 }
 
@@ -169,8 +192,22 @@ function updateByOption(ev, index) {
     const { key } = rowsFromValue.value[index].selectedOption;
     data[ev.key] = data[key];
     delete data[key];
+    rowKeys.value[ev.key] = rowKeys.value[key];
+    delete rowKeys.value[key];
     emits('input', data);
 }
+
+onBeforeMount(() => {
+    valueFilteredKeys.value.forEach((x, idx) => {
+        set(rowKeys.value, x, idx);
+    });
+    Object.keys(rowKeys.value).forEach((rkKey) => {
+        const rk = rowKeys.value[rkKey];
+        if (rk >= nextKey.value) {
+            nextKey.value = rk + 1;
+        }
+    });
+});
 </script>
 
 <script>
@@ -228,4 +265,8 @@ fieldset > ul > li > input.val {
     height: 44px !important;
     margin: 0;
 }
+
+.list-move {
+    transition: transform 1s;
+}
 </style>