feat(own): add filter

app/person/dashboard/components/PersonalTaskTable.tsx

@@ -18,13 +18,27 @@ import {
   getPersistedPageSizeOptions,
   resolvePageSizeWithinOptions,
 } from "@/components/setting/pageSize"
-import { Button, Group, Stack, Text, UnstyledButton } from "@mantine/core"
+import {
+  Button,
+  Group,
+  Select,
+  Stack,
+  Text,
+  UnstyledButton,
+} from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
 import { DataTableColumn } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import classes from "../page.module.css"
 
 const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
+const REJECTED_FILTER_OPTIONS = [
+  { value: "all", label: "全部" },
+  { value: "true", label: "是" },
+  { value: "false", label: "否" },
+] as const
+
+type RejectedFilterValue = (typeof REJECTED_FILTER_OPTIONS)[number]["value"]
 
 export default function PersonalTaskTable() {
   const user_name = usePermissionStore((s) => s.user_name)
@@ -47,6 +61,8 @@ export default function PersonalTaskTable() {
   const [totalItems, setTotalItems] = useState(0)
   const [records, setRecords] = useState<Task.SimpleTaskItem[]>([])
   const [loading, setLoading] = useState(false)
+  const [rejectedFilter, setRejectedFilter] =
+    useState<RejectedFilterValue>("all")
 
   const totalPages = useMemo(() => {
     return Math.max(1, Math.ceil(totalItems / pageSize))
@@ -59,13 +75,15 @@ export default function PersonalTaskTable() {
       const res = await getUserTaskList({
         page_number: page,
         page_size: pageSize,
+        rejected:
+          rejectedFilter === "all" ? undefined : rejectedFilter === "true",
       })
       setRecords(res?.simple_task_list ?? [])
       setTotalItems(res?.total_items ?? 0)
     } finally {
       setLoading(false)
     }
-  }, [page, pageSize, user_name])
+  }, [page, pageSize, rejectedFilter, user_name])
 
   useEffect(() => {
     load()
@@ -198,7 +216,32 @@ export default function PersonalTaskTable() {
     <Stack className={classes.dashboardSection}>
       <SettingListHeader
         title="我的任务"
-        count={`共 ${totalItems} 条记录`}
+        count={
+          <Group gap="sm" align="center" wrap="wrap">
+            <Text span inherit>
+              共 {totalItems} 条记录
+            </Text>
+            <Group gap={6} align="center" wrap="wrap">
+              <Text span inherit>
+                是否返工
+              </Text>
+              <Select
+                data={REJECTED_FILTER_OPTIONS}
+                value={rejectedFilter}
+                onChange={(value) => {
+                  if (!value) return
+                  setRejectedFilter(value as RejectedFilterValue)
+                  setPage(1)
+                }}
+                allowDeselect={false}
+                checkIconPosition="right"
+                size="xs"
+                w={112}
+                className={classes.dashboardHeaderSelect}
+              />
+            </Group>
+          </Group>
+        }
         actions={
           <SettingHeaderActions>
             <Button

app/person/dashboard/page.module.css

@@ -129,6 +129,25 @@
   flex-direction: column;
 }
 
+.dashboardHeaderSelect :global(.mantine-Input-input) {
+  min-height: 28px;
+  border-color: #e5e6eb;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #1d2129;
+  font-size: 12px;
+  box-shadow: none;
+}
+
+.dashboardHeaderSelect :global(.mantine-Input-input:focus) {
+  border-color: #1874ff;
+  box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
+}
+
+.dashboardHeaderSelect :global(.mantine-Input-section) {
+  color: #86909c;
+}
+
 .dashboardFilterBar {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;

components/label/api/task/index.ts

@@ -68,6 +68,7 @@ export const getTaskWorkFlow = (id: number) => {
 export const getUserTaskList = (params: {
   page_size: number
   page_number: number
+  rejected?: boolean
 }) => {
   return httpFetch<Task.ResGetUserTaskList>({
     url: BASE_LABEL_API + `/api/v1/label_server/task/list_by_user`,

components/setting/PageSurface.tsx

@@ -459,6 +459,8 @@ export function SettingListHeader({
   actions,
   className,
 }: SettingListHeaderProps) {
+  const isPlainCount = typeof count === "string" || typeof count === "number"
+
   return (
     <Group
       justify="space-between"
@@ -469,7 +471,11 @@ export function SettingListHeader({
       <Group gap="xs">
         <Text className={classes.listHeaderTitle}>{title}</Text>
         {count !== undefined ? (
+          isPlainCount ? (
             <Text className={classes.listHeaderCount}>{count}</Text>
+          ) : (
+            <div className={classes.listHeaderCount}>{count}</div>
+          )
         ) : null}
       </Group>
       {actions}