From f6349a615b2af1d82a1eb8b3e413e5534cb11e69 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 16 Jan 2021 15:39:42 +0100
Subject: [PATCH 1/6] Created recipe-list component

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeList.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/components/RecipeList.vue

diff --git a/src/components/RecipeList.vue b/src/components/RecipeList.vue
new file mode 100644
index 000000000..8c926a67f
--- /dev/null
+++ b/src/components/RecipeList.vue
@@ -0,0 +1,20 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "RecipeList",
+    props: ['recipes'],
+    data() {
+        return {}
+    },
+    methods: {
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

From 2e0d61fe47afcf876efc7092d812a31e82d2c676 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 16 Jan 2021 21:23:15 +0100
Subject: [PATCH 2/6] Added handling of keywords and recipes

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeList.vue | 271 +++++++++++++++++++++++++++++++++-
 1 file changed, 268 insertions(+), 3 deletions(-)

diff --git a/src/components/RecipeList.vue b/src/components/RecipeList.vue
index 8c926a67f..7ce90fa13 100644
--- a/src/components/RecipeList.vue
+++ b/src/components/RecipeList.vue
@@ -1,20 +1,285 @@
 <template>
-
+    <div>
+        <div class="kw">
+            <transition-group v-if="uniqKeywords.length > 0" class="keywords" name="keyword-list" tag="ul">
+                <RecipeKeyword v-for="keywordObj in selectedKeywords"
+                    :key="keywordObj.name"
+                    :name="keywordObj.name"
+                    :count="keywordObj.count"
+                    :title="t('cookbook','Toggle keyword')"
+                    @keyword-clicked="keywordClicked(keywordObj)"
+                    class="keyword active"
+                    />
+                <RecipeKeyword v-for="keywordObj in selectableKeywords"
+                    :key="keywordObj.name"
+                    :name="keywordObj.name"
+                    :count="keywordObj.count"
+                    :title="t('cookbook','Toggle keyword')"
+                    @keyword-clicked="keywordClicked(keywordObj)"
+                    class="keyword"
+                    />
+                <RecipeKeyword v-for="keywordObj in unavailableKeywords"
+                    :key="keywordObj.name"
+                    :name="keywordObj.name"
+                    :count="keywordObj.count"
+                    :title="t('cookbook','Keyword not contained in visible recipes')"
+                    @keyword-clicked="keywordClicked(keywordObj)"
+                    class="keyword disabled"
+                    />
+            </transition-group>
+        </div>
+        <ul class="recipes">
+            <li
+                v-for="recipeObj in recipeObjects"
+                :key="recipeObj.recipe.recipe_id"
+                v-show="recipeObj.show"
+                >
+                <router-link :to="'/recipe/' + recipeObj.recipe.recipe_id">
+                     <lazy-picture v-if="recipeObj.recipe.imageUrl"
+                        class="recipe-thumbnail"
+                        :lazy-src="recipeObj.recipe.imageUrl"
+                        :blurred-preview-src="recipeObj.recipe.imagePlaceholderUrl"
+                        :width="105" :height="105"/>
+                    <span>{{ recipeObj.recipe.name }}</span>
+                </router-link>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
+import LazyPicture from './LazyPicture'
+import RecipeKeyword from './RecipeKeyword'
+
 export default {
     name: "RecipeList",
     props: ['recipes'],
+    components: {
+        LazyPicture,
+        RecipeKeyword
+    },
     data() {
-        return {}
+        return {
+            // String-based filters applied to the list
+            filters: "",
+            // All keywords to filter the recipes for (conjunctively)
+            keywordFilter: [],
+        }
+    },
+    computed: {
+        /**
+         * An array of all keywords in all recipes. These are neither sorted nor unique
+         */
+        rawKeywords() {
+            var keywordArray = this.recipes.map(function(r){
+                if(! 'keywords' in r) {
+                    return []
+                }
+                if(r.keywords != null){
+                    return r.keywords.split(',')
+                } else {
+                    return []
+                }
+            })
+            return [].concat(... keywordArray)
+        },
+        /**
+         * An array of sorted and unique keywords over all the recipes
+         */
+        uniqKeywords() {
+            function uniqFilter(value, index, self) {
+                return self.indexOf(value) === index
+            }
+            return this.rawKeywords.sort().filter(uniqFilter)
+        },
+        /**
+         * An array of objects that contain the keywords plus a count of recipes asociated with these keywords
+         */
+        keywordsWithCount() {
+            let $this = this
+            return this.uniqKeywords.map(function (kw){
+                return {
+                    'name': kw,
+                    'count': $this.rawKeywords.filter((kw2) => kw === kw2).length
+                }
+            }).sort(function (k1, k2) {
+                if(k1.count != k2.count) {
+                    // Distinguish by number
+                    return k2.count - k1.count
+                }
+                // Distinguish by keyword name
+                return (k1.name.toLowerCase() > k2.name.toLowerCase()) ? 1 : -1
+            })
+        },
+        /**
+         * An array of keyword objects that are currently in use for filtering
+         */
+        selectedKeywords() {
+            return this.keywordsWithCount.filter((kw) => this.keywordFilter.includes(kw.name))
+        },
+        /**
+         * An array of those keyword objects that are currently not in use for filtering
+         */
+        unselectedKeywords() {
+            return this.keywordsWithCount.filter((kw) => ! this.selectedKeywords.includes(kw))
+        },
+        /**
+         * An array of all recipes that are part in all filtered keywords
+         */
+        recipesFilteredByKeywords() {
+            let $this = this
+            return this.recipes.filter(function (r) {
+                if($this.keywordFilter.length == 0) {
+                    // No filtering, keep all
+                    return true
+                }
+
+                if(r.keywords === null){
+                    return false
+                }
+
+                function keywordInRecipePresent(kw,r) {
+                    if(! r.keywords) {
+                        return false;
+                    }
+
+                    let keywords = r.keywords.split(',')
+                    return keywords.includes(kw.name)
+                }
+
+                return $this.selectedKeywords.map((kw) => keywordInRecipePresent(kw, r)).reduce((l,r) => l && r)
+            })
+        },
+        /**
+         * An array of the finally filtered recipes, that is both filtered for keywords as well as string-based name filtering
+         */
+        filteredRecipes () {
+            let ret = this.recipesFilteredByKeywords
+            let $this = this
+
+            if(this.filters){
+                ret = ret.filter(function (r) {
+                    return r.name.toLowerCase().includes($this.filters.toLowerCase())
+                })
+            }
+
+            return ret
+        },
+        /**
+         * An array of keywords that are yet unselected but some visible recipes are associated
+         */
+        selectableKeywords() {
+            if (this.unselectedKeywords.length === 0) {
+                return []
+            }
+
+            let $this = this
+            return this.unselectedKeywords.filter(function (kw) {
+                return $this.filteredRecipes.map(function (r) {
+                    return r.keywords && r.keywords.split(',').includes(kw.name)
+                }).reduce((l,r) => l || r, false)
+            })
+        },
+        /**
+         * An array of known keywords that are not associated with any visible recipe
+         */
+        unavailableKeywords() {
+            return this.unselectedKeywords.filter((kw) => ! this.selectableKeywords.includes(kw))
+        },
+        // An array of recipe objects of all recipes with links to the recipes and a property if the recipe is to be shown
+        recipeObjects() {
+            return this.recipes.map(function (r) {
+                return {
+                    'recipe': r,
+                    'show': this.filteredRecipes.includes(r)
+                }
+            }, this)
+        },
     },
     methods: {
+        /**
+         * Callback for click on keyword, add to or remove from list
+         */
+        keywordClicked: function(keyword) {
+            const index = this.keywordFilter.indexOf(keyword.name)
+            if (index > -1) {
+                this.keywordFilter.splice(index, 1)
+            } else {
+                this.keywordFilter.push(keyword.name)
+            }
+        },
         
-    }
+    },
+    mounted () {
+        this.$root.$off('applyRecipeFilter')
+        this.$root.$on('applyRecipeFilter', (value) => {
+            this.filters = value
+        })
+    },
 }
 </script>
 
 <style scoped>
 
