From 5bd9a15e4b9f74922dfe3e5ed697779ebc299bb8 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 4 Apr 2022 20:11:22 +0200
Subject: [PATCH] small fixes

---
 cookbook/templates/setup.html                 |   4 +
 .../apps/RecipeEditView/RecipeEditView.vue    | 273 ++++++---
 .../RecipeSearchView/RecipeSearchView.vue     | 547 ++++++++++++------
 3 files changed, 559 insertions(+), 265 deletions(-)

diff --git a/cookbook/templates/setup.html b/cookbook/templates/setup.html
index f638028ab..85e422387 100644
--- a/cookbook/templates/setup.html
+++ b/cookbook/templates/setup.html
@@ -20,4 +20,8 @@
         <button class="btn btn-success" type="submit"><i class="fas fa-save"></i> {% trans 'Create Superuser account' %}</button>
     </form>
 
+     <script>
+        $('#id_name').focus()
+    </script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 4aab4ef63..17a18dbae 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -11,7 +11,7 @@
             <div class="row">
                 <div class="col-md-12">
                     <label for="id_name"> {{ $t("Name") }}</label>
-                    <input class="form-control" id="id_name" v-model="recipe.name" />
+                    <input class="form-control" id="id_name" v-model="recipe.name"/>
                 </div>
             </div>
             <div class="row pt-2">
@@ -19,14 +19,16 @@
                     <label for="id_description">
                         {{ $t("Description") }}
                     </label>
-                    <textarea id="id_description" class="form-control" v-model="recipe.description" maxlength="512"></textarea>
+                    <textarea id="id_description" class="form-control" v-model="recipe.description"
+                              maxlength="512"></textarea>
                 </div>
             </div>
 
             <!-- Image and misc properties -->
             <div class="row pt-2">
                 <div class="col-md-6" style="max-height: 50vh; min-height: 30vh">
-                    <input id="id_file_upload" ref="file_upload" type="file" hidden @change="uploadImage($event.target.files[0])" />
+                    <input id="id_file_upload" ref="file_upload" type="file" hidden
+                           @change="uploadImage($event.target.files[0])"/>
 
                     <div
                         class="h-100 w-100 border border-primary rounded"
@@ -35,26 +37,31 @@
                         @dragover.prevent
                         @click="$refs.file_upload.click()"
                     >
-                        <i class="far fa-image fa-10x text-primary" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)" v-if="!recipe.image"></i>
+                        <i class="far fa-image fa-10x text-primary"
+                           style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
+                           v-if="!recipe.image"></i>
 
-                        <img :src="recipe.image" id="id_image" class="img img-fluid img-responsive" style="object-fit: cover; height: 100%" v-if="recipe.image" />
+                        <img :src="recipe.image" id="id_image" class="img img-fluid img-responsive"
+                             style="object-fit: cover; height: 100%" v-if="recipe.image"/>
                     </div>
-                    <button style="bottom: 10px; left: 30px; position: absolute" class="btn btn-danger" @click="deleteImage" v-if="recipe.image">{{ $t("Delete") }}</button>
+                    <button style="bottom: 10px; left: 30px; position: absolute" class="btn btn-danger"
+                            @click="deleteImage" v-if="recipe.image">{{ $t("Delete") }}
+                    </button>
                 </div>
 
                 <div class="col-md-6 mt-1">
                     <label for="id_name"> {{ $t("Preparation") }} {{ $t("Time") }} ({{ $t("min") }})</label>
-                    <input class="form-control" id="id_prep_time" v-model="recipe.working_time" type="number" />
-                    <br />
+                    <input class="form-control" id="id_prep_time" v-model="recipe.working_time" type="number"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Waiting") }} {{ $t("Time") }} ({{ $t("min") }})</label>
-                    <input class="form-control" id="id_wait_time" v-model="recipe.waiting_time" type="number" />
-                    <br />
+                    <input class="form-control" id="id_wait_time" v-model="recipe.waiting_time" type="number"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Servings") }}</label>
-                    <input class="form-control" id="id_servings" v-model="recipe.servings" type="number" />
-                    <br />
+                    <input class="form-control" id="id_servings" v-model="recipe.servings" type="number"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Servings") }} {{ $t("Text") }}</label>
-                    <input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32" />
-                    <br />
+                    <input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32"/>
+                    <br/>
                     <label for="id_name"> {{ $t("Keywords") }}</label>
                     <multiselect
                         v-model="recipe.keywords"
@@ -122,26 +129,31 @@
                             <div class="card-body" v-if="recipe.nutrition !== null">
                                 <b-alert show>
                                     There is currently only very basic support for tracking nutritional information. A
-                                    <a href="https://github.com/vabene1111/recipes/issues/896" target="_blank" rel="noreferrer nofollow">big update</a> is planned to improve on this in many different areas.
+                                    <a href="https://github.com/vabene1111/recipes/issues/896" target="_blank"
+                                       rel="noreferrer nofollow">big update</a> is planned to improve on this in many
+                                    different areas.
                                 </b-alert>
 
                                 <label for="id_name"> {{ $t(energy()) }}</label>
 
-                                <input class="form-control" id="id_calories" v-model="recipe.nutrition.calories" />
+                                <input class="form-control" id="id_calories" v-model="recipe.nutrition.calories"/>
 
                                 <label for="id_name"> {{ $t("Carbohydrates") }}</label>
-                                <input class="form-control" id="id_carbohydrates" v-model="recipe.nutrition.carbohydrates" />
+                                <input class="form-control" id="id_carbohydrates"
+                                       v-model="recipe.nutrition.carbohydrates"/>
 
                                 <label for="id_name"> {{ $t("Fats") }}</label>
-                                <input class="form-control" id="id_fats" v-model="recipe.nutrition.fats" />
+                                <input class="form-control" id="id_fats" v-model="recipe.nutrition.fats"/>
 
                                 <label for="id_name"> {{ $t("Proteins") }}</label>
-                                <input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins" />
+                                <input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins"/>
                             </div>
                         </b-collapse>
                     </div>
                     <b-card-header header-tag="header" class="p-1" role="tab">
-                        <b-button squared block v-b-toggle.additional_collapse class="text-left" variant="outline-primary">{{ $t("additional_options") }}</b-button>
+                        <b-button squared block v-b-toggle.additional_collapse class="text-left"
+                                  variant="outline-primary">{{ $t("additional_options") }}
+                        </b-button>
                     </b-card-header>
                     <b-collapse id="additional_collapse" class="mt-2" v-model="additional_visible">
                         <b-form-group>
@@ -150,8 +162,12 @@
                                 <b-input-group-text squared>
                                     <b-form-checkbox v-model="recipe.create_food"></b-form-checkbox>
                                 </b-input-group-text>
-                                <b-input-group-text squared v-if="recipe.create_food"> {{ $t("Name") }}</b-input-group-text>
-                                <b-form-input squared v-if="recipe.create_food" v-model="recipe.food_name" id="food_name"></b-form-input>
+                                <b-input-group-text squared v-if="recipe.create_food"> {{
+                                        $t("Name")
+                                    }}
+                                </b-input-group-text>
+                                <b-form-input squared v-if="recipe.create_food" v-model="recipe.food_name"
+                                              id="food_name"></b-form-input>
                             </b-input-group-append>
                             <em class="small text-muted">
                                 {{ $t("create_food_desc") }}
@@ -162,7 +178,8 @@
             </div>
 
             <!-- Steps -->
-            <draggable :list="recipe.steps" group="steps" :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
+            <draggable :list="recipe.steps" group="steps" :empty-insert-threshold="10" handle=".handle"
+                       @sort="sortSteps()">
                 <div v-for="(step, step_index) in recipe.steps" v-bind:key="step_index">
                     <div class="card mt-2 mb-2">
                         <div class="card-body pr-2 pl-2 pr-md-5 pl-md-5" :id="`id_card_step_${step_index}`">
@@ -176,26 +193,33 @@
                                     </h4>
                                 </div>
                                 <div class="col-1" style="text-align: right">
-                                    <a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink"
+                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         <i class="fas fa-ellipsis-v text-muted"></i>
                                     </a>
 
                                     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
-                                        <button class="dropdown-item" @click="removeStep(step)"><i class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}</button>
+                                        <button class="dropdown-item" @click="removeStep(step)"><i
+                                            class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}
+                                        </button>
 
