feat(page): size

app/person/dashboard/components/PersonalProjectTable.tsx

@@ -5,10 +5,11 @@ import { Project } from "@/components/label/api/project/typing"
 import {
   SettingDataTable,
   SettingListHeader,
+  SettingCustomPageSizeControl,
+  usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
-import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core"
+import { Button, Group, Stack, Text } from "@mantine/core"
 import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
-import { notifications } from "@mantine/notifications"
 
 import { IconRefresh, IconSearch } from "@tabler/icons-react"
 import dayjs from "dayjs"
@@ -66,12 +67,12 @@ export default function PersonalProjectTable() {
 
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
-  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
-    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
-  )
-  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
-  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
-    useState(false)
+  const {
+    recordsPerPageOptions,
+    addCustomPageSize,
+    clearCustomPageSizeCache,
+    hasCustomPageSizeCache,
+  } = usePersistentPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS, pageSize)
   const [totalItems, setTotalItems] = useState(0)
 
   const [filters, setFilters] = useState(() => createInitialFilters())
@@ -138,53 +139,6 @@ export default function PersonalProjectTable() {
     if (page > totalPages) setPage(totalPages)
   }, [page, totalPages])
 
-  const openCustomPageSizeModal = useCallback(() => {
-    setCustomPageSizeModalOpened(true)
-  }, [])
-
-  const closeCustomPageSizeModal = useCallback(() => {
-    setCustomPageSizeModalOpened(false)
-    setCustomPageSizeInput("")
-  }, [])
-
-  const handleAddCustomPageSize = useCallback(() => {
-    const rawValue = customPageSizeInput.trim()
-    if (!rawValue) return
-    const size = Number(rawValue)
-    if (!Number.isInteger(size) || size <= 0) {
-      notifications.show({
-        color: "red",
-        title: "输入无效",
-        message: "请填写大于 0 的整数条数",
-      })
-      return
-    }
-    if (recordsPerPageOptions.includes(size)) {
-      notifications.show({
-        color: "blue",
-        title: "已存在",
-        message: `每页 ${size} 条已在可选项中`,
-      })
-      return
-    }
-    setRecordsPerPageOptions((prev) => [...prev, size].sort((a, b) => a - b))
-    closeCustomPageSizeModal()
-    notifications.show({
-      color: "green",
-      title: "添加成功",
-      message: `已新增每页 ${size} 条`,
-    })
-  }, [closeCustomPageSizeModal, customPageSizeInput, recordsPerPageOptions])
-
-  const handleCustomPageSizeEnter = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.key !== "Enter") return
-      event.preventDefault()
-      handleAddCustomPageSize()
-    },
-    [handleAddCustomPageSize]
-  )
-
   const originColumn = useMemo(() => {
     let column: DataTableColumn<Project.PersonProjectDashboardResponseItem>[] =
       [
@@ -329,44 +283,19 @@ export default function PersonalProjectTable() {
               <Group gap="xs" align="center" wrap="wrap">
                 <Controls.Text />
                 <Controls.PageSizeSelector />
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={openCustomPageSizeModal}>
-                  自定义每页条数
-                </Button>
+                <SettingCustomPageSizeControl
+                  addCustomPageSize={addCustomPageSize}
+                  clearCustomPageSizeCache={clearCustomPageSizeCache}
+                  hasCustomPageSizeCache={hasCustomPageSizeCache}
+                  triggerButtonProps={{ variant: "default", size: "sm" }}
+                  confirmButtonProps={{ color: "#1874ff" }}
+                />
               </Group>
               <Controls.Pagination />
             </Group>
           )}
         />
       </div>
-      <Modal
-        opened={customPageSizeModalOpened}
-        onClose={closeCustomPageSizeModal}
-        title="添加每页条数"
-        centered>
-        <Stack gap="sm">
-          <TextInput
-            data-autofocus
-            label="每页条数"
-            placeholder="请输入大于 0 的整数，例如 99"
-            value={customPageSizeInput}
-            onChange={(event) =>
-              setCustomPageSizeInput(event.currentTarget.value)
-            }
-            onKeyDown={handleCustomPageSizeEnter}
-          />
-          <Group justify="flex-end">
-            <Button variant="default" onClick={closeCustomPageSizeModal}>
-              取消
-            </Button>
-            <Button color="#1874ff" onClick={handleAddCustomPageSize}>
-              添加
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
     </Stack>
   )
 }

app/person/dashboard/components/PersonalTaskTable.tsx

