mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-06 14:48:02 -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

3
vue3/src/apps/tandoor/main.ts
View File

@@ -13,6 +13,8 @@ import RecipeViewPage from "@/pages/RecipeViewPage.vue";
import luxonPlugin from "@/plugins/luxonPlugin";
import RecipeEditPage from "@/pages/RecipeEditPage.vue";
import MealPlanPage from "@/pages/MealPlanPage.vue";
import Vueform from '@vueform/vueform'
import vueform from '@/vueform'
const routes = [
{path: '/', redirect: '/search', name: 'index'},
@@ -37,6 +39,7 @@ app.use(createPinia())
app.use(vuetify)
app.use(router)
app.use(luxonPlugin)
app.use(Vueform, vueform)
app.use(mavonEditor) // TODO only use on pages that need it
app.mount('#app')

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>

9
vue3/src/pages/MealPlanPage.vue
View File

@@ -1,7 +1,8 @@
<template>
<v-container>
<v-container>
</v-container>
</v-container>
</template>
@@ -18,7 +19,9 @@ export default defineComponent({
components: {ModelSelect, RecipeCard},
data() {
return {
test: {
text: String,
},
}
},
mounted() {

8
vue3/src/pages/RecipeSearchPage.vue
View File

@@ -1,14 +1,18 @@
<template>
<v-container>
<horizontal-meal-plan-window title="Meal Plans"></horizontal-meal-plan-window>
<v-btn>
<meal-plan-dialog></meal-plan-dialog>
</v-btn>
<horizontal-meal-plan-window></horizontal-meal-plan-window>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
<horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :skeletons="2" :recipes="high_rated_recipes" icon="fas fa-star"></horizontal-recipe-scroller>
<horizontal-recipe-scroller :title="random_keyword.label" :skeletons="4" :recipes="random_keyword_recipes" icon="fas fa-tags"></horizontal-recipe-scroller>
<horizontal-recipe-scroller :title="random_keyword.label" :skeletons="4" :recipes="random_keyword_recipes" icon="fas fa-tags" v-if="random_keyword.label"></horizontal-recipe-scroller>
</v-container>

18
vue3/src/vueform.ts Normal file
View File

@@ -0,0 +1,18 @@
import en from '@vueform/vueform/locales/en'
import material from '@vueform/vueform/dist/material'
import { defineConfig } from '@vueform/vueform'
// You might place these anywhere else in your project
import '@vueform/vueform/dist/material.css';
export default defineConfig({
theme: material,
locales: { en },
locale: 'en',
overrideClasses: {
// ElementAddon: {
// container: 'vf-addon ps-0 pe-0',
// }
},
})