+div.kw {
+    width: 100%;
+    max-height: 6.7em;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    margin-bottom: 1em;
+    padding: .1em;
+}
+
+ul.keywords {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding: .5rem 1rem .5rem;
+}
+
+.keyword {
+  display: inline-block;
+}
+
+.keyword-list-move {
+  transition: transform .5s;
+}
+
+ul.recipes {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    width: 100%;
+}
+
+    ul.recipes li {
+        width: 300px;
+        max-width: 100%;
+        margin: 0.5rem 1rem 1rem;
+    }
+        ul.recipes li a {
+            display: block;
+            height: 105px;
+            box-shadow: 0 0 3px #AAA;
+            border-radius: 3px;
+        }
+        ul.recipes li a:hover {
+            box-shadow: 0 0 5px #888;
+        }
+
+        ul.recipes li .recipe-thumbnail {
+            position: relative;
+            float: left;
+            height: 105px;
+            width: 105px;
+            border-radius: 3px 0 0 3px;
+            background-color: #bebdbd;
+            overflow: hidden;
+        }
+
+        ul.recipes li span {
+            display: block;
+            padding: 0.5rem 0.5em 0.5rem calc(105px + 0.5rem);
+        }
+
 </style>

From d431b164d43ed6ca026ba38e941e6f8b4707c9b9 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 16 Jan 2021 21:24:19 +0100
Subject: [PATCH 3/6] Using recipe-list component in recipe index

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/AppIndex.vue | 255 +-----------------------------------
 1 file changed, 6 insertions(+), 249 deletions(-)

