recipes/vue3/src/components/dialogs/MealPlanDialog.vue

<template>
    <v-dialog activator="parent" v-model="dialog" max-width="1200">
        <template v-slot:default="{ isActive }">
            <v-card style="overflow: auto">
                <v-card-title>Meal Plan Edit
                    <v-btn icon="fas fa-times" variant="flat" size="x-small" class="mt-2 float-right " @click="isActive.value = false"></v-btn>
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text>
                    <v-form>
                        <v-row>
                            <v-col cols="12" md="6">
                                <v-text-field label="Title" v-model="mutableMealPlan.title"></v-text-field>
                                <v-date-input
                                    v-model="dateRangeValue"
                                    label="Plan Date"
                                    multiple="range"
                                    prepend-icon=""
                                    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-col>
                            <v-col cols="12" md="6">
                                <ModelSelect model="recipe" v-model="mutableMealPlan.recipe"></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>
                        </v-row>
                        <v-row>
                            <v-col>
                                <v-textarea label="Note" v-model="mutableMealPlan.note"></v-textarea>
                            </v-col>
                        </v-row>
                    </v-form>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-btn color="error" @click="useMealPlanStore().deleteObject(mutableMealPlan); dialog = false">
                        Delete
                    </v-btn>
                    <v-btn color="success" class="ml-auto" @click="saveMealPlan">
                        Save
                    </v-btn>
                </v-card-actions>
            </v-card>
        </template>
    </v-dialog>
</template>

<script setup lang="ts">
import {onMounted, PropType, ref, watchEffect} from "vue";
import {ApiApi, MealPlan, RecipeOverview} from "@/openapi";
import {DateTime} from "luxon";
import RecipeCard from "@/components/display/RecipeCard.vue";
import {useMealPlanStore} from "@/stores/MealPlanStore";
import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {useMessageStore} from "@/stores/MessageStore";

const props = defineProps(
    {
        mealPlan: {type: Object as PropType<MealPlan>, required: false},
    }
)

const dialog = ref(false)
let mutableMealPlan = ref(newMealPlan())
const dateRangeValue = ref([] as Date[])

if (props.mealPlan != undefined) {
    mutableMealPlan.value = props.mealPlan
}

watchEffect(() => {
    if (props.mealPlan != undefined) {
        mutableMealPlan.value = props.mealPlan
        dateRangeValue.value.push(mutableMealPlan.value.fromDate)
        dateRangeValue.value.push(mutableMealPlan.value.toDate)
    } else {
        mutableMealPlan.value = newMealPlan()
    }
});

function saveMealPlan() {

    if (mutableMealPlan.value != undefined) {
        mutableMealPlan.value.recipe = mutableMealPlan.value.recipe as RecipeOverview
        if (dateRangeValue.value != null) {
            mutableMealPlan.value.fromDate = dateRangeValue.value[0]
            mutableMealPlan.value.toDate = dateRangeValue.value[dateRangeValue.value.length - 1]
        } else {
            useMessageStore().addError('Missing Dates')
            return
        }

        console.log('calling save method')
        useMealPlanStore().createOrUpdate(mutableMealPlan.value).catch(err => {
            // TODO handle error
        }).finally(() => {
            dialog.value = false
        })
    }
}

function newMealPlan() {
    return {
        fromDate: DateTime.now().toJSDate(),
        toDate: DateTime.now().toJSDate(),
        servings: 1,
    } as MealPlan
}


</script>

<style src="@vueform/multiselect/themes/default.css"></style>

<style scoped>

</style>