implement sort order via API

cookbook/helper/recipe_search.py

@@ -56,10 +56,7 @@ class RecipeSearch():
         # TODO add created before/after
         # TODO image exists
         self._sort_order = self._params.get('sort_order', None)
-        # TODO add save
-
         self._books_or = str2bool(self._params.get('books_or', True))
-
         self._internal = str2bool(self._params.get('internal', False))
         self._random = str2bool(self._params.get('random', False))
         self._new = str2bool(self._params.get('new', False))
@@ -88,7 +85,7 @@ class RecipeSearch():
             self.search_rank = (
                 SearchRank('name_search_vector', self.search_query, cover_density=True)
                 + SearchRank('desc_search_vector', self.search_query, cover_density=True)
-                + SearchRank('steps__search_vector', self.search_query, cover_density=True)
+                # + SearchRank('steps__search_vector', self.search_query, cover_density=True)  # Is a large performance drag
             )
         self.orderby = []
         self._default_sort = ['-favorite']  # TODO add user setting
@@ -97,11 +94,11 @@ class RecipeSearch():
 
     def get_queryset(self, queryset):
         self._queryset = queryset
-        self.recently_viewed_recipes(self._last_viewed)
+        self._build_sort_order()
+        self._recently_viewed(num_recent=self._last_viewed)
+        self._last_cooked()
         self._favorite_recipes()
         self._new_recipes()
-        # self._last_viewed()
-        # self._last_cooked()
         self.keyword_filters(**self._keywords)
         self.food_filters(**self._foods)
         self.book_filters(**self._books)
@@ -111,35 +108,48 @@ class RecipeSearch():
         self.unit_filters(units=self._units)
         self.string_filters(string=self._string)
         # self._queryset = self._queryset.distinct()  # TODO 2x check. maybe add filter of recipe__in after orderby
-        self._apply_order_by()
+        return self._queryset.filter(space=self._request.space).order_by(*self.orderby)
-        return self._queryset.filter(space=self._request.space)
 
-    def _apply_order_by(self):
+    def _sort_includes(self, *args):
+        for x in args:
+            if x in self.orderby:
+                return True
+            elif '-' + x in self.orderby:
+                return True
+        return False
+
+    def _build_sort_order(self):
         if self._random:
             self._queryset = self._queryset.order_by("?")
         else:
-            if self._sort_order:
+            order = []
-                self._queryset.order_by(*self._sort_order)
+            # TODO add userpreference for default sort order and replace '-favorite'
-                return
+            default_order = ['-favorite']
-
+            # recent and new_recipe are always first; they float a few recipes to the top
-            order = []  # TODO add user preferences here: name, date cooked, rating, times cooked, date created, date viewed, random
+            if self._last_viewed:
-            if '-recent' in self.orderby and self._last_viewed:
                 order += ['-recent']
-            if '-new_recipe' in self.orderby and self._new:
+            if self._new:
                 order += ['-new_recipe']
 
-            if '-rank' in self.orderby and '-simularity' in self.orderby:
+            # if a sort order is provided by user - use that order
-                self._queryset = self._queryset.annotate(score=Sum(F('rank')+F('simularity')))
+            if self._sort_order:
-                order += ['-score']
+
-            elif '-rank' in self.orderby:
+                if not isinstance(self._sort_order, list):
-                self._queryset = self._queryset.annotate(score=F('rank'))
+                    order += [self._sort_order]
-                order += ['-score']
+                else:
-            elif '-simularity' in self.orderby:
+                    order += self._sort_order
-                self._queryset = self._queryset.annotate(score=F('simularity'))
+                if not self._postgres or not self._string:
-                order += ['-score']
+                    if 'score' in order:
-            for x in list(set(self.orderby)-set([*order, '-rank', '-simularity'])):
+                        order.remove('score')
-                order += [x]
+                    if '-score' in order:
-            self._queryset = self._queryset.order_by(*order)
+                        order.remove('-score')
+            # if no sort order provided prioritize text search, followed by the default search
+            elif self._postgres and self._string:
+                order += ['-score', *default_order]
+            # otherwise sort by the remaining order_by attributes or favorite by default
+            else:
+                order += default_order
+            self.orderby = order
 
     def string_filters(self, string=None):
         if not string:
@@ -157,19 +167,29 @@ class RecipeSearch():
                     query_filter |= f
                 else:
                     query_filter = f
-            self._queryset = self._queryset.filter(query_filter).distinct()
+            self._queryset = self._queryset.filter(query_filter)
-            # TODO add annotation for simularity
             if self._fulltext_include:
