From 22a3654dfdff2ae166a85cfe286ed67d1e085b47 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 26 Sep 2024 16:05:54 +0200
Subject: [PATCH] model select stuff

---
 vue3/src/apps/tandoor/Tandoor.vue             | 22 ++++----
 .../src/components/dialogs/MealPlanDialog.vue |  2 +-
 vue3/src/components/inputs/ModelSelect.vue    | 53 +++++++++----------
 3 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 0f8476974..6a82156a9 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -4,6 +4,8 @@
             <router-link :to="{ name: 'view_home', params: {} }">
                 <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
             </router-link>
+            <router-link :to="{name: 'view_shopping',  params: {}}"></router-link>
+            <router-link :to="{name: 'view_mealplan',  params: {}}"></router-link>
             <v-spacer></v-spacer>
             <global-search-dialog></global-search-dialog>
 
@@ -50,16 +52,16 @@
             <router-view></router-view>
         </v-main>
 
-<!--        <v-navigation-drawer v-if="lgAndUp">-->
-<!--            <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>-->
-<!--            <v-divider></v-divider>-->
-<!--            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>-->
-<!--            <v-list-item prepend-icon="fas fa-calendar-alt" title="Mealplan" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>-->
-<!--            <v-list-item prepend-icon="fas fa-shopping-cart" title="Shopping" :to="{ name: 'view_shopping', params: {} }"></v-list-item>-->
-<!--            <v-list-item prepend-icon="fas fa-bars" title="More" :to="{ name: 'view_books', params: {} }"></v-list-item>-->
-<!--            <v-list-item prepend-icon="fas fa-bars" title="Test" :to="{ name: 'view_test', params: {} }"></v-list-item>-->
-<!--            &lt;!&ndash; TODO link &ndash;&gt;-->
-<!--        </v-navigation-drawer>-->
+        <v-navigation-drawer v-if="lgAndUp">
+            <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
+            <v-divider></v-divider>
+            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>
+            <v-list-item prepend-icon="fas fa-calendar-alt" title="Mealplan" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>
+            <v-list-item prepend-icon="fas fa-shopping-cart" title="Shopping" :to="{ name: 'view_shopping', params: {} }"></v-list-item>
+            <v-list-item prepend-icon="fas fa-bars" title="More" :to="{ name: 'view_books', params: {} }"></v-list-item>
+            <v-list-item prepend-icon="fas fa-bars" title="Test" :to="{ name: 'view_test', params: {} }"></v-list-item>
+            <!-- TODO link -->
+        </v-navigation-drawer>
 
         <v-bottom-navigation grow v-if="!lgAndUp">
             <v-btn value="recent" :to="{ name: 'view_home', params: {} }">
diff --git a/vue3/src/components/dialogs/MealPlanDialog.vue b/vue3/src/components/dialogs/MealPlanDialog.vue
index 3de970846..280d37bf4 100644
--- a/vue3/src/components/dialogs/MealPlanDialog.vue
+++ b/vue3/src/components/dialogs/MealPlanDialog.vue
@@ -33,7 +33,7 @@
                                 <ModelSelect model="User" :allow-create="false" v-model="mutableMealPlan.shared" item-label="displayName" mode="tags"></ModelSelect>
                             </v-col>
                             <v-col cols="12" md="6">
-                                <ModelSelect model="recipe" v-model="mutableMealPlan.recipe" @update:modelValue="mutableMealPlan.servings = mutableMealPlan.recipe?.servings ? mutableMealPlan.recipe?.servings : 1"></ModelSelect>
+                                <ModelSelect model="Recipe" v-model="mutableMealPlan.recipe" @update:modelValue="mutableMealPlan.servings = mutableMealPlan.recipe?.servings ? mutableMealPlan.recipe?.servings : 1"></ModelSelect>
                                 <!--                                <v-number-input label="Days" control-variant="split" :min="1"></v-number-input>--> <!--TODO create days input with +/- synced to date -->
                                 <recipe-card :recipe="mutableMealPlan.recipe" v-if="mutableMealPlan && mutableMealPlan.recipe"></recipe-card>
                             </v-col>
diff --git a/vue3/src/components/inputs/ModelSelect.vue b/vue3/src/components/inputs/ModelSelect.vue
index a5cdb9c20..2b095d661 100644
--- a/vue3/src/components/inputs/ModelSelect.vue
+++ b/vue3/src/components/inputs/ModelSelect.vue
@@ -7,45 +7,50 @@
         <!-- TODO strange behavior/layering issues with appendTo body, find solution to make it work -->
 
         <Multiselect
-            :id="id"
+            :id="props.id"
+            :ref="`ref_${props.id}`"
             class="material-multiselect z-max"
-            :resolve-on-load="false"
+            :resolve-on-load="searchOnLoad"
             v-model="model"
             :options="search"
             :on-create="createObject"
-            :createOption="allowCreate"
+            :createOption="props.allowCreate"
             :delay="300"
             :object="true"
-            :valueProp="itemValue"
-            :label="itemLabel"
+            :valueProp="props.itemValue"
+            :label="props.itemLabel"
             :searchable="true"
             :strict="false"
-            :disabled="disabled"
-            :mode="mode"
-            :can-clear="canClear"
-            :can-deselect="canClear"
-            :limit="limit"
-            :placeholder="label"
+            :disabled="props.disabled"
+            :mode="props.mode"
+            :can-clear="props.canClear"
+            :can-deselect="props.canClear"
+            :limit="props.limit"
+            :placeholder="$t(modelClass.model.localizationKey)"
             :noOptionsText="$t('No_Results')"
             :noResultsText="$t('No_Results')"
             :loading="loading"
+            @open="multiselect.refreshOptions()"
         />
 
     </v-input>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, PropType, ref} from "vue"
+import {onBeforeMount, onMounted, PropType, ref, useTemplateRef} from "vue"
 import {GenericModel, getGenericModelFromString} from "@/types/Models"
 import Multiselect from '@vueform/multiselect'
 import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
 
 const emit = defineEmits(['update:modelValue', 'create'])
 
 const props = defineProps({
     model: {type: String, required: true},
 
-    id: {type: String, required: false, default: Math.random().toString()},
+    id: {type: String, required: false, default: Math.floor(Math.random()*10000).toString()},
 
     itemLabel: {type: String, default: "name"},
     itemValue: {type: String, default: "id"},
@@ -65,31 +70,20 @@ const props = defineProps({
     label: {type: String, default: ''},
     hint: {type: String, default: ''},
 
-    // not verified
-    search_on_load: {type: Boolean, default: false},
-
-
-    parent_variable: {type: String, default: undefined},
-
-    sticky_options: {
-        type: Array,
-        default() {
-            return []
-        },
-    },
-
-
+    searchOnLoad: {type: Boolean, default: false},
 })
 
 const model = defineModel()
 const modelClass = ref({} as GenericModel)
 const loading = ref(false)
 
+const multiselect = useTemplateRef(`ref_${props.id}`)
+
 /**
  * create instance of model class when mounted
  */
-onMounted(() => {
-    modelClass.value = getGenericModelFromString(props.model)
+onBeforeMount(() => {
+    modelClass.value = getGenericModelFromString(props.model, t)
 })
 
 /**
@@ -97,6 +91,7 @@ onMounted(() => {
  * @param query input to search for on the API
  */
 function search(query: string) {
+    console.log('search called')
     loading.value = true
     return modelClass.value.list({query: query, page: 1, pageSize: 25}).then((r: any) => {
         if (modelClass.value.model.isPaginated) {