From 545d5388ade9709dfbe3771475dc53d5c7733c61 Mon Sep 17 00:00:00 2001
From: Wetzel402 <wetzelredistribution@gmail.com>
Date: Mon, 21 Oct 2024 14:40:56 +0000
Subject: [PATCH 1/4] 	modified:   frontend/pages/shopping-lists/_id.vue

---
 frontend/pages/shopping-lists/_id.vue | 72 ++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 17 deletions(-)

diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 8b5d0656133..ba037c457d6 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -57,18 +57,21 @@
       <!-- View By Label -->
       <div v-else>
         <div v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
-          <div class="text-left">
-            <v-btn
-              :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'"
-              :style="{
-                'color': getTextColor(getLabelColor(value[0])),
-                'letter-spacing': 'normal',
-              }"
-            >
-              {{ key }}
-          </v-btn>
-          </div>
-          <v-divider/>
+          <span>
+            <div class="text-left">
+              <button @click="toggleShowLabel(key)">
+                <v-btn :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'">
+                  <v-icon>
+                    {{ labelOpenState[key] ? $globals.icons.chevronDown : $globals.icons.chevronRight }}
+                  </v-icon>
+                  {{ key }}
+                </v-btn>
+              </button>
+            </div>
+          </span>
+        <v-divider/>
+        <v-expand-transition group>
+          <div v-show="labelOpenState[key]">
           <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
             <v-lazy v-for="(item, index) in value" :key="item.id" class="ml-2 my-2">
               <ShoppingListItem
@@ -83,7 +86,9 @@
                 @delete="deleteListItem(item)"
               />
             </v-lazy>
-          </draggable>
+            </draggable>
+          </div>
+        </v-expand-transition>
         </div>
       </div>
 
@@ -293,7 +298,7 @@
 <script lang="ts">
 import draggable from "vuedraggable";
 
-import { defineComponent, useRoute, computed, ref, toRefs, onUnmounted, useContext, reactive } from "@nuxtjs/composition-api";
+import { defineComponent, useRoute, computed, ref, toRefs, onUnmounted, useContext, reactive, watch } from "@nuxtjs/composition-api";
 import { useIdle, useToggle } from "@vueuse/core";
 import { useCopyList } from "~/composables/use-copy";
 import { useUserApi } from "~/composables/api";
@@ -306,7 +311,6 @@ import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingLis
 import { useFoodStore, useLabelStore, useUnitStore } from "~/composables/store";
 import { useShoppingListItemActions } from "~/composables/use-shopping-list-item-actions";
 import { useShoppingListPreferences } from "~/composables/use-users/preferences";
-import { getTextColor } from "~/composables/use-text-color";
 import { uuid4 } from "~/composables/use-utils";
 
 type CopyTypes = "plain" | "markdown";
@@ -455,6 +459,39 @@ export default defineComponent({
       };
     });
 
+    // =====================================
+    // Collapsables
+    const labelOpenState = ref<{ [key: string]: boolean }>({});
+
+    const initializeLabelOpenStates = () => {
+      if (!shoppingList.value?.listItems) return;
+
+      const existingLabels = new Set(Object.keys(labelOpenState.value));
+      let hasChanges = false;
+
+      for (const item of shoppingList.value.listItems) {
+        const labelName = item.label?.name;
+        if (labelName && !existingLabels.has(labelName) && !(labelName in labelOpenState.value)) {
+          labelOpenState.value[labelName] = true;
+          hasChanges = true;
+        }
+      }
+
+      if (hasChanges) {
+        labelOpenState.value = { ...labelOpenState.value };
+      }
+    };
+
+    const labelNames = computed(() =>
+      new Set(shoppingList.value?.listItems?.map(item => item.label?.name).filter(Boolean) ?? [])
+    );
+
+    watch(labelNames, initializeLabelOpenStates, { immediate: true });
+
+    function toggleShowLabel(key: string) {
+      labelOpenState.value[key] = !labelOpenState.value[key];
+    }
+
     const [showChecked, toggleShowChecked] = useToggle(false);
 
     // =====================================