diff --git a/src/components/AppIndex.vue b/src/components/AppIndex.vue
index cc77e6d76..b8b58b014 100644
--- a/src/components/AppIndex.vue
+++ b/src/components/AppIndex.vue
@@ -1,198 +1,24 @@
 <template>
-    <div>
-        <div class="kw">
-            <transition-group v-if="uniqKeywords.length > 0" class="keywords" name="keyword-list" tag="ul">
-                <RecipeKeyword v-for="keywordObj in selectedKeywords"
-                    :key="keywordObj.name"
-                    :name="keywordObj.name"
-                    :count="keywordObj.count"
-                    :title="t('cookbook','Toggle keyword')"
-                    @keyword-clicked="keywordClicked(keywordObj)"
-                    class="keyword active"
-                    />
-                <RecipeKeyword v-for="keywordObj in selectableKeywords"
-                    :key="keywordObj.name"
-                    :name="keywordObj.name"
-                    :count="keywordObj.count"
-                    :title="t('cookbook','Toggle keyword')"
-                    @keyword-clicked="keywordClicked(keywordObj)"
-                    class="keyword"
-                    />
-                <RecipeKeyword v-for="keywordObj in unavailableKeywords"
-                    :key="keywordObj.name"
-                    :name="keywordObj.name"
-                    :count="keywordObj.count"
-                    :title="t('cookbook','Keyword not contained in visible recipes')"
-                    @keyword-clicked="keywordClicked(keywordObj)"
-                    class="keyword disabled"
-                    />
-                
-            </transition-group>
-        </div>
-        <ul class="recipes">
-            <li
-                v-for="(recipeObj, index) in recipeObjects" 
-                :key="recipeObj.recipe.recipe_id"
-                v-show="recipeObj.show"
-                >
-                <router-link :to="'/recipe/' + recipeObj.recipe.recipe_id">
-                     <lazy-picture v-if="recipeObj.recipe.imageUrl"
-                        class="recipe-thumbnail"
-                        :lazy-src="recipeObj.recipe.imageUrl"
-                        :blurred-preview-src="recipeObj.recipe.imagePlaceholderUrl"
-                        :width="105" :height="105"/>
-                    <span>{{ recipeObj.recipe.name }}</span>
-                </router-link>
-            </li>
-        </ul>
-    </div>
+    <recipe-list :recipes="recipes"/>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
-import LazyPicture from './LazyPicture'
-import RecipeKeyword from './RecipeKeyword'
+
+import RecipeList from './RecipeList'
 
 export default {
     name: 'Index',
     components: {
-        LazyPicture,
-        RecipeKeyword
+        RecipeList
     },
     data () {
         return {
-            // String-based filters applied to the list
-            filters: "",
             // The known recipes in the cookbook
-            recipes: [],
-            // All keyword to filter the recipes for (conjunctively)
-            keywordFilter: [],
+            recipes: []
         }
     },
-    computed: {
-        // An array of all keywords in all recipes. These are neither sorted nor unique
-        rawKeywords() {
-            var keywordArray = this.recipes.map(function(r){
-                if(! 'keywords' in r) {
-                    return []
-                }
-                if(r.keywords != null){
-                    return r.keywords.split(',')
-                } else {
-                    return []
-                }
-            })
-            return [].concat(... keywordArray)
-        },
-        // An array of sorted and unique keywords over all the recipes
-        uniqKeywords() {
-            function uniqFilter(value, index, self) {
-                return self.indexOf(value) === index
-            }
-            return this.rawKeywords.sort().filter(uniqFilter)
-        },
-        // An array of objects that contain the keywords plus a count of recipes asociated with these keywords
-        keywordsWithCount() {
-            let $this = this
-            return this.uniqKeywords.map(function (kw){
-                return {
-                    'name': kw,
-                    'count': $this.rawKeywords.filter((kw2) => kw === kw2).length
-                }
-            }).sort(function (k1, k2) {
-                if(k1.count != k2.count) {
-                    // Distinguish by number
-                    return k2.count - k1.count
-                }
-                // Distinguish by keyword name
-                return (k1.name.toLowerCase() > k2.name.toLowerCase()) ? 1 : -1
-            })
-        },
-        // An array of keyword objects that are currently in use for filtering
-        selectedKeywords() {
-            return this.keywordsWithCount.filter((kw) => this.keywordFilter.includes(kw.name))
-        },
-        // An array of those keyword objects that are currently not in use for filtering
-        unselectedKeywords() {
-            return this.keywordsWithCount.filter((kw) => ! this.selectedKeywords.includes(kw))
-        },
-        // An array of all recipes that are part in all filtered keywords
-        recipesFilteredByKeywords() {
-            let $this = this
-            return this.recipes.filter(function (r) {
-                if($this.keywordFilter.length == 0) {
-                    // No filtering, keep all
-                    return true
-                }
-                
-                if(r.keywords === null){
-                    return false
-                }
-                
-                function keywordInRecipePresent(kw,r) {
-                    if(! r.keywords) {
-                        return false;
-                    }
-                    
-                    let keywords = r.keywords.split(',')
-                    return keywords.includes(kw.name)
-                }
-                
-                return $this.selectedKeywords.map((kw) => keywordInRecipePresent(kw, r)).reduce((l,r) => l && r)
-            })
-        },
-        // An array of the finally filtered recipes, that is both filtered for keywords as well as string-based name filtering
-        filteredRecipes () {
-            let ret = this.recipesFilteredByKeywords
-            let $this = this
-            
-            if(this.filters){
-                ret = ret.filter(function (r) {
-                    return r.name.toLowerCase().includes($this.filters.toLowerCase())
-                })
-            }
-            
-            return ret
-        },
-        // An array of keywords that are yet unselected but some visible recipes are associated
-        selectableKeywords() {
-            if (this.unselectedKeywords.length === 0) {
-                return []
-            }
-            
-            let $this = this
-            return this.unselectedKeywords.filter(function (kw) {
-                return $this.filteredRecipes.map(function (r) {
-                    return r.keywords && r.keywords.split(',').includes(kw.name)
-                }).reduce((l,r) => l || r, false)
-            })
-        },
-        // An array of known keywords that are not associated with any visible recipe
-        unavailableKeywords() {
-            return this.unselectedKeywords.filter((kw) => ! this.selectableKeywords.includes(kw))
-        },
-        // An array of recipe objects of all recipes with links to the recipes and a property if the recipe is to be shown 
-        recipeObjects() {
-            return this.recipes.map(function (r) {
-                return {
-                    'recipe': r,
-                    'show': this.filteredRecipes.includes(r)
-                }
-            }, this)
-        },
-    },
     methods: {
-        /**
-         * Callback for click on keyword, add to or remove from list
-         */
-        keywordClicked: function(keyword) {
-            const index = this.keywordFilter.indexOf(keyword.name)
-            if (index > -1) {
-                this.keywordFilter.splice(index, 1)
-            } else {
-                this.keywordFilter.push(keyword.name)
-            }
-        },
         /**
          * Load all recipes from the database
          */
@@ -201,7 +27,7 @@ export default {
             axios.get(this.$window.baseUrl + '/api/recipes')
                 .then(function (response) {
                     $this.recipes = response.data
-                    $this.setKeywords($this.recipes)
+
                     // Always set page name last
                     $this.$store.dispatch('setPage', { page: 'index' })
                 })
@@ -212,76 +38,7 @@ export default {
         },
     },
     mounted () {
-        this.$root.$off('applyRecipeFilter')
-        this.$root.$on('applyRecipeFilter', (value) => {
-            this.filters = value
-        })
         this.loadAll()
     },
 }
 </script>
-
-<style scoped>
-
-div.kw {
-    width: 100%;
-    max-height: 6.7em;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    margin-bottom: 1em;
-    padding: .1em;
-}
-
-ul.keywords {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding: .5rem 1rem .5rem;
-}
-
-.keyword {
-  display: inline-block;
-}
-
-.keyword-list-move {
-  transition: transform .5s;
-}
-
-ul.recipes {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    width: 100%;
-}
-
-    ul.recipes li {
-        width: 300px;
-        max-width: 100%;
-        margin: 0.5rem 1rem 1rem;
-    }
-        ul.recipes li a {
-            display: block;
-            height: 105px;
-            box-shadow: 0 0 3px #AAA;
-            border-radius: 3px;
-        }
-        ul.recipes li a:hover {
-            box-shadow: 0 0 5px #888;
-        }
-
-        ul.recipes li .recipe-thumbnail {
-            position: relative;
-            float: left;
-            height: 105px;
-            width: 105px;
-            border-radius: 3px 0 0 3px;
-            background-color: #bebdbd;
-            overflow: hidden;
-        }
-
-        ul.recipes li span {
-            display: block;
-            padding: 0.5rem 0.5em 0.5rem calc(105px + 0.5rem);
-        }
-
-</style>

From 761974f9c6a1b08d2039c77a4767fd2cd208fc2f Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 16 Jan 2021 21:26:59 +0100
Subject: [PATCH 4/6] Using recipe-list component in search results and
 categories

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/SearchResults.vue | 201 ++-----------------------------
 1 file changed, 7 insertions(+), 194 deletions(-)

diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index f974e6e09..d44f31200 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,133 +1,37 @@
 <template>
     <div>
-        <div class="kw">
-            <transition-group v-if="keywords.length" class="keywords" name="keyword-list" tag="ul">
-                <RecipeKeyword v-for="keyword in keywords"
-                    :key="keyword.name"
-                    :name="keyword.name"
-                    :count="keyword.count"
-                    :title="keywordContainedInVisibleRecipes(keyword) ? t('cookbook','Toggle keyword') : t('cookbook','Keyword not contained in visible recipes')"
-                    v-on:keyword-clicked="keywordClicked(keyword)"
-                    :class="{keyword, active : keywordFilter.includes(keyword.name), disabled : !keywordContainedInVisibleRecipes(keyword)}"
-                    />
-            </transition-group>
-        </div>
-        <ul class="recipes">
-            <li v-for="(result, index) in results" :key="result.recipe_id" v-show="recipeVisible(index)">
-                <router-link :to="'/recipe/'+result.recipe_id">
-                     <lazy-picture v-if="result.imageUrl"
-                        class="recipe-thumbnail"
-                        :lazy-src="result.imageUrl"
-                        :blurred-preview-src="result.imagePlaceholderUrl"
-                        :width="105" :height="105"/>
-
-                    <span>{{ result.name }}</span>
-                </router-link>
-            </li>
-        </ul>
+        <recipe-list :recipes="results"/>
     </div>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 
-import LazyPicture from './LazyPicture'
-import RecipeKeyword from './RecipeKeyword'
+import RecipeList from './RecipeList'
 
 export default {
     name: "Search",
     components: {
-        LazyPicture,
-        RecipeKeyword
+        RecipeList
     },
     props: ['query'],
     data () {
         return {
-            results: [],
-            keywords: [],
-            keywordFilter: [],
+            results: []
         }
     },
-    computed: {
-    },
     watch: {
-
         $route(to, from) {
             this.keywordFilter = [];
         },
-        keywordFilter: {
-            handler: function() {
-                this.sortKeywords()
-            },
-            deep: true
-        }
     },
     methods: {
-        /**
-         * Callback for click on keyword, add to or remove from list
-         */
-        keywordClicked: function(keyword) {
-            const index = this.keywordFilter.indexOf(keyword.name)
-            if (index > -1) {
-                this.keywordFilter.splice(index, 1)
-            } else {
-                this.keywordFilter.push(keyword.name)
-            }
-        },
-        /**
-         * Check if a keyword exists in the currently visible recipes.
-         */
-        keywordContainedInVisibleRecipes: function(keyword) {
-            for (let i=0; i<this.results.length; ++i) {
-                if (this.recipeVisible(i) 
-                    && this.results[i].keywords
-                    && this.results[i].keywords.split(',').includes(keyword.name)) {
-                    return true
-                }
-            }
-            return false
-        },
-        /**
-         * 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.results[index].keywords) {
-                    return false
-                }
-                let kw_array = this.results[index].keywords.split(',')
-                return this.keywordFilter.every(kw => kw_array.includes(kw))
-            }
-        },
-        /**
-         * Extract and set list of keywords from the returned recipes.
-         */
-        setKeywords: function(results) {
-            this.keywords = []
-            if ((results.length) > 0) {
-                results.forEach(recipe => {
-                    if(recipe['keywords']) {
-                        recipe['keywords'].split(',').forEach(kw => {
-                            const idx = this.keywords.findIndex(el => el.name == kw)
-                            if (idx > -1) {
-                                this.keywords[idx].count++
-                            } else {
-                                this.keywords.push({name: kw, count: 1})
-                            }
-                        })
-                    }
-                })
-                this.sortKeywords()
-            }
-        },
         setup: function() {
             
             // TODO: This is a mess of different implementation styles, needs cleanup
             if (this.query === 'name') {
                 // Search by name
+                // TODO
             }
             else if (this.query === 'tags') {
                 // Search by tags
@@ -152,7 +56,6 @@ export default {
                 axios.get(this.$window.baseUrl + '/api/category/'+cat)
                     .then(function(response) {
                         $this.results = response.data
-                        $this.setKeywords($this.results)
                     })
                     .catch(function (e) {
                         $this.results = []
@@ -161,13 +64,13 @@ export default {
                             throw e
                         }
                     })
-            } else {
+            }
+            else {
                 // General search
                 let $this = this
                 axios.get(this.$window.baseUrl + '/api/search/'+this.$route.params.value)
                     .then(function(response) {
                         $this.results = response.data
-                        $this.setKeywords($this.results)
                     })
                     .catch((e) => {
                         $this.results = []
@@ -178,33 +81,8 @@ export default {
                     })
                 this.$store.dispatch('setPage', { page: 'search' })
             }
-
-            
             this.$store.dispatch('setPage', { page: 'search' })
         },
-
-        /**
-         * Sort keywords.
-         */
-        sortKeywords: function() {
-            // Sort by number of recipes containing keyword
-            this.keywords = this.keywords.sort((k1, k2) => k2.count - k1.count)
-
-            // Move selected keywords to the front and unselectable to the end
-            let selected_kw = [], selectable_kw = [], unavailable_kw = []
-            this.keywords.forEach(kw => {
-                if (this.keywordFilter.includes(kw.name)) {
-                    selected_kw.push(kw)
-                }
-                else if (this.keywordContainedInVisibleRecipes(kw)) {
-                    selectable_kw.push(kw)
-                }
-                else {
-                    unavailable_kw.push(kw)
-                }
-            })
-            this.keywords = selected_kw.concat(selectable_kw.concat(unavailable_kw))
-        },
     },
     mounted () {
         this.setup()
@@ -217,68 +95,3 @@ export default {
     },
 }
 </script>
-
-<style scoped>
-
-div.kw {
-    width: 100%;
-    max-height: 6.7em;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    margin-bottom: 1em;
-    padding: .1em;
-}
-
-ul.keywords {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding: .5rem 1rem .5rem;
-}
-
-.keyword {
-  display: inline-block;
-}
-
-.keyword-list-move {
-  transition: transform .5s;
-}
-
-ul.recipes {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    width: 100%;
-}
-
-    ul.recipes li {
-        width: 300px;
-        max-width: 100%;
-        margin: 0.5rem 1rem 1rem;
-    }
-        ul.recipes li a {
-            display: block;
-            height: 105px;
-            box-shadow: 0 0 3px #AAA;
-            border-radius: 3px;
-        }
-        ul.recipes li a:hover {
-            box-shadow: 0 0 5px #888;
-        }
-
-        ul.recipes li .recipe-thumbnail {
-            position: relative;
-            float: left;
-            height: 105px;
-            width: 105px;
-            border-radius: 3px 0 0 3px;
-            background-color: #bebdbd;
-            overflow: hidden;
-        }
-
-        ul.recipes li span {
-            display: block;
-            padding: 0.5rem 0.5em 0.5rem calc(105px + 0.5rem);
-        }
-
-</style>

From 9ea5ad19129f2d66de3e8fdb8fdad117675fcfb9 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 16 Jan 2021 23:16:15 +0100
Subject: [PATCH 5/6] Attaching keywords to recipe results for keyword searches

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 lib/Db/RecipeDb.php | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/Db/RecipeDb.php b/lib/Db/RecipeDb.php
index ca222ad3f..d81620106 100755
--- a/lib/Db/RecipeDb.php
+++ b/lib/Db/RecipeDb.php
@@ -263,7 +263,7 @@ public function getRecipesByKeywords(string $keywords, string $user_id) {
 
 		$qb = $this->db->getQueryBuilder();
 
-		$qb->select(['r.recipe_id', 'r.name'])
+		$qb->select(['r.recipe_id', 'r.name', 'kk.name AS keywords'])
 		->from(self::DB_TABLE_KEYWORDS, 'k')
 		->where('k.name IN (:keywords)')
 		->andWhere('k.user_id = :user')
@@ -272,14 +272,18 @@ public function getRecipesByKeywords(string $keywords, string $user_id) {
 		->setParameter('keywords', $keywords_arr, IQueryBuilder::PARAM_STR_ARRAY)
 		->setParameter('keywordsCount', sizeof($keywords_arr), TYPE::INTEGER);
 		$qb->join('k', self::DB_TABLE_RECIPES, 'r', 'k.recipe_id = r.recipe_id');
-		$qb->groupBy(['r.name', 'r.recipe_id']);
+		$qb->join('r', self::DB_TABLE_KEYWORDS, 'kk', 'kk.recipe_id = r.recipe_id');
+		$qb->groupBy(['r.name', 'r.recipe_id', 'kk.name']);
 		$qb->orderBy('r.name');
 
 		$cursor = $qb->execute();
 		$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);
 	}
 	
 	/**

From 1c8759017f7daa45822ec69903e2a5965b98ebc5 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 16 Jan 2021 23:17:44 +0100
Subject: [PATCH 6/6] Updated CHANGELOG

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9cce1309e..0639b5268 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ### Changed
 - Using computed property in recipe view
   [#522](https://github.com/nextcloud/cookbook/pull/522/) @seyfeb
+- Split off list/grid of recipes to separate Vue component
+  [#526](https://github.com/nextcloud/cookbook/pull/526/) @seyfeb
 
 ## 0.7.10 - 2021-01-16