@@ -11,17 +11,10 @@ import {
   SettingDataTable,
   SettingHeaderActions,
   SettingListHeader,
+  SettingCustomPageSizeControl,
+  usePersistentPageSizeOptions,
 } from "@/components/setting/PageSurface"
-import {
-  Button,
-  Group,
-  Modal,
-  Stack,
-  Text,
-  TextInput,
-  UnstyledButton,
-} from "@mantine/core"
-import { notifications } from "@mantine/notifications"
+import { Button, Group, Stack, Text, UnstyledButton } from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
 import { DataTableColumn } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
@@ -35,12 +28,12 @@ export default function PersonalTaskTable() {
 
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
-  const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
-    () => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
-  )
-  const [customPageSizeInput, setCustomPageSizeInput] = useState("")
-  const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
-    useState(false)
+  const {
+    recordsPerPageOptions,
+    addCustomPageSize,
+    clearCustomPageSizeCache,
+    hasCustomPageSizeCache,
+  } = usePersistentPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS, pageSize)
   const [totalItems, setTotalItems] = useState(0)
   const [records, setRecords] = useState<Task.SimpleTaskItem[]>([])
   const [loading, setLoading] = useState(false)
@@ -79,53 +72,6 @@ export default function PersonalTaskTable() {
 
   const [currentRowId, setCurrentRowId] = useState<number>(0)
 
-  const openCustomPageSizeModal = useCallback(() => {
-    setCustomPageSizeModalOpened(true)
-  }, [])
-
-  const closeCustomPageSizeModal = useCallback(() => {
-    setCustomPageSizeModalOpened(false)
-    setCustomPageSizeInput("")
-  }, [])
-
-  const handleAddCustomPageSize = useCallback(() => {
-    const rawValue = customPageSizeInput.trim()
-    if (!rawValue) return
-    const size = Number(rawValue)
-    if (!Number.isInteger(size) || size <= 0) {
-      notifications.show({
-        color: "red",
-        title: "输入无效",
-        message: "请填写大于 0 的整数条数",
-      })
-      return
-    }
-    if (recordsPerPageOptions.includes(size)) {
-      notifications.show({
-        color: "blue",
-        title: "已存在",
-        message: `每页 ${size} 条已在可选项中`,
-      })
-      return
-    }
-    setRecordsPerPageOptions((prev) => [...prev, size].sort((a, b) => a - b))
-    closeCustomPageSizeModal()
-    notifications.show({
-      color: "green",
-      title: "添加成功",
-      message: `已新增每页 ${size} 条`,
-    })
-  }, [closeCustomPageSizeModal, customPageSizeInput, recordsPerPageOptions])
-
-  const handleCustomPageSizeEnter = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.key !== "Enter") return
-      event.preventDefault()
-      handleAddCustomPageSize()
-    },
-    [handleAddCustomPageSize]
-  )
-
   const originColumn = useMemo(() => {
     let column: DataTableColumn<Task.SimpleTaskItem>[] = [
       {
@@ -287,44 +233,19 @@ export default function PersonalTaskTable() {
               <Group gap="xs" align="center" wrap="wrap">
                 <Controls.Text />
                 <Controls.PageSizeSelector />
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={openCustomPageSizeModal}>
-                  自定义每页条数
-                </Button>
+                <SettingCustomPageSizeControl
+                  addCustomPageSize={addCustomPageSize}
+                  clearCustomPageSizeCache={clearCustomPageSizeCache}
+                  hasCustomPageSizeCache={hasCustomPageSizeCache}
+                  triggerButtonProps={{ variant: "default", size: "sm" }}
+                  confirmButtonProps={{ color: "#1874ff" }}
+                />
               </Group>
               <Controls.Pagination />
             </Group>
           )}
         />
       </div>
-      <Modal
-        opened={customPageSizeModalOpened}
-        onClose={closeCustomPageSizeModal}
-        title="添加每页条数"
-        centered>
-        <Stack gap="sm">
-          <TextInput
-            data-autofocus
-            label="每页条数"
-            placeholder="请输入大于 0 的整数，例如 99"
-            value={customPageSizeInput}
-            onChange={(event) =>
-              setCustomPageSizeInput(event.currentTarget.value)
-            }
-            onKeyDown={handleCustomPageSizeEnter}
-          />
-          <Group justify="flex-end">
-            <Button variant="default" onClick={closeCustomPageSizeModal}>
-              取消
-            </Button>
-            <Button color="#1874ff" onClick={handleAddCustomPageSize}>
-              添加
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
     </Stack>
   )
 }