mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-03 05:11:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

models, messages and multiselects

Browse Source
This commit is contained in:
vabene1111
2024-05-01 10:04:19 +02:00
parent 32b75250dc
commit 569b7e78fe
13 changed files with 607 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
vue3/src/components/dialogs/MealPlanDialog.vue
View File

@@ -2,39 +2,35 @@
<v-dialog activator="parent" v-model="dialog">
<template v-slot:default="{ isActive }">
<v-card style="overflow: auto">
<v-card-title>Meal Plan Edit <i class="mt-2 float-right fas fa-times" @click="isActive.value = false"></i></v-card-title>
<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-text-field>
<v-text-field label="From Date" type="date"></v-text-field>
<v-text-field label="Meal Type"></v-text-field>
<v-number-input control-variant="split" :min="0"></v-number-input>
<v-text-field label="Share"></v-text-field>
<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" 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>
</v-col>
<v-col cols="12" md="6">
<Multiselect
name="recipe"
:columns="{ sm: 12, md : 6}"
label="Recipe"
label-prop="name"
value-prop="id"
:object="true"
:strict="false"
:search="true"
:items="recipeSearch"
:delay="300"
rules="required"
></Multiselect>
<v-text-field label="To Date" type="date"></v-text-field>
<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 +/- snyced 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-textarea>
<v-textarea label="Note" v-model="mutableMealPlan.note"></v-textarea>
</v-col>
</v-row>
</v-form>
@@ -60,7 +56,10 @@ 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 Multiselect from '@vueform/multiselect'
import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {useMessageStore} from "@/stores/MessageStore";
const props = defineProps(
{
@@ -69,12 +68,16 @@ const props = defineProps(
)
const dialog = ref(false)
let mutableMealPlan = ref(props.mealPlan)
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
} else {
mutableMealPlan.value = newMealPlan()
}
@@ -84,6 +87,14 @@ 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
@@ -100,23 +111,6 @@ function newMealPlan() {
} as MealPlan
}
async function mealTypeSearch(searchQuery: string) {
console.log('called search')
const api = new ApiApi()
return await api.apiMealTypeList()
}
async function shareUserSearch(searchQuery: string) {
console.log('called su search')
const api = new ApiApi()
return await api.apiUserList()
}
async function recipeSearch(searchQuery: string) {
console.log('called recipe search')
const api = new ApiApi()
return (await api.apiRecipeList({query: searchQuery})).results
}
</script>