improved meal plan editor shopping integration

vue3/src/components/dialogs/AddToShoppingDialog.vue

@@ -27,10 +27,10 @@
                         </v-expansion-panel-text>
                     </v-expansion-panel>
                 </v-expansion-panels>
-                <v-number-input v-model="servings" class="mt-3" control-variant="split" :label="$t('Servings')" :precision="2"></v-number-input>
+                <v-number-input v-model="servings" class="mt-3" control-variant="split" :label="$t('Servings')" :precision="2" :disabled="loading"></v-number-input>
             </v-card-text>
             <v-card-actions>
-                <v-btn class="float-right" prepend-icon="$create" color="create" @click="createShoppingListRecipe()">{{ $t('Add_to_Shopping') }}</v-btn>
+                <v-btn class="float-right" prepend-icon="$create" color="create" @click="createShoppingListRecipe()" :disabled="loading">{{ $t('Add_to_Shopping') }}</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -40,7 +40,7 @@
 
 import {computed, onMounted, PropType, ref} from "vue";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
-import {ApiApi, Recipe, RecipeFlat, RecipeOverview, type ShoppingListEntryBulkCreate, ShoppingListRecipe} from "@/openapi";
+import {ApiApi, MealPlan, Recipe, RecipeFlat, RecipeOverview, type ShoppingListEntryBulkCreate, ShoppingListRecipe} from "@/openapi";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {ShoppingDialogRecipe, ShoppingDialogRecipeEntry} from "@/types/Shopping";
 import {calculateFoodAmount} from "@/utils/number_utils";
@@ -51,6 +51,7 @@ const emit = defineEmits(['created'])
 
 const props = defineProps({
     recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true},
+    mealPlan: {type: Object as PropType<MealPlan>, required: false},
 })
 
 const dialog = ref(false)
@@ -77,6 +78,7 @@ onMounted(() => {
 function loadRecipeData() {
     let api = new ApiApi()
     let promises: Promise<any>[] = []
+    loading.value = true
 
     let recipeRequest = api.apiRecipeRetrieve({id: props.recipe.id!}).then(r => {
         recipe.value = r
@@ -108,7 +110,7 @@ function loadRecipeData() {
 
                 recipe.steps.forEach(step => {
                     step.ingredients.forEach(ingredient => {
-                        if(!ingredient.isHeader){
+                        if (!ingredient.isHeader) {
                             dialogRecipe.entries.push({
                                 amount: ingredient.amount,
                                 food: ingredient.food,
@@ -138,6 +140,10 @@ function createShoppingListRecipe() {
         servings: servings.value,
     } as ShoppingListRecipe
 
+    if (props.mealPlan && props.mealPlan.id) {
+        shoppingListRecipe.mealplan = props.mealPlan.id!
+    }
+
     let shoppingListEntries = {
         entries: []
     } as ShoppingListEntryBulkCreate

vue3/src/components/display/MealPlanView.vue

@@ -82,7 +82,7 @@ const planItems = computed(() => {
             startDate.setHours(hour, minutes, seconds)
             endDate.setHours(hour, minutes, seconds)
         }
-        console.log(startDate, endDate)
+
         items.push({
             startDate: startDate,
             endDate: endDate,

vue3/src/components/display/RecipeImage.vue

@@ -29,10 +29,6 @@ const image = computed(() => {
     }
 })
 
-watch(() => props.recipe, () => {
-    console.log('changed')
-})
-
 </script>
 
 <style scoped>

vue3/src/components/model_editors/MealPlanEditor.vue

@@ -23,6 +23,19 @@
                     <v-form :disabled="loading">
 
                         <v-row>
+                            <v-col cols="12" md="6">
+                                <ModelSelect model="Recipe" v-model="editingObj.recipe"
+                                             @update:modelValue="editingObj.servings = editingObj.recipe ? editingObj.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="editingObj.recipe" v-if="editingObj && editingObj.recipe"></recipe-card>
+                                <v-btn prepend-icon="$shopping" color="create" class="mt-1" v-if="!editingObj.shopping && editingObj.recipe && isUpdate()">
+                                    {{$t('Add')}}
+                                    <add-to-shopping-dialog :recipe="editingObj.recipe" :meal-plan="editingObj" @created="loadShoppingListEntries(); editingObj.shopping = true;"></add-to-shopping-dialog>
+                                </v-btn>
+
+                                <v-checkbox :label="$t('AddToShopping')" v-model="editingObj.addshopping" hide-details v-if="editingObj.recipe && !isUpdate()"></v-checkbox>
+                            </v-col>
                             <v-col cols="12" md="6">
                                 <v-text-field :label="$t('Title')" v-model="editingObj.title"></v-text-field>
                                 <v-date-input
@@ -51,16 +64,7 @@
                                 <v-number-input control-variant="split" :min="0" v-model="editingObj.servings" :label="$t('Servings')" :precision="2"></v-number-input>
                                 <ModelSelect model="User" :allow-create="false" v-model="editingObj.shared" item-label="displayName" mode="tags"></ModelSelect>
                             </v-col>
-                            <v-col cols="12" md="6">
-                                <ModelSelect model="Recipe" v-model="editingObj.recipe"
-                                             @update:modelValue="editingObj.servings = editingObj.recipe ? editingObj.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="editingObj.recipe" v-if="editingObj && editingObj.recipe"></recipe-card>
 
-                                <v-checkbox :label="$t('AddToShopping')" v-model="editingObj.addshopping" hide-details v-if="editingObj.recipe && !isUpdate()"></v-checkbox>
-                                <!-- TODO review shopping before add -->
-                            </v-col>
                         </v-row>
                         <v-row dense>
                             <v-col cols="12">
@@ -112,6 +116,7 @@ import {useShoppingStore} from "@/stores/ShoppingStore";
 import ShoppingListEntryInput from "@/components/inputs/ShoppingListEntryInput.vue";
 import ClosableHelpAlert from "@/components/display/ClosableHelpAlert.vue";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
+import AddToShoppingDialog from "@/components/dialogs/AddToShoppingDialog.vue";
 
 const props = defineProps({
     item: {type: {} as PropType<MealPlan>, required: false, default: null},