new search and setting

cookbook/models.py

@@ -115,8 +115,9 @@ class UserPreference(models.Model, PermissionModelMixin):
     # Search Style
     SMALL = 'SMALL'
     LARGE = 'LARGE'
+    NEW = 'NEW'
 
-    SEARCH_STYLE = ((SMALL, _('Small')), (LARGE, _('Large')),)
+    SEARCH_STYLE = ((SMALL, _('Small')), (LARGE, _('Large')), (NEW, _('New')))
 
     user = AutoOneToOneField(User, on_delete=models.CASCADE, primary_key=True)
     theme = models.CharField(choices=THEMES, max_length=128, default=FLATLY)

cookbook/views/views.py

@@ -55,6 +55,9 @@ def index(request):
 
 def search(request):
     if has_group_permission(request.user, ('guest',)):
+        if request.user.userpreference.search_style == UserPreference.NEW:
+            return search_v2(request)
+
         f = RecipeFilter(request.GET,
                          queryset=Recipe.objects.filter(space=request.user.userpreference.space).all().order_by('name'),
                          space=request.space)

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -28,18 +28,23 @@
               <div class="card">
                 <div class="card-body">
                   <div class="row">
-                    <div class="col-md-4">
+                    <div class="col-md-3">
-                      <a class="btn btn-primary" :href="resolveDjangoUrl('new_recipe')">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-4">
+                    <div class="col-md-3">
-                      <a class="btn btn-primary" :href="resolveDjangoUrl('data_import_url')">URL Import</a>
+                      <a class="btn btn-primary btn-block text-uppercase"
+                         :href="resolveDjangoUrl('data_import_url')">{{ $t('Url_Import') }}</a>
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-md-3">
-                      <a class="btn btn-primary" href="#">Rest Search</a>
+                      <button class="btn btn-primary btn-block text-uppercase" @click="resetSearch">
+                        {{ $t('Reset_Search') }}
+                      </button>
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-md-3" style="position: relative;">
                       <b-form-checkbox v-model="search_internal" name="check-button" @change="refreshData"
-                                       class="shadow-none" switch>
+                                       class="shadow-none"
+                                       style="position:relative;top: 50%;  transform: translateY(-50%);" switch>
                         {{ $t('show_only_internal') }}
                       </b-form-checkbox>
                     </div>
@@ -52,15 +57,19 @@
                       <b-input-group style="margin-top: 1vh">
 
                         <generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords"
+                                             :initial_selection="search_keywords"
                                              search_function="listKeywords" label="label" style="width: 90%"
                                              v-bind:placeholder="$t('Keywords')"></generic-multiselect>
 
-                        <b-input-group-append is-text style="width: 10%">
+                        <b-input-group-append style="width: 10%">
+                          <b-input-group-text style="width: 100%">
+
                             <b-form-checkbox v-model="search_keywords_or" name="check-button" @change="refreshData"
-                                           class="shadow-none" style="width: 100%" switch>
+                                             class="shadow-none" switch>
-                            <template v-if="search_keywords_or">{{ $t('OR') }}</template>
+                              <span class="text-uppercase" v-if="search_keywords_or">{{ $t('or') }}</span>
-                            <template v-else>{{ $t('AND') }}</template>
+                              <span class="text-uppercase" v-else>{{ $t('and') }}</span>
                             </b-form-checkbox>
+                          </b-input-group-text>
                         </b-input-group-append>
                       </b-input-group>
                     </div>
@@ -71,14 +80,17 @@
 
                       <b-input-group style="margin-top: 1vh">
                         <generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
-
+                                             :initial_selection="search_foods"
                                              search_function="listFoods" label="name" style="width: 90%"
                                              v-bind:placeholder="$t('Ingredients')"></generic-multiselect>
-                        <b-input-group-append is-text style="width: 10%">
+                        <b-input-group-append style="width: 10%">
+                          <b-input-group-text style="width: 100%">
                             <b-form-checkbox v-model="search_foods_or" name="check-button" @change="refreshData"
-                                           class="shadow-none" tyle="width: 100%" switch>
+                                             class="shadow-none" switch>
-                            {{ $t('OR') }}
+                              <span class="text-uppercase" v-if="search_foods_or">{{ $t('or') }}</span>
+                              <span class="text-uppercase" v-else>{{ $t('and') }}</span>
                             </b-form-checkbox>
+                          </b-input-group-text>
                         </b-input-group-append>
                       </b-input-group>
 
@@ -90,13 +102,18 @@
 
                       <b-input-group style="margin-top: 1vh">
                         <generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
+                                             :initial_selection="search_books"
                                              search_function="listRecipeBooks" label="name" style="width: 90%"
                                              v-bind:placeholder="$t('Books')"></generic-multiselect>
-                        <b-input-group-append is-text style="width: 10%">
+                        <b-input-group-append style="width: 10%">
+                          <b-input-group-text style="width: 100%">
+
                             <b-form-checkbox v-model="search_books_or" name="check-button" @change="refreshData"
                                              class="shadow-none" tyle="width: 100%" switch>
-                            {{ $t('OR') }}
+                              <span class="text-uppercase" v-if="search_books_or">{{ $t('or') }}</span>
+                              <span class="text-uppercase" v-else>{{ $t('and') }}</span>
                             </b-form-checkbox>
+                          </b-input-group-text>
                         </b-input-group-append>
                       </b-input-group>
 
@@ -203,6 +220,14 @@ export default {
     genericSelectChanged: function (obj) {
       this[obj.var] = obj.val
       this.refreshData()
+    },
+    resetSearch: function () {
+      this.search_input = ''
+      this.search_internal = false
+      this.search_keywords = []
+      this.search_foods = []
+      this.search_books = []
+      this.refreshData()
     }
   }
 }

vue/src/components/GenericMultiselect.vue

@@ -36,6 +36,15 @@ export default {
     search_function: String,
     label: String,
     parent_variable: String,
+    initial_selection: Array,
+  },
+  watch: {
+    initial_selection: function (newVal, oldVal) { // watch it
+      this.selected_objects = newVal
+    }
+  },
+  mounted() {
+    this.search('')
   },
   methods: {
     search: function (query) {

vue/src/locales/en.json

@@ -16,6 +16,9 @@
   "Import_finished": "Import finished",
   "View_Recipes": "View Recipes",
   "Log_Cooking": "Log Cooking",
+  "New_Recipe": "New Recipe",
+  "Url_Import": "Url Import",
+  "Reset_Search": "Reset Search",
 
   "Keywords": "Keywords",
   "Books": "Books",
@@ -42,7 +45,7 @@
   "Search": "Search",
   "Import": "Import",
   "Print": "Print",
-  "OR": "OR",
+  "or": "or",
-  "AND": "AND",
+  "and": "and",
   "Information": "Information"
 }