shopping input test

vue3/src/components/display/ShoppingListView.vue

@@ -55,6 +55,9 @@
                 <v-list-item>
                     <v-switch color="primary" hide-details :label="$t('CreatedBy')" v-model="useUserPreferenceStore().deviceSettings.shopping_item_info_created_by"></v-switch>
                 </v-list-item>
+                <v-list-item >
+                    <v-switch color="primary" hide-details label="New Input" v-model="useUserPreferenceStore().deviceSettings.shopping_input_autocomplete"></v-switch>
+                </v-list-item>
                 <v-list-item v-if="useUserPreferenceStore().serverSettings.debug">
                     <v-switch color="primary" hide-details label="Show Debug Info" v-model="useUserPreferenceStore().deviceSettings.shopping_show_debug"></v-switch>
                 </v-list-item>

vue3/src/components/inputs/ShoppingListEntryInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text-field :label="$t('Shopping_input_placeholder')" density="compact" @keyup.enter="addIngredient()" v-model="ingredientInput" :loading="props.loading" hide-details>
+    <v-text-field :label="$t('Shopping_input_placeholder')" density="compact" @keyup.enter="addIngredient()" v-model="ingredientInput" :loading="props.loading" hide-detail  v-if="!useUserPreferenceStore().deviceSettings.shopping_input_autocomplete"s>
         <template #append>
             <v-btn
                 density="comfortable"
@@ -9,15 +9,38 @@
             ></v-btn>
         </template>
     </v-text-field>
+
+    <Multiselect
+        v-if="useUserPreferenceStore().deviceSettings.shopping_input_autocomplete"
+        :placeholder="$t('Shopping_input_placeholder')"
+        class="material-multiselect "
+        v-model="ingredientModelInput"
+        :options="search"
+        :on-create="createObject"
+        create-option
+        @select="selectObject"
+        valueProp="id"
+        label="name"
+        :delay="300"
+        :searchable="true"
+        :strict="false"
+        :classes="{
+                dropdown: 'multiselect-dropdown z-3000',
+                containerActive: '',
+            }"
+    />
 </template>
 
 <script setup lang="ts">
 
 
 import {PropType, ref} from "vue";
-import {ApiApi, IngredientString, MealPlan, ShoppingListEntry, ShoppingListRecipe} from "@/openapi";
+import {ApiApi, Food, IngredientString, MealPlan, ShoppingListEntry, ShoppingListRecipe} from "@/openapi";
 import {useShoppingStore} from "@/stores/ShoppingStore";
-import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
+import Multiselect from "@vueform/multiselect";
+import {fa} from "vuetify/iconsets/fa";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 
 const props = defineProps({
     shoppingListRecipe: {type: {} as PropType<ShoppingListRecipe>, required: false},
@@ -28,6 +51,9 @@ const props = defineProps({
 const ingredientInput = ref('')
 const ingredientInputIcon = ref('fa-solid fa-plus')
 
+const ingredientModelInput = ref({} as Food)
+const searchQuery = ref('')
+
 const loading = ref(false)
 
 /**
@@ -65,9 +91,74 @@ function addIngredient() {
     })
 }
 
+// ----------- FUNCTIONS FOR TESTING MULTISELECT INPUT -------------
+
+function createObject(object: any, select$: Multiselect) {
+    ingredientInput.value = object['name']
+    ingredientModelInput.value = {} as Food
+    select$.close()
+    select$.clearSearch()
+    addIngredient()
+    return false
+}
+
+function selectObject(foodId: number, food: Food, select$: Multiselect) {
+    ingredientInput.value = food.name
+    ingredientModelInput.value = {} as Food
+    addIngredient()
+    return false
+}
+
+/**
+ * performs the API request to search for the selected input
+ * @param query input to search for on the API
+ */
+function search(query: string) {
+    loading.value = true
+    let api = new ApiApi()
+
+    return  api.apiFoodList({query: query, page: 1, pageSize: 25}).then(r => {
+        return r.results
+    }).catch((err: any) => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    }).finally(() => {
+        loading.value = false
+    })
+}
+
 </script>
 
 
-<style scoped>
+<style src="@vueform/multiselect/themes/default.css"></style>
+<!-- style can't be scoped (for whatever reason) -->
+<style>
+.material-multiselect {
+    --ms-bg: rgba(210, 210, 210, 0.1);
+    --ms-border-color: 0;
+    --ms-border-color-active: 0;
+    border-bottom: inset 1px rgba(50, 50, 50, 0.8);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
 
-</style>
+.model-select--density-compact {
+    --ms-line-height: 1.3;
+}
+
+.model-select--density-comfortable {
+    --ms-line-height: 1.8;
+}
+
+.model-select--density-default {
+    --ms-line-height: 2.3;
+}
+
+
+.multiselect-tag {
+    background-color: #b98766 !important;
+}
+
+.z-3000 {
+    z-index: 3000;
+}
+</style>

vue3/src/stores/UserPreferenceStore.ts

@@ -180,6 +180,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
             shopping_item_info_created_by: false,
             shopping_item_info_mealplan: true,
             shopping_item_info_recipe: true,
+            shopping_input_autocomplete: true,
             shopping_show_debug: false,
 
             mealplan_displayPeriod: 'week',

vue3/src/types/settings.ts

@@ -9,6 +9,7 @@ export type DeviceSettings = {
     shopping_item_info_created_by: boolean
     shopping_item_info_mealplan: boolean
     shopping_item_info_recipe: boolean
+    shopping_input_autocomplete: boolean
     shopping_show_debug: boolean
 
     mealplan_displayPeriod: string