fix missing pill when loading CustomFilter

cookbook/tests/other/test_makenow_filter.py

@@ -59,7 +59,7 @@ def test_makenow_ignoreshopping(recipes, makenow_recipe, user1, space_1):
     with scope(space=space_1):
         food = Food.objects.filter(ingredient__step__recipe=makenow_recipe.id).first()
         food.onhand_users.clear()
-        assert search.get_queryset(Recipe.objects.all()) == 0
+        assert search.get_queryset(Recipe.objects.all()).count() == 0
         food.ignore_shopping = True
         food.save()
         assert Food.objects.filter(ingredient__step__recipe=makenow_recipe.id, onhand_users__isnull=False).count() == 9

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -517,7 +517,7 @@ import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 Vue.use(VueCookies)
 Vue.use(BootstrapVue)
 
-let SEARCH_COOKIE_NAME = "search_settings2"
+let SEARCH_COOKIE_NAME = "search_settings3"
 let UI_COOKIE_NAME = "ui_search_settings"
 
 export default {
@@ -528,7 +528,7 @@ export default {
         return {
             // this.Models and this.Actions inherited from ApiMixin
             recipes: [],
-            facets: {},
+            facets: { Books: [], Foods: [], Keywords: [] },
             meal_plans: [],
             last_viewed_recipes: [],
             sortMenu: false,
@@ -590,7 +590,7 @@ export default {
                 show_books: true,
                 show_rating: true,
                 show_units: false,
-                show_filters: false,
+                show_filters: true,
                 show_sortby: false,
                 show_timescooked: false,
                 show_makenow: false,
@@ -722,13 +722,11 @@ export default {
                     this.search.search_keywords[0].items.push(Number.parseInt(x))
                     this.facets.Keywords.push({ id: x, name: "loading..." })
                 }
-            } else {
-                this.facets.Keywords = []
             }
 
             // TODO: figure out how to find nested items and load keyword/food children for that branch
             // probably a backend change in facets to pre-load children of nested items
-            this.facets.Foods = []
+
             for (let x of this.search.search_foods.map((x) => x.items).flat()) {
                 this.facets.Foods.push({ id: x, name: "loading..." })
             }
@@ -737,7 +735,6 @@ export default {
                 this.facets.Keywords.push({ id: x, name: "loading..." })
             }
 
-            this.facets.Books = []
             for (let x of this.search.search_books.map((x) => x.items).flat()) {
                 this.facets.Books.push({ id: x, name: "loading..." })
             }

vue/src/components/GenericMultiselect.vue

@@ -1,5 +1,6 @@
 <template>
     <multiselect
+        :id="id"
         v-model="selected_objects"
         :options="objects"
         :close-on-select="true"
@@ -23,6 +24,7 @@
 </template>
 
 <script>
+import Vue from "vue"
 import Multiselect from "vue-multiselect"
 import { ApiMixin } from "@/utils/utils"
 
@@ -33,6 +35,7 @@ export default {
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin
+            id: undefined,
             loading: false,
             objects: [],
             selected_objects: undefined,
@@ -74,10 +77,41 @@ export default {
         initial_selection: function (newVal, oldVal) {
             // watch it
             this.selected_objects = newVal
+            let get_details = []
+            let empty = {}
+            empty[this.label] = `..${this.$t("loading")}..`
+            this.selected_objects.forEach((x) => {
+                if (typeof x !== "object") {
+                    this.selected_objects[this.selected_objects.indexOf(x)] = { ...empty, id: x }
+                    get_details.push(x)
+                }
+            })
+            get_details.forEach((x) => {
+                this.genericAPI(this.model, this.Actions.FETCH, { id: x })
+                    .then((result) => {
+                        // this.selected_objects[this.selected_objects.map((y) => y.id).indexOf(x)] = result.data
+                        Vue.set(this.selected_objects, this.selected_objects.map((y) => y.id).indexOf(x), result.data)
+                    })
+                    .catch((err) => {
+                        this.selected_objects = this.selected_objects.filter((y) => y.id !== x)
+                    })
+            })
         },
         initial_single_selection: function (newVal, oldVal) {
             // watch it
             this.selected_objects = newVal
+            if (typeof this.selected_objects !== "object") {
+                let empty = {}
+                empty[this.label] = `..${this.$t("loading")}..`
+                this.selected_objects = { ...empty, id: this.selected_objects }
+                this.genericAPI(this.model, this.Actions.FETCH, { id: this.selected_objects })
+                    .then((result) => {
+                        this.selected_objects = result.data
+                    })
+                    .catch((err) => {
+                        this.selected_objects = undefined
+                    })
+            }
         },
         clear: function (newVal, oldVal) {
             if (this.multiple || !this.initial_single_selection) {
@@ -88,6 +122,7 @@ export default {
         },
     },
     mounted() {
+        this.id = Math.random()
         this.search("")
         if (this.multiple || !this.initial_single_selection) {
             this.selected_objects = this.initial_selection
@@ -133,7 +168,6 @@ export default {
                         }
                     })
                 }
-                // this.removeMissingItems()  # This removes items that are on another page of results
             })
         },
         selectionChanged: function () {
@@ -146,13 +180,6 @@ export default {
                 this.search("")
             }, 750)
         },
-        // removeMissingItems: function () {
-        //     if (this.multiple) {
-        //         this.selected_objects = this.selected_objects.filter((x) => !this.objects.map((y) => y.id).includes(x))
-        //     } else {
-        //         this.selected_objects = this.objects.filter((x) => x.id === this.selected_objects.id)[0]
-        //     }
-        // },
     },
 }
 </script>