playing with meal plan edit dialog

vue3/src/components/dialogs/MealPlanDialog.vue

@@ -0,0 +1,66 @@
+<template>
+    <v-dialog activator="parent" >
+        <template v-slot:default="{ isActive }">
+            <v-card>
+                <v-card-title>Meal Plan Edit</v-card-title>
+                <v-divider></v-divider>
+                <v-card-text>
+                    <v-row>
+                        <v-col cols="12" md="6">
+                            <v-text-field v-model="mealPlan.title" label="Title"></v-text-field>
+                        </v-col>
+                        <v-col cols="12" md="6">
+                            <v-text-field v-model="mealPlan.recipe" label="Recipe"></v-text-field>
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col cols="12" md="6">
+                            {{mealPlan.fromDate}}
+                            <v-text-field v-model="mealPlan.fromDate" type="date" label="Title"></v-text-field>
+
+                        </v-col>
+                        <v-col cols="12" md="6">
+                            <v-text-field v-model="mealPlan.recipe" label="Recipe"></v-text-field>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <template v-slot:actions>
+                    <v-btn
+                        class="ml-auto"
+                        text="Close"
+                        @click="isActive.value = false"
+                    ></v-btn>
+                </template>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import {PropType, ref} from "vue";
+import {MealPlan} from "@/openapi";
+import {DateTime} from "luxon";
+
+const props = defineProps(
+    {
+        mealPlan: {type: Object as PropType<MealPlan>, required: false},
+    }
+)
+
+let mealPlan = ref({} as MealPlan)
+
+if (props.mealPlan != undefined) {
+    mealPlan.value = props.mealPlan
+} else {
+    mealPlan.value = {
+        fromDate: DateTime.now().toJSDate(),
+        toDate: DateTime.now().toJSDate(),
+    } as MealPlan
+}
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/display/HorizontalMealPlanWindow.vue

@@ -19,7 +19,10 @@
                                             {{ mealPlanGridItem.date_label }}
                                         </div>
                                         <div class="align-self-center">
-                                            <v-btn variant="flat" icon="fas fa-plus" size="small"></v-btn>
+                                            <v-btn variant="flat" icon="">
+                                                <i class="fas fa-plus"></i>
+                                                <meal-plan-dialog></meal-plan-dialog>
+                                            </v-btn>
                                         </div>
                                     </div>
 
@@ -37,6 +40,7 @@
                                     <v-list-item-subtitle>
                                         {{ p.mealType.name }}
                                     </v-list-item-subtitle>
+                                    <meal-plan-dialog></meal-plan-dialog>
                                 </v-list-item>
 
                             </v-list>
@@ -57,6 +61,7 @@ import {useDisplay} from "vuetify";
 import {MealPlan, Recipe, RecipeOverview} from "@/openapi";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {DateTime} from "luxon";
+import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
 
 const {mdAndUp} = useDisplay()
 const loading = ref(false)

vue3/src/pages/MealPlanPage.vue

@@ -1,30 +1,6 @@
 <template>
     <v-container>
-        <v-row>
-            <v-col>
-                <v-card>
-                    <v-card-text>
-                        multiple food
-                        <model-select model="Food" allow-create clearable></model-select>
-                        single food
-                        <model-select model="Food" :multiple="false" allow-create clearable></model-select>
-                        multiple keyowrd
-                        <model-select model="Keyword" allow-create clearable></model-select>
 
-                        <v-autocomplete></v-autocomplete>
-                    </v-card-text>
-                </v-card>
-            </v-col>
-        </v-row>
-
-        <v-row>
-            <v-col >
-                <recipe-card :recipe="recipe" ></recipe-card>
-            </v-col>
-            <v-col>
-                <recipe-card :recipe="recipe_not_loaded" :loading="true"></recipe-card>
-            </v-col>
-        </v-row>
     </v-container>
 
 
@@ -42,17 +18,11 @@ export default defineComponent({
     components: {ModelSelect, RecipeCard},
     data() {
         return {
-            recipe: {} as RecipeOverview,
+
-            recipe_not_loaded: {} as RecipeOverview,
         }
     },
     mounted() {
-        const api = new ApiApi()
+
-        api.apiRecipeList({pageSize: 1}).then(r => {
-            if(r.results){
-                this.recipe = r.results[0]
-            }
-        })
     },
 
 })

vue3/src/pages/RecipeSearchPage.vue

@@ -25,11 +25,12 @@ import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeWindo
 import {DateTime} from "luxon";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
 import HorizontalMealPlanWindow from "@/components/display/HorizontalMealPlanWindow.vue";
+import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue";
 
 
 export default defineComponent({
     name: "RecipeSearchPage",
-    components: {HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
+    components: {MealPlanDialog, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
     computed: {
 
         meal_plan_grid: function () {