From 59d5e2496ac510076a27a78f048c60b8bf0c1a08 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Wed, 13 Dec 2023 17:38:42 +0100
Subject: [PATCH 1/3] Fix visual issue while editing nutrition data

Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 .../EditMultiselectInputGroup.vue             | 44 ++++++++++++++++---
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/FormComponents/EditMultiselectInputGroup.vue b/src/components/FormComponents/EditMultiselectInputGroup.vue
index baadf71dc..e8c511311 100644
--- a/src/components/FormComponents/EditMultiselectInputGroup.vue
+++ b/src/components/FormComponents/EditMultiselectInputGroup.vue
@@ -1,8 +1,8 @@
 <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 +30,7 @@
                     </template>
                 </NcButton>
             </li>
-            <li v-if="showAdditionalRow">
+            <li v-if="showAdditionalRow" key="new">
                 <NcSelect
                     :value="additionalRow.selectedOption"
                     :options="unusedOptions"
@@ -47,12 +47,12 @@
                     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 +93,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,6 +155,7 @@ function deleteEntry(index) {
     const data = { ...props.value };
     const { key } = rowsFromValue.value[index].selectedOption;
     delete data[key];
+    del(rowKeys.value, key);
     emits('input', data);
 }
 
@@ -153,6 +163,8 @@ function deleteEntry(index) {
 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 +181,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 +254,8 @@ fieldset > ul > li > input.val {
     height: 44px !important;
     margin: 0;
 }
+
+.list-move {
+    transition: transform 1s;
+}
 </style>

From 3e199bf29853ee6d3a27312a3e43ee47028b1c2c Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Wed, 13 Dec 2023 18:07:03 +0100
Subject: [PATCH 2/3] Make prettier happy

Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 .../EditMultiselectInputGroup.vue             | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/FormComponents/EditMultiselectInputGroup.vue b/src/components/FormComponents/EditMultiselectInputGroup.vue
index e8c511311..88ad0d055 100644
--- a/src/components/FormComponents/EditMultiselectInputGroup.vue
+++ b/src/components/FormComponents/EditMultiselectInputGroup.vue
@@ -2,7 +2,10 @@
     <fieldset>
         <label>{{ fieldLabel }}</label>
         <transition-group name="list" tag="ul">
-            <li v-for="(row, index) in rowsFromValue" :key="String(rowKeys[row.selectedOption.key])">
+            <li
+                v-for="(row, index) in rowsFromValue"
+                :key="String(rowKeys[row.selectedOption.key])"
+            >
                 <NcSelect
                     :value="row.selectedOption"
                     :options="availableOptions[index]"
@@ -52,7 +55,15 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, computed, onBeforeMount, set, del } 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';
@@ -107,7 +118,7 @@ const currentKeys = computed(() => Object.keys(props.value));
 
 // All possible keys that are provided in the prop value
 const valueFilteredKeys = computed(() =>
-    optionKeys.value.filter(x => currentKeys.value.includes(x))
+    optionKeys.value.filter((x) => currentKeys.value.includes(x)),
 );
 
 const rowsFromValue = computed(() =>
@@ -190,9 +201,9 @@ onBeforeMount(() => {
     valueFilteredKeys.value.forEach((x, idx) => {
         set(rowKeys.value, x, idx);
     });
-    Object.keys(rowKeys.value).forEach(rkKey => {
+    Object.keys(rowKeys.value).forEach((rkKey) => {
         const rk = rowKeys.value[rkKey];
-        if(rk >= nextKey.value) {
+        if (rk >= nextKey.value) {
             nextKey.value = rk + 1;
         }
     });

From 2ea54c9dadd84b184ec51fee1756781f4d2cb447 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Wed, 13 Dec 2023 18:10:01 +0100
Subject: [PATCH 3/3] Update Changelog

Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a1b893ac..24f9331e7 100644
--- a/CHANGELOG.md
+++ b/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