+                if self._fuzzy_match is None:
+                    self._queryset = self._queryset.annotate(score=self.search_rank)
+                else:
                     self._queryset = self._queryset.annotate(rank=self.search_rank)
-                self.orderby += ['-rank']
 
-            if self._fuzzy_match is not None:  # this annotation is full text, not trigram
+            if self._fuzzy_match is not None:
                 simularity = self._fuzzy_match.filter(pk=OuterRef('pk')).values('simularity')
+                if not self._fulltext_include:
+                    self._queryset = self._queryset.annotate(score=Coalesce(Subquery(simularity), 0.0))
+                else:
                     self._queryset = self._queryset.annotate(simularity=Coalesce(Subquery(simularity), 0.0))
-                self.orderby += ['-simularity']
+            if self._sort_includes('score') and self._fulltext_include and self._fuzzy_match is not None:
+                self._queryset = self._queryset.annotate(score=Sum(F('rank')+F('simularity')))
         else:
             self._queryset = self._queryset.filter(name__icontains=self._string)
 
+    def _last_cooked(self):
+        if self._sort_includes('lastcooked'):
+            self._queryset = self._queryset.annotate(lastcooked=Coalesce(
+                Max(Case(When(created_by=self._request.user, space=self._request.space, then='cooklog__pk'))), Value(0)))
+
     def _new_recipes(self, new_days=7):
         # TODO make new days a user-setting
         if not self._new:
@@ -178,20 +198,20 @@ class RecipeSearch():
             self._queryset.annotate(new_recipe=Case(
                 When(created_at__gte=(timezone.now() - timedelta(days=new_days)), then=('pk')), default=Value(0), ))
         )
-        self.orderby += ['-new_recipe']
 
-    def recently_viewed_recipes(self, last_viewed=None):
+    def _recently_viewed(self, num_recent=None):
-        if not last_viewed:
+        if not num_recent:
+            if self._sort_includes('lastviewed'):
+                self._queryset = self._queryset.annotate(lastviewed=Coalesce(
+                    Max(Case(When(created_by=self._request.user, space=self._request.space, then='viewlog__pk'))), Value(0)))
             return
 
         last_viewed_recipes = ViewLog.objects.filter(created_by=self._request.user, space=self._request.space).values(
-            'recipe').annotate(recent=Max('created_at')).order_by('-recent')
+            'recipe').annotate(recent=Max('created_at')).order_by('-recent')[:num_recent]
-        last_viewed_recipes = last_viewed_recipes[:last_viewed]
-        self.orderby += ['-recent']
         self._queryset = self._queryset.annotate(recent=Coalesce(Max(Case(When(pk__in=last_viewed_recipes.values('recipe'), then='viewlog__pk'))), Value(0)))
 
     def _favorite_recipes(self):
-        self.orderby += ['-favorite']  # default sort?
+        if self._sort_includes('favorite'):
             favorite_recipes = CookLog.objects.filter(created_by=self._request.user, space=self._request.space, recipe=OuterRef('pk')
                                                       ).values('recipe').annotate(count=Count('pk', distinct=True)).values('count')
             self._queryset = self._queryset.annotate(favorite=Coalesce(Subquery(favorite_recipes), 0))
@@ -258,12 +278,13 @@ class RecipeSearch():
         self._queryset = self._queryset.filter(steps__ingredients__unit__in=units)
 
     def rating_filter(self, rating=None):
+        if rating or self._sort_includes('rating'):
+            # TODO make ratings a settings user-only vs all-users
+            self._queryset = self._queryset.annotate(rating=Round(Avg(Case(When(cooklog__created_by=self._request.user, then='cooklog__rating'), default=Value(0)))))
         if rating is None:
             return
         lessthan = '-' in rating
 
-        # TODO make ratings a settings user-only vs all-users
-        self._queryset = self._queryset.annotate(rating=Round(Avg(Case(When(cooklog__created_by=self._request.user, then='cooklog__rating'), default=Value(0)))))
         if rating == 0:
             self._queryset = self._queryset.filter(rating=0)
         elif lessthan:

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -112,6 +112,9 @@
                                                 <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-form-group v-if="ui.enable_expert" v-bind:label="$t('show_sortby')" label-for="popover-show_sortby" label-cols="8" class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_sortby" id="popover-show_sortby" size="sm"></b-form-checkbox>
+                                                </b-form-group>
                                             </b-tab>
 
                                             <b-tab :title="$t('advanced')" :title-link-class="['mx-0']">
@@ -140,6 +143,37 @@
                                         </div>
                                     </b-popover>
 
