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 => {

vue3/src/types/Models.ts

@@ -9,9 +9,11 @@ import {
     User as IUser,
     FoodInheritField as IFoodInheritField,
     SupermarketCategory as ISupermarketCategory,
-    PropertyType as IPropertyType,
+    PropertyType as IPropertyType, ApiFoodListRequest, ApiUnitListRequest,
 } from "@/openapi";
 
+export const SUPPORTED_MODELS = ["Food", "Unit"]
+
 export function getModelFromStr(model_name: String) {
     switch (model_name.toLowerCase()) {
         case 'food': {
@@ -53,6 +55,9 @@ export function getModelFromStr(model_name: String) {
  */
 export abstract class GenericModel<T> {
 
+    localizedName: string
+    icon: string
+
     /**
      * override and set to false if model is read only
      */
@@ -81,7 +86,6 @@ export abstract class GenericModel<T> {
     abstract list(query: string): Promise<Array<T>>
 }
 
-//TODO this can probably be achieved by manipulating the client generation https://openapi-generator.tech/docs/templating/#models
 export class Keyword extends GenericModel<IKeyword> {
     create(name: string) {
         const api = new ApiApi()
@@ -100,39 +104,36 @@ export class Keyword extends GenericModel<IKeyword> {
     }
 }
 
+// TODO review this whole file and its usages
 export class Food extends GenericModel<IFood> {
+
+    localizedName = 'Food'
+    icon = 'fa-solid fa-carrot'
+
     create(name: string) {
         const api = new ApiApi()
         return api.apiFoodCreate({food: {name: name} as IFood})
     }
 
-    list(query: string) {
+    list(requestParameters: ApiFoodListRequest = {}) {
         const api = new ApiApi()
-        return api.apiFoodList({query: query}).then(r => {
-            if (r.results) {
-                return r.results
-            } else {
-                return []
-            }
-        })
+        return api.apiFoodList(requestParameters)
     }
 }
 
 export class Unit extends GenericModel<IUnit> {
+
+    localizedName = 'Unit'
+    icon = 'fa-solid fa-scale-balanced'
+
     create(name: string) {
         const api = new ApiApi()
         return api.apiUnitCreate({unit: {name: name} as IUnit})
     }
 
-    list(query: string) {
+    list(requestParameters: ApiUnitListRequest = {}) {
         const api = new ApiApi()
-        return api.apiUnitList({query: query}).then(r => {
-            if (r.results) {
-                return r.results
-            } else {
-                return []
-            }
-        })
+        return api.apiUnitList(requestParameters)
     }
 }