Small update

CHANGELOG.md

@@ -1,3 +1,7 @@
+# v3.5.2
+## Fixed
+- Fixed broken layout on cocktail/ingredient details page
+
 # v3.5.1
 ## Fixed
 - Added missing stats tile: Bar shelf ingredients

README.md

@@ -110,6 +110,8 @@ $ npm run dev
 
 Fork the respository, follow manual installation steps and make your changes. Issues and PR's are appreciated.
 
+This project is tested with BrowserStack.
+
 ### Internationalization
 
 You can use Crowdin Bar Assistant project, and this will automaticall pull new languages.

src/assets/blocks.css

@@ -24,18 +24,6 @@
     padding: var(--_bc-padding);
 }
 
-.block-container.block-container--placeholder {
-    background: #d9e3f6;
-    border-top-color: #f5f9ff;
-    border-bottom-color: #a7badd;
-}
-
-.dark-theme .block-container.block-container--placeholder {
-    background: #ec8703;
-    border-top-color: #ffcc8a;
-    border-bottom-color: #4b2a00;
-}
-
 .block-container.block-container--hover:hover {
     background: rgba(255, 255, 255, .8);
     border-bottom-color: var(--clr-link-color-hover);
@@ -84,4 +72,16 @@
         inset 0px 1.1px 1.2px -0.8px hsl(var(--shadow-color-dark) / 0.25),
         inset 0px 2.6px 2.9px -1.7px hsl(var(--shadow-color-dark) / 0.25),
         inset 0px 6.3px 7.1px -2.5px hsl(var(--shadow-color-dark) / 0.25);
+}
+
+.block-container.block-container--placeholder {
+    background: #d9e3f6;
+    border-top-color: #f5f9ff;
+    border-bottom-color: #a7badd;
+}
+
+.dark-theme .block-container.block-container--placeholder {
+    background: #ec8703;
+    border-top-color: #ffcc8a;
+    border-bottom-color: #4b2a00;
 }

src/assets/chips.css

@@ -1,13 +1,13 @@
 .item-details__chips {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.25rem;
+    gap: var(--gap-size-2);
     margin-bottom: 1rem;
 }
 
 .item-details__chips__group__title {
-    font-size: 0.7rem;
-    margin-bottom: 0.2rem;
+    font-size: 0.65rem;
+    margin-bottom: -2px;
     color: var(--clr-gray-600);
 }
 
@@ -25,7 +25,7 @@
     margin: 0;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.25rem;
+    gap: var(--gap-size-2);
 }
 
 .chip {

src/components/Cocktail/CocktailDetails.vue

@@ -543,39 +543,39 @@ fetchShoppingList()
                             <div class="item-details__chips__group__title">{{ t('tag.tags') }}:</div>
                             <ul class="chips-list">
                                 <li v-for="tag in cocktail.tags" :key="tag.id">
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[tag_id]': tag.id } }">{{ tag.name }}</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[tag_id]': tag.id } }">{{ tag.name }}</RouterLink>
                                 </li>
                             </ul>
                         </div>
                         <div v-if="cocktail.glass" class="item-details__chips__group">
                             <div class="item-details__chips__group__title">{{ t('glass-type.title') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[glass_id]': cocktail.glass.id } }">{{ cocktail.glass.name }}</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[glass_id]': cocktail.glass.id } }">{{ cocktail.glass.name }}</RouterLink>
                                 </li>
                             </ul>
                         </div>
                         <div v-if="cocktail.method" class="item-details__chips__group">
                             <div class="item-details__chips__group__title">{{ t('method.title') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[cocktail_method_id]': cocktail.method.id } }">{{ t('method.' + cocktail.method.name) }}</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[cocktail_method_id]': cocktail.method.id } }">{{ t('method.' + cocktail.method.name) }}</RouterLink>
                                 </li>
                             </ul>
                         </div>
                         <div v-if="cocktail.abv && cocktail.abv > 0" class="item-details__chips__group">
                             <div class="item-details__chips__group__title">{{ t('ABV') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[abv_min]': cocktail.abv } }">{{ cocktail.abv }}%</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[abv_min]': cocktail.abv } }">{{ cocktail.abv }}%</RouterLink>
                                 </li>
                             </ul>
                         </div>
                         <div v-if="cocktail.rating" class="item-details__chips__group">
                             <div class="item-details__chips__group__title">{{ t('avg-rating') }}:</div>
                             <ul class="chips-list">
                                 <li>
-                                    <RouterLink class="chip" :to="{ name: 'cocktails', query: { 'filter[user_rating_min]': cocktail.rating.average } }">{{ cocktail.rating.average }} ★</RouterLink>
+                                    <RouterLink :to="{ name: 'cocktails', query: { 'filter[user_rating_min]': cocktail.rating.average } }">{{ cocktail.rating.average }} ★</RouterLink>
                                 </li>
                             </ul>
                         </div>
