fix(table): add daterange

app/layout.tsx

@@ -2,6 +2,7 @@
 
 import "@mantine/core/styles.css"
 import "@mantine/core/styles.layer.css"
+import "@mantine/dates/styles.css"
 import "@mantine/notifications/styles.css"
 import "mantine-datatable/styles.css"
 import Script from "next/script"

app/person/dashboard/components/PersonalProjectTable.tsx

@@ -2,10 +2,12 @@
 
 import { getPersonProjectDashBoard } from "@/components/label/api/project"
 import { Project } from "@/components/label/api/project/typing"
-import { Button, Group, Text } from "@mantine/core"
+import { Button, Flex, Group, Text } from "@mantine/core"
+import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
 
 import { IconRefresh } from "@tabler/icons-react"
 import dayjs from "dayjs"
+import "dayjs/locale/zh-cn"
 import duration from "dayjs/plugin/duration"
 import { DataTable, DataTableColumn } from "mantine-datatable"
 import { useRouter } from "next/navigation"
@@ -24,6 +26,19 @@ function formatDurationSeconds(seconds?: number | null) {
   return "-"
 }
 
+interface FilterFormRecord {
+  query_date: DatesRangeValue
+}
+
+function createInitialFilters(): FilterFormRecord {
+  return {
+    query_date: [
+      dayjs().subtract(1, "month").format("YYYY-MM-DD"),
+      dayjs().format("YYYY-MM-DD"),
+    ],
+  }
+}
+
 export default function PersonalProjectTable() {
   const router = useRouter()
   const [records, setRecords] = useState<
@@ -35,6 +50,10 @@ export default function PersonalProjectTable() {
   const [pageSize, setPageSize] = useState(50)
   const [totalItems, setTotalItems] = useState(0)
 
+  const [filters, setFilters] = useState(() => createInitialFilters())
+  const [queryTrigger, setQueryTrigger] = useState(0)
+  const [form, setForm] = useState<FilterFormRecord>(createInitialFilters())
+
   const totalPages = useMemo(() => {
     const totalItems = records.length
     return Math.max(1, Math.ceil(totalItems / pageSize))
@@ -45,22 +64,48 @@ export default function PersonalProjectTable() {
     return records.slice(start, start + pageSize)
   }, [page, pageSize, records])
 
+  const appliedParams = useMemo(() => {
+    const obj: Project.ReqPersonProjectDashBoard = {
+      start_date: dayjs().format("YYYY-MM-DD"),
+      end_date: dayjs().format("YYYY-MM-DD"),
+    }
+    if (form.query_date[0] && form.query_date[1]) {
+      obj.start_date = dayjs(form.query_date[0]).format("YYYY-MM-DD")
+      obj.end_date = dayjs(form.query_date[1]).format("YYYY-MM-DD")
+    }
+
+    return obj
+  }, [form.query_date])
+
   const load = useCallback(async () => {
+    if (!queryTrigger) return
     setLoading(true)
     try {
-      const res = await getPersonProjectDashBoard()
+      const res = await getPersonProjectDashBoard(appliedParams)
       setRecords(res ?? [])
       setTotalItems(res?.length ?? 0)
       setPage(1)
     } finally {
       setLoading(false)
     }
-  }, [])
+  }, [appliedParams, queryTrigger])
 
   useEffect(() => {
     load()
   }, [load])
 
+  useEffect(() => {
+    queueMicrotask(() => {
+      setQueryTrigger((v) => v + 1)
+    })
+  }, [])
+
+  const handleSearch = () => {
+    setPage(1)
+    setForm({ ...filters })
+    setQueryTrigger((v) => v + 1)
+  }
+
   useEffect(() => {
     if (page > totalPages) setPage(totalPages)
   }, [page, totalPages])
@@ -165,15 +210,34 @@ export default function PersonalProjectTable() {
       align="stretch"
       style={{ flexDirection: "column" }}>
       <Group justify="space-between" align="center">
-        <Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
+        <Flex align={"center"} gap={8}>
+          <Text fw={700} fz="lg">
             参与项目
           </Text>
+          <DatePickerInput
+            type="range"
+            label=""
+            placeholder="请选择时间范围，默认一周"
+            miw={208}
+            valueFormat="YYYY-MM-DD"
+            locale="zh-cn"
+            clearable
+            value={filters.query_date}
+            onChange={(value: DatesRangeValue) =>
+              setFilters((s) => ({
+                ...s,
+                query_date: value,
+              }))
+            }
+          />
+        </Flex>
+
         <Button
           size={"xs"}
           fz={"sm"}
           fw={500}
           radius="sm"
-          onClick={load}
+          onClick={handleSearch}
           loading={loading}
           leftSection={<IconRefresh size={16} />}>
           更新

components/label/api/project/index.ts

@@ -1,6 +1,6 @@
 import httpFetch from "@/api/fetch"
-import { Project, ProjectDetail, ReviewUsers } from "./typing"
 import { BASE_LABEL_API } from "../const"
+import { Project, ProjectDetail, ReviewUsers } from "./typing"
 
 // 获取项目列表
 export const getProjectList = (data: Project.ListRequest) => {
@@ -138,11 +138,14 @@ export const regenerateProjectEmbedding = (data: { project_id: number }) => {
 }
 
 // 获取个人参与项目
-export const getPersonProjectDashBoard = () => {
+export const getPersonProjectDashBoard = (
+  params: Project.ReqPersonProjectDashBoard
+) => {
   return httpFetch<Array<Project.PersonProjectDashboardResponseItem>>({
     url:
       BASE_LABEL_API + `/api/v1/label_server/data_statistics/personal_project`,
     method: "GET",
+    data: params,
   })
 }
 

components/label/api/project/typing.ts

@@ -296,6 +296,11 @@ export namespace Project {
       task: number
     }
   }
+  export interface ReqPersonProjectDashBoard {
+    start_date: string
+    end_date: string
+  }
+
   /**
    * DetailResponse
    */

package.json

@@ -26,6 +26,7 @@
     "@ffmpeg/util": "^0.12.2",
     "@fingerprintjs/fingerprintjs": "^5.0.1",
     "@mantine/core": "^8.3.1",
+    "@mantine/dates": "^8.3.18",
     "@mantine/form": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
     "@mantine/modals": "^8.3.10",