+                                    <!-- custom filters filter -->
+                                    <div class="row" v-if="ui.show_filters || ui.show_sortby">
+                                        <div class="col-12">
+                                            <b-input-group class="mt-2">
+                                                <generic-multiselect
+                                                    v-if="ui.show_filters"
+                                                    @change="genericSelectChanged"
+                                                    parent_variable="search_filter"
+                                                    :initial_selection="search.search_filter"
+                                                    :model="Models.CUSTOM_FILTER"
+                                                    style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                                                    :placeholder="$t('Custom Filter')"
+                                                    :multiple="false"
+                                                    :limit="50"
+                                                />
+                                                <multiselect
+                                                    v-if="ui.show_sortby"
+                                                    v-model="search.sort_order"
+                                                    :options="sortOptions"
+                                                    :multiple="true"
+                                                    :hide-selected="true"
+                                                    :internal-search="false"
+                                                    @input="refreshData(false)"
+                                                    label="text"
+                                                    track-by="id"
+                                                    style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                                                    :placeholder="$t('sort_by')"
+                                                />
+                                            </b-input-group>
+                                        </div>
+                                    </div>
                                     <!-- keywords filter -->
                                     <h6 class="mb-0" v-if="search.expert_mode && search.keywords_fields > 1">{{ $t("Keywords") }}</h6>
                                     <div class="row" v-if="ui.show_keywords">
@@ -429,17 +463,18 @@ import GenericMultiselect from "@/components/GenericMultiselect"
 import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
+import Multiselect from "vue-multiselect"
 
 Vue.use(VueCookies)
 Vue.use(BootstrapVue)
 
