Merge pull request #375 from seyfeb/feature/showTagCloudInSearchResults

christianlupus · web-flow · commit 7f02208bd889 · 2020-11-12T12:15:11.000+01:00
Show tag cloud in search results
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,8 @@
   [#373](https://github.com./nextcloud/cookbook/pull/373/) @seyfeb
 - Pasted content with newlines creates new input fields automatically for tools and ingredients in recipe editor
   [#379](https://github.com./nextcloud/cookbook/pull/379/) @seyfeb
+- Selectable keywords for filtering in recipe lists
+  [#375](https://github.com./nextcloud/cookbook/pull/375/) @seyfeb
 
 ### Changed
 - Switch of project ownership to neextcloud organization in GitHub
diff --git a/lib/Db/RecipeDb.php b/lib/Db/RecipeDb.php
@@ -72,20 +72,24 @@ public function deleteRecipeById(int $id) {
     
     public function findAllRecipes(string $user_id) {
         $qb = $this->db->getQueryBuilder();
-
-        $qb->select('*')
+        
+        $qb->select(['r.recipe_id', 'r.name', 'k.name AS keywords'])
             ->from(self::DB_TABLE_RECIPES, 'r')
-            ->where('user_id = :user')
+            ->where('r.user_id = :user')
             ->orderBy('r.name');
         $qb->setParameter('user', $user_id, TYPE::STRING);
+        $qb->leftJoin('r', self::DB_TABLE_KEYWORDS, 'k', 'r.recipe_id = k.recipe_id');
 
         $cursor = $qb->execute();
         $result = $cursor->fetchAll();
         $cursor->closeCursor();
 
         $result = $this->sortRecipes($result);
-        
-        return $this->unique($result);
+
+        // group recipes, convert keywords to comma-separated list
+        $recipesGroupedTags = $this->groupKeywordInResult($result);
+
+        return $this->unique($recipesGroupedTags);
     }
 
     public function unique(array $result) {
@@ -196,23 +200,28 @@ public function getRecipesByCategory(string $category, string $user_id) {
 
         if ($category != '_')
         {
-            $qb->select(['r.recipe_id', 'r.name'])
-                ->from(self::DB_TABLE_CATEGORIES, 'k')
-                ->where('k.name = :category')
-                ->andWhere('k.user_id = :user')
+            // One would probably want to use GROUP_CONCAT to create the list of keywords 
+            // for the recipe, but those don't seem to work:
+            // $qb->select(['r.recipe_id', 'r.name', 'GROUP_CONCAT(k.name) AS keywords']) // not working
+            // $qb->select(['r.recipe_id', 'r.name', DB::raw('GROUP_CONCAT(k.name) AS keywords')]) // not working
+            $qb->select(['r.recipe_id', 'r.name', 'k.name AS keywords'])
+                ->from(self::DB_TABLE_CATEGORIES, 'c')
+                ->where('c.name = :category')
+                ->andWhere('c.user_id = :user')
                 ->setParameter('category', $category, TYPE::STRING)
                 ->setParameter('user', $user_id, TYPE::STRING);
             
-            $qb->join('k', self::DB_TABLE_RECIPES, 'r', 'k.recipe_id = r.recipe_id');
+            $qb->join('c', self::DB_TABLE_RECIPES, 'r', 'c.recipe_id = r.recipe_id');
+            $qb->leftJoin('c', self::DB_TABLE_KEYWORDS, 'k', 'c.recipe_id = k.recipe_id');
 
-            $qb->groupBy(['r.name', 'r.recipe_id']);
-            $qb->orderBy('r.name');            
+            $qb->groupBy(['r.name', 'r.recipe_id', 'k.name']);
+            $qb->orderBy('r.name');
         }
         else
         {
-
-            $qb->select(['r.recipe_id', 'r.name'])
+            $qb->select(['r.recipe_id', 'r.name', 'k.name AS keywords'])
             ->from(self::DB_TABLE_RECIPES, 'r')
+            ->leftJoin('r', self::DB_TABLE_KEYWORDS, 'k', 'r.recipe_id = k.recipe_id')
             ->leftJoin(
                 'r',
                 self::DB_TABLE_CATEGORIES,
@@ -231,8 +240,11 @@ public function getRecipesByCategory(string $category, string $user_id) {
         $cursor = $qb->execute();
         $result = $cursor->fetchAll();
         $cursor->closeCursor();
+        
+        // group recipes, convert keywords to comma-separated list
+        $recipesGroupedTags = $this->groupKeywordInResult($result);
 
-        return $this->unique($result);
+        return $this->unique($recipesGroupedTags);
     }
 
     /**
@@ -267,13 +279,14 @@ public function getRecipesByKeywords(string $keywords, string $user_id) {
      * @throws \OCP\AppFramework\Db\DoesNotExistException if not found
      */
     public function findRecipes(array $keywords, string $user_id) {
+        
         $has_keywords = $keywords && is_array($keywords) && sizeof($keywords) > 0 && $keywords[0];
 
         if(!$has_keywords) { return $this->findAllRecipes($user_id); }
 
         $qb = $this->db->getQueryBuilder();
 
-        $qb->select(['r.recipe_id', 'r.name'])
+        $qb->select(['r.recipe_id', 'r.name', 'k.name AS keywords'])
             ->from(self::DB_TABLE_RECIPES, 'r');
         
         $qb->leftJoin('r', self::DB_TABLE_KEYWORDS, 'k', 'k.recipe_id = r.recipe_id');
@@ -309,7 +322,28 @@ public function findRecipes(array $keywords, string $user_id) {
         $result = $cursor->fetchAll();
         $cursor->closeCursor();
 
-        return $this->unique($result);
+        // group recipes, convert keywords to comma-separated list
+        $recipesGroupedTags = $this->groupKeywordInResult($result);
+
+        return $this->unique($recipesGroupedTags);
+    }
+    
+    /**
+     * @param array $results Array of recipes with double entries for different keywords
+     * Group recipes by id and convert keywords to comma-separated list
+     */
+    public function groupKeywordInResult(array $result) {
+        $recipesGroupedTags = array();
+        foreach ($result as $recipe) {
+            if(!array_key_exists($recipe['recipe_id'], $recipesGroupedTags)){
+                $recipesGroupedTags[$recipe['recipe_id']] = $recipe;
+            } else {
+                if (!is_null($recipe['keywords'])) {
+                    $recipesGroupedTags[$recipe['recipe_id']]['keywords'] .= ','.$recipe['keywords'];
+                }                
+            }
+        }
+        return $recipesGroupedTags;
     }
     
     /**
diff --git a/src/components/AppIndex.vue b/src/components/AppIndex.vue
@@ -1,21 +1,33 @@
 <template>
-    <ul>
-        <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>
-            </router-link>
-        </li>
-    </ul>
+    <div>
+        <ul v-if="keywords.length" class="keywords">
+            <RecipeKeyword v-for="(keyword,idx) in keywords" :key="'kw'+idx" :keyword="keyword" v-on:keyword-clicked="keywordClicked(keyword)" v-bind:class="{active : keywordFilter.includes(keyword), disabled : !keywordContainedInVisibleRecipes(keyword)}" />
+        </ul>
+        <ul class="recipes">
+            <li v-for="(recipe, index) in filteredRecipes" :key="recipe.recipe_id" v-show="recipeVisible(index)">
+                <router-link :to="'/recipe/'+recipe.recipe_id">
+                    <img v-if="recipe.imageUrl" :src="recipe.imageUrl">
+                    <span>{{ recipe.name }}</span>
+                </router-link>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
+import RecipeKeyword from './RecipeKeyword'
+
 export default {
     name: 'Index',
+    components: {
+        RecipeKeyword,
+    },
     data () {
         return {
             filters: "",
             recipes: [],
+            keywords: [],
+            keywordFilter: [],
         }
     },
     computed: {
@@ -34,6 +46,30 @@ export default {
         },
     },
     methods: {
+        /**
+         * Callback for click on keyword
+         */
+        keywordClicked: function(keyword) {
+            const index = this.keywordFilter.indexOf(keyword)
+            if (index > -1) {
+                this.keywordFilter.splice(index, 1)
+            } else {
+                this.keywordFilter.push(keyword)
+            }
+        },
+        /**
+         * Check if a keyword exists in the currently visible recipes.
+         */
+        keywordContainedInVisibleRecipes: function(keyword) {
+            for (let i=0; i<this.recipes.length; ++i) {
+                if (this.recipeVisible(i) 
+                    && this.recipes[i].keywords
+                    && this.recipes[i].keywords.split(',').includes(keyword)) {
+                    return true
+                }                
+            }
+            return false
+        },
         /**
          * Load all recipes from the database
          */
@@ -42,6 +78,7 @@ export default {
             var $this = this
             $.get(this.$window.baseUrl + '/api/recipes').done(function (recipes) {
                 $this.recipes = recipes
+                $this.setKeywords(recipes)
                 deferred.resolve()
                 // Always set page name last
                 $this.$store.dispatch('setPage', { page: 'index' })
@@ -52,6 +89,38 @@ export default {
             })
             return deferred.promise()
         },
+        /**
+         * Check if recipe should be displayed, depending on selected keyword filter.
+         * Returns true if recipe contains all selected keywords.
+         */
+        recipeVisible: function(index) {     
+            if (this.keywordFilter.length == 0) {
+                return true
+            } else {
+                if (!this.recipes[index].keywords) {
+                    return false
+                }
+                let kw_array = this.recipes[index].keywords.split(',')
+                return this.keywordFilter.every(kw => kw_array.includes(kw))
+            }
+        },
+        /**
+         * Extract and set list of keywords from the returned recipes
+         */
+        setKeywords: function(recipes) {
+            this.keywords = []
+            if ((recipes.length) > 0) {
+                recipes.forEach(recipe => {
+                    if(recipe['keywords']) {                    
+                        recipe['keywords'].split(',').forEach(kw => {
+                            if(!this.keywords.includes(kw)) {
+                                this.keywords.push(kw)                           
+                            }
+                        })
+                    }                    
+                })
+            }
+        },
     },
     mounted () {
         this.$root.$off('applyRecipeFilter')
@@ -65,35 +134,43 @@ export default {
 
 <style scoped>
 
-ul {
+ul.keywords {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    width: 100%;
+    margin: .5rem 1rem .5rem;
+}
+
+ul.recipes {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     width: 100%;
 }
 
-    ul li {
+    ul.recipes li {
         width: 300px;
         max-width: 100%;
         margin: 0.5rem 1rem 1rem;
     }
-        ul li a {
+        ul.recipes li a {
             display: block;
             height: 105px;
             box-shadow: 0 0 3px #AAA;
             border-radius: 3px;
         }
-        ul li a:hover {
+        ul.recipes li a:hover {
             box-shadow: 0 0 5px #888;
         }
 
-        ul li img {
+        ul.recipes li img {
             float: left;
             height: 105px;
             border-radius: 3px 0 0 3px;
         }
 
-        ul li span {
+        ul.recipes li span {
             display: block;
             padding: 0.5rem 0.5em 0.5rem calc(105px + 0.5rem);
         }
diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
@@ -8,7 +8,7 @@ export default {
     props: ['keyword'],
     data () {
         return {
-        };
+        }
     },
     computed: {
     },
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