@@ -1025,7 +1062,7 @@ export default defineComponent({
       }
 
       // update current user
-      allUsers.value = data.items.sort((a, b) => ((a.fullName || "") < (b.fullName || "") ? -1 : 1));
+      allUsers.value = data.sort((a, b) => ((a.fullName || "") < (b.fullName || "") ? -1 : 1));
       currentUserId.value = shoppingList.value?.userId;
     }
 
@@ -1082,6 +1119,8 @@ export default defineComponent({
       shoppingList,
       showChecked,
       sortByLabels,
+      labelOpenState,
+      toggleShowLabel,
       toggleShowChecked,
       uncheckAll,
       openUncheckAll,
@@ -1094,7 +1133,6 @@ export default defineComponent({
       allUsers,
       currentUserId,
       updateSettings,
-      getTextColor,
     };
   },
   head() {

From 86bc5d0a9b6d0b3510b7ee56b975e44eb0585f33 Mon Sep 17 00:00:00 2001
From: Cody <wetzelredistribution@gmail.com>
Date: Tue, 22 Oct 2024 10:29:44 -0500
Subject: [PATCH 2/4] Update frontend/pages/shopping-lists/_id.vue

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
---
 frontend/pages/shopping-lists/_id.vue | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index ba037c457d6..d99a970a777 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -57,18 +57,15 @@
       <!-- View By Label -->
       <div v-else>
         <div v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
-          <span>
-            <div class="text-left">
-              <button @click="toggleShowLabel(key)">
-                <v-btn :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'">
-                  <v-icon>
-                    {{ labelOpenState[key] ? $globals.icons.chevronDown : $globals.icons.chevronRight }}
-                  </v-icon>
-                  {{ key }}
-                </v-btn>
-              </button>
-            </div>
-          </span>
+          <v-btn 
+            :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'"
+            @click="toggleShowLabel(key)"
+          >
+            <v-icon>
+              {{ labelOpenState[key] ? $globals.icons.chevronDown : $globals.icons.chevronRight }}
+            </v-icon>
+            {{ key }}
+          </v-btn>
         <v-divider/>
         <v-expand-transition group>
           <div v-show="labelOpenState[key]">

From 719c6d1f62ea78c79f8f33086d0ed61f080b34e6 Mon Sep 17 00:00:00 2001
From: Cody <wetzelredistribution@gmail.com>
Date: Tue, 22 Oct 2024 11:04:28 -0500
Subject: [PATCH 3/4] Update _id.vue

---
 frontend/pages/shopping-lists/_id.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index d99a970a777..d8f4f0656df 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -57,8 +57,12 @@
       <!-- View By Label -->
       <div v-else>
         <div v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
-          <v-btn 
+          <v-btn
             :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'"
+            :style="{
+                'color': getTextColor(getLabelColor(value[0])),
+                'letter-spacing': 'normal',
+              }"
             @click="toggleShowLabel(key)"
           >
             <v-icon>
@@ -308,6 +312,7 @@ import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingLis
 import { useFoodStore, useLabelStore, useUnitStore } from "~/composables/store";
 import { useShoppingListItemActions } from "~/composables/use-shopping-list-item-actions";
 import { useShoppingListPreferences } from "~/composables/use-users/preferences";
+import { getTextColor } from "~/composables/use-text-color";
 import { uuid4 } from "~/composables/use-utils";
 
 type CopyTypes = "plain" | "markdown";
@@ -1130,6 +1135,7 @@ export default defineComponent({
       allUsers,
       currentUserId,
       updateSettings,
+      getTextColor,
     };
   },
   head() {

From 0ad9693fa6876810b670daada18b30ce3395e157 Mon Sep 17 00:00:00 2001
From: Cody <wetzelredistribution@gmail.com>
Date: Thu, 24 Oct 2024 10:05:12 -0500
Subject: [PATCH 4/4] Update _id.vue

---
 frontend/pages/shopping-lists/_id.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index d8f4f0656df..251b13ce674 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -1064,7 +1064,7 @@ export default defineComponent({
       }
 
       // update current user
-      allUsers.value = data.sort((a, b) => ((a.fullName || "") < (b.fullName || "") ? -1 : 1));
+      allUsers.value = data.items.sort((a, b) => ((a.fullName || "") < (b.fullName || "") ? -1 : 1));
       currentUserId.value = shoppingList.value?.userId;
     }