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

playing with vueforms

Browse Source
This commit is contained in:
vabene1111
2024-03-29 14:38:22 +01:00
parent c1d6e98349
commit 369c460837
9 changed files with 341 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,46 +1,63 @@
<template>
<v-dialog activator="parent" >
<v-dialog activator="parent">
<template v-slot:default="{ isActive }">
<v-card>
<v-card-title>Meal Plan Edit</v-card-title>
<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-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>
{{mutableMealPlan}}
{{props.mealPlan}}
<Vueform v-model="mutableMealPlan">
<TextElement name="title" :columns="{ sm: 12, md : 6}" label="Title"></TextElement>
<SelectElement name="recipe" :columns="{ sm: 12, md : 6}" label="Recipe"></SelectElement>
<DateElement name="fromDate" :columns="{ sm: 12, md : 6}" label="From Date">
<template #addon-after>
<v-btn-group style="border-radius: 0">
<v-btn color="secondary">-</v-btn>
<v-btn color="primary">+</v-btn>
</v-btn-group>
</template>
</DateElement>
<DateElement name="toDate" :columns="{ sm: 12, md : 6}" label="To Date">
<template #addon-after>
<v-btn-group style="border-radius: 0">
<v-btn color="secondary">-</v-btn>
<v-btn color="primary">+</v-btn>
</v-btn-group>
</template>
</DateElement>
<GroupElement name="container_1">
<GroupElement name="container_1_col_1" :columns="{ sm: 12, md : 6}">
<TextElement name="mealType" label="Meal Type"></TextElement>
<TextElement name="servings" label="Servings"></TextElement>
<TextElement name="share" label="Share"></TextElement>
</GroupElement>
<GroupElement name="container_1_col_1" :columns="{ sm: 12, md : 6}">
<recipe-card :recipe="mutableMealPlan.recipe" v-if="mutableMealPlan.recipe"></recipe-card>
</GroupElement>
</GroupElement>
<TextareaElement name="note" label="Note"></TextareaElement>
</Vueform>
</v-card-text>
<template v-slot:actions>
<v-btn
class="ml-auto"
text="Close"
@click="isActive.value = false"
></v-btn>
</template>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="error">
Delete
</v-btn>
<v-btn color="success" class="ml-auto">
Save
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<script setup lang="ts">
import {PropType, ref} from "vue";
import {onMounted, PropType, ref} from "vue";
import {MealPlan} from "@/openapi";
import {DateTime} from "luxon";
import RecipeCard from "@/components/display/RecipeCard.vue";
const props = defineProps(
{
@@ -48,16 +65,21 @@ const props = defineProps(
}
)
let mealPlan = ref({} as MealPlan)
let mutableMealPlan = ref({} as MealPlan)
onMounted(() => {
if (props.mealPlan != undefined) {
console.log('got prop', props.mealPlan)
mutableMealPlan.value = props.mealPlan
} else {
console.log('loading default')
mutableMealPlan.value = {
fromDate: DateTime.now().toJSDate(),
toDate: DateTime.now().toJSDate(),
} as MealPlan
}
})
if (props.mealPlan != undefined) {
mealPlan.value = props.mealPlan
} else {
mealPlan.value = {
fromDate: DateTime.now().toJSDate(),
toDate: DateTime.now().toJSDate(),
} as MealPlan
}
</script>

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

@@ -40,7 +40,7 @@
<v-list-item-subtitle>
{{ p.mealType.name }}
</v-list-item-subtitle>
<meal-plan-dialog></meal-plan-dialog>
<meal-plan-dialog :meal-plan="p"></meal-plan-dialog>
</v-list-item>
</v-list>