playing with display

vue3/src/components/dialogs/ShoppingLineItemDialog.vue

@@ -80,7 +80,7 @@
                                 {{ $t('PostponedUntil') }} {{ DateTime.fromJSDate(e.delayUntil!).toLocaleString(DateTime.DATETIME_SHORT) }}
                             </v-list-item-subtitle>
                             <v-list-item-subtitle v-if="e.shoppingLists.length > 0" class="text-info font-weight-bold">
-                                <v-chip v-for="sl in e.shoppingLists" label size="x-small" variant="outlined" :color="sl.color" :key="sl.id">{{sl.name}}</v-chip>
+                                <shopping-lists-bar :shopping-lists="e.shoppingLists"></shopping-lists-bar>
                             </v-list-item-subtitle>
 
                             <v-btn-group divided border>
@@ -139,6 +139,7 @@ import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import {useShoppingStore} from "@/stores/ShoppingStore";
 import {isDelayed, isShoppingListFoodDelayed} from "@/utils/logic_utils";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import ShoppingListsBar from "@/components/display/ShoppingListsBar.vue";
 
 const {mobile} = useDisplay()
 

vue3/src/components/display/ShoppingLineItem.vue

@@ -62,6 +62,7 @@ import {IShoppingListFood, ShoppingLineAmount} from "@/types/Shopping";
 import {isDelayed, isEntryVisible, isShoppingListFoodDelayed, isShoppingListFoodVisible} from "@/utils/logic_utils";
 import ShoppingLineItemDialog from "@/components/dialogs/ShoppingLineItemDialog.vue";
 import {pluralString} from "@/utils/model_utils.ts";
+import ShoppingListsBar from "@/components/display/ShoppingListsBar.vue";
 
 const emit = defineEmits(['clicked'])
 

vue3/src/components/display/ShoppingListView.vue

@@ -79,15 +79,37 @@
     <v-window v-model="currentTab">
         <v-window-item value="shopping">
             <v-container>
+<!--                <v-row class="pa-0" dense>-->
+<!--                    <v-col class="pa-0">-->
+<!--                        <v-chip-group v-model="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket" v-if="supermarkets.length > 0">-->
+<!--                            <v-chip v-for="s in supermarkets" :value="s" :key="s.id" label density="compact" variant="outlined" color="primary">{{ s.name }}</v-chip>-->
+<!--                        </v-chip-group>-->
+<!--                    </v-col>-->
+<!--                </v-row>-->
+
                 <v-row class="pa-0" dense>
-                    <v-col class="pa-0">
-                        <v-chip-group v-model="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket" v-if="supermarkets.length > 0">
-                            <v-chip v-for="s in supermarkets" :value="s" :key="s.id" label density="compact" variant="outlined" color="primary">{{ s.name }}</v-chip>
-                        </v-chip-group>
+                    <v-col class="pa-0" cols="6">
+
+                        <v-chip label density="compact" variant="outlined" :prepend-icon="TSupermarket.icon" append-icon="fa-solid fa-caret-down">
+                            <template v-if="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket != null">
+                                {{useUserPreferenceStore().deviceSettings.shopping_selected_supermarket.name}}
+                            </template>
+                            <template v-else>{{ $t('Supermarket') }}</template>
+
+                            <v-menu activator="parent">
+                                <v-list density="compact">
+                                    <v-list-item v-for="s in supermarkets" :key="s.id" @click="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket = s">
+                                        {{ s.name }}
+                                    </v-list-item>
+                                </v-list>
+                            </v-menu>
+                        </v-chip>
+
+
                     </v-col>
                 </v-row>
 
-                <v-row>
+                <v-row class="mt-0">
                     <v-col>
                         <v-alert v-if="useShoppingStore().hasFailedItems()" color="warning" class="mb-2">
                             <template #prepend>
@@ -265,6 +287,7 @@ import {onBeforeRouteLeave} from "vue-router";
 import {isShoppingCategoryVisible} from "@/utils/logic_utils.ts";
 import ShoppingExportDialog from "@/components/dialogs/ShoppingExportDialog.vue";
 import AddToShoppingDialog from "@/components/dialogs/AddToShoppingDialog.vue";
+import {TSupermarket} from "@/types/Models.ts";
 
 const {t} = useI18n()
 

vue3/src/components/display/ShoppingListsBar.vue

@@ -0,0 +1,27 @@
+<template>
+    <div v-if="props.shoppingLists">
+        <slot name="prepend"></slot>
+
+        <v-chip class="me-1 mb-1" :color="shoppingList.color" :size="props.size" :variant="props.variant" label v-for="shoppingList in props.shoppingLists">
+            {{ shoppingList.name }}
+        </v-chip>
+
+        <slot name="append"></slot>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+
+import {Keyword, KeywordLabel, ShoppingList} from "@/openapi";
+import {computed, PropType} from "vue";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore.ts";
+
+const props = defineProps({
+    shoppingLists: Array as PropType<Array<ShoppingList> | undefined>,
+    size: {type: String, default: 'x-small'},
+    variant: {type: String as PropType<NonNullable<"tonal" | "flat" | "text" | "elevated" | "outlined" | "plain"> | undefined>, default: 'outlined'},
+})
+
+
+</script>