feat: tag autocomplete

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)
+}

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"`

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)

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>

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);

web/app/src/main.scss

@@ -11,3 +11,6 @@
     flex-wrap: wrap;
   }
 
+.svelte-tags-input-matchs-parent {
+  z-index: 200;
+}

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>

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">