meal plan dialog

vue3/package.json

@@ -21,7 +21,7 @@
     "vue-router": "4",
     "vue-simple-calendar": "^7.1.0",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.13"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",

vue3/src/components/dialogs/MealPlanDialog.vue

@@ -11,6 +11,9 @@
                         <v-row>
                             <v-col cols="12" md="6">
                                 <v-text-field label="Title" v-model="mutableMealPlan.title"></v-text-field>
+                                {{mutableMealPlan.fromDate}}
+                                {{mutableMealPlan.toDate}}
+                                {{ dateRangeValue}}
                                 <v-date-input
                                     v-model="dateRangeValue"
                                     label="Plan Date"
@@ -19,12 +22,11 @@
                                     prepend-inner-icon="$calendar"
                                 ></v-date-input>
                                 <ModelSelect model="MealType" :allow-create="true" v-model="mutableMealPlan.mealType"></ModelSelect>
-                                <v-number-input control-variant="split" :min="0" v-model="mutableMealPlan.servings"></v-number-input>
-                                <v-text-field label="Share" v-model="mutableMealPlan.shared"></v-text-field>
-                                <ModelSelect model="User" :allow-create="false" v-model="mutableMealPlan.shared"></ModelSelect>
+                                <v-number-input control-variant="split" :min="0" v-model="mutableMealPlan.servings" label="Servings"></v-number-input>
+                                <ModelSelect model="User" :allow-create="false" v-model="mutableMealPlan.shared" item-label="displayName" mode="tags"></ModelSelect>
                             </v-col>
                             <v-col cols="12" md="6">
-                                <ModelSelect model="recipe" v-model="mutableMealPlan.recipe"></ModelSelect>
+                                <ModelSelect model="recipe" v-model="mutableMealPlan.recipe" @update:modelValue="mutableMealPlan.servings = mutableMealPlan.recipe?.servings ? mutableMealPlan.recipe?.servings : 1"></ModelSelect>
                                 <!--                                <v-number-input label="Days" control-variant="split" :min="1"></v-number-input>--> <!--TODO create days input with +/- synced to date -->
                                 <recipe-card :recipe="mutableMealPlan.recipe" v-if="mutableMealPlan && mutableMealPlan.recipe"></recipe-card>
                             </v-col>
@@ -78,6 +80,7 @@ if (props.mealPlan != undefined) {
 watchEffect(() => {
     if (props.mealPlan != undefined) {
         mutableMealPlan.value = props.mealPlan
+        console.log('chjaning range')
         dateRangeValue.value.push(mutableMealPlan.value.fromDate)
         dateRangeValue.value.push(mutableMealPlan.value.toDate)
     } else {

vue3/src/components/inputs/ModelSelect.vue

@@ -3,6 +3,7 @@
 
         <!--TODO resolve-on-load false for now, race condition with model class, make prop once better solution is found -->
         <!-- TODO strange behavior/layering issues with appendTo body, find soltion to make it work -->
+
         <Multiselect
             :id="id"
             class="material-multiselect z-max"
@@ -101,16 +102,21 @@ function search(query: string) {
  * @param select$ reference to multiselect instance
  */
 async function createObject(object: any, select$: Multiselect) {
-    console.log("CREATING NEW with -> ", object)
+    if (model_class.value.canCreate()) {
+        console.log("CREATING NEW with -> ", object)
 
-    emit('create', object)
+        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 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)
-    })
 }
 
 

vue3/src/types/Models.ts

@@ -26,10 +26,38 @@ export function getModelFromStr(model_name: String) {
     }
 }
 
+/**
+ * Generic model used for generic model selects/requests
+ * TODO should be somehow automatically created in the model but for now this works
+ */
 export abstract class GenericModel<T> {
-    abstract list(query: string): Promise<Array<T>>
 
-    abstract create(name: string): Promise<T>
+    /**
+     * override and set to false if model is read only
+     */
+    canCreate(): boolean {
+        return true
+    }
+
+    /**
+     * create a new instance of a given model
+     * do not override on models that cannot create
+     * @param name value for field name
+     */
+    create(name: string): Promise<T> {
+        if (!this.canCreate()) {
+            throw new Error('Cannot create on this model!')
+        }
+        return new Promise(() => {
+            return undefined
+        })
+    };
+
+    /**
+     * retrieves instances of given model with given query from DB
+     * @param query value for standard query parameter of endpoint
+     */
+    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
@@ -128,11 +156,10 @@ export class MealType extends GenericModel<IMealType> {
 }
 
 export class User extends GenericModel<IUser> {
-    create(name: string) {
-        return new Promise<undefined>( () => {
-            return undefined
-        })
-     }
+
+    canCreate(): boolean {
+        return false
+    }
 
     list(query: string) {
         const api = new ApiApi()

vue3/yarn.lock

@@ -1121,10 +1121,10 @@ vuedraggable@^4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vuetify@^3.6.11:
-  version "3.6.11"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.6.11.tgz#98c18afbe0abccf7bf4a29fc7de2a06630ad5726"
-  integrity sha512-DMreVZ6+WCVnvRoFVPGtC+Kc4afx+etcTLgX2AqUj6lQ4RrEx0TlQoNAW1oKPH4eViv2wfdvQ3xb/Yw1c86cTw==
+vuetify@^3.6.13:
+  version "3.6.13"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.6.13.tgz#e875b99e2a8874bb456eb10dbda6a8de7a144c90"
+  integrity sha512-Gz7jxXAkmff2m6CM0EUWOo/72TM322/3I6aDna++k1nPOW1/hNx4td1MZG4u75fzdn3r+uIe0dbF7SWuhu6DWA==
 
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"