-                                        <button type="button" class="dropdown-item" v-if="!step.show_as_header" @click="step.show_as_header = true">
+                                        <button type="button" class="dropdown-item" v-if="!step.show_as_header"
+                                                @click="step.show_as_header = true">
                                             <i class="fas fa-eye fa-fw"></i> {{ $t("Show_as_header") }}
                                         </button>
 
-                                        <button type="button" class="dropdown-item" v-if="step.show_as_header" @click="step.show_as_header = false">
+                                        <button type="button" class="dropdown-item" v-if="step.show_as_header"
+                                                @click="step.show_as_header = false">
                                             <i class="fas fa-eye-slash fa-fw"></i> {{ $t("Hide_as_header") }}
                                         </button>
 
-                                        <button class="dropdown-item" @click="moveStep(step, step_index - 1)" v-if="step_index > 0">
+                                        <button class="dropdown-item" @click="moveStep(step, step_index - 1)"
+                                                v-if="step_index > 0">
                                             <i class="fa fa-arrow-up fa-fw"></i>
                                             {{ $t("Move_Up") }}
                                         </button>
-                                        <button class="dropdown-item" @click="moveStep(step, step_index + 1)" v-if="step_index !== recipe.steps.length - 1">
+                                        <button class="dropdown-item" @click="moveStep(step, step_index + 1)"
+                                                v-if="step_index !== recipe.steps.length - 1">
                                             <i class="fa fa-arrow-down fa-fw"></i> {{ $t("Move_Down") }}
                                         </button>
                                     </div>
@@ -206,30 +230,36 @@
                             <div class="row">
                                 <div class="col-md-12">
                                     <label :for="'id_step_' + step.id + 'name'">{{ $t("Step_Name") }}</label>
-                                    <input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'" />
+                                    <input class="form-control" v-model="step.name"
+                                           :id="'id_step_' + step.id + 'name'"/>
                                 </div>
                             </div>
 
                             <!-- step data visibility controller -->
                             <div class="row pt-2">
                                 <div class="col col-md-12">
-                                    <b-button pill variant="primary" size="sm" class="ml-1" @click="step.time_visible = true" v-if="!step.time_visible">
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.time_visible = true" v-if="!step.time_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Time") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1" @click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1" @click="step.instruction_visible = true" v-if="!step.instruction_visible">
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.instruction_visible = true" v-if="!step.instruction_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Instructions") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1" @click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Recipe") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1" @click="step.file_visible = true" v-if="!step.file_visible">
+                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                              @click="step.file_visible = true" v-if="!step.file_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("File") }}
                                     </b-button>
                                     <b-button
@@ -250,7 +280,8 @@
                             <div class="row pt-2" v-if="step.time_visible">
                                 <div class="col-md-12">
                                     <label :for="'id_step_' + step.id + '_time'">{{ $t("step_time_minutes") }}</label>
-                                    <input class="form-control" v-model="step.time" :id="'id_step_' + step.id + '_time'" />
+                                    <input class="form-control" v-model="step.time"
+                                           :id="'id_step_' + step.id + '_time'"/>
                                 </div>
                             </div>
 
@@ -333,16 +364,23 @@
                                         </div>
                                         <div class="row">
                                             <div class="col-md-12 pr-0 pl-0 pr-md-2 pl-md-2 mt-2">
-                                                <draggable :list="step.ingredients" group="ingredients" :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
-                                                    <div v-for="(ingredient, index) in step.ingredients" :key="ingredient.id">
-                                                        <hr class="d-md-none" />
+                                                <draggable :list="step.ingredients" group="ingredients"
+                                                           :empty-insert-threshold="10" handle=".handle"
+                                                           @sort="sortIngredients(step)">
+                                                    <div v-for="(ingredient, index) in step.ingredients"
+                                                         :key="ingredient.id">
+                                                        <hr class="d-md-none"/>
                                                         <div class="d-flex">
                                                             <div class="flex-grow-0 handle align-self-start">
-                                                                <button type="button" class="btn btn-lg shadow-none pr-0 pl-1 pr-md-2 pl-md-2"><i class="fas fa-arrows-alt-v"></i></button>
+                                                                <button type="button"
+                                                                        class="btn btn-lg shadow-none pr-0 pl-1 pr-md-2 pl-md-2">
+                                                                    <i class="fas fa-arrows-alt-v"></i></button>
                                                             </div>
 
-                                                            <div class="flex-fill row" style="margin-left: 4px; margin-right: 4px">
-                                                                <div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
+                                                            <div class="flex-fill row"
+                                                                 style="margin-left: 4px; margin-right: 4px">
+                                                                <div class="col-lg-2 col-md-6 small-padding"
+                                                                     v-if="!ingredient.is_header">
                                                                     <input
                                                                         class="form-control"
                                                                         v-model="ingredient.amount"
@@ -353,7 +391,8 @@
                                                                     />
                                                                 </div>
 
-                                                                <div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
+                                                                <div class="col-lg-2 col-md-6 small-padding"
+                                                                     v-if="!ingredient.is_header">
                                                                     <!-- search set to false to allow API to drive results & order -->
                                                                     <multiselect
                                                                         v-if="!ingredient.no_amount"
@@ -380,10 +419,14 @@
                                                                         :loading="units_loading"
                                                                         @search-change="searchUnits"
                                                                     >
-                                                                        <template v-slot:noOptions>{{ $t("empty_list") }}</template>
+                                                                        <template v-slot:noOptions>{{
+                                                                                $t("empty_list")
+                                                                            }}
+                                                                        </template>
                                                                     </multiselect>
                                                                 </div>
-                                                                <div class="col-lg-4 col-md-6 small-padding" v-if="!ingredient.is_header">
+                                                                <div class="col-lg-4 col-md-6 small-padding"
+                                                                     v-if="!ingredient.is_header">
                                                                     <!-- search set to false to allow API to drive results & order -->
 
                                                                     <multiselect
@@ -410,10 +453,14 @@
                                                                         :loading="foods_loading"
                                                                         @search-change="searchFoods"
                                                                     >
-                                                                        <template v-slot:noOptions>{{ $t("empty_list") }}</template>
+                                                                        <template v-slot:noOptions>{{
+                                                                                $t("empty_list")
+                                                                            }}
+                                                                        </template>
                                                                     </multiselect>
                                                                 </div>
-                                                                <div class="small-padding" v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
+                                                                <div class="small-padding"
+                                                                     v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
                                                                     <input
                                                                         class="form-control"
                                                                         maxlength="256"
@@ -444,32 +491,43 @@
                                                                     <i class="fas fa-ellipsis-v text-muted"></i>
                                                                 </a>
 
-                                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink2">
-                                                                    <button type="button" class="dropdown-item" @click="removeIngredient(step, ingredient)">
+                                                                <div class="dropdown-menu dropdown-menu-right"
+                                                                     aria-labelledby="dropdownMenuLink2">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            @click="removeIngredient(step, ingredient)">
                                                                         <i class="fa fa-trash fa-fw"></i>
                                                                         {{ $t("Delete") }}
                                                                     </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="!ingredient.is_header" @click="ingredient.is_header = true">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="!ingredient.is_header"
+                                                                            @click="ingredient.is_header = true">
                                                                         <i class="fas fa-heading fa-fw"></i>
                                                                         {{ $t("Make_Header") }}
                                                                     </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="ingredient.is_header" @click="ingredient.is_header = false">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="ingredient.is_header"
+                                                                            @click="ingredient.is_header = false">
                                                                         <i class="fas fa-leaf fa-fw"></i>
                                                                         {{ $t("Make_Ingredient") }}
                                                                     </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="!ingredient.no_amount" @click="ingredient.no_amount = true">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="!ingredient.no_amount"
+                                                                            @click="ingredient.no_amount = true">
                                                                         <i class="fas fa-balance-scale-right fa-fw"></i>
                                                                         {{ $t("Disable_Amount") }}
                                                                     </button>
 
-                                                                    <button type="button" class="dropdown-item" v-if="ingredient.no_amount" @click="ingredient.no_amount = false">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="ingredient.no_amount"
+                                                                            @click="ingredient.no_amount = false">
                                                                         <i class="fas fa-balance-scale-right fa-fw"></i>
                                                                         {{ $t("Enable_Amount") }}
                                                                     </button>
-                                                                    <button type="button" class="dropdown-item" @click="copyTemplateReference(index, ingredient)">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            @click="copyTemplateReference(index, ingredient)">
                                                                         <i class="fas fa-code"></i>
                                                                         {{ $t("Copy_template_reference") }}
                                                                     </button>
@@ -481,8 +539,10 @@
                                             </div>
                                         </div>
                                         <div class="row">
