changed model list navigation

vue3/src/components/display/DatabaseLinkCol.vue

@@ -0,0 +1,32 @@
+<template>
+    <v-col cols="12" md="6" lg="4">
+        <v-card :prepend-icon="props.prependIcon" :title="props.title" :subtitle="props.subtitle" variant="outlined" elevation="1"
+                :to="props.to"
+                append-icon="fa-solid fa-arrow-right">
+        </v-card>
+    </v-col>
+</template>
+
+<script setup lang="ts">
+
+import {EditorSupportedModels, GenericModel, getGenericModelFromString} from "@/types/Models.ts";
+import {onBeforeMount, PropType, ref, watch} from "vue";
+import {useI18n} from "vue-i18n";
+import type { RouteLocationRaw } from 'vue-router';
+
+const {t} = useI18n()
+
+const props = defineProps({
+    prependIcon: {type: String, default: ''},
+    title: {type: String, default: ''},
+    subtitle: {type: String, default: ''},
+    to: {type: {} as PropType<RouteLocationRaw>  }
+})
+
+
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/components/display/DatabaseModelCol.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-col cols="12" md="6" lg="4">
+        <v-card :prepend-icon="genericModel.model.icon" :title="$t(genericModel.model.localizationKey)" :subtitle="$t(genericModel.model.localizationKeyDescription)" variant="outlined" elevation="1"
+                :to="{name: 'ModelListPage', params: {model: genericModel.model.name}}"
+                append-icon="fa-solid fa-arrow-right">
+        </v-card>
+    </v-col>
+</template>
+
+<script setup lang="ts">
+
+import {EditorSupportedModels, GenericModel, getGenericModelFromString} from "@/types/Models.ts";
+import {onBeforeMount, PropType, ref, watch} from "vue";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+
+const props = defineProps({
+    model: {
+        type: String as PropType<EditorSupportedModels>,
+        default: 'food'
+    },
+})
+
+const genericModel = ref({} as GenericModel)
+
+watch(() => props.model, (newValue, oldValue) => {
+    if (newValue != oldValue) {
+        genericModel.value = getGenericModelFromString(props.model, t)
+    }
+})
+
+/**
+ * select model class before mount because template renders before onMounted is called
+ */
+onBeforeMount(() => {
+    try {
+        genericModel.value = getGenericModelFromString(props.model, t)
+    } catch (Error) {
+        console.error('Invalid model passed to ModelListPage, loading Food instead')
+        genericModel.value = getGenericModelFromString('Food', t)
+    }
+})
+
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/components/display/NavigationDrawerContextMenu.vue

@@ -1,15 +1,15 @@
 <template>
 
-    <template v-if="route.name == 'ModelListPage'">
-        <v-divider></v-divider>
-        <v-list-item v-for="m in getListModels()"
-                     :to="{ name: 'ModelListPage', params: {model: m.name.toLowerCase()} }">
-            <template #prepend>
-                <v-icon :icon="m.icon"></v-icon>
-            </template>
-            {{ $t(m.localizationKey) }}
-        </v-list-item>
-    </template>
+<!--    <template v-if="route.name == 'ModelListPage'">-->
+<!--        <v-divider></v-divider>-->
+<!--        <v-list-item v-for="m in getListModels()"-->
+<!--                     :to="{ name: 'ModelListPage', params: {model: m.name.toLowerCase()} }">-->
+<!--            <template #prepend>-->
+<!--                <v-icon :icon="m.icon"></v-icon>-->
+<!--            </template>-->
+<!--            {{ $t(m.localizationKey) }}-->
+<!--        </v-list-item>-->
+<!--    </template>-->
 
     <template v-if="route.name == 'MealPlanPage'">
         <v-divider></v-divider>