From a6a136c892e9dda096314253b9bed10415d1cfc3 Mon Sep 17 00:00:00 2001
From: smilerz <smilerz@gmail.com>
Date: Tue, 18 Jan 2022 15:40:01 -0600
Subject: [PATCH] fix multiselect

---
 .../RecipeSearchView/RecipeSearchView.vue     | 87 +++++++++++++------
 1 file changed, 61 insertions(+), 26 deletions(-)

diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index e11459217..8dda3ad35 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -63,25 +63,25 @@
                                     </div>
 
                                     <b-popover target="id_settings_button" triggers="click" placement="bottom">
-                                        <b-tabs content-class="mt-1" small>
+                                        <b-tabs content-class="mt-1 text-nowrap" small>
                                             <b-tab :title="$t('Settings')" active :title-link-class="['mx-0']">
-                                                <b-form-group v-bind:label="$t('Recently_Viewed')" label-for="popover-input-1" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('Recently_Viewed')" label-for="popover-input-1" label-cols="6" class="mb-1">
                                                     <b-form-input type="number" v-model="ui.recently_viewed" id="popover-input-1" size="sm"></b-form-input>
                                                 </b-form-group>
 
-                                                <b-form-group v-bind:label="$t('Recipes_per_page')" label-for="popover-input-page-count" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('Recipes_per_page')" label-for="popover-input-page-count" label-cols="6" class="mb-1">
                                                     <b-form-input type="number" v-model="ui.page_size" id="popover-input-page-count" size="sm"></b-form-input>
                                                 </b-form-group>
 
-                                                <b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2" label-cols="6" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_meal_plan" id="popover-input-2" size="sm"></b-form-checkbox>
                                                 </b-form-group>
 
-                                                <b-form-group v-if="ui.show_meal_plan" v-bind:label="$t('Meal_Plan_Days')" label-for="popover-input-5" label-cols="6" class="mb-3">
+                                                <b-form-group v-if="ui.show_meal_plan" v-bind:label="$t('Meal_Plan_Days')" label-for="popover-input-5" label-cols="6" class="mb-1">
                                                     <b-form-input type="number" v-model="ui.meal_plan_days" id="popover-input-5" size="sm"></b-form-input>
                                                 </b-form-group>
 
-                                                <b-form-group v-bind:label="$t('Sort_by_new')" label-for="popover-input-3" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('Sort_by_new')" label-for="popover-input-3" label-cols="6" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.sort_by_new" id="popover-input-3" size="sm"></b-form-checkbox>
                                                 </b-form-group>
                                                 <div class="row" style="margin-top: 1vh">
@@ -90,41 +90,41 @@
                                                     </div>
                                                 </div>
                                             </b-tab>
-                                            <b-tab :title="$t('fields')" :title-link-class="['mx-0']">
-                                                <b-form-group v-bind:label="$t('show_keywords')" label-for="popover-show_keywords" label-cols="6" class="mb-3">
+                                            <b-tab :title="$t('fields')" :title-link-class="['mx-0']" v-if="ui.enable_expert">
+                                                <b-form-group v-bind:label="$t('show_keywords')" label-for="popover-show_keywords" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_keywords" id="popover-show_keywords" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('show_foods')" label-for="popover-show_foods" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('show_foods')" label-for="popover-show_foods" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_foods" id="popover-show_foods" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('show_books')" label-for="popover-input-show_books" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('show_books')" label-for="popover-input-show_books" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_books" id="popover-input-show_books" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('show_rating')" label-for="popover-show_rating" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('show_rating')" label-for="popover-show_rating" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_rating" id="popover-show_rating" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-if="ui.enable_expert" v-bind:label="$t('show_units')" label-for="popover-show_units" label-cols="6" class="mb-3">
+                                                <b-form-group v-if="ui.enable_expert" v-bind:label="$t('show_units')" label-for="popover-show_units" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_units" id="popover-show_units" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-if="ui.enable_expert" v-bind:label="$t('show_filters')" label-for="popover-show_filters" label-cols="6" class="mb-3">
+                                                <b-form-group v-if="ui.enable_expert" v-bind:label="$t('show_filters')" label-for="popover-show_filters" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.show_filters" id="popover-show_filters" size="sm"></b-form-checkbox>
                                                 </b-form-group>
                                             </b-tab>
 
                                             <b-tab :title="$t('advanced')" :title-link-class="['mx-0']">
-                                                <b-form-group v-bind:label="$t('remember_search')" label-for="popover-rem-search" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('remember_search')" label-for="popover-rem-search" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.remember_search" id="popover-rem-search" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-if="ui.remember_search" v-bind:label="$t('remember_hours')" label-for="popover-input-rem-hours" label-cols="6" class="mb-3">
+                                                <b-form-group v-if="ui.remember_search" v-bind:label="$t('remember_hours')" label-for="popover-input-rem-hours" label-cols="8" class="mb-1">
                                                     <b-form-input type="number" v-model="ui.remember_hours" id="popover-rem-hours" size="sm"></b-form-input>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('tree_select')" label-for="popover-input-treeselect" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('tree_select')" label-for="popover-input-treeselect" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.tree_select" id="popover-input-treeselect" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('enable_expert')" label-for="popover-input-expert" label-cols="6" class="mb-3">
