model select stuff

2026-01-01 12:18:45 -05:00 · 2024-09-26 16:05:54 +02:00
parent 9a94c650da
commit 22a3654dfd
3 changed files with 37 additions and 40 deletions
--- 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: {} }">
--- 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>
--- 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) {