feature/new-feature-cleanup (#389)

* add json editor to theme editor

* add toolbars tools to recipe sections

* fix recipe yield

* add updated_date to recipe schema

* update time cards

* fix mobile buttons

* fix asset URL

* fix PG errors CRUD

* remove -d from docker-pro

* fix theme tests

* remvoe old typing

* abstract count function

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/pages/SearchPage/index.vue

@@ -47,31 +47,20 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="fuzzyRecipes">
-        <v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="item in fuzzyRecipes.slice(0, maxResults)" :key="item.name">
-          <RecipeCard
-            :name="item.item.name"
-            :description="item.item.description"
-            :slug="item.item.slug"
-            :rating="item.item.rating"
-            :image="item.item.image"
-            :tags="item.item.tags"
-          />
-        </v-col>
-      </v-row>
+      <CardSection title-icon="mdi-mag" :recipes="showRecipes" :hardLimit="maxResults" @sort="assignFuzzy" />
     </v-card>
   </v-container>
 </template>
 
 <script>
 import Fuse from "fuse.js";
-import RecipeCard from "@/components/Recipe/RecipeCard";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
+import CardSection from "@/components/UI/CardSection";
 import FilterSelector from "./FilterSelector.vue";
 
 export default {
   components: {
-    RecipeCard,
+    CardSection,
     CategoryTagSelector,
     FilterSelector,
   },
@@ -88,6 +77,7 @@ export default {
         exclude: false,
         matchAny: false,
       },
+      sortedResults: [],
       includeCategories: [],
       includeTags: [],
       options: {
@@ -126,16 +116,31 @@ export default {
     },
     fuzzyRecipes() {
       if (this.searchString.trim() === "") {
-        return this.filteredRecipes.map(x => ({ item: x }));
+        return this.filteredRecipes;
       }
       const result = this.fuse.search(this.searchString.trim());
-      return result;
+      return result.map(x => x.item);
     },
     isSearching() {
       return this.searchString && this.searchString.length > 0;
     },
+    showRecipes() {
+      if (this.sortedResults.length > 0) {
+        return this.sortedResults;
+      } else {
+        return this.fuzzyRecipes;
+      }
+    },
+  },
+  watch: {
+    showRecipes(val) {
+      console.log(val);
+    },
   },
   methods: {
+    assignFuzzy(val) {
+      this.sortedResults = val;
+    },
     check(filterBy, recipeList, matchAny, exclude) {
       let isMatch = true;
       if (filterBy.length === 0) return isMatch;