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

maybe better without vueform ?

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
vue3/package.json
View File

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

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

@@ -5,10 +5,17 @@
<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>
<Vueform v-model="mutableMealPlan" sync>
<HiddenElement meta input-type="number" name="id"></HiddenElement>
<TextElement name="title" :columns="{ sm: 12, md : 6}" label="Title"></TextElement>
<SelectElement
<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-col>
<v-col cols="12" md="6">
<Multiselect
name="recipe"
:columns="{ sm: 12, md : 6}"
label="Recipe"
@@ -20,66 +27,17 @@
:items="recipeSearch"
:delay="300"
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"
value-prop="id"
:object="true"
:strict="false"
:search="true"
:items="mealTypeSearch"
:delay="300"
rules="required"
>
</SelectElement>
<TextElement name="servings" label="Servings"></TextElement>
<TagsElement
name="share"
label="Share"
label-prop="displayName"
value-prop="id"
:object="true"
:strict="false"
:search="true"
: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']">
></Multiselect>
<v-text-field label="To Date" type="date"></v-text-field>
<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-col>
</v-row>
<v-row>
<v-col>
<v-textarea label="Note"></v-textarea>
</v-col>
</v-row>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
@@ -101,7 +59,8 @@ import {ApiApi, MealPlan, RecipeOverview} from "@/openapi";
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 Multiselect from '@vueform/multiselect'
const props = defineProps(
{
@@ -161,6 +120,8 @@ async function recipeSearch(searchQuery: string) {
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style scoped>
</style>

2
vue3/yarn.lock
View File

@@ -412,7 +412,7 @@
resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.4.0.tgz#f01e2f6089b5098136fb084a0dd0cdd4533b72b0"
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"
resolved "https://registry.yarnpkg.com/@vueform/multiselect/-/multiselect-2.6.7.tgz#12e38719de428389378fd4af2e5143442707e6fd"
integrity sha512-d0iwfzsj+N27o/JPE1KXbf0rVtwIe33dqlkQcOPxOP0RS6mW9umQG1hcuFEpdqNajuryHB9N4zo0rEcGmN20xQ==