1
0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-11 09:07:12 -05:00

maybe better without vueform ?

This commit is contained in:
vabene1111
2024-04-22 20:48:46 +02:00
parent 17610663c1
commit 894a298f45
3 changed files with 32 additions and 70 deletions

View File

@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@mdi/font": "7.2.96", "@mdi/font": "7.2.96",
"@types/luxon": "^3.4.2", "@types/luxon": "^3.4.2",
"@vueform/multiselect": "^2.6.7",
"@vueform/vueform": "^1.9.2", "@vueform/vueform": "^1.9.2",
"@vueuse/core": "^10.9.0", "@vueuse/core": "^10.9.0",
"luxon": "^3.4.4", "luxon": "^3.4.4",

View File

@@ -5,81 +5,39 @@
<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 <i class="mt-2 float-right fas fa-times" @click="isActive.value = false"></i></v-card-title>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text> <v-card-text>
<Vueform v-model="mutableMealPlan" sync> <v-form>
<HiddenElement meta input-type="number" name="id"></HiddenElement> <v-row>
<TextElement name="title" :columns="{ sm: 12, md : 6}" label="Title"></TextElement> <v-col cols="12" md="6">
<SelectElement <v-text-field label="Title"></v-text-field>
name="recipe" <v-text-field label="From Date" type="date"></v-text-field>
:columns="{ sm: 12, md : 6}" <v-text-field label="Meal Type"></v-text-field>
label="Recipe" <v-number-input control-variant="split" :min="0"></v-number-input>
label-prop="name" <v-text-field label="Share"></v-text-field>
value-prop="id" </v-col>
:object="true" <v-col cols="12" md="6">
:strict="false" <Multiselect
:search="true" name="recipe"
:items="recipeSearch" :columns="{ sm: 12, md : 6}"
:delay="300" label="Recipe"
rules="required"
></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}">
<SelectElement
name="mealType"
label="Meal Type"
label-prop="name" label-prop="name"
value-prop="id" value-prop="id"
:object="true" :object="true"
:strict="false" :strict="false"
:search="true" :search="true"
:items="mealTypeSearch" :items="recipeSearch"
:delay="300" :delay="300"
rules="required" rules="required"
> ></Multiselect>
</SelectElement> <v-text-field label="To Date" type="date"></v-text-field>
<TextElement name="servings" label="Servings"></TextElement> <recipe-card :recipe="mutableMealPlan.recipe" v-if="mutableMealPlan && mutableMealPlan.recipe"></recipe-card>
<TagsElement </v-col>
name="share" </v-row>
label="Share" <v-row>
label-prop="displayName" <v-col>
value-prop="id" <v-textarea label="Note"></v-textarea>
:object="true" </v-col>
:strict="false" </v-row>
:search="true" </v-form>
:items="shareUserSearch"
:delay="300"
></TagsElement>
</GroupElement>
<GroupElement name="container_1_col_2" :columns="{ sm: 12, md : 6}">
<StaticElement name="static_1" :remove-class="['vf-contains-link']">
<recipe-card :recipe="mutableMealPlan.recipe" v-if="mutableMealPlan && mutableMealPlan.recipe"></recipe-card>
</StaticElement>
</GroupElement>
</GroupElement>
<TextareaElement name="note" label="Note"></TextareaElement>
<ButtonElement
name="submit"
button-label="Save"
:submits="true"
/>
<ButtonElement name="btn_delete" type="button" columns="1" @click="1">Delete</ButtonElement>
</Vueform>
</v-card-text> </v-card-text>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
@@ -101,7 +59,8 @@ import {ApiApi, MealPlan, RecipeOverview} from "@/openapi";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import RecipeCard from "@/components/display/RecipeCard.vue"; import RecipeCard from "@/components/display/RecipeCard.vue";
import {useMealPlanStore} from "@/stores/MealPlanStore"; import {useMealPlanStore} from "@/stores/MealPlanStore";
import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
import Multiselect from '@vueform/multiselect'
const props = defineProps( const props = defineProps(
{ {
@@ -161,6 +120,8 @@ async function recipeSearch(searchQuery: string) {
</script> </script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style scoped> <style scoped>
</style> </style>

View File

@@ -412,7 +412,7 @@
resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.4.0.tgz#f01e2f6089b5098136fb084a0dd0cdd4533b72b0" resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.4.0.tgz#f01e2f6089b5098136fb084a0dd0cdd4533b72b0"
integrity sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg== integrity sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==
"@vueform/multiselect@^2.6.3": "@vueform/multiselect@^2.6.3", "@vueform/multiselect@^2.6.7":
version "2.6.7" version "2.6.7"
resolved "https://registry.yarnpkg.com/@vueform/multiselect/-/multiselect-2.6.7.tgz#12e38719de428389378fd4af2e5143442707e6fd" resolved "https://registry.yarnpkg.com/@vueform/multiselect/-/multiselect-2.6.7.tgz#12e38719de428389378fd4af2e5143442707e6fd"
integrity sha512-d0iwfzsj+N27o/JPE1KXbf0rVtwIe33dqlkQcOPxOP0RS6mW9umQG1hcuFEpdqNajuryHB9N4zo0rEcGmN20xQ== integrity sha512-d0iwfzsj+N27o/JPE1KXbf0rVtwIe33dqlkQcOPxOP0RS6mW9umQG1hcuFEpdqNajuryHB9N4zo0rEcGmN20xQ==