From 1692230f0187f71c20abe2763dddb5377bcb861e Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 14 Jan 2024 12:04:52 +0800
Subject: [PATCH] swiping working for all items

---
 vue/src/apps/ShoppingListView/ShoppingListView.vue |  8 +++++---
 vue/src/components/ShoppingLineItem.vue            | 11 +++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 6541dba7..fd5c458b 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -400,10 +400,11 @@
 
         <bottom-navigation-bar active-view="view_shopping">
             <template #custom_nav_content v-if="current_tab <= 1">
-                <div class="d-flex flex-row justify-content-around mb-3">
+                <b-row class="pr-1 pl-1 mb-3">
+                    <b-col cols="12">
+                          <template v-if="current_tab===0">
 
 
-                    <template v-if="current_tab===0">
                         <b-input-group>
                             <b-form-input v-model="new_item.ingredient" :placeholder="$t('Food')"
                                           @keyup.enter="addItem"></b-form-input>
@@ -422,8 +423,9 @@
                         ></generic-multiselect>
                     </template>
 
+                    </b-col>
+                </b-row>
 
-                </div>
             </template>
 
             <template #custom_create_functions>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index a5560f6a..911b1a3e 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="shopping_line_item" class="swipe-container" @touchend="handleSwipe()"
+    <div class="swipe-container" :id="item_container_id" @touchend="handleSwipe()"
          v-if="(useUserPreferenceStore().device_settings.shopping_show_checked_entries || !is_checked) && (useUserPreferenceStore().device_settings.shopping_show_delayed_entries || !is_delayed)"
     >
         <div class="swipe-action" :class="{'bg-success': !is_checked , 'bg-warning': is_checked }">
@@ -141,6 +141,13 @@ export default {
         }
     },
     computed: {
+        item_container_id: function () {
+            let id = 'id_sli_'
+            for (let i in this.entries) {
+                id += i + '_'
+            }
+            return id
+        },
         is_checked: function () {
             for (let i in this.entries) {
                 if (!this.entries[i].checked) {
@@ -272,7 +279,7 @@ export default {
          */
         handleSwipe: function () {
             const minDistance = 80;
-            const container = document.querySelector('.swipe-container');
+            const container = document.querySelector('#' + this.item_container_id);
             // get the distance the user swiped
             const swipeDistance = container.scrollLeft - container.clientWidth;
             if (swipeDistance < minDistance * -1) {