From 9d781877a644a59f42c7c8d9574a60b9fd3a221f Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 5 Nov 2020 21:15:07 +0100
Subject: [PATCH 01/10] Added keywords to recipe view

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeKeyword.vue | 33 ++++++++++++++++++++++++++++++++
 src/components/RecipeView.vue    | 12 ++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/components/RecipeKeyword.vue

diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
new file mode 100644
index 000000000..eec66e1a6
--- /dev/null
+++ b/src/components/RecipeKeyword.vue
@@ -0,0 +1,33 @@
+<template>
+    <li>{{ keyword }}</li>
+</template>
+
+<script>
+export default {
+    name: 'RecipeKeyword',
+    props: ['keyword'],
+    data () {
+        return {
+        };
+    },
+    computed: {
+        
+    },
+    methods: {
+
+    }
+
+}
+</script>
+
+<style scoped>
+
+li {
+    display: inline-block;
+    margin-right: .75em;
+    padding: 0px .5em;
+    border: 1px solid #999999;
+    border-radius: 4px;
+}
+
+</style>
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index 68b146e44..e0de6cb97 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -6,6 +6,11 @@
             <h2>{{ $store.state.recipe.name }}</h2>
 
             <div class="details">
+                <p v-if="keywords.length">
+                    <ul v-if="keywords.length">
+                        <RecipeKeyword v-for="(keyword,idx) in keywords" :key="'keyw'+idx" :keyword="keyword" />
+                    </ul>
+                </p>
                 <p class="description">{{ $store.state.recipe.description }}</p>
                 <p v-if="$store.state.recipe.url">
                     <strong>{{ t('cookbook', 'Source') }}: </strong><a target="_blank" :href="$store.state.recipe.url">{{ $store.state.recipe.url }}</a>
@@ -50,6 +55,7 @@
 import RecipeImages from './RecipeImages'
 import RecipeIngredient from './RecipeIngredient'
 import RecipeInstruction from './RecipeInstruction'
+import RecipeKeyword from './RecipeKeyword'
 import RecipeTimer from './RecipeTimer'
 import RecipeTool from './RecipeTool'
 
@@ -59,6 +65,7 @@ export default {
         RecipeImages,
         RecipeIngredient,
         RecipeInstruction,
+        RecipeKeyword,
         RecipeTimer,
         RecipeTool,
     },
