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

playing with meal plan edit dialog

Browse Source
This commit is contained in:
vabene1111
2024-03-28 16:44:20 +01:00
parent 497a4bbeb9
commit c1d6e98349
4 changed files with 76 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
vue3/src/components/dialogs/MealPlanDialog.vue Normal file
View File

@@ -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>

7
vue3/src/components/display/HorizontalMealPlanWindow.vue
View File

@@ -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)