Filter and search recipes on the main page

appinfo/routes.php

@@ -13,8 +13,6 @@
 	   ['name' => 'main#home', 'url' => '/home', 'verb' => 'GET'],
 	   ['name' => 'main#keywords', 'url' => '/keywords', 'verb' => 'GET'],
 	   ['name' => 'main#categories', 'url' => '/categories', 'verb' => 'GET'],
-	   ['name' => 'main#category', 'url' => '/category/{category}', 'verb' => 'GET'],
-	   ['name' => 'main#search', 'url' => '/search/{query}', 'verb' => 'GET'],
 	   ['name' => 'main#error', 'url' => '/error', 'verb' => 'GET'],
 	   ['name' => 'main#create', 'url' => '/recipes/create', 'verb' => 'GET'],
 	   ['name' => 'main#new', 'url' => '/recipes/create', 'verb' => 'POST'],
@@ -26,9 +24,12 @@
 	   ['name' => 'config#reindex', 'url' => '/reindex', 'verb' => 'POST'],
 	   ['name' => 'config#list', 'url' => '/config', 'verb' => 'GET'],
 	   ['name' => 'config#config', 'url' => '/config', 'verb' => 'POST'],
+	   /* API routes */
+	   ['name' => 'main#category', 'url' => '/api/category/{category}', 'verb' => 'GET'],
+	   ['name' => 'main#search', 'url' => '/api/search/{query}', 'verb' => 'GET'],
    ],
-   
-   /* API routes */
+
+   /* API resources */
    'resources' => [
 	   	'recipe' => ['url' => '/api/recipes']
    ]

lib/Controller/MainController.php

@@ -143,7 +143,7 @@ public function search($query)
 			$recipes = $this->service->findRecipesInSearchIndex($query);
 
 			foreach ($recipes as $i => $recipe) {
-                $recipes[$i]['image_url'] = $this->urlGenerator->linkToRoute(
+                $recipes[$i]['imageUrl'] = $this->urlGenerator->linkToRoute(
                     'cookbook.recipe.image',
                     [
                         'id' => $recipe['recipe_id'],
@@ -153,6 +153,8 @@ public function search($query)
                 );
 			}
 
+            return new DataResponse($recipes, 200, ['Content-Type' => 'application/json']);
+            // TODO: Remove obsolete code below when this is ready
 			$response = new TemplateResponse($this->appName, 'content/search', ['query' => $query, 'recipes' => $recipes]);
             $response->renderAs('blank');
 
@@ -183,7 +185,7 @@ public function category($category)
                     ]
                 );
 			}
-            
+
             return new DataResponse($recipes, Http::STATUS_OK, ['Content-Type' => 'application/json']);
         } catch (\Exception $e) {
             return new DataResponse($e->getMessage(), 500);
@@ -319,7 +321,7 @@ public function update($id)
 
 		try {
 	        $recipe_data = [];
-            
+
             parse_str(file_get_contents("php://input"), $recipe_data);
 
             $recipe_data['id'] = $id;
@@ -331,7 +333,7 @@ public function update($id)
 
 		} catch (\Exception $e) {
 			return new DataResponse($e->getMessage(), 500);
-        
+
         }
     }
 }

lib/Db/RecipeDb.php

