Always pull search token from api

src/components/Cocktail/CocktailForm.vue

@@ -72,7 +72,7 @@
                         <button class="button button--dark" type="button" @click="addIngredient">{{ $t('ingredient.add') }}</button>
                     </template>
                     <template #dialog>
-                        <IngredientModal :cocktail-ingredient="cocktailIngredientForEdit" @close="showDialog = false" />
+                        <IngredientModal :search-host="bar.search_host" :search-token="bar.search_token" :cocktail-ingredient="cocktailIngredientForEdit" @close="showDialog = false" />
                     </template>
                 </SaltRimDialog>
             </div>
@@ -82,7 +82,7 @@
                 <span></span>
             </template>
             <template #dialog>
-                <SubstituteModal :value="cocktailIngredientForSubstitutes" @close="showSubstituteDialog = false" />
+                <SubstituteModal :search-host="bar.search_host" :search-token="bar.search_token" :value="cocktailIngredientForSubstitutes" @close="showSubstituteDialog = false" />
             </template>
         </SaltRimDialog>
         <h3 class="form-section-title">{{ $t('media') }}</h3>
@@ -171,6 +171,10 @@ export default {
 
         return {
             appState: appState,
+            bar: {
+                search_host: null,
+                search_token: null,
+            },
             showDialog: false,
             showSubstituteDialog: false,
             cocktailIngredientForEdit: {},
@@ -210,6 +214,8 @@ export default {
         this.isLoading = true
         const cocktailId = this.$route.query.id || null
 
+        this.bar = (await BarAssistantClient.getBar(this.appState.bar.id)).data ?? {}
+
         if (cocktailId) {
             await BarAssistantClient.getCocktail(cocktailId).then(resp => {
                 resp.data.description = Utils.decodeHtml(resp.data.description)

src/components/Cocktail/CocktailImport.vue

@@ -13,6 +13,7 @@ import { useI18n } from 'vue-i18n'
 
 import type { components } from '@/api/api'
 import { useTitle } from '@/composables/title'
+import AppState from '@/AppState'
 interface Ingredient {
     id: string,
     name: string,
@@ -66,6 +67,7 @@ interface Draft1Schema {
     }[];
 }
 type Cocktail = components["schemas"]["Cocktail"]
+type Bar = components["schemas"]["Bar"]
 type Glass = components["schemas"]["Glass"]
 type FullIngredient = components["schemas"]["Ingredient"]
 type CocktailMethod = components["schemas"]["CocktailMethod"]
@@ -99,6 +101,8 @@ const ingredientEdit = ref<CocktailIngredient | SubstituteCocktailIngredient | n
 const importType = ref('url')
 const similarCocktails = ref([] as Cocktail[])
 const isLoadingSimilar = ref(false)
+const bar = ref({} as Bar)
+const appState = new AppState()
 const duplicateAction = ref('none')
 const source = ref<null | string>(null)
 const result = ref<LocalSchema>({} as LocalSchema)
@@ -121,6 +125,8 @@ const cocktailTags = computed({
 
 useTitle(t('cocktail.import'))
 
+getBar(appState.bar.id)
+
 function clearImport() {
     similarCocktails.value = []
     source.value = null
@@ -439,6 +445,15 @@ async function findSimilarCocktails(name: string): Promise<void> {
     isLoadingSimilar.value = false
     similarCocktails.value = response?.data ?? []
 }
+
+async function getBar(barId: number): Promise<void> {
+    isLoading.value = true
+    const resp = await BarAssistantClient.getBar(barId)
+    if (resp) {
+        bar.value = resp.data
+    }
+    isLoading.value = false
+}
 </script>
 <template>
     <form @submit.prevent="finishImporting">
@@ -615,7 +630,7 @@ async function findSimilarCocktails(name: string): Promise<void> {
                 <template #dialog>
                     <div class="dialog-title">{{ t('import.manually-match') }}</div>
                     <p style="margin-bottom: 1rem;">{{ t('import.manual-match-notice', {name: ingredientEdit.refIngredient.name}) }}</p>
-                    <IngredientFinder :initial-query="ingredientEdit.refIngredient.name" @ingredient-selected="handleIngredientEdit"></IngredientFinder>
+                    <IngredientFinder v-if="bar.search_host && bar.search_token" :search-host="bar.search_host" :search-token="bar.search_token" :initial-query="ingredientEdit.refIngredient.name" @ingredient-selected="handleIngredientEdit"></IngredientFinder>
                     <div class="dialog-actions">
                         <button type="button" class="button button--outline" @click="showIngredientDialog = false">{{ t('close') }}</button>
                     </div>

src/components/Cocktail/CocktailIndex.vue

@@ -22,7 +22,7 @@
                                 <a href="#" @click.prevent="showSpecificIngredientsModal = true">{{ $t('search.ingredients') }} ({{ activeFilters.specific_ingredients.length }})</a>
                             </template>
                             <template #dialog>
-                                <FilterIngredientsModal :title="$t('search.select-specific-ingredients')" :value="activeFilters.specific_ingredients" @close="updateSpecificIngredients"></FilterIngredientsModal>
+                                <FilterIngredientsModal :search-host="appState.bar.search_host" :search-token="appState.bar.search_token" :title="$t('search.select-specific-ingredients')" :value="activeFilters.specific_ingredients" @close="updateSpecificIngredients"></FilterIngredientsModal>
                             </template>
                         </SaltRimDialog>
                         <br>
@@ -31,7 +31,7 @@
                                 <a href="#" @click.prevent="showIgnoreIngredientsModal = true">{{ $t('search.ignore-ingredients') }} ({{ activeFilters.ignore_ingredients.length }})</a>
                             </template>
                             <template #dialog>
-                                <FilterIngredientsModal :title="$t('search.select-ingredients-to-ignore')" :value="activeFilters.ignore_ingredients" @close="updateIgnoredIngredients"></FilterIngredientsModal>
+                                <FilterIngredientsModal :search-host="appState.bar.search_host" :search-token="appState.bar.search_token" :title="$t('search.select-ingredients-to-ignore')" :value="activeFilters.ignore_ingredients" @close="updateIgnoredIngredients"></FilterIngredientsModal>
                             </template>
                         </SaltRimDialog>
                     </Refinement>

src/components/Cocktail/IngredientModal.vue

@@ -20,6 +20,8 @@ interface FinderIngredient {
 const emit = defineEmits(['close', 'ingredient-changed'])
 const props = defineProps<{
     cocktailIngredient: CocktailIngredient,
+    searchHost: string,
+    searchToken: string,
 }>()
 
 const originalCocktailingredient = JSON.parse(JSON.stringify(props.cocktailIngredient)) as CocktailIngredient
@@ -59,7 +61,7 @@ function selectIngredient(item: FinderIngredient): void {
         <p style="margin: 0 0 1rem 0;">
             {{ t('ingredient.units-help') }}
         </p>
-        <IngredientFinder :selected-ingredients="[localCocktailingredient.ingredient.id]" @ingredient-selected="selectIngredient"></IngredientFinder>
+        <IngredientFinder :search-host="searchHost" :search-token="searchToken" :selected-ingredients="[localCocktailingredient.ingredient.id]" @ingredient-selected="selectIngredient"></IngredientFinder>
         <div class="selected-ingredient">
             <small>{{ t('ingredient.dialog.current') }}:</small>
             <p>{{ localCocktailingredient.ingredient.name }}</p>

src/components/Cocktail/SubstituteModal.vue

@@ -3,7 +3,7 @@
         <OverlayLoader v-if="isLoading" />
         <div class="dialog-title">{{ $t('ingredient.dialog.select-substitutes') }}</div>
         <p style="margin-bottom: 1rem;">{{ $t('ingredient.dialog.select-substitutes-for', {name: cocktailIngredient.ingredient.name}) }}</p>
-        <IngredientFinder :selected-ingredients="selectedSubstitutes.map(s => s.ingredient.id)" @ingredient-selected="selectIngredient"></IngredientFinder>
+        <IngredientFinder :search-host="searchHost" :search-token="searchToken" :selected-ingredients="selectedSubstitutes.map(s => s.ingredient.id)" @ingredient-selected="selectIngredient"></IngredientFinder>
         <div class="substitutes">
             <h4>{{ $t('substitutes') }}:</h4>
             <div v-for="(substitute, index) in selectedSubstitutes" :key="substitute.ingredient.id" class="substitutes__substitute">
@@ -61,6 +61,14 @@ export default {
         AmountInput,
     },
     props: {
+        searchHost: {
+            type: String,
+            required: true,
+        },
+        searchToken: {
+            type: String,
+            required: true,
+        },
         value: {
             type: Object,
             default() {

src/components/Ingredient/IngredientForm.vue

@@ -52,18 +52,18 @@
             <div class="form-group">
                 <SaltRimCheckbox id="parent-ingredient-checkbox" v-model="isParent" :label="$t('ingredient.is-variety')" :description="'[EXPERIMENTAL] ' + $t('ingredient.variety-note')"></SaltRimCheckbox>
             </div>
-            <div v-show="isParent" class="form-group">
-                <IngredientFinder v-show="ingredient.parent_ingredient == null" v-model="ingredient.parent_ingredient" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
+            <div v-show="isParent" class="form-group" v-if="bar.search_host">
+                <IngredientFinder v-show="ingredient.parent_ingredient == null" :search-host="bar.search_host" :search-token="bar.search_token" v-model="ingredient.parent_ingredient" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
                 <div v-if="ingredient.parent_ingredient" style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                     {{ ingredient.parent_ingredient.name }} &middot; <a href="#" @click.prevent="ingredient.parent_ingredient = null">{{ $t('remove') }}</a>
                 </div>
             </div>
             <div class="form-group">
                 <SaltRimCheckbox id="complex-ingredient-checkbox" v-model="isComplex" :label="$t('ingredient.is-complex')" :description="$t('ingredient.complex-note')"></SaltRimCheckbox>
             </div>
-            <div v-show="isComplex" class="ingredient-form__complex-ingredients">
+            <div v-show="isComplex" class="ingredient-form__complex-ingredients" v-if="bar.search_host">
                 <div>
-                    <IngredientFinder :selected-ingredients="ingredient.ingredient_parts.map(i => i.id)" @ingredient-selected="selectIngredientPart" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
+                    <IngredientFinder :selected-ingredients="ingredient.ingredient_parts.map(i => i.id)" :search-host="bar.search_host" :search-token="bar.search_token" @ingredient-selected="selectIngredientPart" :disabled-ingredients="disabledFinderIngredients"></IngredientFinder>
                 </div>
                 <div>
                     <ul v-if="ingredient.ingredient_parts.length > 0" class="block-container block-container--inset ingredient-form__complex-ingredients__list">
@@ -146,6 +146,7 @@ import SaltRimDialog from '../Dialog/SaltRimDialog.vue'
 import CategoryForm from '../Settings/CategoryForm.vue'
 import CloseButton from '../CloseButton.vue'
 import { useTitle } from '@/composables/title'
+import AppState from '@/AppState.js'
 
 export default {
     components: {
@@ -162,11 +163,16 @@ export default {
     },
     data() {
         return {
+            appState: new AppState(),
             isLoading: false,
             isParent: false,
             isComplex: false,
             showCategoryDialog: false,
             ingredientCategoryId: null,
+            bar: {
+                search_host: null,
+                search_token: null,
+            },
             ingredient: {
                 id: null,
                 color: '#000',
@@ -199,11 +205,13 @@ export default {
             }, {})
         }
     },
-    created() {
+    async created() {
         useTitle(this.$t('ingredient.add'))
 
         const ingredientId = this.$route.query.id || null
 
+        this.bar = (await BarAssistantClient.getBar(this.appState.bar.id)).data ?? {}
+
         if (ingredientId) {
             this.ingredient.id = ingredientId
             this.refreshIngredient()

src/components/IngredientFinder.vue

@@ -32,18 +32,23 @@
 <script>
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
 import OverlayLoader from './OverlayLoader.vue'
-import AppState from './../AppState'
 import IngredientImage from './Ingredient/IngredientImage.vue'
 import BarAssistantClient from '@/api/BarAssistantClient'
 
-const appState = new AppState()
-
 export default {
     components: {
         OverlayLoader,
         IngredientImage
     },
     props: {
+        searchHost: {
+            type: String,
+            required: true,
+        },
+        searchToken: {
+            type: String,
+            required: true,
+        },
         modelValue: {
             type: Object,
             default() {
@@ -83,8 +88,8 @@ export default {
                 },
             },
             searchClient: instantMeiliSearch(
-                appState.bar.search_host,
-                appState.bar.search_token,
+                this.searchHost,
+                this.searchToken,
             ).searchClient,
         }
     },

src/components/Search/FilterIngredientsModal.vue

@@ -2,7 +2,7 @@
     <form @submit.prevent="filter">
         <OverlayLoader v-if="isLoading" />
         <div class="dialog-title">{{ title }}</div>
-        <IngredientFinder :selected-ingredients="selectedIngredients.map(s => s.id)" @ingredient-selected="selectIngredient"></IngredientFinder>
+        <IngredientFinder :search-host="searchHost" :search-token="searchToken" :selected-ingredients="selectedIngredients.map(s => s.id)" @ingredient-selected="selectIngredient"></IngredientFinder>
         <div class="search-ingredients-modal-ingredients">
             <div v-for="ing in selectedIngredients" :key="ing.id" class="search-ingredients-modal-ingredients__ingredient">
                 {{ ing.name }} <button type="button" @click.prevent="removeIngredient(ing)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentcolor"><path fill="none" d="M0 0h24v24H0z" /><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" /></svg></button>
@@ -26,6 +26,14 @@ export default {
         IngredientFinder,
     },
     props: {
+        searchHost: {
+            type: String,
+            required: true,
+        },
+        searchToken: {
+            type: String,
+            required: true,
+        },
         title: {
             type: String,
             default: ''