WIP model list page, broke models system

vue3/src/pages/ModelListPage.vue

@@ -2,6 +2,29 @@
     <v-container>
         <v-row>
             <v-col>
+                <span class="text-h4">
+                    <v-btn icon="fa-solid fa-caret-down" variant="tonal">
+                        <i class="fa-solid fa-caret-down"></i>
+                        <v-menu activator="parent">
+                            <v-list>
+
+                                <v-list-item v-for="model in supportedModels"
+                                             :to="{name: 'ModelListPage', params: {model: model}}"
+                                >
+                                     <template #prepend><v-icon :icon="model.icon"></v-icon> </template>
+                                     {{ $t(model.localizedName) }}
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </v-btn>
+                    <v-icon :icon="modelClass.icon"></v-icon>
+                    {{ $t(modelClass.localizedName) }}</span>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col>
+
+
                 <v-text-field prepend-inner-icon="$search" :label="$t('Search')" v-model="searchQuery"></v-text-field>
                 <v-data-table-server
                     @update:options="loadItems"
@@ -14,9 +37,11 @@
                     :items-per-page-options="itemsPerPageOptions"
                     :show-select="tableShowSelect"
                 >
-                <template v-slot:item.action="{ item }">
-                    <v-btn color="edit" :to="{name: 'ModelEditPage', params: {id: item.id}}"><v-icon icon="$edit"></v-icon></v-btn>
-                </template>
+                    <template v-slot:item.action="{ item }">
+                        <v-btn color="edit" :to="{name: 'ModelEditPage', params: {model: model, id: item.id}}">
+                            <v-icon icon="$edit"></v-icon>
+                        </v-btn>
+                    </template>
                 </v-data-table-server>
             </v-col>
         </v-row>
@@ -28,10 +53,12 @@
 
 <script setup lang="ts">
 
-import {ApiApi, Food} from "@/openapi";
-import {ref} from "vue";
+
+import {onBeforeMount, onMounted, ref, watch} from "vue";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {useI18n} from "vue-i18n";
+import {Food, GenericModel, getModelFromStr, SUPPORTED_MODELS, Unit} from "@/types/Models";
+import {ca} from "vuetify/locale";
 
 const {t} = useI18n()
 
@@ -56,14 +83,38 @@ const tableShowSelect = ref(true)
 
 // data
 const loading = ref(false);
-const items = ref([] as Food[])
+const items = ref([] as Array<any>)
 const itemCount = ref(0)
 const searchQuery = ref('')
 
+const modelClass = ref({} as GenericModel<any>)
+const supportedModels = ref([
+    new Food, new Unit
+])
+
+// watch for changes to the prop in case its changed
+watch(() => props.model, () => {
+    console.log('loading model ', props.model)
+    modelClass.value = getModelFromStr(props.model)
+    loadItems({page: 1, itemsPerPage: 10})
+})
+
+/**
+ * select model class before mount because template renders (and requests item load) before onMounted is called
+ */
+onBeforeMount(() => {
+    try {
+        modelClass.value = getModelFromStr(props.model)
+    } catch (Error) {
+        console.error('Invalid model passed to ModelListPage, loading Food instead')
+        modelClass.value = getModelFromStr('Food')
+    }
+})
+
 function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
-    const api = new ApiApi()
     loading.value = true
-    api.apiFoodList({page: page, pageSize: itemsPerPage, query: search}).then(r => {
+
+    modelClass.value.list({page: page, pageSize: itemsPerPage, query: search}).then(r => {
         items.value = r.results
         itemCount.value = r.count
     }).catch(err => {