wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor quick replies page to use DashboardCrudPage component

Browse Source 
- Removed redundant state management and effects from DashboardQuickRepliesPage.
- Integrated DashboardCrudPage for handling CRUD operations and filtering.
- Created a new DashboardCrudPage component to encapsulate common CRUD logic.
- Added utility functions for building and normalizing dashboard CRUD queries.
- Implemented tests for the new utility functions to ensure correctness.
This commit is contained in:
mlogclub
2026-05-28 08:39:14 +08:00
parent dd1b0d1b81
commit fe480ff131
7 changed files with 1054 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/quick-replies/page.tsx
+152 -341
View File
@@ -1,42 +1,11 @@
"use client"
import { useCallback, useEffect, useState } from "react"
import {
FileTextIcon,
MoreHorizontalIcon,
PlusIcon,
RefreshCwIcon,
SearchIcon,
Trash2Icon,
} from "lucide-react"
import { FileTextIcon, RefreshCwIcon } from "lucide-react"
import { toast } from "sonner"
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page"
import { ListPagination } from "@/components/list-pagination"
import { OptionCombobox } from "@/components/option-combobox"
import { DashboardCrudPage } from "@/components/dashboard/crud"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
import {
createQuickReply,
deleteQuickReply,
@@ -44,7 +13,6 @@ import {
updateQuickReply,
type AdminQuickReply,
type CreateAdminQuickReplyPayload,
type PageResult,
} from "@/lib/api/admin"
import { getEnumOptions } from "@/lib/enums"
import { Status, StatusLabels } from "@/lib/generated/enums"
@@ -63,42 +31,6 @@ function getStatusLabel(status: Status, t: (key: string) => string) {
export default function DashboardQuickRepliesPage() {
const t = useI18n()
const [keywordInput, setKeywordInput] = useState("")
const [groupNameInput, setGroupNameInput] = useState("")
const [statusFilterInput, setStatusFilterInput] = useState("all")
const [keyword, setKeyword] = useState("")
const [groupName, setGroupName] = useState("")
const [statusFilter, setStatusFilter] = useState("all")
const [page, setPage] = useState(1)
const [limit, setLimit] = useState(20)
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
const [dialogOpen, setDialogOpen] = useState(false)
const [editingItem, setEditingItem] = useState<AdminQuickReply | null>(null)
const [result, setResult] = useState<PageResult<AdminQuickReply>>({
results: [],
page: { page: 1, limit: 20, total: 0 },
})
const loadData = useCallback(async () => {
setLoading(true)
try {
const data = await fetchQuickReplies({
title: keyword.trim() || undefined,
groupName: groupName.trim() || undefined,
status: statusFilter === "all" ? undefined : statusFilter,
page,
limit,
})
setResult(data)
} catch (error) {
toast.error(error instanceof Error ? error.message : t("quickReply.loadFailed"))
} finally {
setLoading(false)
}
}, [groupName, keyword, limit, page, statusFilter, t])
const listStatusOptions = [
{ value: "all", label: t("status.all") },
...getEnumOptions(StatusLabels)
@@ -109,277 +41,156 @@ export default function DashboardQuickRepliesPage() {
})),
]
useEffect(() => {
void loadData()
}, [loadData])
function applyFilters() {
setKeyword(keywordInput)
setGroupName(groupNameInput)
setStatusFilter(statusFilterInput)
setPage(1)
}
function handleFilterKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
if (event.key !== "Enter") {
return
}
event.preventDefault()
applyFilters()
}
function handlePageChange(nextPage: number) {
if (nextPage < 1 || nextPage === page) {
return
}
setPage(nextPage)
}
function openCreateDialog() {
setEditingItem(null)
setDialogOpen(true)
}
function openEditDialog(item: AdminQuickReply) {
setEditingItem(item)
setDialogOpen(true)
}
function handleDialogOpenChange(open: boolean) {
if (saving) {
return
}
if (!open) {
setEditingItem(null)
}
setDialogOpen(open)
}
async function handleSubmit(payload: CreateAdminQuickReplyPayload) {
if (saving) {
return
}
setSaving(true)
try {
if (editingItem) {
await updateQuickReply({
id: editingItem.id,
...payload,
})
toast.success(t("quickReply.updated", { title: editingItem.title }))
} else {
await createQuickReply(payload)
toast.success(t("quickReply.created", { title: payload.title }))
}
setDialogOpen(false)
setEditingItem(null)
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : t("quickReply.saveFailed"))
} finally {
setSaving(false)
}
}
async function handleToggleStatus(item: AdminQuickReply) {
setActionLoadingId(item.id)
try {
const nextStatus =
item.status === Status.Ok ? Status.Disabled : Status.Ok
await updateQuickReply({
id: item.id,
groupName: item.groupName,
title: item.title,
content: item.content,
sortNo: item.sortNo,
status: nextStatus,
})
toast.success(
t(nextStatus === Status.Ok ? "quickReply.enabled" : "quickReply.disabled", { title: item.title })
)
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : t("quickReply.statusUpdateFailed"))
} finally {
setActionLoadingId(null)
}
}
async function handleDelete(item: AdminQuickReply) {
setActionLoadingId(item.id)
try {
await deleteQuickReply(item.id)
toast.success(t("quickReply.deleted", { title: item.title }))
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : t("quickReply.deleteFailed"))
} finally {
setActionLoadingId(null)
}
}
return (
<>
<DashboardPage>
<DashboardToolbar
actions={
<>
<Button variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCwIcon className={loading ? "animate-spin" : undefined} />
{t("quickReply.refresh")}
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
{t("quickReply.new")}
</Button>
</>
}
<DashboardCrudPage<AdminQuickReply, CreateAdminQuickReplyPayload>
filters={[
{
name: "title",
label: t("quickReply.filterTitle"),
placeholder: t("quickReply.filterTitle"),
defaultValue: "",
trim: true,
className: "w-full sm:w-72",
},
{
name: "groupName",
label: t("quickReply.filterGroup"),
placeholder: t("quickReply.filterGroup"),
defaultValue: "",
trim: true,
className: "w-full sm:w-44",
},
{
name: "status",
label: t("status.all"),
type: "select",
defaultValue: "all",
allValue: "all",
options: listStatusOptions,
className: "w-full sm:w-36",
},
]}
columns={[
{
key: "quickReply",
label: t("quickReply.columnQuickReply"),
render: (item) => (
<div className="flex items-start gap-3">
<div className="mt-0.5 flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
<FileTextIcon className="size-4" />
</div>
<div className="min-w-0">
<div className="font-medium">{item.title}</div>
<div className="mt-1 line-clamp-2 text-sm text-muted-foreground">
{item.content}
</div>
</div>
</div>
),
},
{
key: "groupName",
label: t("quickReply.columnGroup"),
render: (item) => <Badge variant="outline">{item.groupName}</Badge>,
},
{
key: "status",
label: t("quickReply.columnStatus"),
render: (item) => (
<Badge variant={item.status === Status.Ok ? "default" : "outline"}>
{getStatusLabel(item.status as Status, t)}
</Badge>
),
},
{
key: "sortNo",
label: t("quickReply.columnSort"),
render: (item) => item.sortNo,
},
{
key: "createdBy",
label: t("quickReply.columnCreator"),
render: (item) => item.createdBy || "-",
},
]}
fetchList={fetchQuickReplies}
getItemId={(item) => item.id}
createItem={createQuickReply}
updateItem={(item, payload) => updateQuickReply({ id: item.id, ...payload })}
deleteItem={(item) => deleteQuickReply(item.id)}
renderRowActions={({ item, actionLoading, reload, setActionLoadingId }) => (
<DropdownMenuItem
onClick={() => {
void (async () => {
setActionLoadingId(item.id)
try {
const nextStatus =
item.status === Status.Ok ? Status.Disabled : Status.Ok
await updateQuickReply({
id: item.id,
groupName: item.groupName,
title: item.title,
content: item.content,
sortNo: item.sortNo,
status: nextStatus,
})
toast.success(
t(
nextStatus === Status.Ok
? "quickReply.enabled"
: "quickReply.disabled",
{ title: item.title }
)
)
await reload()
} catch (error) {
toast.error(
error instanceof Error
? error.message
: t("quickReply.statusUpdateFailed")
)
} finally {
setActionLoadingId(null)
}
})()
}}
>
<div className="relative w-full sm:w-72">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input
value={keywordInput}
onChange={(event) => setKeywordInput(event.target.value)}
onKeyDown={handleFilterKeyDown}
placeholder={t("quickReply.filterTitle")}
className="pl-9"
/>
</div>
<Input
value={groupNameInput}
onChange={(event) => setGroupNameInput(event.target.value)}
onKeyDown={handleFilterKeyDown}
placeholder={t("quickReply.filterGroup")}
className="w-full sm:w-44"
/>
<div className="w-full sm:w-36">
<OptionCombobox
value={statusFilterInput}
onChange={setStatusFilterInput}
placeholder={t("status.all")}
options={[...listStatusOptions]}
/>
</div>
<Button variant="outline" onClick={applyFilters} disabled={loading}>
<SearchIcon />
{t("quickReply.query")}
</Button>
</DashboardToolbar>
<DashboardTableShell
pagination={
<ListPagination
page={result.page.page}
total={result.page.total}
limit={limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit)
setPage(1)
}}
/>
}
>
<Table>
<TableHeader className="bg-muted/40">
<TableRow>
<TableHead>{t("quickReply.columnQuickReply")}</TableHead>
<TableHead>{t("quickReply.columnGroup")}</TableHead>
<TableHead>{t("quickReply.columnStatus")}</TableHead>
<TableHead>{t("quickReply.columnSort")}</TableHead>
<TableHead>{t("quickReply.columnCreator")}</TableHead>
<TableHead className="w-[92px] text-right">{t("quickReply.columnActions")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{result.results.map((item) => (
<TableRow key={item.id}>
<TableCell>
<div className="flex items-start gap-3">
<div className="mt-0.5 flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
<FileTextIcon className="size-4" />
</div>
<div className="min-w-0">
<div className="font-medium">{item.title}</div>
<div className="mt-1 line-clamp-2 text-sm text-muted-foreground">
{item.content}
</div>
</div>
</div>
</TableCell>
<TableCell>
<Badge variant="outline">{item.groupName}</Badge>
</TableCell>
<TableCell>
<Badge
variant={
item.status === Status.Ok ? "default" : "outline"
}
>
{getStatusLabel(item.status as Status, t)}
</Badge>
</TableCell>
<TableCell>{item.sortNo}</TableCell>
<TableCell>{item.createdBy || "-"}</TableCell>
<TableCell className="text-right">
<ButtonGroup className="ml-auto">
<Button
variant="outline"
size="sm"
onClick={() => openEditDialog(item)}
>
{t("quickReply.edit")}
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" size="icon-sm" />}
aria-label={t("quickReply.moreActions", { title: item.title })}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40 min-w-40">
<DropdownMenuItem onClick={() => void handleToggleStatus(item)}>
<RefreshCwIcon />
{actionLoadingId === item.id
? t("quickReply.processing")
: item.status === Status.Ok
? t("quickReply.disable")
: t("quickReply.enable")}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => void handleDelete(item)}
className="text-destructive focus:text-destructive"
>
<Trash2Icon />
{actionLoadingId === item.id ? t("quickReply.deleting") : t("quickReply.delete")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</ButtonGroup>
</TableCell>
</TableRow>
))}
{loading || result.results.length === 0 ? (
<DashboardTableStateRow
colSpan={6}
loading={loading}
loadingText={t("quickReply.loading")}
emptyText={t("quickReply.empty")}
/>
) : null}
</TableBody>
</Table>
</DashboardTableShell>
</DashboardPage>
<EditDialog
open={dialogOpen}
saving={saving}
itemId={editingItem?.id ?? null}
onOpenChange={handleDialogOpenChange}
onSubmit={handleSubmit}
/>
</>
<RefreshCwIcon />
{actionLoading
? t("quickReply.processing")
: item.status === Status.Ok
? t("quickReply.disable")
: t("quickReply.enable")}
</DropdownMenuItem>
)}
renderEditDialog={({ open, saving, itemId, onOpenChange, onSubmit }) => (
<EditDialog
open={open}
saving={saving}
itemId={itemId}
onOpenChange={onOpenChange}
onSubmit={onSubmit}
/>
)}
labels={{
refresh: t("quickReply.refresh"),
create: t("quickReply.new"),
query: t("quickReply.query"),
loading: t("quickReply.loading"),
empty: t("quickReply.empty"),
actions: t("quickReply.columnActions"),
edit: t("quickReply.edit"),
delete: t("quickReply.delete"),
processing: t("quickReply.processing"),
moreActions: (item) =>
t("quickReply.moreActions", { title: item.title }),
loadFailed: t("quickReply.loadFailed"),
saveFailed: t("quickReply.saveFailed"),
deleteFailed: t("quickReply.deleteFailed"),
created: (payload) => t("quickReply.created", { title: payload.title }),
updated: (item) => t("quickReply.updated", { title: item.title }),
deleted: (item) => t("quickReply.deleted", { title: item.title }),
}}
/>
)
}