@@ -704,7 +704,7 @@ swiper-container {
     display: grid;
     gap: var(--gap-size-3);
     grid-template-columns: 500px minmax(0, 1fr);
-    grid-template-rows: 700px 100%;
+    grid-template-rows: 700px 1fr;
     grid-template-areas:
         "image content"
         "sidebar content";

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-token="bar.search_token" :cocktail-ingredient="cocktailIngredientForEdit" @close="showDialog = false" />
                     </template>
                 </SaltRimDialog>
             </div>
@@ -82,12 +82,12 @@
                 <span></span>
             </template>
             <template #dialog>
-                <SubstituteModal :value="cocktailIngredientForSubstitutes" @close="showSubstituteDialog = false" />
+                <SubstituteModal :search-token="bar.search_token" :value="cocktailIngredientForSubstitutes" @close="showSubstituteDialog = false" />
             </template>
         </SaltRimDialog>
         <h3 class="form-section-title">{{ $t('media') }}</h3>
         <SubscriptionCheck>Subscribe to "Mixologist" plan to upload more than one cocktail recipe image!</SubscriptionCheck>
-        <ImageUpload ref="imagesUpload" :images="cocktail.images" :max-images="10" />
+        <ImageUpload ref="imagesUpload" :images="cocktail.images" :max-images="maxImages" />
         <h3 class="form-section-title">{{ $t('additional-information') }}</h3>
         <div class="block-container block-container--padded">
             <div class="form-group">
@@ -167,14 +167,20 @@ export default {
         TagSelector,
     },
     data() {
+        const appState = new AppState()
+
         return {
-            appState: new AppState(),
+            appState: appState,
+            bar: {
+                search_host: null,
+                search_token: null,
+            },
             showDialog: false,
             showSubstituteDialog: false,
             cocktailIngredientForEdit: {},
             cocktailIngredientForEditOriginal: {},
             cocktailIngredientForSubstitutes: {},
-            maxImages: 10,
+            maxImages: appState.isSubscribed() ? 10 : 1,
             isLoading: false,
             cocktail: {
                 id: null,
@@ -208,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,
@@ -65,6 +66,8 @@ interface Draft1Schema {
         sort: number;
     }[];
 }
+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"]
@@ -96,6 +99,10 @@ const isLoading = ref(false)
 const showIngredientDialog = ref(false)
 const ingredientEdit = ref<CocktailIngredient | SubstituteCocktailIngredient | null>(null)
 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)
@@ -118,13 +125,18 @@ const cocktailTags = computed({
 
 useTitle(t('cocktail.import'))
 
+getBar(appState.bar.id)
+
 function clearImport() {
+    similarCocktails.value = []
     source.value = null
     ingredientEdit.value = null
     result.value = {} as LocalSchema
 }
 
 function importCocktail() {
+    similarCocktails.value = []
+
     if (importType.value == 'url') {
         fromUrl()
     }
@@ -146,6 +158,8 @@ function fromUrl() {
             return
         }
 
+        findSimilarCocktails(schema.recipe.name)
+
         result.value = {
             ...schema,
             recipe: {
@@ -161,6 +175,9 @@ function fromUrl() {
             }
         } as LocalSchema
 
+        isLoading.value = false
+    }).catch(e => {
+        toast.error(e.message)
         isLoading.value = false
     })
 }
@@ -421,6 +438,22 @@ async function finishImporting() {
     sessionStorage.setItem('scrapeResult', JSON.stringify(cocktail))
     router.push({ name: 'cocktails.form' })
 }
+
+async function findSimilarCocktails(name: string): Promise<void> {
+    isLoadingSimilar.value = true
+    const response = await BarAssistantClient.getCocktails({ 'filter[name]': name.toLowerCase(), per_page: 10 })
+    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">
@@ -473,6 +506,13 @@ async function finishImporting() {
                 <button type="button" class="button button--dark" @click.prevent="importCocktail">{{ t('import.start') }}</button>
             </div>
         </div>
+        <div class="sda" v-if="similarCocktails.length > 0">
+            <h3 class="form-section-title">{{ t('cocktails-similar') }}</h3>
+            <div class="similar-cocktails-list block-container block-container--padded">
+                <OverlayLoader v-if="isLoadingSimilar" />
+                <RouterLink :to="{name: 'cocktails.show', params: { id: cocktail.slug }}" v-for="cocktail in similarCocktails" :key="cocktail.id">{{ cocktail.name }}</RouterLink>
+            </div>
+        </div>
         <div v-if="result.recipe" class="scraper-form">
             <h3 class="form-section-title">{{ t('recipe-information') }}</h3>
             <div class="block-container block-container--padded">
@@ -590,7 +630,7 @@ async function finishImporting() {
                 <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_token" :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>
@@ -672,4 +712,10 @@ async function finishImporting() {
     max-width: 150px;
     max-height: 200px;
 }
+
+.similar-cocktails-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-size-3);
+}
 </style>

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-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-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,7 @@ interface FinderIngredient {
 const emit = defineEmits(['close', 'ingredient-changed'])
 const props = defineProps<{
     cocktailIngredient: CocktailIngredient,
+    searchToken: string,
 }>()
 
 const originalCocktailingredient = JSON.parse(JSON.stringify(props.cocktailIngredient)) as CocktailIngredient
@@ -59,7 +60,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-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-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,10 @@ export default {
         AmountInput,
     },
     props: {
+        searchToken: {
+            type: String,
+            required: true,
+        },
         value: {
             type: Object,
             default() {