From 45d4278a52ffb927c44cf70816f2c34f48deed4b Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Sat, 11 Sep 2021 01:56:42 +0700
Subject: [PATCH] feat: tag autocomplete

---
 pkg/app/tag_routes.go            |  6 ++++++
 pkg/models/item.go               |  4 ++++
 pkg/services/tag.go              | 12 ++++++++++++
 web/app/src/App.svelte           |  9 +++++++++
 web/app/src/api.js               |  5 +++++
 web/app/src/main.scss            |  5 ++++-
 web/app/src/routes/Posts.svelte  |  7 +++++++
 web/app/src/routes/Upload.svelte |  9 +++++++--
 8 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/pkg/app/tag_routes.go b/pkg/app/tag_routes.go
index 8fe25c2..0745ffa 100644
--- a/pkg/app/tag_routes.go
+++ b/pkg/app/tag_routes.go
@@ -11,6 +11,7 @@ func InitializeTagRoutes(g *gin.Engine) {
 	unprotected := g.Group("/api/tag")
 	{
 		unprotected.GET("/", tagGet)
+		unprotected.GET("/autocomplete", tagAutocomplete)
 	}
 }
 
@@ -18,3 +19,8 @@ func tagGet(c *gin.Context) {
 	tags := services.GetTagAll()
 	c.JSON(http.StatusOK, tags)
 }
+
+func tagAutocomplete(c *gin.Context) {
+	tags := services.GetTagAutocomplete()
+	c.JSON(http.StatusOK, tags)
+}
diff --git a/pkg/models/item.go b/pkg/models/item.go
index ca6d6b3..784dcb6 100644
--- a/pkg/models/item.go
+++ b/pkg/models/item.go
@@ -12,6 +12,10 @@ type TagListItem struct {
 	PostCount int    `json:"postCount"`
 }
 
+type TagAutocompleteListItem struct {
+	Name string `json:"name"`
+}
+
 type PostListItem struct {
 	ID                 string   `json:"id"`
 	ImagePath          string   `json:"image_path"`
diff --git a/pkg/services/tag.go b/pkg/services/tag.go
index f9f6c5c..d513059 100644
--- a/pkg/services/tag.go
+++ b/pkg/services/tag.go
@@ -21,6 +21,18 @@ func GetTagAll() []models.TagListItem {
 	return tags
 }
 
+func GetTagAutocomplete() []models.TagAutocompleteListItem {
+	var tags []models.TagAutocompleteListItem
+	result := database.DB.Model(&database.Tag{}).
+		Joins("join tag_types on tag_types.id = tags.tag_type_id").
+		Select("concat(tag_types.name,':',tags.name) as name").
+		Find(&tags)
+	if result.Error != nil {
+		return []models.TagAutocompleteListItem{}
+	}
+	return tags
+}
+
 func FindTagGeneric(tagName string) (*database.Tag, error) {
 	var tag database.Tag
 	result := database.DB.Where("name = ?", tagName).First(&tag)
diff --git a/web/app/src/App.svelte b/web/app/src/App.svelte
index d7d8242..91e133d 100644
--- a/web/app/src/App.svelte
+++ b/web/app/src/App.svelte
@@ -49,4 +49,13 @@
 			font-size: 13.3333px;
 		}
 	}
+	#tags .svelte-tags-input-matchs {
+		z-index: 200;
+		&-parent {
+			z-index: 200;
+		}
+		& li:hover {
+			background: $primary;
+		}
+	}
 </style>
diff --git a/web/app/src/api.js b/web/app/src/api.js
index 3d4273e..2fe1fee 100644
--- a/web/app/src/api.js
+++ b/web/app/src/api.js
@@ -41,6 +41,11 @@ export async function getTags() {
     const response = await axios.get(endpoint);
     return response.data;
 }
+export async function getTagAutocomplete() {
+    const endpoint = url + "/api/tag/autocomplete";
+    const response = await axios.get(endpoint);
+    return response.data;
+}
 export async function getPosts({ page }) {
     const endpoint = url + "/api/post?page=" + page;
     const response = await axios.get(endpoint);
diff --git a/web/app/src/main.scss b/web/app/src/main.scss
index 8ab3ce3..2bf86c0 100644
--- a/web/app/src/main.scss
+++ b/web/app/src/main.scss
@@ -10,4 +10,7 @@
 .tile.is-multiline {
     flex-wrap: wrap;
   }
-  
\ No newline at end of file
+
+.svelte-tags-input-matchs-parent {
+  z-index: 200;
+}
\ No newline at end of file
diff --git a/web/app/src/routes/Posts.svelte b/web/app/src/routes/Posts.svelte
index 3da0b6c..af28836 100644
--- a/web/app/src/routes/Posts.svelte
+++ b/web/app/src/routes/Posts.svelte
@@ -51,6 +51,11 @@
         searchTerms = value.detail.tags;
     };
 
+    const onAutocomplete = async () => {
+        const list = await getTagAutocomplete();
+        return list;
+    };
+
     $: {
         queryParams = queryString.parse(location.search);
         if (queryParams.tags) {
@@ -88,6 +93,8 @@
                                 tags={searchTerms}
                                 addKeys={[9, 32]}
                                 on:tags={onTagChange}
+                                autoComplete={onAutocomplete}
+                                autoCompleteKey={"name"}
                             />
                         </div>
                     </div>
diff --git a/web/app/src/routes/Upload.svelte b/web/app/src/routes/Upload.svelte
index a0fd15a..bc0b0d3 100644
--- a/web/app/src/routes/Upload.svelte
+++ b/web/app/src/routes/Upload.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { uploadBlob, postCreate } from "../api.js";
+    import { uploadBlob, postCreate, getTagAutocomplete } from "../api.js";
     import { navigate, Link } from "svelte-routing";
     import Tags from "svelte-tags-input";
     import AuthRequired from "../AuthRequired.svelte";
@@ -38,6 +38,11 @@
         form.tags = value.detail.tags;
     };
 
+    const onAutocomplete = async () => {
+        const list = await getTagAutocomplete();
+        return list;
+    };
+
     const onSubmit = async () => {
         const response = await postCreate(form);
         navigate(`/post/${response.id}`);
@@ -107,7 +112,7 @@
             <div class="field">
                 <label for="tags" class="label">Tags</label>
                 <div class="control" id="tags">
-                    <Tags addKeys={[9, 32]} on:tags={onTagChange} />
+                    <Tags addKeys={[9, 32]} on:tags={onTagChange} autoComplete={onAutocomplete} autoCompleteKey={"name"} />
                 </div>
             </div>
             <div class="control">