feat(ui/sidebar): add page search by keywords in sidebar (#603)

docs/swagger/docs.go

@@ -1486,6 +1486,12 @@ const docTemplate = `{
                         "name": "offset",
                         "in": "query"
                     },
+                    {
+                        "type": "string",
+                        "description": "Search keywords",
+                        "name": "search",
+                        "in": "query"
+                    },
                     {
                         "type": "string",
                         "description": "The site name of your content scope",

docs/swagger/swagger.json

@@ -1479,6 +1479,12 @@
                         "name": "offset",
                         "in": "query"
                     },
+                    {
+                        "type": "string",
+                        "description": "Search keywords",
+                        "name": "search",
+                        "in": "query"
+                    },
                     {
                         "type": "string",
                         "description": "The site name of your content scope",

docs/swagger/swagger.yaml

@@ -2102,6 +2102,10 @@ paths:
         in: query
         name: offset
         type: integer
+      - description: Search keywords
+        in: query
+        name: search
+        type: string
       - description: The site name of your content scope
         in: query
         name: site_name

internal/entity/page.go

@@ -10,6 +10,12 @@ type Page struct {
 	// TODO
 	// For historical reasons, the naming of this field does not follow best practices.
 	// Keywords should be avoided in naming, and "key" should be changed to a different name.
+	//
+	// And must caution that the db query statement quoted the field name `key` with backticks.
+	// Different db may have different rules. The pgsql is not backticks, but double quotes.
+	// So use the pages.key (without any quotes) to instead of `key`.
+	//
+	// Consider to rename this column and make a db migration in the future.
 	Key string `gorm:"index;size:255"` // Page key
 
 	Title     string

server/handler/page_list.go

@@ -5,12 +5,14 @@ import (
 	"github.com/ArtalkJS/Artalk/internal/entity"
 	"github.com/ArtalkJS/Artalk/server/common"
 	"github.com/gofiber/fiber/v2"
+	"gorm.io/gorm"
 )
 
 type ParamsPageList struct {
 	SiteName string `query:"site_name" json:"site_name" validate:"optional"` // The site name of your content scope
 	Limit    int    `query:"limit" json:"limit" validate:"optional"`         // The limit for pagination
 	Offset   int    `query:"offset" json:"offset" validate:"optional"`       // The offset for pagination
+	Search   string `query:"search" json:"search" validate:"optional"`       // Search keywords
 }
 
 type ResponsePageList struct {
@@ -36,7 +38,7 @@ func PageList(app *core.App, router fiber.Router) {
 			return resp
 		}
 
-		// 准备 query
+		// Prepare query
 		q := app.Dao().DB().Model(&entity.Page{}).Order("created_at DESC")
 		if p.SiteName != "" {
 			if _, ok, resp := common.CheckSiteExist(app, c, p.SiteName); !ok {
@@ -46,14 +48,20 @@ func PageList(app *core.App, router fiber.Router) {
 			q = q.Where("site_name = ?", p.SiteName)
 		}
 
-		// 总共条数
+		// Total count
 		var total int64
 		q.Count(&total)
 
-		// 数据分页
+		// Search
+		q = q.Scopes(func(d *gorm.DB) *gorm.DB {
+			return d.Where("LOWER(pages.key) LIKE LOWER(?) OR LOWER(title) LIKE LOWER(?)",
+				"%"+p.Search+"%", "%"+p.Search+"%")
+		})
+
+		// Pagination
 		q = q.Scopes(Paginate(p.Offset, p.Limit))
 
-		// 查找
+		// Find database
 		var pages []entity.Page
 		q.Find(&pages)
 

ui/artalk-sidebar/src/components/AppNavigationMenu.ts

@@ -132,6 +132,8 @@ export const useNavigationMenu = (props: NavigationStoreProps = {}) => {
 
   router.afterEach((to, from, failure) => {
     syncCurtPage(to)
+    searchState.value = ''
+    searchState.hideSearch()
   })
 
   return reactive({

ui/artalk-sidebar/src/pages/pages.vue

@@ -14,6 +14,7 @@ const { t } = useI18n()
 
 const pageSize = ref(20)
 const pageTotal = ref(0)
+const search = ref('')
 const pagination = ref<InstanceType<typeof Pagination>>()
 const showActBarBorder = ref(false)
 const refreshBtn = ref({
@@ -22,7 +23,12 @@ const refreshBtn = ref({
 })
 
 onMounted(() => {
-  nav.updateTabs({}, '')
+  nav.updateTabs(
+    {
+      all: 'all',
+    },
+    'all',
+  )
 
   reqPages(0)
 
@@ -40,6 +46,19 @@ onMounted(() => {
     }
   })
 
+  // Users search
+  nav.enableSearch(
+    (value: string) => {
+      search.value = value
+      reqPages(0)
+    },
+    () => {
+      if (search.value === '') return
+      search.value = ''
+      reqPages(0)
+    },
+  )
+
   nav.scrollableArea?.addEventListener('scroll', scrollHandler)
 })
 
@@ -63,6 +82,7 @@ function reqPages(offset: number) {
       site_name: curtSite.value,
       offset: offset,
       limit: pageSize.value,
+      search: search.value,
     })
     .then((res) => {
       pageTotal.value = res.data.count

ui/artalk/src/api/v2.ts

@@ -1528,6 +1528,8 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
         limit?: number
         /** The offset for pagination */
         offset?: number
+        /** Search keywords */
+        search?: string
         /** The site name of your content scope */
         site_name?: string
       },