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 }}>
-          参与项目
-        </Text>
+        <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} />}>
           更新