modified: frontend/pages/shopping-lists/_id.vue

mealie-recipes · Oct 16, 2024 · 1218539 · 1218539
1 parent 1bd3d38
commit 1218539
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
@@ -57,10 +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'">{{ 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
@@ -75,7 +86,9 @@
                 @delete="deleteListItem(item)"
               />
             </v-lazy>
-          </draggable>
+            </draggable>
+          </div>
+        </v-expand-transition>
         </div>
       </div>
 
@@ -285,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";
@@ -446,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);
 
     // =====================================
@@ -1073,6 +1119,8 @@ export default defineComponent({
       shoppingList,
       showChecked,
       sortByLabels,
+      labelOpenState,
+      toggleShowLabel,
       toggleShowChecked,
       uncheckAll,
       openUncheckAll,