+                                                <b-form-group v-bind:label="$t('enable_expert')" label-for="popover-input-expert" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.enable_expert" id="popover-input-expert" size="sm"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-if="debug" v-bind:label="$t('sql_debug')" label-for="popover-input-sqldebug" label-cols="6" class="mb-3">
+                                                <b-form-group v-if="debug" v-bind:label="$t('sql_debug')" label-for="popover-input-sqldebug" label-cols="8" class="mb-1">
                                                     <b-form-checkbox switch v-model="ui.sql_debug" id="popover-input-sqldebug" size="sm"></b-form-checkbox>
                                                 </b-form-group>
                                             </b-tab>
@@ -138,7 +138,7 @@
                                     </b-popover>
 
                                     <!-- keywords filter -->
-                                    <div class="row">
+                                    <div class="row" v-if="ui.show_keywords">
                                         <div class="col-12">
                                             <b-input-group class="mt-2">
                                                 <treeselect
@@ -156,8 +156,8 @@
                                                     style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
                                                 />
                                                 <generic-multiselect
-                                                    v-if="!ui.tree_select"
                                                     @change="genericSelectChanged"
+                                                    v-if="!ui.tree_select"
                                                     parent_variable="search_keywords"
                                                     :initial_selection="search.search_keywords"
                                                     :model="Models.KEYWORD"
@@ -178,7 +178,7 @@
                                     </div>
 
                                     <!-- foods filter -->
-                                    <div class="row">
+                                    <div class="row" v-if="ui.show_foods">
                                         <div class="col-12">
                                             <b-input-group class="mt-2">
                                                 <treeselect
@@ -196,8 +196,8 @@
                                                     style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
                                                 />
                                                 <generic-multiselect
-                                                    v-if="!ui.tree_select"
                                                     @change="genericSelectChanged"
+                                                    v-if="!ui.tree_select"
                                                     parent_variable="search_foods"
                                                     :initial_selection="search.search_foods"
                                                     :model="Models.FOOD"
@@ -218,7 +218,7 @@
                                     </div>
 
                                     <!-- books filter -->
-                                    <div class="row">
+                                    <div class="row" v-if="ui.show_books">
                                         <div class="col-12">
                                             <b-input-group class="mt-2">
                                                 <generic-multiselect
@@ -243,7 +243,7 @@
                                     </div>
 
                                     <!-- ratings filter -->
-                                    <div class="row">
+                                    <div class="row" v-if="ui.show_rating">
                                         <div class="col-12">
                                             <b-input-group class="mt-2">
                                                 <treeselect
@@ -261,6 +261,30 @@
                                             </b-input-group>
                                         </div>
                                     </div>
+                                    <!-- units filter -->
+                                    <div class="row" v-if="ui.show_units">
+                                        <div class="col-12">
+                                            <b-input-group class="mt-2">
+                                                <generic-multiselect
+                                                    @change="genericSelectChanged"
+                                                    parent_variable="search_units"
+                                                    :initial_selection="search.search_units"
+                                                    :model="Models.UNIT"
+                                                    style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                                                    v-bind:placeholder="$t('Units')"
+                                                    :limit="50"
+                                                ></generic-multiselect>
+                                                <b-input-group-append>
+                                                    <b-input-group-text>
+                                                        <b-form-checkbox v-model="search.search_units_or" name="check-button" @change="refreshData(false)" class="shadow-none" tyle="width: 100%" switch>
+                                                            <span class="text-uppercase" v-if="search.search_units_or">{{ $t("or") }}</span>
+                                                            <span class="text-uppercase" v-else>{{ $t("and") }}</span>
+                                                        </b-form-checkbox>
+                                                    </b-input-group-text>
+                                                </b-input-group-append>
+                                            </b-input-group>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </b-collapse>
@@ -340,10 +364,12 @@ export default {
                 search_keywords: [],
                 search_foods: [],
                 search_books: [],
+                search_units: [],
                 search_ratings: undefined,
                 search_keywords_or: true,
                 search_foods_or: true,
                 search_books_or: true,
+                search_units_or: true,
                 pagination_page: 1,
                 expert_mode: false,
             },
@@ -490,15 +516,23 @@ export default {
             this.random_search = random
             let params = {
                 query: this.search.search_input,
-                keywords: this.search.search_keywords,
-                foods: this.search.search_foods,
+                keywords: this.search.search_keywords.map(function (A) {
+                    return A?.["id"] ?? A
+                }),
+                foods: this.search.search_foods.map(function (A) {
+                    return A?.["id"] ?? A
+                }),
                 rating: this.search.search_ratings,
+                units: this.search.search_units.map(function (A) {
+                    return A["id"]
+                }),
                 books: this.search.search_books.map(function (A) {
                     return A["id"]
                 }),
                 keywordsOr: this.search.search_keywords_or,
                 foodsOr: this.search.search_foods_or,
                 booksOr: this.search.search_books_or,
+                unitsOr: this.search.search_units_or,
                 internal: this.search.search_internal,
                 random: this.random_search,
                 _new: this.ui.sort_by_new,
@@ -561,6 +595,7 @@ export default {
             this.search.search_keywords = []
             this.search.search_foods = []
             this.search.search_books = []
+            this.search.search_units = []
             this.search.search_ratings = undefined
             this.search.pagination_page = 1
             this.refreshData(false)