From 906669c0c421f75748664a2523a251bcbfc8cc39 Mon Sep 17 00:00:00 2001
From: miah <144297490+miah120@users.noreply.github.com>
Date: Mon, 24 Feb 2025 02:41:04 -0600
Subject: [PATCH] feat: Improve Shopping List UI (#4608)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
---
 .../ShoppingList/ShoppingListItemEditor.vue   | 66 ++++++++++---------
 frontend/pages/shopping-lists/_id.vue         | 35 +++++-----
 2 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
index da9ca4427..fe9a399f6 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
@@ -34,6 +34,7 @@
             :label="$t('shopping-list.note')"
             rows="1"
             auto-grow
+            autofocus
             @keypress="handleNoteKeyPress"
           ></v-textarea>
         </div>
@@ -80,37 +81,37 @@
           <v-spacer />
         </div>
       </v-card-text>
+      <v-card-actions class="ma-0 pt-0 pb-1 justify-end">
+        <BaseButtonGroup
+          :buttons="[
+            ...(allowDelete ? [{
+              icon: $globals.icons.delete,
+              text: $t('general.delete'),
+              event: 'delete',
+            }] : []),
+            {
+              icon: $globals.icons.close,
+              text: $t('general.cancel'),
+              event: 'cancel',
+            },
+            {
+              icon: $globals.icons.foods,
+              text: $t('shopping-list.toggle-food'),
+              event: 'toggle-foods',
+            },
+            {
+              icon: $globals.icons.save,
+              text: $t('general.save'),
+              event: 'save',
+            },
+          ]"
+          @save="$emit('save')"
+          @cancel="$emit('cancel')"
+          @delete="$emit('delete')"
+          @toggle-foods="listItem.isFood = !listItem.isFood"
+        />
+      </v-card-actions>
     </v-card>
-    <v-card-actions class="ma-0 pt-0 pb-1 justify-end">
-      <BaseButtonGroup
-        :buttons="[
-          {
-            icon: $globals.icons.delete,
-            text: $t('general.delete'),
-            event: 'delete',
-          },
-          {
-            icon: $globals.icons.close,
-            text: $t('general.cancel'),
-            event: 'cancel',
-          },
-          {
-            icon: $globals.icons.foods,
-            text: $t('shopping-list.toggle-food'),
-            event: 'toggle-foods',
-          },
-          {
-            icon: $globals.icons.save,
-            text: $t('general.save'),
-            event: 'save',
-          },
-        ]"
-        @save="$emit('save')"
-        @cancel="$emit('cancel')"
-        @delete="$emit('delete')"
-        @toggle-foods="listItem.isFood = !listItem.isFood"
-      />
-    </v-card-actions>
   </div>
 </template>
 
@@ -139,6 +140,11 @@ export default defineComponent({
       type: Array as () => IngredientFood[],
       required: true,
     },
+    allowDelete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   setup(props, context) {
     const foodStore = useFoodStore();
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index c575f0de3..4b905c3a7 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -151,6 +151,24 @@
         </div>
       </div>
 
+      <!-- Create Item -->
+      <div v-if="createEditorOpen">
+        <ShoppingListItemEditor
+          v-model="createListItemData"
+          class="my-4"
+          :labels="allLabels || []"
+          :units="allUnits || []"
+          :foods="allFoods || []"
+          :allow-delete="false"
+          @delete="createEditorOpen = false"
+          @cancel="createEditorOpen = false"
+          @save="createListItem"
+        />
+      </div>
+      <div v-else class="d-flex justify-end">
+        <BaseButton create @click="createEditorOpen = true" > {{ $t('general.add') }} </BaseButton>
+      </div>
+
       <!-- Reorder Labels -->
       <BaseDialog
         v-model="reorderLabelsDialog"
@@ -177,23 +195,6 @@
         </v-card>
       </BaseDialog>
 
-      <!-- Create Item -->
-      <div v-if="createEditorOpen">
-        <ShoppingListItemEditor
-          v-model="createListItemData"
-          class="my-4"
-          :labels="allLabels || []"
-          :units="allUnits || []"
-          :foods="allFoods || []"
-          @delete="createEditorOpen = false"
-          @cancel="createEditorOpen = false"
-          @save="createListItem"
-        />
-      </div>
-      <div v-else class="mt-4 d-flex justify-end">
-        <BaseButton create @click="createEditorOpen = true" > {{ $t('general.add') }} </BaseButton>
-      </div>
-
       <!-- Checked Items -->
       <div v-if="listItems.checked && listItems.checked.length > 0" class="mt-6">
         <div class="d-flex">