first shopping items showing

vue3/src/components/display/ShoppingListView.vue

@@ -0,0 +1,62 @@
+<template>
+    <v-tabs v-model="currentTab" grow>
+        <v-tab value="shopping"><i class="fas fa-shopping-cart fa-fw"></i> <span class="d-none d-md-block ms-1">Shopping List</span></v-tab>
+        <v-tab value="recipes"><i class="fas fa-book fa-fw"></i> <span class="d-none d-md-block ms-1">Recipes</span></v-tab>
+    </v-tabs>
+
+    <v-window v-model="currentTab">
+        <v-window-item value="shopping">
+            <v-container>
+
+
+                <v-row>
+                    <v-col>
+                        <v-list lines="two" density="compact">
+
+                            <template v-for="(value, key) in useShoppingStore().getEntriesByGroup.categories.entries()">
+                                <v-list-subheader>{{ value[0] }}</v-list-subheader>
+
+                                <template v-for="item in value[1].foods">
+                           
+                                    <v-list-item>
+                                        {{ item[1].food.name }}
+
+                                        <template v-slot:append>
+                                            <v-btn
+                                                color="success"
+                                                icon="fas fa-check"
+                                                variant="text"
+                                            ></v-btn>
+                                        </template>
+                                    </v-list-item>
+
+                                </template>
+                            </template>
+                        </v-list>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-window-item>
+        <v-window-item value="recipes">
+            Recipes
+        </v-window-item>
+    </v-window>
+
+</template>
+
+<script setup lang="ts">
+
+import {ref} from "vue";
+import {useShoppingStore} from "@/stores/ShoppingStore";
+
+const currentTab = ref("shopping")
+
+const shoppingStore = useShoppingStore()
+
+useShoppingStore().refreshFromAPI()
+
+</script>
+
+<style scoped>
+
+</style>