-let SEARCH_COOKIE_NAME = "search_settings1"
+let SEARCH_COOKIE_NAME = "search_settings2"
 let UI_COOKIE_NAME = "ui_search_settings"
 
 export default {
     name: "RecipeSearchView",
     mixins: [ResolveUrlMixin, ApiMixin, ToastMixin],
-    components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher },
+    components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect },
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin
@@ -474,6 +509,8 @@ export default {
                 search_rating: undefined,
                 search_rating_gte: true,
                 search_units_or: true,
+                search_filter: undefined,
+                sort_order: [],
                 pagination_page: 1,
                 expert_mode: false,
                 keywords_fields: 1,
@@ -499,11 +536,11 @@ export default {
                 show_rating: true,
                 show_units: false,
                 show_filters: false,
+                show_sortby: false,
             },
             pagination_count: 0,
             random_search: false,
             debug: false,
-            custom_filters: [],
         }
     },
     computed: {
@@ -565,6 +602,35 @@ export default {
         unitFields: function () {
             return !this.expertMode ? 1 : this.search.units_fields
         },
+        sortOptions: function () {
+            let sort_order = []
+            let x = 1
+            const field = [
+                [this.$t("search_rank"), "score"],
+                [this.$t("Name"), "name"],
+                [this.$t("date_cooked"), "lastcooked"],
+                [this.$t("Rating"), "rating"],
+                [this.$t("times_cooked"), "favorite"],
+                [this.$t("date_created"), "created_at"],
+                [this.$t("date_viewed"), "lastviewed"],
+            ]
+            field.forEach((f) => {
+                sort_order.push(
+                    {
+                        id: x,
+                        text: `${f[0]} ↑`,
+                        value: f[1],
+                    },
+                    {
+                        id: x + 1,
+                        text: `${f[0]} ↓`,
+                        value: `-${f[1]}`,
+                    }
+                )
+                x = x + 2
+            })
+            return sort_order
+        },
     },
     mounted() {
         this.$nextTick(function () {
@@ -572,7 +638,7 @@ export default {
                 this.ui = Object.assign({}, this.ui, this.$cookies.get(UI_COOKIE_NAME))
             }
             if (this.ui.remember_search && this.$cookies.isKey(SEARCH_COOKIE_NAME)) {
-                this.search = Object.assign({}, this.search, this.$cookies.get(SEARCH_COOKIE_NAME), `${this.ui.remember_hours}h`)
+                this.search = Object.assign({}, this.search, this.$cookies.get(SEARCH_COOKIE_NAME))
             }
             let urlParams = new URLSearchParams(window.location.search)
 
@@ -644,8 +710,8 @@ export default {
             this.refreshData(false)
         },
         "ui.tree_select": function () {
-            if (this.ui.tree_select && (!this.facets?.Keywords || !this.facets?.Foods)) {
+            if (this.ui.tree_select && (this.facets?.Keywords.length == 0 || this.facets?.Foods.length == 0) && this.facets?.cache_key) {
-                this.getFacets(this.facets?.hash)
+                this.getFacets(this.facets?.cache_key)
             }
         },
         "search.search_input": _debounce(function () {
@@ -656,6 +722,10 @@ export default {
         "ui.page_size": _debounce(function () {
             this.refreshData(false)
         }, 300),
+        "search.search_filter": _debounce(function () {
+            // TODO clear existing filters
+            this.refreshData(false)
+        }, 300),
     },
     methods: {
         // this.genericAPI inherited from ApiMixin
@@ -728,6 +798,8 @@ export default {
             })
             this.search.search_units = []
             this.search.search_rating = undefined
+            this.search.search_filter = undefined
+            this.search.sort_order = undefined
             this.search.pagination_page = 1
             this.search.keywords_fields = 1
             this.search.foods_fields = 1
@@ -792,6 +864,9 @@ export default {
             }
         },
         buildParams: function (random) {
+            if (this.search.search_filter) {
+                return JSON.parse(this.search.search_filter.search)
+            }
             this.random_search = random
             let rating = this.search.search_rating
             if (rating !== undefined && !this.search.search_rating_gte) {
@@ -811,9 +886,13 @@ export default {
                 page: this.search.pagination_page,
                 pageSize: this.ui.page_size,
             }
+
+            let query = { sort_order: this.search.sort_order.map((x) => x.value) }
             if (this.searchFiltered()) {
-                params.options = { query: { last_viewed: this.ui.recently_viewed } }
+                query.last_viewed = this.ui.recently_viewed
             }
+            params.options = { query: query }
+            console.log(params)
             return params
         },
         searchFiltered: function (ignore_string = false) {
@@ -865,7 +944,6 @@ export default {
             this.genericAPI(this.Models.CUSTOM_FILTER, this.Actions.CREATE, params)
                 .then((result) => {
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
-                    console.log("you saved: ", filtername, this.buildParams(false), result)
                 })
                 .catch((err) => {
                     console.log(err, Object.keys(err))

vue/src/components/Buttons/RecipeSwitcher.vue

@@ -1,22 +1,25 @@
 <template>
     <div v-if="recipes !== {}">
         <div id="switcher" class="align-center">
-            <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle"
+            <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes />
-               v-b-toggle.related-recipes/>
         </div>
-        <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
+        <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" @shown="updatePinnedRecipes()">
-                   @shown="updatePinnedRecipes()">
             <template #default="{ hide }">
-
                 <div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
-
                     <h5>Planned <i class="fas fa-calendar fa-fw"></i></h5>
 
                     <div class="text-right">
                         <template v-if="planned_recipes.length > 0">
                             <div v-for="r in planned_recipes" :key="`plan${r.id}`">
                                 <div class="pb-1 pt-1">
-                                    <a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
+                                    <a
+                                        @click="
+                                            navRecipe(r)
+                                            hide()
+                                        "
+                                        href="javascript:void(0);"
+                                        >{{ r.name }}</a
+                                    >
                                 </div>
                             </div>
                         </template>
@@ -32,16 +35,20 @@
                             <div v-for="r in pinned_recipes" :key="`pin${r.id}`">
                                 <b-row class="pb-1 pt-1">
                                     <b-col cols="2">
-                                        <a href="javascript:void(0)" @click="unPinRecipe(r)"
+                                        <a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i class="fas fa-times"></i></a>
-                                           class="text-muted"><i class="fas fa-times"></i></a>
                                     </b-col>
                                     <b-col cols="10">
-                                        <a @click="navRecipe(r); hide()" href="javascript:void(0);"
+                                        <a
-                                           class="align-self-end">{{ r.name }} </a>
+                                            @click="
+                                                navRecipe(r)
+                                                hide()
+                                            "
+                                            href="javascript:void(0);"
+                                            class="align-self-end"
+                                            >{{ r.name }}
+                                        </a>
                                     </b-col>
-
                                 </b-row>
-
                             </div>
                         </div>
                     </template>
@@ -49,21 +56,24 @@
                         <span class="text-muted">You have no pinned recipes!</span>
                     </template>
 
-
                     <template v-if="related_recipes.length > 0">
                         <h5>Related <i class="fas fa-link fa-fw"></i></h5>
                         <div class="text-right">
                             <div v-for="r in related_recipes" :key="`related${r.id}`">
                                 <div class="pb-1 pt-1">
-                                    <a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
+                                    <a
+                                        @click="
+                                            navRecipe(r)
+                                            hide()
+                                        "
+                                        href="javascript:void(0);"
+                                        >{{ r.name }}</a
+                                    >
                                 </div>
                             </div>
                         </div>
                     </template>
-
                 </div>
-
-
             </template>
             <template #footer="{ hide }">
                 <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
@@ -96,11 +106,10 @@ export default {
     computed: {
         is_recipe_view: function () {
             // determine if the currently open view is the recipe view to decide if links should switch to or link to a recipe
-            return this.$root._vnode.tag.includes('RecipeView')
+            return this.$root._vnode.tag.includes("RecipeView")
         },
     },
     mounted() {
-
         let promises = []
         promises.push(this.loadRelatedRecipes())
         this.loadPinnedRecipes()
@@ -112,7 +121,6 @@ export default {
     },
     methods: {
         navRecipe: function (recipe) {
-
             if (this.is_recipe_view) {
                 this.$emit("switch", this.recipes[recipe.id])
             } else {
@@ -143,7 +151,6 @@ export default {
                     this.recipes[id] = result.data
                 })
             })
-
         },
         loadRelatedRecipes: function () {
             let apiClient = new ApiApiFactory()
@@ -151,13 +158,13 @@ export default {
             // get related recipes and save them for later
             if (this.$parent.recipe) {
                 this.related_recipes = [this.$parent.recipe]
-                return apiClient.relatedRecipe(this.$parent.recipe.id, {query: {levels: 2, format: 'json'}}).then((result) => {
+                return apiClient.relatedRecipe(this.$parent.recipe.id, { query: { levels: 2, format: "json" } }).then((result) => {
                     this.related_recipes = this.related_recipes.concat(result.data)
                 })
             }
         },
         loadPinnedRecipes: function () {
-            let pinned_recipe_ids = JSON.parse(localStorage.getItem('pinned_recipes')) || []
+            let pinned_recipe_ids = JSON.parse(localStorage.getItem("pinned_recipes")) || []
             this.pinned_recipes = pinned_recipe_ids
         },
         loadMealPlans: function () {
@@ -165,7 +172,7 @@ export default {
             // TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
             var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
             let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0]
-            return apiClient.listMealPlans({query: {from_date: today, to_date: today,},}).then((result) => {
+            return apiClient.listMealPlans({ query: { from_date: today, to_date: today } }).then((result) => {
                 let promises = []
                 result.data.forEach((mealplan) => {
                     this.planned_recipes.push({ ...mealplan?.recipe, servings: mealplan?.servings })
@@ -184,12 +191,12 @@ export default {
             })
         },
         unPinRecipe: function (recipe) {
-            let pinnedRecipes = JSON.parse(localStorage.getItem('pinned_recipes')) || []
+            let pinnedRecipes = JSON.parse(localStorage.getItem("pinned_recipes")) || []
             pinnedRecipes = pinnedRecipes.filter((r) => r.id !== recipe.id)
-            console.log('pinned left', pinnedRecipes)
+            console.log("pinned left", pinnedRecipes)
             this.pinned_recipes = pinnedRecipes
-            localStorage.setItem('pinned_recipes', JSON.stringify(pinnedRecipes))
+            localStorage.setItem("pinned_recipes", JSON.stringify(pinnedRecipes))
-        }
+        },
     },
 }
 </script>

vue/src/components/Modals/ShoppingModal.vue

@@ -97,6 +97,7 @@ export default {
         }
     },
     mounted() {
+        console.log("shopping modal")
         this.recipe_servings = this.servings
     },
     computed: {

vue/src/components/RecipeContextMenu.vue

@@ -100,7 +100,7 @@ export default {
         return {
             servings_value: 0,
             recipe_share_link: undefined,
-            modal_id: this.recipe.id + Math.round(Math.random() * 100000),
+            modal_id: undefined,
             options: {
                 entryEditing: {
                     date: null,
@@ -200,6 +200,7 @@ export default {
             navigator.share(shareData)
         },
         addToShopping() {
+            this.modal_id = this.recipe.id + Math.round(Math.random() * 100000)
             this.$bvModal.show(`shopping_${this.modal_id}`)
         },
     },

vue/src/locales/en.json

@@ -315,5 +315,14 @@
     "left_handed": "Left-handed mode",
     "left_handed_help": "Will optimize the UI for use with your left hand.",
     "Custom Filter": "Custom Filter",
-    "shared_with": "Shared With"
+    "shared_with": "Shared With",
+    "sort_by": "Sort By",
+    "asc": "Ascending",
+    "desc": "Descending",
+    "date_viewed": "Last Viewed",
+    "date_cooked": "Last Cooked",
+    "times_cooked": "Times Cooked",
+    "date_created": "Date Created",
+    "show_sortby": "Show Sort By",
+    "search_rank": "Search Rank"
 }