feat(ui/sidebar): add user search by keywords in sidebar (#710)

ArtalkJS · Aug 28, 2024 · 6b58fd8 · 6b58fd8
1 parent 80e5ca5
commit 6b58fd8
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 13 deletions.
diff --git a/docs/swagger/docs.go b/docs/swagger/docs.go
@@ -3344,6 +3344,12 @@ const docTemplate = `{
                         "description": "The offset for pagination",
                         "name": "offset",
                         "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Search keywords",
+                        "name": "search",
+                        "in": "query"
                     }
                 ],
                 "responses": {

diff --git a/docs/swagger/swagger.json b/docs/swagger/swagger.json
@@ -3337,6 +3337,12 @@
                         "description": "The offset for pagination",
                         "name": "offset",
                         "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "Search keywords",
+                        "name": "search",
+                        "in": "query"
                     }
                 ],
                 "responses": {

diff --git a/docs/swagger/swagger.yaml b/docs/swagger/swagger.yaml
@@ -3172,6 +3172,10 @@ paths:
         in: query
         name: offset
         type: integer
+      - description: Search keywords
+        in: query
+        name: search
+        type: string
       produces:
       - application/json
       responses:

diff --git a/server/handler/user_list.go b/server/handler/user_list.go
@@ -5,11 +5,13 @@ import (
 	"github.com/ArtalkJS/Artalk/internal/entity"
 	"github.com/ArtalkJS/Artalk/server/common"
 	"github.com/gofiber/fiber/v2"
+	"gorm.io/gorm"
 )
 
 type ParamsUserList struct {
-	Limit  int `query:"limit" json:"limit" validate:"optional"`   // The limit for pagination
-	Offset int `query:"offset" json:"offset" validate:"optional"` // The offset for pagination
+	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 ResponseAdminUserList struct {
@@ -38,24 +40,30 @@ func UserList(app *core.App, router fiber.Router) {
 			return resp
 		}
 
-		// 准备 query
+		// Prepare query
 		q := app.Dao().DB().Model(&entity.User{}).Order("created_at DESC")
 
-		// 总共条数
+		// Total count
 		var total int64
 		q.Count(&total)
 
-		// 类型筛选
+		// User type
 		if listType == "admin" {
 			q = q.Where("is_admin = ?", true)
 		} else if listType == "in_conf" {
 			q = q.Where("is_in_conf = ?", true)
 		}
 
-		// 数据分页
+		// Search
+		q = q.Scopes(func(d *gorm.DB) *gorm.DB {
+			return d.Where("LOWER(name) LIKE LOWER(?) OR LOWER(email) LIKE LOWER(?) OR badge_name = ? OR last_ip = ?",
+				"%"+p.Search+"%", "%"+p.Search+"%", p.Search, p.Search)
+		})
+
+		// Pagination
 		q = q.Scopes(Paginate(p.Offset, p.Limit))
 
-		// 查找
+		// Find users
 		var users []entity.User
 		q.Find(&users)
 

diff --git a/ui/artalk-sidebar/src/pages/comments.vue b/ui/artalk-sidebar/src/pages/comments.vue
@@ -10,7 +10,6 @@ const user = useUserStore()
 const nav = useNavStore()
 const { curtTab } = storeToRefs(nav)
 const { site: curtSite } = storeToRefs(user)
-const { t } = useI18n()
 
 const search = ref('')
 
@@ -81,7 +80,7 @@ onMounted(() => {
 
   listEl.value?.append($el)
 
-  // 搜索功能
+  // Comments search
   nav.enableSearch(
     (value: string) => {
       search.value = value

diff --git a/ui/artalk-sidebar/src/pages/users.vue b/ui/artalk-sidebar/src/pages/users.vue
@@ -6,19 +6,20 @@ import { artalk, bootParams } from '../global'
 import Pagination from '../components/Pagination.vue'
 
 const nav = useNavStore()
-const router = useRouter()
 const { curtTab } = storeToRefs(nav)
 const users = ref<ArtalkType.UserDataForAdmin[]>([])
 const { t } = useI18n()
 
 const pageSize = ref(30)
 const pageTotal = ref(0)
 const pagination = ref<InstanceType<typeof Pagination>>()
-const curtType = ref('all')
+const curtType = ref<'all' | 'admin' | 'in_conf' | undefined>('all')
 
 const addingUser = ref(false)
 const editingUser = ref<ArtalkType.UserDataForAdmin | undefined>()
 
+const search = ref('')
+
 onMounted(() => {
   nav.updateTabs(
     {
@@ -43,22 +44,36 @@ onMounted(() => {
       addingUser.value = false
       editingUser.value = undefined
 
-      curtType.value = tab
+      curtType.value = tab as any
       pagination.value?.reset()
       reqUsers(0)
     }
   })
 
   reqUsers(0)
+
+  // Users search
+  nav.enableSearch(
+    (value: string) => {
+      search.value = value
+      reqUsers(0)
+    },
+    () => {
+      if (search.value === '') return
+      search.value = ''
+      reqUsers(0)
+    },
+  )
 })
 
 function reqUsers(offset: number) {
   nav.setPageLoading(true)
   artalk?.ctx
     .getApi()
-    .users.getUsers(curtType.value as any, {
+    .users.getUsers(curtType.value, {
       offset,
       limit: pageSize.value,
+      search: search.value,
     })
     .then((res) => {
       pageTotal.value = res.data.count

diff --git a/ui/artalk/src/api/v2.ts b/ui/artalk/src/api/v2.ts
@@ -2418,6 +2418,8 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
         limit?: number
         /** The offset for pagination */
         offset?: number
+        /** Search keywords */
+        search?: string
       },
       params: RequestParams = {},
     ) =>