From 894a298f457f5ddc204050f3eb03c163bcc44f7d Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 22 Apr 2024 20:48:46 +0200
Subject: [PATCH] maybe better without vueform ?

---
 vue3/package.json                             |  1 +
 .../src/components/dialogs/MealPlanDialog.vue | 99 ++++++-------------
 vue3/yarn.lock                                |  2 +-
 3 files changed, 32 insertions(+), 70 deletions(-)

diff --git a/vue3/package.json b/vue3/package.json
index 6dd517963..c9256ad7f 100644
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -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",
diff --git a/vue3/src/components/dialogs/MealPlanDialog.vue b/vue3/src/components/dialogs/MealPlanDialog.vue
index 5b7a5ec99..c7713002f 100644
--- a/vue3/src/components/dialogs/MealPlanDialog.vue
+++ b/vue3/src/components/dialogs/MealPlanDialog.vue
@@ -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-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
-                            name="recipe"
-                            :columns="{ sm: 12, md : 6}"
-                            label="Recipe"
-                            label-prop="name"
-                            value-prop="id"
-                            :object="true"
-                            :strict="false"
-                            :search="true"
-                            :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"
+                    <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"
                                     label-prop="name"
                                     value-prop="id"
                                     :object="true"
                                     :strict="false"
                                     :search="true"
-                                    :items="mealTypeSearch"
+                                    :items="recipeSearch"
                                     :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']">
-                                    <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>
+                                ></Multiselect>
+                                <v-text-field label="To Date" type="date"></v-text-field>
+                                <recipe-card :recipe="mutableMealPlan.recipe" v-if="mutableMealPlan && mutableMealPlan.recipe"></recipe-card>
+                            </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>
\ No newline at end of file
diff --git a/vue3/yarn.lock b/vue3/yarn.lock
index 8d1915fb1..8f05a57f9 100644
--- a/vue3/yarn.lock
+++ b/vue3/yarn.lock
@@ -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==