@@ -67,6 +74,7 @@ export default {
             // Own properties
             ingredients: [],
             instructions: [],
+            keywords: [],
             timerCook: null,
             timerPrep: null,
             timerTotal: null,
@@ -109,6 +117,10 @@ export default {
                     $this.instructions = Object.values($this.$store.state.recipe.recipeInstructions)
                 }
 
+                if ($this.$store.state.recipe.keywords) {
+                    $this.keywords = String($this.$store.state.recipe.keywords).split(',');
+                }
+
                 if ($this.$store.state.recipe.cookTime) {
                     let cookT = $this.$store.state.recipe.cookTime.match(/PT(\d+?)H(\d+?)M/)
                     $this.timerCook = { hours: parseInt(cookT[1]), minutes: parseInt(cookT[2]) }

From 7fec2a9bbc54ef3532323bf39405e34670486b60 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 5 Nov 2020 22:39:34 +0100
Subject: [PATCH 02/10] Added links to keywords in recipe view

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

diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index eec66e1a6..253b02b71 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -1,5 +1,5 @@
 <template>
-    <li>{{ keyword }}</li>
+    <router-link :to="'/tag/' + keyword"><li>{{ keyword }}</li></router-link>
 </template>
 
 <script>
@@ -30,4 +30,8 @@ li {
     border-radius: 4px;
 }
 
+li:hover {
+    background-color: #EEEEEE;
+}
+
 </style>

From 3b0ba1f9887166417760a079beec84354f9665b8 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 5 Nov 2020 22:51:18 +0100
Subject: [PATCH 03/10] 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 b68c22203..e706b0093 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,8 @@
   [#366](https://github.com/nextcloud/cookbook/pull/366/) @christianlupus
 - Enfoce update of changelog through CI
   [#366](https://github.com/nextcloud/cookbook/pull/366/) @christianlupus
+- Keyword cloud is displayed in recipe
+  [#373](https://github.com/nextcloud/cookbook/pull/373/) @seyfeb
 
 ### Changed
 - Switch of project ownership to neextcloud organization in GitHub

From cb98375d91f8bc53021759daa44db8fcd797eabe Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 5 Nov 2020 23:44:47 +0100
Subject: [PATCH 04/10] Fixed keyword margin on line break for many keywords

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

diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index 253b02b71..fa3da5040 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -24,7 +24,8 @@ export default {
 
 li {
     display: inline-block;
-    margin-right: .75em;
+    margin-right: .3em;
+    margin-bottom: .3em;
     padding: 0px .5em;
     border: 1px solid #999999;
     border-radius: 4px;

From 96331cfd1673072a208107a6bc86af187d47a052 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 7 Nov 2020 12:48:39 +0100
Subject: [PATCH 05/10] Added backend functionality for retrieving recipes by
 multiple keywords

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 appinfo/routes.php                |  1 +
 lib/Controller/MainController.php | 29 +++++++++++++++++++++++++++++
 lib/Db/RecipeDb.php               | 28 ++++++++++++++++++++++++++++
 lib/Service/RecipeService.php     | 12 ++++++++++++
 4 files changed, 70 insertions(+)

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 0458a4441..42b9236c5 100755
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -26,6 +26,7 @@
 	   ['name' => 'config#config', 'url' => '/config', 'verb' => 'POST'],
 	   /* API routes */
 	   ['name' => 'main#category', 'url' => '/api/category/{category}', 'verb' => 'GET'],
+	   ['name' => 'main#tags', 'url' => '/api/tags/{keywords}', 'verb' => 'GET'],
 	   ['name' => 'main#search', 'url' => '/api/search/{query}', 'verb' => 'GET'],
    ],
 
diff --git a/lib/Controller/MainController.php b/lib/Controller/MainController.php
index 4b4f98e80..424badadf 100755
--- a/lib/Controller/MainController.php
+++ b/lib/Controller/MainController.php
@@ -192,6 +192,35 @@ public function category($category)
         }
     }
 
+    /**
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function tags($keywords)
+    {
+        $this->dbCacheService->triggerCheck();
+        $keywords = urldecode($keywords);
+
+        try {
+            $recipes = $this->service->getRecipesByKeywords($keywords);
+			foreach ($recipes as $i => $recipe) {
+                $recipes[$i]['imageUrl'] = $this->urlGenerator->linkToRoute(
+                    'cookbook.recipe.image',
+                    [
+                        'id' => $recipe['recipe_id'],
+                        'size' => 'thumb',
+                        't' => $this->service->getRecipeMTime($recipe['recipe_id'])
+                    ]
+                );
+			}
+
+            return new DataResponse($recipes, Http::STATUS_OK, ['Content-Type' => 'application/json']);
+        } catch (\Exception $e) {
+            error_log($e->getMessage());
+            return new DataResponse($e->getMessage(), 500);
+        }
+    }
+
     /**
      * @NoAdminRequired
      * @NoCSRFRequired
diff --git a/lib/Db/RecipeDb.php b/lib/Db/RecipeDb.php
index 05208a389..16409dcc6 100755
--- a/lib/Db/RecipeDb.php
+++ b/lib/Db/RecipeDb.php
@@ -234,6 +234,34 @@ public function getRecipesByCategory(string $category, string $user_id) {
 
         return $this->unique($result);
     }
+
+    /**
+     * @throws \OCP\AppFramework\Db\DoesNotExistException if not found
+     *
+     */
+    public function getRecipesByKeywords(string $keywords, string $user_id) {
+        $keywords_arr = explode(',', $keywords);
+
+        $qb = $this->db->getQueryBuilder();
+
+        $qb->select(['r.recipe_id', 'r.name'])
+        ->from(self::DB_TABLE_KEYWORDS, 'k')
+        ->where('k.name IN (:keywords)')
+        ->andWhere('k.user_id = :user')
+        ->having('COUNT(DISTINCT k.name) = :keywordsCount')
+        ->setParameter('user', $user_id, TYPE::INTEGER)
+        ->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->orderBy('r.name');
+
+        $cursor = $qb->execute();
+        $result = $cursor->fetchAll();
+        $cursor->closeCursor();
+
+        return $this->unique($result);
+    }
     
     /**
      * @throws \OCP\AppFramework\Db\DoesNotExistException if not found
diff --git a/lib/Service/RecipeService.php b/lib/Service/RecipeService.php
index 90c73567e..4fa47f83d 100755
--- a/lib/Service/RecipeService.php
+++ b/lib/Service/RecipeService.php
@@ -917,6 +917,18 @@ public function getRecipesByCategory($category)
         return $this->db->getRecipesByCategory($category, $this->user_id);
     }
 
+    /**
+     * Get all recipes containing all of the keywords.
+     *
+     * @param string $keywords Keywords/tags as a comma-separated string.
+     *
+     * @return array
+     */
+    public function getRecipesByKeywords($keywords)
+    {
+        return $this->db->getRecipesByKeywords($keywords, $this->user_id);
+    }
+
     /**
      * Search for recipes by keywords
      *

From 65970a5454a6d16314d46259bc7ca5d86fe29fe0 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 7 Nov 2020 12:49:59 +0100
Subject: [PATCH 06/10] Added /tags/ route.

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/AppControls.vue   |  4 +++-
 src/components/RecipeKeyword.vue |  2 +-
 src/components/SearchResults.vue | 17 ++++++++++++++---
 src/router/index.js              |  1 +
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/AppControls.vue b/src/components/AppControls.vue
index 22a8ba2a3..41fe307db 100644
--- a/src/components/AppControls.vue
+++ b/src/components/AppControls.vue
@@ -13,7 +13,7 @@
             </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=='_'?'None':$route.params.value" :disableDrop="true" />
+            <Breadcrumb v-if="isSearch && $route.params.value" class="active" :title="$route.params.value=='_'?'None':decodeURIComponent($route.params.value)" :disableDrop="true" />
             <!-- RECIPE PAGES -->
             <!-- Edit recipe -->
             <Breadcrumb v-if="isEdit" class="not-link" :title="t('cookbook', 'Edit recipe')" :disableDrop="true" />
@@ -181,6 +181,8 @@ export default {
                 return t('cookbook', 'Recipe name')
             } else if (this.$route.name === 'search-tag') {
                 return t('cookbook', 'Tag')
+            } else if (this.$route.name === 'search-tags') {
+                return t('cookbook', 'Tags')
             } else {
                 return t('cookbook', 'Search for recipes')
             }
diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index fa3da5040..4daad0d3f 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="'/tag/' + keyword"><li>{{ keyword }}</li></router-link>
+    <router-link :to="'/tags/' + keyword"><li>{{ keyword }}</li></router-link>
 </template>
 
 <script>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 1b9552542..a4f937a8f 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -24,10 +24,21 @@ export default {
             if (this.query === 'name') {
                 // Search by name
             }
-            if (this.query === 'tag') {
-                // Search by tag
+            else if (this.query === 'tags') {
+                // Search by tags
+                let $this = this
+                let tags = this.$route.params.value
+                $.get(this.$window.baseUrl + '/api/tags/'+tags).done(function(json) {
+                    $this.results = json
+                }).fail(function (jqXHR, textStatus, errorThrown) {
+                    $this.results = []
+                    alert(t('cookbook', 'Failed to load recipes with keywords: ' + tags))
+                    if (errorThrown && errorThrown instanceof Error) {
+                        throw errorThrown
+                    }
+                })
             }
-            if (this.query === 'cat') {
+            else if (this.query === 'cat') {
                 // Search by category
                 let $this = this
                 let cat = this.$route.params.value
diff --git a/src/router/index.js b/src/router/index.js
index d895fbbb8..b4222e026 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,7 @@ const routes = [
     { 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' } },
+    { path: '/tags/:value', name: 'search-tags', component: Search, props: { query: 'tags' } },
 
     // Recipe routes
     // Vue router has a strange way of determining when it renders a component again and when not.

From dfc483970c72c286009e3ad6cbf71ca8c41717a6 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 7 Nov 2020 13:12:41 +0100
Subject: [PATCH 07/10] Updated keyword visuals to using CSS variables

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

diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index 4daad0d3f..7fb0868ae 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -27,12 +27,12 @@ li {
     margin-right: .3em;
     margin-bottom: .3em;
     padding: 0px .5em;
-    border: 1px solid #999999;
+    border: 1px solid var(--color-border-dark);
     border-radius: 4px;
 }
 
 li:hover {
-    background-color: #EEEEEE;
+    background-color: var(--color-background-dark);;
 }
 
 </style>

From 7e0b8c7ac1c291847722f16ed0a043c2134cf2bb Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sun, 8 Nov 2020 14:46:46 +0100
Subject: [PATCH 08/10] Made RecipeKeyword component more reusable by exposing
 click as event

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeKeyword.vue | 21 ++++++++++++++++-----
 src/components/RecipeView.vue    | 10 +++++++++-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index 7fb0868ae..7157768cd 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="'/tags/' + keyword"><li>{{ keyword }}</li></router-link>
+    <a v-on:click="clicked"><li>{{ keyword }}</li></a>
 </template>
 
 <script>
@@ -11,10 +11,11 @@ export default {
         };
     },
     computed: {
-        
     },
     methods: {
-
+        clicked() {
+            this.$emit('keyword-clicked')
+        }
     }
 
 }
@@ -29,10 +30,20 @@ li {
     padding: 0px .5em;
     border: 1px solid var(--color-border-dark);
     border-radius: 4px;
+
+    /* prevent text selection - doesn't look good */
+    -webkit-user-select: none; /* Safari */        
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+    user-select: none; /* Standard */
 }
 
-li:hover {
-    background-color: var(--color-background-dark);;
+.active li {
+    background-color: var(--color-primary);
+    color: var(--color-primary-text);
 }
 
+li:hover, .active li:hover {
+    border: 1px solid var(--color-primary);
+}
 </style>
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index e0de6cb97..883b06457 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -8,7 +8,7 @@
             <div class="details">
                 <p v-if="keywords.length">
                     <ul v-if="keywords.length">
-                        <RecipeKeyword v-for="(keyword,idx) in keywords" :key="'keyw'+idx" :keyword="keyword" />
+                        <RecipeKeyword v-for="(keyword,idx) in keywords" :key="'keyw'+idx" :keyword="keyword"  v-on:keyword-clicked="keywordClicked(keyword)" />
                     </ul>
                 </p>
                 <p class="description">{{ $store.state.recipe.description }}</p>
@@ -82,6 +82,14 @@ export default {
         }
     },
     methods: {
+        /**
+         * Callback for click on keyword
+         */
+        keywordClicked: function(keyword) {
+            if(keyword) {
+                this.$router.push('/tags/'+keyword);
+            }
+        },
         setup: function() {
             // Make the control row show that a recipe is loading
             if (!this.$store.state.recipe) {

From e5e224839a31db84f4f8edb56244a1bf9f6eda93 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sun, 8 Nov 2020 15:49:01 +0100
Subject: [PATCH 09/10] Removed /tag/ route from vue/js part

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/AppControls.vue | 2 --
 src/router/index.js            | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/components/AppControls.vue b/src/components/AppControls.vue
index 41fe307db..70fd4b102 100644
--- a/src/components/AppControls.vue
+++ b/src/components/AppControls.vue
@@ -179,8 +179,6 @@ export default {
                 return t('cookbook', 'Category')
             } else if (this.$route.name === 'search-name') {
                 return t('cookbook', 'Recipe name')
-            } else if (this.$route.name === 'search-tag') {
-                return t('cookbook', 'Tag')
             } else if (this.$route.name === 'search-tags') {
                 return t('cookbook', 'Tags')
             } else {
diff --git a/src/router/index.js b/src/router/index.js
index b4222e026..695943934 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,7 +28,6 @@ const 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' } },
     { path: '/tags/:value', name: 'search-tags', component: Search, props: { query: 'tags' } },
 
     // Recipe routes

From 0a093eaa98c138e32ed5a9a99550c3df33e601f3 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sun, 8 Nov 2020 22:42:23 +0100
Subject: [PATCH 10/10] Updated recipe keyword to allow disabling element

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeKeyword.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index 7157768cd..e22015cb7 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -1,5 +1,5 @@
 <template>
-    <a v-on:click="clicked"><li>{{ keyword }}</li></a>
+    <a v-on:click="clicked" ref="link"><li>{{ keyword }}</li></a>
 </template>
 
 <script>
@@ -14,10 +14,11 @@ export default {
     },
     methods: {
         clicked() {
-            this.$emit('keyword-clicked')
+            if(!this.$refs.link.classList.contains('disabled')) {
+                this.$emit('keyword-clicked')
+            }
         }
     }
-
 }
 </script>
 
@@ -29,7 +30,7 @@ li {
     margin-bottom: .3em;
     padding: 0px .5em;
     border: 1px solid var(--color-border-dark);
-    border-radius: 4px;
+    border-radius: var(--border-radius-pill);
 
     /* prevent text selection - doesn't look good */
     -webkit-user-select: none; /* Safari */        
@@ -43,6 +44,17 @@ li {
     color: var(--color-primary-text);
 }
 
+.disabled li {
+    background-color: #FFF;
+    border-color: var(--color-border);
+    color: var(--color-border);
+}
+
+.disabled li:hover {
+    border-color: var(--color-border);
+    cursor: default;
+}
+
 li:hover, .active li:hover {
     border: 1px solid var(--color-primary);
 }