-                                            <div class="col-md-2 offset-md-5" style="text-align: center; margin-top: 8px">
-                                                <button class="btn btn-success btn-block" @click="addIngredient(step)"><i class="fa fa-plus"></i></button>
+                                            <div class="col-md-2 offset-md-5"
+                                                 style="text-align: center; margin-top: 8px">
+                                                <button class="btn btn-success btn-block" @click="addIngredient(step)">
+                                                    <i class="fa fa-plus"></i></button>
                                             </div>
                                         </div>
                                     </div>
@@ -515,24 +575,39 @@
                                     {{ $t("Add_Step") }}
                                 </button>
 
-                                <button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none"><i class="fas fa-sort-amount-down-alt fa-lg"></i></button>
+                                <button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none"><i
+                                    class="fas fa-sort-amount-down-alt fa-lg"></i></button>
                             </b-button-group>
                         </div>
                     </div>
                 </div>
             </draggable>
 
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
-            <br />
+
+            <div class="row" v-if="recipe.steps.length === 0">
+                <div class="col col-md-12 text-center">
+                    <b-button-group>
+                        <button type="button" @click="addStep(0)" class="btn btn-success shadow-none">
+                            {{ $t("Add_Step") }}
+                        </button>
+                    </b-button-group>
+                </div>
+            </div>
+
+
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
 
             <!-- bottom buttons save/close/view -->
-            <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white" v-if="recipe !== undefined">
+            <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
+                 v-if="recipe !== undefined">
                 <div class="col-md-3 col-6">
-                    <a :href="resolveDjangoUrl('delete_recipe', recipe.id)" class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
+                    <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
+                       class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
                 </div>
                 <div class="col-md-3 col-6">
                     <a :href="resolveDjangoUrl('view_recipe', recipe.id)">
@@ -540,12 +615,15 @@
                     </a>
                 </div>
                 <div class="col-md-3 col-6">
-                    <button type="button" @click="updateRecipe(false)" v-b-tooltip.hover :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
+                    <button type="button" @click="updateRecipe(false)" v-b-tooltip.hover
+                            :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
                         {{ $t("Save") }}
                     </button>
                 </div>
                 <div class="col-md-3 col-6">
-                    <button type="button" @click="updateRecipe(true)" v-b-tooltip.hover :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`" class="btn btn-sm btn-block btn-success shadow-none">
+                    <button type="button" @click="updateRecipe(true)" v-b-tooltip.hover
+                            :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`"
+                            class="btn btn-sm btn-block btn-success shadow-none">
                         {{ $t("Save_and_View") }}
                     </button>
                 </div>
@@ -553,9 +631,11 @@
 
             <!-- modal for sorting steps -->
             <b-modal id="id_modal_sort" v-bind:title="$t('Sort')" ok-only>
-                <draggable :list="recipe.steps" group="step_sorter" :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()" class="list-group" tag="ul">
+                <draggable :list="recipe.steps" group="step_sorter" :empty-insert-threshold="10" handle=".handle"
+                           @sort="sortSteps()" class="list-group" tag="ul">
                     <li class="list-group-item" v-for="(step, step_index) in recipe.steps" v-bind:key="step_index">
-                        <button type="button" class="btn btn-lg shadow-none handle"><i class="fas fa-arrows-alt-v"></i></button>
+                        <button type="button" class="btn btn-lg shadow-none handle"><i class="fas fa-arrows-alt-v"></i>
+                        </button>
                         <template v-if="step.name !== ''">{{ step.name }}</template>
                         <template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
                     </li>
@@ -570,25 +650,34 @@
                 @cancel="paste_ingredients = paste_step = undefined"
                 @close="paste_ingredients = paste_step = undefined"
             >
-                <b-form-textarea id="paste_ingredients" v-model="paste_ingredients" :placeholder="$t('paste_ingredients_placeholder')" rows="10"></b-form-textarea>
+                <b-form-textarea id="paste_ingredients" v-model="paste_ingredients"
+                                 :placeholder="$t('paste_ingredients_placeholder')" rows="10"></b-form-textarea>
             </b-modal>
 
             <!-- form to create files on the fly -->
-            <generic-modal-form :model="Models.USERFILE" :action="Actions.CREATE" :show="show_file_create" @finish-action="fileCreated" />
+            <generic-modal-form :model="Models.USERFILE" :action="Actions.CREATE" :show="show_file_create"
+                                @finish-action="fileCreated"/>
         </div>
     </div>
 </template>
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import draggable from "vuedraggable"
-import { ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, convertEnergyToCalories, energyHeading } from "@/utils/utils"
+import {
+    ApiMixin,
+    resolveDjangoUrl,
+    ResolveUrlMixin,
+    StandardToasts,
+    convertEnergyToCalories,
+    energyHeading
+} from "@/utils/utils"
 import Multiselect from "vue-multiselect"
-import { ApiApiFactory } from "@/utils/openapi/api"
+import {ApiApiFactory} from "@/utils/openapi/api"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
 import VueMarkdownEditor from "@kangc/v-md-editor"
