more models and model select with new system

vue3/src/components/dialogs/ModelEditorDialog.vue

@@ -1,18 +1,19 @@
 <template>
     <v-dialog max-width="600" activator="parent" v-model="dialog">
-        <unit-conversion-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.UnitConversion" :disabled-fields="disabledFields"></unit-conversion-editor>
-        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.AccessToken"></access-token-editor>
-        <invite-link-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.InviteLink"></invite-link-editor>
-        <user-space-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.UserSpace"></user-space-editor>
-        <meal-type-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.MealType"></meal-type-editor>
-        <property-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.Property"></property-editor>
+        <unit-conversion-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'UnitConversion'" :disabled-fields="disabledFields"></unit-conversion-editor>
+        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'AccessToken'"></access-token-editor>
+        <invite-link-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'InviteLink'"></invite-link-editor>
+        <user-space-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'UserSpace'"></user-space-editor>
+        <meal-type-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'MealType'"></meal-type-editor>
+        <property-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'Property'"></property-editor>
+        <food-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == 'Food'"></food-editor>
     </v-dialog>
 </template>
 
 <script setup lang="ts">
 
 
-import {ref} from "vue";
+import {PropType, ref} from "vue";
 import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
 import {AccessToken, Food} from "@/openapi";
 import InviteLinkEditor from "@/components/model_editors/InviteLinkEditor.vue";
@@ -20,21 +21,13 @@ import UserSpaceEditor from "@/components/model_editors/UserSpaceEditor.vue";
 import MealTypeEditor from "@/components/model_editors/MealTypeEditor.vue";
 import PropertyEditor from "@/components/model_editors/PropertyEditor.vue";
 import UnitConversionEditor from "@/components/model_editors/UnitConversionEditor.vue";
-
-enum SupportedModels {
-    UnitConversion = 'UnitConversion',
-    AccessToken = 'AccessToken',
-    InviteLink = 'InviteLink',
-    UserSpace = 'UserSpace',
-    MealType = 'MealType',
-    Property = 'Property',
-}
+import FoodEditor from "@/components/model_editors/FoodEditor.vue";
 
 const emit = defineEmits(['create', 'save', 'delete'])
 
 const props = defineProps({
     model: {
-        type: String,
+        type: String as PropType<'UnitConversion' | 'AccessToken'| 'InviteLink' | 'UserSpace' | 'MealType' | 'Property' | 'Food'>,
         required: true,
     },
     item: {default: null},
@@ -46,17 +39,17 @@ const props = defineProps({
 
 const dialog = ref(false)
 
-function createEvent(arg) {
+function createEvent(arg: any) {
     emit('create', arg)
     dialog.value = dialog.value && !props.closeAfterCreate
 }
 
-function saveEvent(arg) {
+function saveEvent(arg: any) {
     emit('save', arg)
     dialog.value = dialog.value && !props.closeAfterSave
 }
 
-function deleteEvent(arg) {
+function deleteEvent(arg: any) {
     emit('delete', arg)
     dialog.value = dialog.value && !props.closeAfterDelete
 }

vue3/src/components/inputs/ModelSelect.vue

@@ -35,7 +35,7 @@
 
 <script lang="ts" setup>
 import {onMounted, PropType, ref} from "vue"
-import {GenericModel, getModelFromStr} from "@/types/Models"
+import {GenericModel, getGenericModelFromString} from "@/types/Models"
 import Multiselect from '@vueform/multiselect'
 import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
 
@@ -81,13 +81,13 @@ const props = defineProps({
 })
 
 const model = defineModel()
-const model_class = ref({} as GenericModel<any>)
+const modelClass = ref({} as GenericModel<any>)
 
 /**
  * create instance of model class when mounted
  */
 onMounted(() => {
-    model_class.value = getModelFromStr(props.model)
+    modelClass.value = getGenericModelFromString(props.model)
 })
 
 /**
@@ -95,8 +95,12 @@ onMounted(() => {
  * @param query input to search for on the API
  */
 function search(query: string) {
-    return model_class.value.list(query).then((r) => {
-        return r
+    return modelClass.value.list({query: query}).then((r) => {
+        if (modelClass.value.model.isPaginated) {
+            return r.results
+        } else {
+            return r
+        }
     }).catch((err) => {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     }).finally(() => {
@@ -111,21 +115,13 @@ function search(query: string) {
  * @param select$ reference to multiselect instance
  */
 async function createObject(object: any, select$: Multiselect) {
-    if (model_class.value.canCreate()) {
-        console.log("CREATING NEW with -> ", object)
-
+    return await modelClass.value.create({name: object[props.itemLabel]}).then((createdObj) => {
+        useMessageStore().addMessage(MessageType.SUCCESS, 'Created', 5000, createdObj)
         emit('create', object)
-
-        return await model_class.value.create(object[props.itemLabel]).then((createdObj) => {
-            useMessageStore().addMessage(MessageType.SUCCESS, 'Created', 5000, createdObj)
-            return createdObj
-        }).catch((err) => {
-            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
-        })
-    } else {
-        console.error('Cannot create using model, should probably set can_create prop to false or fix model ', model_class)
-    }
-
+        return createdObj
+    }).catch((err) => {
+        useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+    })
 }