@@ -220,7 +220,10 @@ public function findRecipes(array $keywords, string $user_id) {
         $qb = $this->db->getQueryBuilder();
 
         $qb->select(['r.recipe_id', 'r.name'])
-            ->from(self::DB_TABLE_KEYWORDS, 'k');
+            ->from(self::DB_TABLE_RECIPES, 'r');
+
+        $qb->leftJoin('r', self::DB_TABLE_KEYWORDS, 'k', 'k.recipe_id = r.recipe_id');
+        $qb->leftJoin('r', self::DB_TABLE_CATEGORIES, 'c', 'r.recipe_id = c.recipe_id');
 
         $paramIdx = 1;
         $params = [];
@@ -232,19 +235,18 @@ public function findRecipes(array $keywords, string $user_id) {
 
             $qb->orWhere("LOWER(k.name) LIKE :keyword$paramIdx");
             $qb->orWhere("LOWER(r.name) LIKE :keyword$paramIdx");
+            $qb->orWhere("LOWER(c.name) LIKE :keyword$paramIdx");
 
             $params["keyword$paramIdx"] = "%$lowerKeyword%";
             $types["keyword$paramIdx"] = Type::STRING;
             $paramIdx++;
 
         }
 
-        $qb->andWhere('k.user_id = :user');
+        $qb->andWhere('r.user_id = :user');
 
         $qb->setParameters($params, $types);
         $qb->setParameter('user', $user_id, TYPE::STRING);
-
-        $qb->join('k', self::DB_TABLE_RECIPES, 'r', 'k.recipe_id = r.recipe_id');
 
         $qb->groupBy(['r.name', 'r.recipe_id']);
         $qb->orderBy('r.name');

src/components/AppControls.vue

@@ -5,12 +5,12 @@
         <Breadcrumbs class="breadcrumbs" rootIcon="icon-category-organization">
             <Breadcrumb :title="t('cookbook', 'Home')" :to="'/'" :disableDrop="true" />
             <!-- INDEX PAGE -->
-            <Breadcrumb v-if="isIndex" class="active no-arrow" :title="t('cookbook', 'All recipes')" :disableDrop="true"></Breadcrumb>
-            <!--
+            <Breadcrumb v-if="isIndex" class="active no-arrow" :title="t('cookbook', 'All recipes')" :disableDrop="true" />
             <Breadcrumb v-if="isIndex" class="no-arrow" title="" :disableDrop="true">
-                <ActionButton icon="icon-search" class="action-button" :disabled="true" :ariaLabel="t('cookbook', 'Search')" @click="$window.goTo('/search')" />
+                <!-- This is clumsy design but the component cannot display just one input element on the breadcrumbs bar -->
+                <ActionInput icon="icon-quota" @update:value="updateFilters" :value="filterValue">{{ t('cookbook', 'Filter') }}</ActionInput>
+                <ActionInput icon="icon-search" @submit="search">{{ t('cookbook', 'Search') }}</ActionInput>
             </Breadcrumb>
-            -->
             <!-- SEARCH PAGE -->
             <Breadcrumb v-if="isSearch" class="not-link" :title="searchTitle" :disableDrop="true" />
             <Breadcrumb v-if="isSearch && $route.params.value" class="active" :title="$route.params.value" :disableDrop="true" />
@@ -87,17 +87,18 @@
 
 <script>
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
 import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
 
 export default {
     name: 'AppControls',
     components: {
-        ActionButton, Breadcrumbs, Breadcrumb
+        ActionButton, ActionInput, Breadcrumbs, Breadcrumb
     },
     data () {
         return {
-
+            filterValue: '',
         }
     },
     computed: {
@@ -220,9 +221,16 @@ export default {
         saveChanges: function() {
             this.$root.$emit('saveRecipe')
         },
+        search: function(e) {
+            this.$window.goTo('/search/'+e.target[1].value)
+        },
         toggleNavigation: function() {
             $("#app-navigation").toggleClass("show-navigation")
         },
+        updateFilters: function(e) {
+            this.filterValue = e
+            this.$root.$emit('applyRecipeFilter', e)
+        },
     },
     mounted () {
     },

src/components/AppIndex.vue

@@ -1,6 +1,6 @@
 <template>
     <ul>
-        <li v-for="recipe in recipes" :key="recipe.recipe_id">
+        <li v-for="recipe in filteredRecipes" :key="recipe.recipe_id">
             <router-link :to="'/recipe/'+recipe.recipe_id">
                 <img v-if="recipe.imageUrl" :src="recipe.imageUrl">
                 <span>{{ recipe.name }}</span>
@@ -14,9 +14,25 @@ export default {
     name: 'Index',
     data () {
         return {
-            recipes: []
+            filters: "",
+            recipes: [],
         }
     },
+    computed: {
+        filteredRecipes () {
+            if (!this.filters) {
+                return this.recipes
+            } else if (this.recipes.length) {
+                let filtered = []
+                for (let i=0; i<this.recipes.length; i++) {
+                    if (this.recipes[i].name.toLowerCase().indexOf(this.filters.toLowerCase()) >= 0) {
+                        filtered.push(this.recipes[i])
+                    }
+                }
+                return filtered
+            }
+        },
+    },
     methods: {
         /**
          * Load all recipes from the database
@@ -38,6 +54,10 @@ export default {
         },
     },
     mounted () {
+        this.$root.$off('applyRecipeFilter')
+        this.$root.$on('applyRecipeFilter', (value) => {
+            this.filters = value
+        })
         this.loadAll()
     },
 }

src/components/SearchResults.vue

@@ -20,20 +20,18 @@ export default {
     },
     methods: {
         setup: function() {
+            // TODO: This is a mess of different implementation styles, needs cleanup
             if (this.query === 'name') {
                 // Search by name
-                console.log("Recipe name search for "+this.$route.params.value)
             }
             if (this.query === 'tag') {
                 // Search by tag
-                console.log("Tag search for "+this.$route.params.value)
             }
             if (this.query === 'cat') {
                 // Search by category
-                console.log("Category search for "+this.$route.params.value)
                 let $this = this
                 let cat = this.$route.params.value
-                $.get(this.$window.baseUrl + '/category/'+cat).done(function(json) {
+                $.get(this.$window.baseUrl + '/api/category/'+cat).done(function(json) {
                     $this.results = json
                 }).fail(function (jqXHR, textStatus, errorThrown) {
                     $this.results = []
@@ -43,7 +41,21 @@ export default {
                     }
                 })
             } else {
-                // Something else?
+                // General search
+                let deferred = $.Deferred()
+                $.get(this.$window.baseUrl + '/api/search/'+this.$route.params.value).done((recipes) => {
+                    this.results = recipes
+                    deferred.resolve()
+                }).fail((jqXHR, textStatus, errorThrown) => {
+                    this.results = []
+                    deferred.reject(new Error(jqXHR.responseText))
+                    alert(t('cookbook', 'Failed to load search results'))
+                    if (e && e instanceof Error) {
+                        throw e
+                    }
+                })
+                this.$store.dispatch('setPage', { page: 'search' })
+                return deferred.promise()
             }
             this.$store.dispatch('setPage', { page: 'search' })
         },

src/router/index.js

@@ -27,6 +27,7 @@ const routes = [
     // Search routes
     { path: '/category/:value', name: 'search-category', component: Search, props: { query: 'cat' } },
     { path: '/name/:value', name: 'search-name', component: Search, props: { query: 'name' } },
+    { path: '/search/:value', name: 'search-general', component: Search, props: { query: 'general' } },
     { path: '/tag/:value', name: 'search-tag', component: Search, props: { query: 'tag' } },
 
     // Recipe routes
@@ -41,10 +42,10 @@ const routes = [
     { path: '/recipe/create', name: 'recipe-create', component: RecipeEdit },
     { path: '/recipe/:id/edit', name: 'recipe-edit', component: RecipeEdit },
     { path: '/recipe/:id', name: 'recipe-view', component: RecipeView },
-    
+
     // Index is the last defined route
     { path: '/', name:'index', component: Index },
-    
+
     // Anything not matched goes to NotFound
     { path: '*', name:'not-found', component: NotFound },
 ];