Fix/1967 nutrition removal unclear

CHANGELOG.md

@@ -21,6 +21,8 @@
   [#1971](https://github.com./nextcloud/cookbook/pull/1971) @seyfeb
 - Fill prep, cook, and total time in `RecipeEdit` after loading
   [#1973](https://github.com./nextcloud/cookbook/pull/1973) @seyfeb
+- Remove unclear nutrition option for deleting nutrition info items and replace with designated delete button
+  [#1978](https://github.com./nextcloud/cookbook/pull/1978) @seyfeb
 
 ### Maintenance
 - Add PHP lint checker to ensure valid (legacy) PHP syntax

src/components/AppControls/AppControls.vue

@@ -93,15 +93,18 @@
             <NcActionInput
                 icon="icon-quota"
                 :value="filterValue"
-                aria-label="Filter current recipes"
+                :aria-label="t('cookbook', 'Filter current recipes')"
                 @update:value="updateFilters"
             >
                 <template #icon>
                     <FilterIcon :size="20" />
                 </template>
                 {{ t('cookbook', 'Filter') }}
             </NcActionInput>
-            <NcActionInput aria-label="Search recipes" @submit="search">
+            <NcActionInput
+                aria-label="t('cookbook', 'Search recipes')"
+                @submit="search"
+            >
                 <template #icon>
                     <SearchIcon :size="20" />
                 </template>

src/components/FormComponents/EditMultiselectInputGroup.vue

@@ -19,6 +19,15 @@
                     class="val"
                     @change="updateByText($event, index)"
                 />
+                <NcButton
+                    class="ml-2"
+                    :aria-label="t('cookbook', 'Delete nutrition item')"
+                    @click="deleteEntry(index)"
+                >
+                    <template #icon>
+                        <DeleteIcon :size="20" />
+                    </template>
+                </NcButton>
             </li>
             <li v-if="showAdditionalRow">
                 <NcSelect
@@ -42,9 +51,12 @@
 </template>
 
 <script setup>
-import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js';
 import { ref, defineProps, defineEmits, computed } from 'vue';
 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js';
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js';
+import DeleteIcon from 'vue-material-design-icons/Delete.vue';
+
 const emits = defineEmits(['input']);
 
 const props = defineProps({
@@ -114,27 +126,27 @@ const unusedOptions = computed(() =>
 // Create a list of lists of available options for the individual rows (just the internal keys)
 // This will be a list. Each (top) list entry represents the internal keys of the available options for the corresponding row.
 // Note that each row can set the option to any yet unused option or the currently selected one.
-const availabeOptionKeys = computed(() =>
+const availableOptionKeys = computed(() =>
     valueFilteredKeys.value.map((x) => [...unusedOptionKeys.value, x]),
 );
 
-// This is mainly the same as the availabelOptionKeys but uses full objects and sorts these according to the input property
-const availableOptionsPure = computed(() =>
-    availabeOptionKeys.value.map((x) =>
+// This is mainly the same as the availableOptionKeys but uses full objects and sorts these according to the input property
+const availableOptions = computed(() =>
+    availableOptionKeys.value.map((x) =>
         props.options.filter((y) => x.includes(y.key)),
     ),
 );
 
-// The actual available options per row are augmented by an option to remove a row.
-const availableOptions = computed(() =>
-    availableOptionsPure.value.map((x) => [
-        {
-            key: null,
-            label: '---',
-        },
-        ...x,
-    ]),
-);
+/**
+ * Delete a nutrition item.
+ * @param index The index of the item to delete in the `value` property.
+ */
+function deleteEntry(index) {
+    const data = { ...props.value };
+    const { key } = rowsFromValue.value[index].selectedOption;
+    delete data[key];
+    emits('input', data);
+}
 
 // Add a new row to the model
 function newRowByOption(ev) {
@@ -154,14 +166,9 @@ function updateByText(ev, idx) {
 function updateByOption(ev, index) {
     const data = { ...props.value };
     const { key } = rowsFromValue.value[index].selectedOption;
-    if (ev.key === null) {
-        delete data[key];
-        emits('input', data);
-    } else {
-        data[ev.key] = data[key];
-        delete data[key];
-        emits('input', data);
-    }
+    data[ev.key] = data[key];
+    delete data[key];
+    emits('input', data);
 }
 </script>
 
@@ -172,6 +179,10 @@ export default {
 </script>
 
 <style scoped>
+.ml-2 {
+    margin-left: 0.5rem;
+}
+
 fieldset {
     width: 100%;
     margin-bottom: 1em;

src/components/RecipeView/RecipeView.vue

@@ -148,7 +148,7 @@
                                 v-if="scaledIngredients.length"
                                 class="copy-ingredients print-hidden"
                                 :type="'tertiary'"
-                                aria-label="Copy all ingredients to the clipboard"
+                                aria-label="t('cookbook', 'Copy ingredients to the clipboard')"
                                 :title="t('cookbook', 'Copy ingredients')"
                                 @click="copyIngredientsToClipboard"
                             >