@@ -613,7 +702,7 @@ Vue.use(BootstrapVue)
 export default {
     name: "RecipeEditView",
     mixins: [ResolveUrlMixin, ApiMixin],
-    components: { Multiselect, LoadingSpinner, draggable, GenericModalForm },
+    components: {Multiselect, LoadingSpinner, draggable, GenericModalForm},
     data() {
         return {
             recipe_id: window.RECIPE_ID,
@@ -761,7 +850,10 @@ export default {
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
                     this.recipe_changed = false
                     if (this.create_food) {
-                        apiFactory.createFood({ name: this.recipe.food_name, recipe: { id: this.recipe.id, name: this.recipe.name } })
+                        apiFactory.createFood({
+                            name: this.recipe.food_name,
+                            recipe: {id: this.recipe.id, name: this.recipe.name}
+                        })
                     }
                     if (view_after) {
                         location.href = resolveDjangoUrl("view_recipe", this.recipe_id)
@@ -850,12 +942,12 @@ export default {
             this.$nextTick(() => document.getElementById(`amount_${this.recipe.steps.indexOf(step)}_${step.ingredients.length - 1}`).select())
         },
         removeIngredient: function (step, ingredient) {
-            if (confirm(this.$t("confirm_delete", { object: this.$t("Ingredient") }))) {
+            if (confirm(this.$t("confirm_delete", {object: this.$t("Ingredient")}))) {
                 step.ingredients = step.ingredients.filter((item) => item !== ingredient)
             }
         },
         removeStep: function (step) {
-            if (confirm(this.$t("confirm_delete", { object: this.$t("Step") }))) {
+            if (confirm(this.$t("confirm_delete", {object: this.$t("Step")}))) {
                 this.recipe.steps = this.recipe.steps.filter((item) => item !== step)
             }
         },
@@ -868,7 +960,7 @@ export default {
             let [tmp, step, id] = index.split("_")
 
             let new_food = this.recipe.steps[step].ingredients[id]
-            new_food.food = { name: tag }
+            new_food.food = {name: tag}
             this.foods.push(new_food.food)
             this.recipe.steps[step].ingredients[id] = new_food
         },
@@ -876,12 +968,12 @@ export default {
             let [tmp, step, id] = index.split("_")
 
             let new_unit = this.recipe.steps[step].ingredients[id]
-            new_unit.unit = { name: tag }
+            new_unit.unit = {name: tag}
             this.units.push(new_unit.unit)
             this.recipe.steps[step].ingredients[id] = new_unit
         },
         addKeyword: function (tag) {
-            let new_keyword = { label: tag, name: tag }
+            let new_keyword = {label: tag, name: tag}
             this.recipe.keywords.push(new_keyword)
         },
         searchKeywords: function (query) {
@@ -904,7 +996,7 @@ export default {
 
             this.files_loading = true
             apiFactory
-                .listUserFiles({ query: { query: query } })
+                .listUserFiles({query: {query: query}})
                 .then((response) => {
                     this.files = response.data
                     this.files_loading = false
@@ -916,7 +1008,7 @@ export default {
         },
         searchRecipes: function (query) {
             this.recipes_loading = true
-            this.genericAPI(this.Models.RECIPE, this.Actions.LIST, { query: query })
+            this.genericAPI(this.Models.RECIPE, this.Actions.LIST, {query: query})
                 .then((result) => {
                     this.recipes = result.data.results
                     this.recipes_loading = false
@@ -982,10 +1074,15 @@ export default {
             this.show_file_create = false
         },
         scrollToStep: function (step_index) {
-            document.getElementById("id_step_" + step_index).scrollIntoView({ behavior: "smooth" })
+            document.getElementById("id_step_" + step_index).scrollIntoView({behavior: "smooth"})
         },
         addNutrition: function () {
-            this.recipe.nutrition = {}
+            this.recipe.nutrition = {
+                carbohydrates: 0,
+                fats: 0,
+                proteins: 0,
+                calories: 0,
+            }
         },
         removeNutrition: function () {
             this.recipe.nutrition = null
@@ -1018,15 +1115,15 @@ export default {
             this.recipe.steps[step].ingredients_visible = true
             ing_list.forEach((ing) => {
                 if (ing.trim() !== "") {
-                    this.genericPostAPI("api_ingredient_from_string", { text: ing }).then((result) => {
+                    this.genericPostAPI("api_ingredient_from_string", {text: ing}).then((result) => {
                         let unit = null
                         if (result.data.unit !== "") {
-                            unit = { name: result.data.unit }
+                            unit = {name: result.data.unit}
                         }
                         this.recipe.steps[step].ingredients.splice(order, 0, {
                             amount: result.data.amount,
                             unit: unit,
-                            food: { name: result.data.food },
+                            food: {name: result.data.food},
                             note: result.data.note,
                             original_text: ing,
                         })
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 4224b0d96..c8f4eb01a 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app" style="margin-bottom: 4vh">
-        <RecipeSwitcher ref="ref_recipe_switcher" />
+        <RecipeSwitcher ref="ref_recipe_switcher"/>
         <div class="row">
             <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
                 <div class="row">
@@ -8,15 +8,21 @@
                         <div class="row justify-content-center">
                             <div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
                                 <b-input-group>
-                                    <b-input class="form-control form-control-lg form-control-borderless form-control-search" v-model="search.search_input" v-bind:placeholder="$t('Search')"></b-input>
+                                    <b-input
+                                        class="form-control form-control-lg form-control-borderless form-control-search"
+                                        v-model="search.search_input" v-bind:placeholder="$t('Search')"></b-input>
                                     <b-input-group-append>
-                                        <b-button v-b-tooltip.hover :title="$t('show_sql')" @click="showSQL()" v-if="debug && ui.sql_debug">
+                                        <b-button v-b-tooltip.hover :title="$t('show_sql')" @click="showSQL()"
+                                                  v-if="debug && ui.sql_debug">
                                             <i class="fas fa-bug" style="font-size: 1.5em"></i>
                                         </b-button>
-                                        <b-button variant="light" v-b-tooltip.hover :title="$t('Random Recipes')" @click="openRandom()">
+                                        <b-button variant="light" v-b-tooltip.hover :title="$t('Random Recipes')"
+                                                  @click="openRandom()">
                                             <i class="fas fa-dice-five" style="font-size: 1.5em"></i>
                                         </b-button>
-                                        <b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover :title="$t('advanced_search_settings')" v-bind:variant="searchFiltered(true) ? 'danger' : 'primary'">
+                                        <b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover
+                                                  :title="$t('advanced_search_settings')"
+                                                  v-bind:variant="searchFiltered(true) ? 'danger' : 'primary'">
                                             <!-- TODO consider changing this icon to a filter -->
                                             <i class="fas fa-caret-down" v-if="!search.advanced_search_visible"></i>
                                             <i class="fas fa-caret-up" v-if="search.advanced_search_visible"></i>
@@ -26,15 +32,18 @@
                             </div>
                         </div>
 
-                        <b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm" v-model="search.advanced_search_visible">
+                        <b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm"
+                                    v-model="search.advanced_search_visible">
                             <div class="card">
                                 <div class="card-body p-4">
                                     <div class="row">
                                         <div class="col-md-3">
-                                            <a class="btn btn-primary btn-block text-uppercase" :href="resolveDjangoUrl('new_recipe')">{{ $t("New_Recipe") }}</a>
+                                            <a class="btn btn-primary btn-block text-uppercase"
+                                               :href="resolveDjangoUrl('new_recipe')">{{ $t("New_Recipe") }}</a>
                                         </div>
                                         <div class="col-md-3">
-                                            <a class="btn btn-primary btn-block text-uppercase" :href="resolveDjangoUrl('data_import_url')">{{ $t("Import") }}</a>
+                                            <a class="btn btn-primary btn-block text-uppercase"
+                                               :href="resolveDjangoUrl('data_import_url')">{{ $t("Import") }}</a>
                                         </div>
                                         <div class="col-md-3">
                                             <button
@@ -53,99 +62,191 @@
                                         </div>
 
                                         <div class="col-md-3">
-                                            <button id="id_settings_button" class="btn btn-primary btn-block text-uppercase"><i class="fas fa-cog fa-lg m-1"></i></button>
+                                            <button id="id_settings_button"
+                                                    class="btn btn-primary btn-block text-uppercase"><i
+                                                class="fas fa-cog fa-lg m-1"></i></button>
                                         </div>
                                     </div>
 
                                     <b-popover target="id_settings_button" triggers="click" placement="bottom">
                                         <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="8" class="mb-1">
-                                                    <b-form-input type="number" v-model="ui.recently_viewed" id="popover-input-1" size="sm" class="mt-1"></b-form-input>
+                                                <b-form-group v-bind:label="$t('Recently_Viewed')"
+                                                              label-for="popover-input-1" label-cols="8" class="mb-1">
+                                                    <b-form-input type="number" v-model="ui.recently_viewed"
+                                                                  id="popover-input-1" size="sm"
+                                                                  class="mt-1"></b-form-input>
                                                 </b-form-group>
 
-                                                <b-form-group v-bind:label="$t('Recipes_per_page')" label-for="popover-input-page-count" label-cols="8" class="mb-1">
-                                                    <b-form-input type="number" v-model="ui.page_size" id="popover-input-page-count" size="sm" class="mt-1"></b-form-input>
+                                                <b-form-group v-bind:label="$t('Recipes_per_page')"
+                                                              label-for="popover-input-page-count" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-input type="number" v-model="ui.page_size"
+                                                                  id="popover-input-page-count" size="sm"
+                                                                  class="mt-1"></b-form-input>
                                                 </b-form-group>
 
-                                                <b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_meal_plan" id="popover-input-2" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2"
+                                                              label-cols="8" class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_meal_plan"
+                                                                     id="popover-input-2" size="sm"
+                                                                     class="mt-2"></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="8" class="mb-1">
-                                                    <b-form-input type="number" v-model="ui.meal_plan_days" id="popover-input-5" size="sm" class="mt-1"></b-form-input>
+                                                <b-form-group v-if="ui.show_meal_plan"
+                                                              v-bind:label="$t('Meal_Plan_Days')"
+                                                              label-for="popover-input-5" label-cols="8" class="mb-1">
+                                                    <b-form-input type="number" v-model="ui.meal_plan_days"
+                                                                  id="popover-input-5" size="sm"
+                                                                  class="mt-1"></b-form-input>
                                                 </b-form-group>
 
-                                                <b-form-group v-bind:label="$t('Sort_by_new')" label-for="popover-input-3" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.sort_by_new" id="popover-input-3" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('Sort_by_new')"
+                                                              label-for="popover-input-3" label-cols="8" class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.sort_by_new"
+                                                                     id="popover-input-3" size="sm"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
                                                 <div class="row" style="margin-top: 1vh">
                                                     <div class="col-12">
-                                                        <a :href="resolveDjangoUrl('view_settings') + '#search'">{{ $t("Search Settings") }}</a>
+                                                        <a :href="resolveDjangoUrl('view_settings') + '#search'">{{
+                                                                $t("Search Settings")
+                                                            }}</a>
                                                     </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="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_keywords" id="popover-show_keywords" size="sm" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <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" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <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" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <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" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group 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" class="mt-2"></b-form-checkbox>
+                                                <b-form-group 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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group 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" class="mt-2"></b-form-checkbox>
+                                                <b-form-group 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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group 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" class="mt-2"></b-form-checkbox>
+                                                <b-form-group 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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('times_cooked')" label-for="popover-show_timescooked" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_timescooked" id="popover-show_cooked" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('times_cooked')"
+                                                              label-for="popover-show_timescooked" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_timescooked"
+                                                                     id="popover-show_cooked" size="sm"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('make_now')" label-for="popover-show_makenow" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_makenow" id="popover-show_makenow" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('make_now')"
+                                                              label-for="popover-show_makenow" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_makenow"
+                                                                     id="popover-show_makenow" size="sm"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('last_cooked')" label-for="popover-show_cookedon" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_cookedon" id="popover-show_cookedon" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('last_cooked')"
+                                                              label-for="popover-show_cookedon" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_cookedon"
+                                                                     id="popover-show_cookedon" size="sm"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('last_viewed')" label-for="popover-show_viewedon" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_viewedon" id="popover-show_viewedon" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('last_viewed')"
+                                                              label-for="popover-show_viewedon" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_viewedon"
+                                                                     id="popover-show_viewedon" size="sm"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('created_on')" label-for="popover-show_createdon" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_createdon" id="popover-show_createdon" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('created_on')"
+                                                              label-for="popover-show_createdon" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_createdon"
+                                                                     id="popover-show_createdon" size="sm"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
-                                                <b-form-group v-bind:label="$t('updatedon')" label-for="popover-show_updatedon" label-cols="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.show_updatedon" id="popover-show_updatedon" size="sm" class="mt-2"></b-form-checkbox>
+                                                <b-form-group v-bind:label="$t('updatedon')"
+                                                              label-for="popover-show_updatedon" label-cols="8"
+                                                              class="mb-1">
+                                                    <b-form-checkbox switch v-model="ui.show_updatedon"
+                                                                     id="popover-show_updatedon" size="sm"
+                                                                     class="mt-2"></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="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.remember_search" id="popover-rem-search" size="sm" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></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="8" class="mb-1">
-                                                    <b-form-input type="number" v-model="ui.remember_hours" id="popover-rem-hours" size="sm" class="mt-1"></b-form-input>
+                                                <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"
+                                                                  class="mt-1"></b-form-input>
                                                 </b-form-group>
-                                                <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" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></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="8" class="mb-1">
-                                                    <b-form-checkbox switch v-model="ui.sql_debug" id="popover-input-sqldebug" size="sm" class="mt-2"></b-form-checkbox>
+                                                <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"
+                                                                     class="mt-2"></b-form-checkbox>
                                                 </b-form-group>
                                             </b-tab>
                                         </b-tabs>
 
                                         <div class="row" style="margin-top: 1vh">
                                             <div class="col-12" style="text-align: right">
-                                                <b-button size="sm" variant="secondary" style="margin-right: 8px" @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }} </b-button>
+                                                <b-button size="sm" variant="secondary" style="margin-right: 8px"
+                                                          @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }}
+                                                </b-button>
                                             </div>
                                         </div>
                                     </b-popover>
@@ -185,18 +286,23 @@
                                     <h6 class="mb-0" v-if="ui.expert_mode && search.keywords_fields > 1">
                                         {{ $t("Keywords") }}
                                     </h6>
-                                    <span class="text-sm-left text-warning" v-if="ui.expert_mode && search.keywords_fields > 1 && hasDuplicateFilter(search.search_keywords, search.keywords_fields)">{{
-                                        $t("warning_duplicate_filter")
-                                    }}</span>
+                                    <span class="text-sm-left text-warning"
+                                          v-if="ui.expert_mode && search.keywords_fields > 1 && hasDuplicateFilter(search.search_keywords, search.keywords_fields)">{{
+                                            $t("warning_duplicate_filter")
+                                        }}</span>
                                     <div class="row" v-if="ui.show_keywords">
                                         <div class="col-12">
                                             <b-input-group class="mt-2" v-for="(k, a) in keywordFields" :key="a">
                                                 <template #prepend v-if="ui.expert_mode">
-                                                    <b-input-group-text style="width: 3em" @click="addField('keywords', k)">
-                                                        <i class="fas fa-plus-circle text-primary" v-if="k == search.keywords_fields && k < 4" />
+                                                    <b-input-group-text style="width: 3em"
+                                                                        @click="addField('keywords', k)">
+                                                        <i class="fas fa-plus-circle text-primary"
+                                                           v-if="k == search.keywords_fields && k < 4"/>
                                                     </b-input-group-text>
-                                                    <b-input-group-text style="width: 3em" @click="removeField('keywords', k)">
-                                                        <i class="fas fa-minus-circle text-primary" v-if="k == search.keywords_fields && k > 1" />
+                                                    <b-input-group-text style="width: 3em"
+                                                                        @click="removeField('keywords', k)">
+                                                        <i class="fas fa-minus-circle text-primary"
+                                                           v-if="k == search.keywords_fields && k > 1"/>
                                                     </b-input-group-text>
                                                 </template>
                                                 <treeselect
@@ -233,14 +339,20 @@
                                                             switch
                                                             style="width: 5em"
                                                         >
-                                                            <span class="text-uppercase" v-if="search.search_keywords[a].operator">{{ $t("or") }}</span>
+                                                            <span class="text-uppercase"
+                                                                  v-if="search.search_keywords[a].operator">{{
+                                                                    $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-append v-if="ui.expert_mode">
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.search_keywords[a].not" name="check-button" @change="refreshData(false)" class="shadow-none">
+                                                        <b-form-checkbox v-model="search.search_keywords[a].not"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none">
                                                             <span class="text-uppercase">{{ $t("not") }}</span>
                                                         </b-form-checkbox>
                                                     </b-input-group-text>
@@ -253,18 +365,23 @@
                                     <h6 class="mt-2 mb-0" v-if="ui.expert_mode && search.foods_fields > 1">
                                         {{ $t("Foods") }}
                                     </h6>
-                                    <span class="text-sm-left text-warning" v-if="ui.expert_mode && search.foods_fields > 1 && hasDuplicateFilter(search.search_foods, search.foods_fields)">{{
-                                        $t("warning_duplicate_filter")
-                                    }}</span>
+                                    <span class="text-sm-left text-warning"
+                                          v-if="ui.expert_mode && search.foods_fields > 1 && hasDuplicateFilter(search.search_foods, search.foods_fields)">{{
+                                            $t("warning_duplicate_filter")
+                                        }}</span>
                                     <div class="row" v-if="ui.show_foods">
                                         <div class="col-12">
                                             <b-input-group class="mt-2" v-for="(f, i) in foodFields" :key="i">
                                                 <template #prepend v-if="ui.expert_mode">
-                                                    <b-input-group-text style="width: 3em" @click="addField('foods', f)">
-                                                        <i class="fas fa-plus-circle text-primary" v-if="f == search.foods_fields && f < 4" />
+                                                    <b-input-group-text style="width: 3em"
+                                                                        @click="addField('foods', f)">
+                                                        <i class="fas fa-plus-circle text-primary"
+                                                           v-if="f == search.foods_fields && f < 4"/>
                                                     </b-input-group-text>
-                                                    <b-input-group-text style="width: 3em" @click="removeField('foods', f)">
-                                                        <i class="fas fa-minus-circle text-primary" v-if="f == search.foods_fields && f > 1" />
+                                                    <b-input-group-text style="width: 3em"
+                                                                        @click="removeField('foods', f)">
+                                                        <i class="fas fa-minus-circle text-primary"
+                                                           v-if="f == search.foods_fields && f > 1"/>
                                                     </b-input-group-text>
                                                 </template>
                                                 <treeselect
@@ -293,15 +410,24 @@
                                                 />
                                                 <b-input-group-append>
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.search_foods[i].operator" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 5em">
-                                                            <span class="text-uppercase" v-if="search.search_foods[i].operator">{{ $t("or") }}</span>
+                                                        <b-form-checkbox v-model="search.search_foods[i].operator"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 5em">
+                                                            <span class="text-uppercase"
+                                                                  v-if="search.search_foods[i].operator">{{
+                                                                    $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-append v-if="ui.expert_mode">
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.search_foods[i].not" name="check-button" @change="refreshData(false)" class="shadow-none">
+                                                        <b-form-checkbox v-model="search.search_foods[i].not"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none">
                                                             <span class="text-uppercase">{{ $t("not") }}</span>
                                                         </b-form-checkbox>
                                                     </b-input-group-text>
@@ -314,18 +440,23 @@
                                     <h6 class="mt-2 mb-0" v-if="ui.expert_mode && search.books_fields > 1">
                                         {{ $t("Books") }}
                                     </h6>
-                                    <span class="text-sm-left text-warning" v-if="ui.expert_mode && search.books_fields > 1 && hasDuplicateFilter(search.search_books, search.books_fields)">{{
-                                        $t("warning_duplicate_filter")
-                                    }}</span>
+                                    <span class="text-sm-left text-warning"
+                                          v-if="ui.expert_mode && search.books_fields > 1 && hasDuplicateFilter(search.search_books, search.books_fields)">{{
+                                            $t("warning_duplicate_filter")
+                                        }}</span>
                                     <div class="row" v-if="ui.show_books">
                                         <div class="col-12">
                                             <b-input-group class="mt-2" v-for="(b, i) in bookFields" :key="i">
                                                 <template #prepend v-if="ui.expert_mode">
-                                                    <b-input-group-text style="width: 3em" @click="addField('books', b)">
-                                                        <i class="fas fa-plus-circle text-primary" v-if="b == search.books_fields && b < 4" />
+                                                    <b-input-group-text style="width: 3em"
+                                                                        @click="addField('books', b)">
+                                                        <i class="fas fa-plus-circle text-primary"
+                                                           v-if="b == search.books_fields && b < 4"/>
                                                     </b-input-group-text>
-                                                    <b-input-group-text style="width: 3em" @click="removeField('books', b)">
-                                                        <i class="fas fa-minus-circle text-primary" v-if="b == search.books_fields && b > 1" />
+                                                    <b-input-group-text style="width: 3em"
+                                                                        @click="removeField('books', b)">
+                                                        <i class="fas fa-minus-circle text-primary"
+                                                           v-if="b == search.books_fields && b > 1"/>
                                                     </b-input-group-text>
                                                 </template>
                                                 <generic-multiselect
@@ -339,15 +470,24 @@
                                                 ></generic-multiselect>
                                                 <b-input-group-append>
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.search_books[i].operator" name="check-button" @change="refreshData(false)" class="shadow-none" style="width: 5em" switch>
-                                                            <span class="text-uppercase" v-if="search.search_books[i].operator">{{ $t("or") }}</span>
+                                                        <b-form-checkbox v-model="search.search_books[i].operator"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" style="width: 5em" switch>
+                                                            <span class="text-uppercase"
+                                                                  v-if="search.search_books[i].operator">{{
+                                                                    $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-append v-if="ui.expert_mode">
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.search_books[i].not" name="check-button" @change="refreshData(false)" class="shadow-none">
+                                                        <b-form-checkbox v-model="search.search_books[i].not"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none">
                                                             <span class="text-uppercase">{{ $t("not") }}</span>
                                                         </b-form-checkbox>
                                                     </b-input-group-text>
@@ -371,8 +511,12 @@
                                                 />
                                                 <b-input-group-append>
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.search_rating_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 5em">
-                                                            <span class="text-uppercase" v-if="search.search_rating_gte">&gt;=</span>
+                                                        <b-form-checkbox v-model="search.search_rating_gte"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 5em">
+                                                            <span class="text-uppercase"
+                                                                  v-if="search.search_rating_gte">&gt;=</span>
                                                             <span class="text-uppercase" v-else>&lt;=</span>
                                                         </b-form-checkbox>
                                                     </b-input-group-text>
@@ -395,8 +539,13 @@
                                                 ></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" style="width: 4em" switch>
-                                                            <span class="text-uppercase" v-if="search.search_units_or">{{ $t("or") }}</span>
+                                                        <b-form-checkbox v-model="search.search_units_or"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" style="width: 4em" 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>
@@ -406,17 +555,23 @@
                                     </div>
 
                                     <!-- special switches -->
-                                    <div class="row g-0" v-if="ui.show_timescooked || ui.show_makenow || ui.show_cookedon">
+                                    <div class="row g-0"
+                                         v-if="ui.show_timescooked || ui.show_makenow || ui.show_cookedon">
                                         <div class="col-12">
                                             <b-input-group class="mt-2">
                                                 <!-- times cooked -->
                                                 <b-input-group-prepend is-text v-if="ui.show_timescooked">
                                                     {{ $t("times_cooked") }}
                                                 </b-input-group-prepend>
-                                                <b-form-input id="timescooked" type="number" min="0" v-model="search.timescooked" v-if="ui.show_timescooked"></b-form-input>
+                                                <b-form-input id="timescooked" type="number" min="0"
+                                                              v-model="search.timescooked"
+                                                              v-if="ui.show_timescooked"></b-form-input>
                                                 <b-input-group-append v-if="ui.show_timescooked">
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.timescooked_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
+                                                        <b-form-checkbox v-model="search.timescooked_gte"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 4em">
                                                             <span class="text-uppercase" v-if="search.timescooked_gte">&gt;=</span>
                                                             <span class="text-uppercase" v-else>&lt;=</span>
                                                         </b-form-checkbox>
@@ -435,7 +590,10 @@
                                                         @input="refreshData(false)"
                                                     />
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.cookedon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
+                                                        <b-form-checkbox v-model="search.cookedon_gte"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 4em">
                                                             <span class="text-uppercase" v-if="search.cookedon_gte">&gt;=</span>
                                                             <span class="text-uppercase" v-else>&lt;=</span>
                                                         </b-form-checkbox>
@@ -455,7 +613,10 @@
                                                         @input="refreshData(false)"
                                                     />
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.createdon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
+                                                        <b-form-checkbox v-model="search.createdon_gte"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 4em">
                                                             <span class="text-uppercase" v-if="search.createdon_gte">&gt;=</span>
                                                             <span class="text-uppercase" v-else>&lt;=</span>
                                                         </b-form-checkbox>
@@ -473,7 +634,10 @@
                                                         @input="refreshData(false)"
                                                     />
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.viewedon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
+                                                        <b-form-checkbox v-model="search.viewedon_gte"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 4em">
                                                             <span class="text-uppercase" v-if="search.viewedon_gte">&gt;=</span>
                                                             <span class="text-uppercase" v-else>&lt;=</span>
                                                         </b-form-checkbox>
@@ -491,7 +655,10 @@
                                                         @input="refreshData(false)"
                                                     />
                                                     <b-input-group-text>
-                                                        <b-form-checkbox v-model="search.updatedon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
+                                                        <b-form-checkbox v-model="search.updatedon_gte"
+                                                                         name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 4em">
                                                             <span class="text-uppercase" v-if="search.updatedon_gte">&gt;=</span>
                                                             <span class="text-uppercase" v-else>&lt;=</span>
                                                         </b-form-checkbox>
@@ -500,7 +667,9 @@
                                                 <b-input-group-append v-if="ui.show_makenow">
                                                     <b-input-group-text>
                                                         {{ $t("make_now") }}
-                                                        <b-form-checkbox v-model="search.makenow" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em" />
+                                                        <b-form-checkbox v-model="search.makenow" name="check-button"
+                                                                         @change="refreshData(false)"
+                                                                         class="shadow-none" switch style="width: 4em"/>
                                                     </b-input-group-text>
                                                 </b-input-group-append>
                                             </b-input-group>
@@ -510,14 +679,16 @@
                                     <!-- Buttons -->
                                     <div class="row justify-content-end small">
                                         <div class="col-auto">
-                                            <b-button class="my-0" variant="link" size="sm" @click="search.explain_visible = !search.explain_visible">
+                                            <b-button class="my-0" variant="link" size="sm"
+                                                      @click="search.explain_visible = !search.explain_visible">
                                                 <div v-if="!search.explain_visible">
                                                     <i class="far fa-eye"></i>
                                                     {{ $t("explain") }}
                                                 </div>
                                                 <div v-else><i class="far fa-eye-slash"></i> {{ $t("explain") }}</div>
                                             </b-button>
-                                            <b-button class="my-0" variant="link" size="sm" @click="ui.expert_mode = !ui.expert_mode">
+                                            <b-button class="my-0" variant="link" size="sm"
+                                                      @click="ui.expert_mode = !ui.expert_mode">
                                                 <div v-if="!ui.expert_mode">
                                                     <i class="fas fa-circle"></i>
                                                     {{ $t("expert_mode") }}
@@ -540,20 +711,21 @@
                                                 <!-- TODO find a way to localize this that works without explaining localization to each language translator  -->
                                                 Show all recipes that are matched
                                                 <span v-if="search.search_input">
-                                                    by <i>{{ search.search_input }}</i> <br />
+                                                    by <i>{{ search.search_input }}</i> <br/>
                                                 </span>
-                                                <span v-else> without any search term <br /> </span>
+                                                <span v-else> without any search term <br/> </span>
 
-                                                <span v-if="search.search_internal"> and are <span class="text-success">internal</span> <br /></span>
+                                                <span v-if="search.search_internal"> and are <span class="text-success">internal</span> <br/></span>
 
                                                 <span v-for="k in search.search_keywords" v-bind:key="k.id">
                                                     <template v-if="k.items.length > 0">
                                                         and
                                                         <b v-if="k.not">don't</b>
                                                         contain
-                                                        <b v-if="k.operator">any</b><b v-else>all</b> of the following <span class="text-success">keywords</span>:
+                                                        <b v-if="k.operator">any</b><b
+                                                        v-else>all</b> of the following <span class="text-success">keywords</span>:
                                                         <i>{{ k.items.flatMap((x) => x.name).join(", ") }}</i>
-                                                        <br />
+                                                        <br/>
                                                     </template>
                                                 </span>
 
@@ -562,9 +734,11 @@
                                                         and
                                                         <b v-if="k.not">don't</b>
                                                         contain
-                                                        <b v-if="k.operator">any</b><b v-else>all</b> of the following <span class="text-success">foods</span>:
+                                                        <b v-if="k.operator">any</b><b
+                                                        v-else>all</b> of the following <span
+                                                        class="text-success">foods</span>:
                                                         <i>{{ k.items.flatMap((x) => x.name).join(", ") }}</i>
-                                                        <br />
+                                                        <br/>
                                                     </template>
                                                 </span>
 
@@ -573,40 +747,48 @@
                                                         and
                                                         <b v-if="k.not">don't</b>
                                                         contain
-                                                        <b v-if="k.operator">any</b><b v-else>all</b> of the following <span class="text-success">books</span>:
+                                                        <b v-if="k.operator">any</b><b
+                                                        v-else>all</b> of the following <span
+                                                        class="text-success">books</span>:
                                                         <i>{{ k.items.flatMap((x) => x.name).join(", ") }}</i>
-                                                        <br />
+                                                        <br/>
                                                     </template>
                                                 </span>
 
-                                                <span v-if="search.makenow"> and you can <span class="text-success">make right now</span> (based on the on hand flag) <br /></span>
+                                                <span v-if="search.makenow"> and you can <span class="text-success">make right now</span> (based on the on hand flag) <br/></span>
 
                                                 <span v-if="search.search_units.length > 0">
-                                                    and contain <b v-if="search.search_units_or">any</b><b v-else>all</b> of the following <span class="text-success">units</span>:
+                                                    and contain <b v-if="search.search_units_or">any</b><b
+                                                    v-else>all</b> of the following <span
+                                                    class="text-success">units</span>:
                                                     <i>{{ search.search_units.flatMap((x) => x.name).join(", ") }}</i
-                                                    ><br />
+                                                    ><br/>
                                                 </span>
 
                                                 <span v-if="search.search_rating !== undefined">
-                                                    and have a <span class="text-success">rating</span> <template v-if="search.search_rating_gte">greater than</template><template v-else> less than</template> or
-                                                    equal to {{ search.search_rating }}<br />
+                                                    and have a <span class="text-success">rating</span> <template
+                                                    v-if="search.search_rating_gte">greater than</template><template
+                                                    v-else> less than</template> or
+                                                    equal to {{ search.search_rating }}<br/>
                                                 </span>
 
                                                 <span v-if="search.lastcooked !== undefined">
-                                                    and have been <span class="text-success">last cooked</span> <template v-if="search.lastcooked_gte"> after</template><template v-else> before</template>
+                                                    and have been <span class="text-success">last cooked</span> <template
+                                                    v-if="search.lastcooked_gte"> after</template><template v-else> before</template>
                                                     <i>{{ search.lastcooked }}</i
-                                                    ><br />
+                                                    ><br/>
                                                 </span>
 
                                                 <span v-if="search.timescooked !== undefined">
-                                                    and have <span class="text-success">been cooked</span> <template v-if="search.timescooked_gte"> at least</template><template v-else> less than</template> or
-                                                    equal to<i>{{ search.timescooked }}</i> times <br />
+                                                    and have <span class="text-success">been cooked</span> <template
+                                                    v-if="search.timescooked_gte"> at least</template><template v-else> less than</template> or
+                                                    equal to<i>{{ search.timescooked }}</i> times <br/>
                                                 </span>
 
                                                 <span v-if="search.sort_order.length > 0">
                                                     <span class="text-success">order</span> by
                                                     <i>{{ search.sort_order.flatMap((x) => x.text).join(", ") }}</i>
-                                                    <br />
+                                                    <br/>
                                                 </span>
                                             </div>
                                         </div>
@@ -617,33 +799,37 @@
                     </div>
                 </div>
 
-                <div v-if="recipes.length > 0">
-                    <div class="row align-content-center">
-                        <div class="col col-md-6" style="margin-top: 2vh">
-                            <b-dropdown id="sortby" :text="sortByLabel" variant="link" toggle-class="text-decoration-none " class="m-0 p-0">
-                                <div v-for="o in sortOptions" :key="o.id">
-                                    <b-dropdown-item
-                                        v-on:click="
+                <div class="row align-content-center">
+                    <div class="col col-md-6" style="margin-top: 2vh">
+                        <b-dropdown id="sortby" :text="sortByLabel" variant="link" toggle-class="text-decoration-none "
+                                    class="m-0 p-0">
+                            <div v-for="o in sortOptions" :key="o.id">
+                                <b-dropdown-item
+                                    v-on:click="
                                             search.sort_order = [o]
                                             refreshData(false)
                                         "
-                                    >
-                                        <span>{{ o.text }}</span>
-                                    </b-dropdown-item>
-                                </div>
-                            </b-dropdown>
-                        </div>
-                        <div class="col col-md-6 text-right" style="margin-top: 2vh">
+                                >
+                                    <span>{{ o.text }}</span>
+                                </b-dropdown-item>
+                            </div>
+                        </b-dropdown>
+                    </div>
+                    <div class="col col-md-6 text-right" style="margin-top: 2vh">
                             <span class="text-muted">
-                                {{ $t("Page") }} {{ search.pagination_page }}/{{ Math.ceil(pagination_count / ui.page_size) }}
+                                {{ $t("Page") }} {{
+                                    search.pagination_page
+                                }}/{{ Math.ceil(pagination_count / ui.page_size) }}
                                 <a href="#" @click="resetSearch()"><i class="fas fa-times-circle"></i> {{ $t("Reset") }}</a>
                             </span>
-                        </div>
                     </div>
+                </div>
 
+                <div v-if="recipes.length > 0">
                     <div class="row">
                         <div class="col col-md-12">
-                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.8rem">
+                            <div
+                                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.8rem">
                                 <template v-if="!searchFiltered()">
                                     <recipe-card
                                         v-bind:key="`mp_${m.id}`"
@@ -654,14 +840,17 @@
                                         footer_icon="far fa-calendar-alt"
                                     ></recipe-card>
                                 </template>
-                                <recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r" :footer_text="isRecentOrNew(r)[0]" :footer_icon="isRecentOrNew(r)[1]"></recipe-card>
+                                <recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"
+                                             :footer_text="isRecentOrNew(r)[0]"
+                                             :footer_icon="isRecentOrNew(r)[1]"></recipe-card>
                             </div>
                         </div>
                     </div>
 
                     <div class="row" style="margin-top: 2vh" v-if="!random_search">
                         <div class="col col-md-12">
-                            <b-pagination pills v-model="search.pagination_page" :total-rows="pagination_count" :per-page="ui.page_size" @change="pageChange" align="center"></b-pagination>
+                            <b-pagination pills v-model="search.pagination_page" :total-rows="pagination_count"
+                                          :per-page="ui.page_size" @change="pageChange" align="center"></b-pagination>
                         </div>
                     </div>
                     <div class="col-md-2 d-none d-md-block"></div>
@@ -681,7 +870,9 @@
                                         {{ $t("search_import_help_text") }}
                                     </b-card-text>
 
-                                    <b-button variant="primary" :href="resolveDjangoUrl('data_import_url')"><i class="fas fa-file-import"></i> {{ $t("Import") }} </b-button>
+                                    <b-button variant="primary" :href="resolveDjangoUrl('data_import_url')"><i
+                                        class="fas fa-file-import"></i> {{ $t("Import") }}
+                                    </b-button>
                                 </b-card>
 
                                 <b-card v-bind:title="$t('Create')" class="text-center">
@@ -689,7 +880,9 @@
                                         {{ $t("search_create_help_text") }}
                                     </b-card-text>
 
-                                    <b-button variant="primary" :href="resolveDjangoUrl('new_recipe')"><i class="fas fa-plus"></i> {{ $t("Create") }} </b-button>
+                                    <b-button variant="primary" :href="resolveDjangoUrl('new_recipe')"><i
+                                        class="fas fa-plus"></i> {{ $t("Create") }}
+                                    </b-button>
                                 </b-card>
                             </b-card-group>
                         </div>
@@ -702,17 +895,17 @@
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 import VueCookies from "vue-cookies"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import moment from "moment"
 import _debounce from "lodash/debounce"
 import Multiselect from "vue-multiselect"
-import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect"
+import {Treeselect, LOAD_CHILDREN_OPTIONS} from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 
-import { ApiMixin, ResolveUrlMixin, StandardToasts, ToastMixin } from "@/utils/utils"
+import {ApiMixin, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils"
 import LoadingSpinner from "@/components/LoadingSpinner" // TODO: is this deprecated?
 import RecipeCard from "@/components/RecipeCard"
 import GenericMultiselect from "@/components/GenericMultiselect"
@@ -727,13 +920,13 @@ let UI_COOKIE_NAME = "ui_search_settings"
 export default {
     name: "RecipeSearchView",
     mixins: [ResolveUrlMixin, ApiMixin, ToastMixin],
-    components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect },
+    components: {GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect},
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin
             recipes: [],
             recipes_loading: true,
-            facets: { Books: [], Foods: [], Keywords: [] },
+            facets: {Books: [], Foods: [], Keywords: []},
             meal_plans: [],
             last_viewed_recipes: [],
             sortMenu: false,
@@ -744,22 +937,22 @@ export default {
                 search_input: "",
                 search_internal: false,
                 search_keywords: [
-                    { items: [], operator: true, not: false },
-                    { items: [], operator: false, not: false },
-                    { items: [], operator: true, not: true },
-                    { items: [], operator: false, not: true },
+                    {items: [], operator: true, not: false},
+                    {items: [], operator: false, not: false},
+                    {items: [], operator: true, not: true},
+                    {items: [], operator: false, not: true},
                 ],
                 search_foods: [
-                    { items: [], operator: true, not: false },
-                    { items: [], operator: false, not: false },
-                    { items: [], operator: true, not: true },
-                    { items: [], operator: false, not: true },
+                    {items: [], operator: true, not: false},
+                    {items: [], operator: false, not: false},
+                    {items: [], operator: true, not: true},
+                    {items: [], operator: false, not: true},
                 ],
                 search_books: [
-                    { items: [], operator: true, not: false },
-                    { items: [], operator: false, not: false },
-                    { items: [], operator: true, not: true },
-                    { items: [], operator: false, not: true },
+                    {items: [], operator: true, not: false},
+                    {items: [], operator: false, not: false},
+                    {items: [], operator: true, not: true},
+                    {items: [], operator: false, not: true},
                 ],
                 search_units: [],
                 search_units_or: true,
@@ -868,12 +1061,12 @@ export default {
             }
 
             return [
-                { id: 5, label: "⭐⭐⭐⭐⭐" + ratingCount(this.facets.Ratings?.["5.0"] ?? 0) + label(5) },
-                { id: 4, label: "⭐⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["4.0"] ?? 0) + label() },
-                { id: 3, label: "⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["3.0"] ?? 0) + label() },
-                { id: 2, label: "⭐⭐ " + ratingCount(this.facets.Ratings?.["2.0"] ?? 0) + label() },
-                { id: 1, label: "⭐ " + ratingCount(this.facets.Ratings?.["1.0"] ?? 0) + label(1) },
-                { id: 0, label: this.$t("Unrated") + ratingCount(this.facets.Ratings?.["0.0"] ?? 0) },
+                {id: 5, label: "⭐⭐⭐⭐⭐" + ratingCount(this.facets.Ratings?.["5.0"] ?? 0) + label(5)},
+                {id: 4, label: "⭐⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["4.0"] ?? 0) + label()},
+                {id: 3, label: "⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["3.0"] ?? 0) + label()},
+                {id: 2, label: "⭐⭐ " + ratingCount(this.facets.Ratings?.["2.0"] ?? 0) + label()},
+                {id: 1, label: "⭐ " + ratingCount(this.facets.Ratings?.["1.0"] ?? 0) + label(1)},
+                {id: 0, label: this.$t("Unrated") + ratingCount(this.facets.Ratings?.["0.0"] ?? 0)},
             ]
         },
         keywordFields: function () {
@@ -936,22 +1129,22 @@ export default {
                 this.facets.Keywords = []
                 for (let x of urlParams.getAll("keyword")) {
                     this.search.search_keywords[0].items.push(Number.parseInt(x))
-                    this.facets.Keywords.push({ id: x, name: "loading..." })
+                    this.facets.Keywords.push({id: x, name: "loading..."})
                 }
             }
 
             // 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
             for (let x of this.search.search_foods.map((x) => x.items).flat()) {
-                this.facets.Foods.push({ id: x, name: "loading..." })
+                this.facets.Foods.push({id: x, name: "loading..."})
             }
 
             for (let x of this.search.search_keywords.map((x) => x.items).flat()) {
-                this.facets.Keywords.push({ id: x, name: "loading..." })
+                this.facets.Keywords.push({id: x, name: "loading..."})
             }
 
             for (let x of this.search.search_books.map((x) => x.items).flat()) {
-                this.facets.Books.push({ id: x, name: "loading..." })
+                this.facets.Books.push({id: x, name: "loading..."})
             }
 
             this.loadMealPlan()
@@ -1001,13 +1194,13 @@ export default {
         "ui.expert_mode": function (newVal, oldVal) {
             if (!newVal) {
                 this.search.search_keywords = this.search.search_keywords.map((x) => {
-                    return { ...x, not: false }
+                    return {...x, not: false}
                 })
                 this.search.search_foods = this.search.search_foods.map((x) => {
-                    return { ...x, not: false }
+                    return {...x, not: false}
                 })
                 this.search.search_books = this.search.search_books.map((x) => {
-                    return { ...x, not: false }
+                    return {...x, not: false}
                 })
             }
         },
@@ -1077,13 +1270,13 @@ export default {
         },
         resetSearch: function (filter = undefined) {
             this.search.search_keywords = this.search.search_keywords.map((x) => {
-                return { ...x, items: [] }
+                return {...x, items: []}
             })
             this.search.search_foods = this.search.search_foods.map((x) => {
-                return { ...x, items: [] }
+                return {...x, items: []}
             })
             this.search.search_books = this.search.search_books.map((x) => {
-                return { ...x, items: [] }
+                return {...x, items: []}
             })
             this.search.search_input = filter?.query ?? ""
             this.search.search_internal = filter?.internal ?? false
@@ -1138,12 +1331,12 @@ export default {
             if (!this.ui.tree_select) {
                 return
             }
-            let params = { hash: hash }
+            let params = {hash: hash}
             if (facet) {
                 params[facet] = id
             }
             return this.genericGetAPI("api_get_facets", params).then((response) => {
-                this.facets = { ...this.facets, ...response.data.facets }
+                this.facets = {...this.facets, ...response.data.facets}
             })
         },
         showSQL: function () {
@@ -1154,14 +1347,14 @@ export default {
             })
         },
         // TODO refactor to combine with load KeywordChildren
-        loadFoodChildren({ action, parentNode, callback }) {
+        loadFoodChildren({action, parentNode, callback}) {
             if (action === LOAD_CHILDREN_OPTIONS) {
                 if (this.facets?.cache_key) {
                     this.getFacets(this.facets.cache_key, "food", parentNode.id).then(callback())
                 }
             }
         },
-        loadKeywordChildren({ action, parentNode, callback }) {
+        loadKeywordChildren({action, parentNode, callback}) {
             if (action === LOAD_CHILDREN_OPTIONS) {
                 if (this.facets?.cache_key) {
                     this.getFacets(this.facets.cache_key, "keyword", parentNode.id).then(callback())
@@ -1172,7 +1365,7 @@ export default {
             return
         },
         buildParams: function (random) {
-            let params = { options: { query: {} }, page: this.search.pagination_page, pageSize: this.ui.page_size }
+            let params = {options: {query: {}}, page: this.search.pagination_page, pageSize: this.ui.page_size}
             if (this.search.search_filter) {
                 params.options.query.filter = this.search.search_filter.id
                 return params
@@ -1293,7 +1486,7 @@ export default {
             ;["page", "pageSize"].forEach((key) => {
                 delete search[key]
             })
-            search = { ...search, ...search.options.query }
+            search = {...search, ...search.options.query}
             console.log("after concat", search)
             let params = {
                 name: filtername,