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

feat: implement dashboard CRUD status column and toggle actions; refactor related components for improved functionality

Browse Source
This commit is contained in:
mlogclub
2026-05-28 09:08:38 +08:00
parent e8d7565caf
commit b944c3221f
10 changed files with 730 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/channels/page.tsx
+25 -45
View File
@@ -5,11 +5,12 @@ import {
MessagesSquareIcon,
MessageSquareMoreIcon,
} from "lucide-react"
import { toast } from "sonner"
import { DashboardCrudPage } from "@/components/dashboard/crud"
import {
createDashboardStatusColumn,
DashboardCrudPage,
} from "@/components/dashboard/crud"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import {
createChannel,
deleteChannel,
@@ -147,49 +148,28 @@ export default function DashboardChannelsPage() {
label: t("channel.columnAgent"),
render: (item) => item.aiAgentName || "-",
},
{
key: "status",
createDashboardStatusColumn<AdminChannel, Status>({
label: t("channel.columnStatus"),
render: (item, { actionLoading, reload, setActionLoadingId }) => (
<div className="flex items-center gap-3">
<Switch
checked={item.status === Status.Ok}
disabled={actionLoading}
onCheckedChange={() => {
void (async () => {
setActionLoadingId(item.id)
try {
const nextStatus =
item.status === Status.Ok ? Status.Disabled : Status.Ok
await updateChannelStatus(item.id, nextStatus)
toast.success(
t(
nextStatus === Status.Ok
? "channel.statusEnabled"
: "channel.statusDisabled",
{ name: item.name }
)
)
await reload()
} catch (error) {
toast.error(
error instanceof Error
? error.message
: t("channel.statusUpdateFailed")
)
} finally {
setActionLoadingId(null)
}
})()
}}
aria-label={t("channel.toggleStatus", { name: item.name })}
/>
<Badge variant={item.status === Status.Ok ? "default" : "outline"}>
{getStatusLabel(item.status as Status, t)}
</Badge>
</div>
),
},
getStatus: (item) => item.status as Status,
getLabel: (status) => getStatusLabel(status, t),
getBadgeVariant: (status) => (status === Status.Ok ? "default" : "outline"),
isEnabled: (status) => status === Status.Ok,
toggle: {
getNextStatus: (item) =>
item.status === Status.Ok ? Status.Disabled : Status.Ok,
updateStatus: (item, nextStatus) =>
updateChannelStatus(item.id, nextStatus),
successMessage: (item, nextStatus) =>
t(
nextStatus === Status.Ok
? "channel.statusEnabled"
: "channel.statusDisabled",
{ name: item.name }
),
errorMessage: t("channel.statusUpdateFailed"),
ariaLabel: (item) => t("channel.toggleStatus", { name: item.name }),
},
}),
]}
fetchList={fetchChannels}
getItemId={(item) => item.id}
web/app/dashboard/companies/page.tsx
+33 -64
View File
@@ -1,11 +1,12 @@
"use client"
import { BanIcon, CheckCircle2Icon } from "lucide-react"
import { toast } from "sonner"
import { DashboardCrudPage } from "@/components/dashboard/crud"
import { Badge } from "@/components/ui/badge"
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
import {
createDashboardStatusColumn,
createDashboardStatusToggleAction,
DashboardCrudPage,
} from "@/components/dashboard/crud"
import {
createCompany,
deleteCompany,
@@ -96,26 +97,19 @@ export default function DashboardCompaniesPage() {
className: "w-28",
render: (item) => item.customerCount,
},
{
key: "status",
createDashboardStatusColumn<AdminCompany, Status>({
label: t("company.columnStatus"),
className: "w-24",
render: (item) => (
<Badge
variant={
item.status === Status.Ok
? "default"
: item.status === Status.Deleted
? "outline"
: "secondary"
}
>
{StatusLabels[item.status as Status]
? getStatusLabel(item.status as Status, t)
: t("company.unknownStatus")}
</Badge>
),
},
getStatus: (item) => item.status as Status,
getLabel: (status) =>
StatusLabels[status] ? getStatusLabel(status, t) : t("company.unknownStatus"),
getBadgeVariant: (status) =>
status === Status.Ok
? "default"
: status === Status.Deleted
? "outline"
: "secondary",
}),
{
key: "remark",
label: t("company.columnRemark"),
@@ -177,48 +171,23 @@ export default function DashboardCompaniesPage() {
maxValue: () => t("company.nameRequired"),
},
}}
renderRowActions={({ item, actionLoading, reload, setActionLoadingId }) => (
<DropdownMenuItem
disabled={item.status === Status.Deleted}
onClick={() => {
void (async () => {
setActionLoadingId(item.id)
try {
const nextStatus = item.status === Status.Ok ? Status.Disabled : Status.Ok
await updateCompanyStatus(item.id, nextStatus)
toast.success(
t(nextStatus === Status.Ok ? "company.enabled" : "company.disabled", {
name: item.name,
})
)
await reload()
} catch (error) {
toast.error(
error instanceof Error
? error.message
: t("company.statusUpdateFailed")
)
} finally {
setActionLoadingId(null)
}
})()
}}
>
{actionLoading ? (
t("company.processing")
) : item.status === Status.Ok ? (
<>
<BanIcon />
{t("company.disable")}
</>
) : (
<>
<CheckCircle2Icon />
{t("company.enable")}
</>
)}
</DropdownMenuItem>
)}
rowActions={[
createDashboardStatusToggleAction<AdminCompany, Status>({
disabled: (item) => item.status === Status.Deleted,
icon: (item) =>
item.status === Status.Ok ? <BanIcon /> : <CheckCircle2Icon />,
label: (item) =>
item.status === Status.Ok ? t("company.disable") : t("company.enable"),
getNextStatus: (item) =>
item.status === Status.Ok ? Status.Disabled : Status.Ok,
updateStatus: (item, nextStatus) => updateCompanyStatus(item.id, nextStatus),
successMessage: (item, nextStatus) =>
t(nextStatus === Status.Ok ? "company.enabled" : "company.disabled", {
name: item.name,
}),
errorMessage: t("company.statusUpdateFailed"),
}),
]}
labels={{
refresh: t("company.refresh"),
create: t("company.new"),
web/app/dashboard/quick-replies/page.tsx
+37 -55
View File
@@ -1,11 +1,13 @@
"use client"
import { FileTextIcon, RefreshCwIcon } from "lucide-react"
import { toast } from "sonner"
import { DashboardCrudPage } from "@/components/dashboard/crud"
import {
createDashboardStatusColumn,
createDashboardStatusToggleAction,
DashboardCrudPage,
} from "@/components/dashboard/crud"
import { Badge } from "@/components/ui/badge"
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
import {
createQuickReply,
deleteQuickReply,
@@ -93,15 +95,12 @@ export default function DashboardQuickRepliesPage() {
label: t("quickReply.columnGroup"),
render: (item) => <Badge variant="outline">{item.groupName}</Badge>,
},
{
key: "status",
createDashboardStatusColumn<AdminQuickReply, Status>({
label: t("quickReply.columnStatus"),
render: (item) => (
<Badge variant={item.status === Status.Ok ? "default" : "outline"}>
{getStatusLabel(item.status as Status, t)}
</Badge>
),
},
getStatus: (item) => item.status as Status,
getLabel: (status) => getStatusLabel(status, t),
getBadgeVariant: (status) => (status === Status.Ok ? "default" : "outline"),
}),
{
key: "sortNo",
label: t("quickReply.columnSort"),
@@ -193,51 +192,34 @@ export default function DashboardQuickRepliesPage() {
maxValue: () => t("quickReply.sortInvalid"),
},
}}
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)
}
})()
}}
>
<RefreshCwIcon />
{actionLoading
? t("quickReply.processing")
: item.status === Status.Ok
rowActions={[
createDashboardStatusToggleAction<AdminQuickReply, Status>({
icon: <RefreshCwIcon />,
label: (item) =>
item.status === Status.Ok
? t("quickReply.disable")
: t("quickReply.enable")}
</DropdownMenuItem>
)}
: t("quickReply.enable"),
getNextStatus: (item) =>
item.status === Status.Ok ? Status.Disabled : Status.Ok,
updateStatus: (item, nextStatus) =>
updateQuickReply({
id: item.id,
groupName: item.groupName,
title: item.title,
content: item.content,
sortNo: item.sortNo,
status: nextStatus,
}),
successMessage: (item, nextStatus) =>
t(
nextStatus === Status.Ok
? "quickReply.enabled"
: "quickReply.disabled",
{ title: item.title }
),
errorMessage: t("quickReply.statusUpdateFailed"),
}),
]}
labels={{
refresh: t("quickReply.refresh"),
create: t("quickReply.new"),
web/components/dashboard/crud/dashboard-crud-form-dialog.tsx
+34 -1
View File
@@ -12,6 +12,7 @@ import {
buildDashboardCrudFormValues,
normalizeDashboardCrudSubmitValues,
type DashboardCrudFormField,
type DashboardCrudFormOption,
} from "./dashboard-crud-utils"
import { DashboardCrudFieldControl } from "./dashboard-crud-field-control"
@@ -116,6 +117,9 @@ export function DashboardCrudFormDialog<TItem, TPayload>({
id: number
item: TItem
} | null>(null)
const [fieldOptions, setFieldOptions] = useState<
Record<string, ReadonlyArray<DashboardCrudFormOption>>
>({})
const form = useForm<Record<string, string>, undefined, Record<string, string>>({
resolver,
defaultValues: initialValues,
@@ -157,6 +161,32 @@ export function DashboardCrudFormDialog<TItem, TPayload>({
}
}, [fetchDetail, fields, initialValues, item, itemId, reset])
useEffect(() => {
if (!open) return
let cancelled = false
const loaders = fields
.filter((field) => field.type === "select" && field.loadOptions)
.map(async (field) => {
const options = await field.loadOptions!()
return [field.name, options] as const
})
if (loaders.length === 0) return
void Promise.all(loaders).then((entries) => {
if (cancelled) return
setFieldOptions((current) => ({
...current,
...Object.fromEntries(entries),
}))
})
return () => {
cancelled = true
}
}, [fields, open])
async function submit(values: Record<string, string>) {
const normalizedValues = normalizeDashboardCrudSubmitValues(fields, values)
const payload = transformSubmitValues
@@ -205,7 +235,10 @@ export function DashboardCrudFormDialog<TItem, TPayload>({
{layoutFields.map((field) => (
<DashboardCrudFieldControl
key={field.name}
field={field}
field={{
...field,
options: fieldOptions[field.name] ?? field.options,
}}
control={control}
register={register}
error={errors[field.name]}
web/components/dashboard/crud/dashboard-crud-page.tsx
+330 -103
View File
@@ -1,8 +1,26 @@
"use client"
import type { ReactNode } from "react"
import { useCallback, useEffect, useMemo, useState } from "react"
import { useCallback, useEffect, useState } from "react"
import {
closestCenter,
DndContext,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
type DragEndEvent,
} from "@dnd-kit/core"
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
useSortable,
verticalListSortingStrategy,
} from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import {
GripVerticalIcon,
MoreHorizontalIcon,
PlusIcon,
RefreshCwIcon,
@@ -11,6 +29,7 @@ import {
} from "lucide-react"
import { toast } from "sonner"
import { useConfirm, type ConfirmOptions } from "@/components/confirm-provider"
import {
DashboardPage,
DashboardTableShell,
@@ -38,15 +57,19 @@ import {
} from "@/components/ui/table"
import {
buildDashboardCrudQuery,
isDashboardCrudActionDisabled,
isDashboardCrudActionVisible,
normalizeDashboardCrudPageResult,
type DashboardCrudActionRule,
type DashboardCrudFormField,
type DashboardCrudPageResult,
type DashboardCrudQueryFilter,
type DashboardCrudQueryValue,
} from "./dashboard-crud-utils"
import { DashboardCrudFormDialog } from "./dashboard-crud-form-dialog"
import { useDashboardCrudFilters } from "./use-dashboard-crud-filters"
type DashboardCrudFilter<TValue extends string | number = string> =
export type DashboardCrudFilter<TValue extends string | number = string> =
DashboardCrudQueryFilter & {
label: string
placeholder?: string
@@ -56,14 +79,14 @@ type DashboardCrudFilter<TValue extends string | number = string> =
options?: ReadonlyArray<{ value: string; label: string }>
}
type DashboardCrudColumn<TItem> = {
export type DashboardCrudColumn<TItem> = {
key: string
label: ReactNode
className?: string
render: (item: TItem, context: DashboardCrudRowActionContext<TItem>) => ReactNode
}
type DashboardCrudDialogProps<TItem, TPayload> = {
export type DashboardCrudDialogProps<TItem, TPayload> = {
open: boolean
saving: boolean
item: TItem | null
@@ -72,15 +95,25 @@ type DashboardCrudDialogProps<TItem, TPayload> = {
onSubmit: (payload: TPayload) => Promise<void>
}
type DashboardCrudRowActionContext<TItem> = {
export type DashboardCrudRowActionContext<TItem> = {
item: TItem
itemId: number
actionLoading: boolean
actionLoadingId: number | null
reload: () => Promise<void>
setActionLoadingId: (id: number | null) => void
}
type DashboardCrudPageProps<TItem, TPayload> = {
export type DashboardCrudRowAction<TItem> = DashboardCrudActionRule<TItem> & {
key: string
label: ReactNode | ((item: TItem) => ReactNode)
icon?: ReactNode | ((item: TItem) => ReactNode)
variant?: "default" | "destructive"
confirm?: ConfirmOptions | ((item: TItem) => ConfirmOptions)
run: (context: DashboardCrudRowActionContext<TItem>) => Promise<void> | void
}
export type DashboardCrudPageProps<TItem, TPayload> = {
filters: DashboardCrudFilter[]
columns: DashboardCrudColumn<TItem>[]
fetchList: (
@@ -113,7 +146,17 @@ type DashboardCrudPageProps<TItem, TPayload> = {
updateItem: (item: TItem, payload: TPayload) => Promise<unknown>
deleteItem?: (item: TItem) => Promise<unknown>
canDelete?: (item: TItem) => boolean
deleteConfirm?: ConfirmOptions | ((item: TItem) => ConfirmOptions)
rowActions?: DashboardCrudRowAction<TItem>[]
renderRowActions?: (context: DashboardCrudRowActionContext<TItem>) => ReactNode
sort?: {
enabled?: boolean
disabled?: boolean
onReorder: (items: TItem[]) => Promise<unknown>
successMessage?: string
errorMessage: string
handleLabel: string
}
pageSize?: number
labels: {
refresh: string
@@ -146,19 +189,26 @@ export function DashboardCrudPage<TItem, TPayload>({
updateItem,
deleteItem,
canDelete,
deleteConfirm,
rowActions = [],
renderRowActions,
sort,
pageSize = 20,
labels,
}: DashboardCrudPageProps<TItem, TPayload>) {
const initialFilters = useMemo(
() =>
Object.fromEntries(
filters.map((filter) => [filter.name, filter.defaultValue])
) as Record<string, string | number | undefined>,
[filters]
const confirm = useConfirm()
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 6,
},
}),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
)
const [draftFilters, setDraftFilters] = useState(initialFilters)
const [appliedFilters, setAppliedFilters] = useState(initialFilters)
const { draftFilters, appliedFilters, setDraftFilter, applyFilters } =
useDashboardCrudFilters(filters)
const [page, setPage] = useState(1)
const [limit, setLimit] = useState(pageSize)
const [loading, setLoading] = useState(true)
@@ -171,11 +221,6 @@ export function DashboardCrudPage<TItem, TPayload>({
page: { page: 1, limit: pageSize, total: 0 },
})
useEffect(() => {
setDraftFilters(initialFilters)
setAppliedFilters(initialFilters)
}, [initialFilters])
const loadData = useCallback(async () => {
setLoading(true)
try {
@@ -199,15 +244,15 @@ export function DashboardCrudPage<TItem, TPayload>({
void loadData()
}, [loadData])
function applyFilters() {
setAppliedFilters(draftFilters)
function handleApplyFilters() {
applyFilters()
setPage(1)
}
function handleFilterKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
if (event.key !== "Enter") return
event.preventDefault()
applyFilters()
handleApplyFilters()
}
function openCreateDialog() {
@@ -249,6 +294,12 @@ export function DashboardCrudPage<TItem, TPayload>({
async function handleDelete(item: TItem) {
if (!deleteItem) return
if (deleteConfirm) {
const confirmed = await confirm(
typeof deleteConfirm === "function" ? deleteConfirm(item) : deleteConfirm
)
if (!confirmed) return
}
const id = getItemId(item)
setActionLoadingId(id)
try {
@@ -262,7 +313,185 @@ export function DashboardCrudPage<TItem, TPayload>({
}
}
const colSpan = columns.length + 1
async function runRowAction(
action: DashboardCrudRowAction<TItem>,
item: TItem,
actionLoading: boolean
) {
if (actionLoading || isDashboardCrudActionDisabled(action, item)) return
if (action.confirm) {
const confirmed = await confirm(
typeof action.confirm === "function" ? action.confirm(item) : action.confirm
)
if (!confirmed) return
}
const id = getItemId(item)
setActionLoadingId(id)
try {
await action.run({
item,
itemId: id,
actionLoading: true,
actionLoadingId: id,
reload: loadData,
setActionLoadingId,
})
} finally {
setActionLoadingId(null)
}
}
async function handleSortEnd(event: DragEndEvent) {
if (!sort?.enabled || sort.disabled) return
const { active, over } = event
if (!over || active.id === over.id) return
const oldIndex = result.results.findIndex(
(item) => String(getItemId(item)) === String(active.id)
)
const newIndex = result.results.findIndex(
(item) => String(getItemId(item)) === String(over.id)
)
if (oldIndex < 0 || newIndex < 0) return
const previousResults = result.results
const nextResults = arrayMove(result.results, oldIndex, newIndex)
setResult((current) => ({ ...current, results: nextResults }))
try {
await sort.onReorder(nextResults)
if (sort.successMessage) {
toast.success(sort.successMessage)
}
} catch (error) {
setResult((current) => ({ ...current, results: previousResults }))
toast.error(error instanceof Error ? error.message : sort.errorMessage)
}
}
const sortable = Boolean(sort?.enabled)
const colSpan = columns.length + 1 + (sortable ? 1 : 0)
function renderTableRow(
item: TItem,
options: { sortable?: boolean; sortDisabled?: boolean } = {}
) {
const id = getItemId(item)
const actionLoading = actionLoadingId === id
const rowCells = (
<>
{columns.map((column) => (
<TableCell key={column.key} className={column.className}>
{column.render(item, {
item,
itemId: id,
actionLoading,
actionLoadingId,
reload: loadData,
setActionLoadingId,
})}
</TableCell>
))}
<TableCell className="text-right">
<ButtonGroup className="ml-auto">
<Button variant="outline" size="sm" onClick={() => openEditDialog(item)}>
{labels.edit}
</Button>
{renderRowActions || rowActions.length > 0 || deleteItem ? (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" size="icon-sm" />}
aria-label={labels.moreActions(item)}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40 min-w-40">
{rowActions
.filter((action) => isDashboardCrudActionVisible(action, item))
.map((action) => {
const icon =
typeof action.icon === "function"
? action.icon(item)
: action.icon
const label =
typeof action.label === "function"
? action.label(item)
: action.label
return (
<DropdownMenuItem
key={action.key}
disabled={
actionLoading ||
isDashboardCrudActionDisabled(action, item)
}
className={
action.variant === "destructive"
? "text-destructive focus:text-destructive"
: undefined
}
onClick={() => void runRowAction(action, item, actionLoading)}
>
{icon}
{actionLoading ? labels.processing : label}
</DropdownMenuItem>
)
})}
{renderRowActions?.({
item,
itemId: id,
actionLoading,
actionLoadingId,
reload: loadData,
setActionLoadingId,
})}
{deleteItem ? (
<DropdownMenuItem
onClick={() => void handleDelete(item)}
disabled={canDelete ? !canDelete(item) : false}
className="text-destructive focus:text-destructive"
>
<Trash2Icon />
{actionLoading ? labels.processing : labels.delete}
</DropdownMenuItem>
) : null}
</DropdownMenuContent>
</DropdownMenu>
) : null}
</ButtonGroup>
</TableCell>
</>
)
if (options.sortable) {
return (
<DashboardCrudSortableRow
key={id}
id={String(id)}
disabled={loading || options.sortDisabled}
handleLabel={sort?.handleLabel ?? labels.actions}
>
{rowCells}
</DashboardCrudSortableRow>
)
}
return <TableRow key={id}>{rowCells}</TableRow>
}
function renderStateRow() {
if (!loading && result.results.length > 0) return null
return (
<DashboardTableStateRow
colSpan={colSpan}
loading={loading}
loadingText={labels.loading}
emptyText={labels.empty}
/>
)
}
return (
<>
@@ -288,12 +517,7 @@ export function DashboardCrudPage<TItem, TPayload>({
<div key={filter.name} className={filter.className ?? "w-full sm:w-40"}>
<OptionCombobox
value={String(value ?? "")}
onChange={(nextValue) =>
setDraftFilters((current) => ({
...current,
[filter.name]: nextValue,
}))
}
onChange={(nextValue) => setDraftFilter(filter.name, nextValue)}
placeholder={filter.placeholder ?? filter.label}
options={[...(filter.options ?? [])]}
/>
@@ -306,10 +530,7 @@ export function DashboardCrudPage<TItem, TPayload>({
<Input
value={String(value ?? "")}
onChange={(event) =>
setDraftFilters((current) => ({
...current,
[filter.name]: event.target.value,
}))
setDraftFilter(filter.name, event.target.value)
}
onKeyDown={handleFilterKeyDown}
placeholder={filter.placeholder ?? filter.label}
@@ -317,7 +538,7 @@ export function DashboardCrudPage<TItem, TPayload>({
</div>
)
})}
<Button variant="outline" onClick={applyFilters} disabled={loading}>
<Button variant="outline" onClick={handleApplyFilters} disabled={loading}>
<SearchIcon />
{labels.query}
</Button>
@@ -344,6 +565,7 @@ export function DashboardCrudPage<TItem, TPayload>({
<Table>
<TableHeader className="bg-muted/40">
<TableRow>
{sortable ? <TableHead className="w-10" /> : null}
{columns.map((column) => (
<TableHead key={column.key} className={column.className}>
{column.label}
@@ -354,75 +576,33 @@ export function DashboardCrudPage<TItem, TPayload>({
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{result.results.map((item) => {
const id = getItemId(item)
const actionLoading = actionLoadingId === id
return (
<TableRow key={id}>
{columns.map((column) => (
<TableCell key={column.key} className={column.className}>
{column.render(item, {
item,
actionLoading,
actionLoadingId,
reload: loadData,
setActionLoadingId,
})}
</TableCell>
))}
<TableCell className="text-right">
<ButtonGroup className="ml-auto">
<Button
variant="outline"
size="sm"
onClick={() => openEditDialog(item)}
>
{labels.edit}
</Button>
{renderRowActions || deleteItem ? (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" size="icon-sm" />}
aria-label={labels.moreActions(item)}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40 min-w-40">
{renderRowActions?.({
item,
actionLoading,
actionLoadingId,
reload: loadData,
setActionLoadingId,
})}
{deleteItem ? (
<DropdownMenuItem
onClick={() => void handleDelete(item)}
disabled={canDelete ? !canDelete(item) : false}
className="text-destructive focus:text-destructive"
>
<Trash2Icon />
{actionLoading ? labels.processing : labels.delete}
</DropdownMenuItem>
) : null}
</DropdownMenuContent>
</DropdownMenu>
) : null}
</ButtonGroup>
</TableCell>
</TableRow>
)
})}
{loading || result.results.length === 0 ? (
<DashboardTableStateRow
colSpan={colSpan}
loading={loading}
loadingText={labels.loading}
emptyText={labels.empty}
/>
) : null}
</TableBody>
{sortable ? (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={(event) => void handleSortEnd(event)}
>
<SortableContext
items={result.results.map((item) => String(getItemId(item)))}
strategy={verticalListSortingStrategy}
>
<TableBody>
{result.results.map((item) =>
renderTableRow(item, {
sortable: true,
sortDisabled: sort?.disabled,
})
)}
{renderStateRow()}
</TableBody>
</SortableContext>
</DndContext>
) : (
<TableBody>
{result.results.map((item) => renderTableRow(item))}
{renderStateRow()}
</TableBody>
)}
</Table>
</DashboardTableShell>
</DashboardPage>
@@ -452,3 +632,50 @@ export function DashboardCrudPage<TItem, TPayload>({
</>
)
}
function DashboardCrudSortableRow({
id,
disabled,
handleLabel,
children,
}: {
id: string
disabled?: boolean
handleLabel: string
children: ReactNode
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id, disabled })
return (
<TableRow
ref={setNodeRef}
style={{
transform: CSS.Transform.toString(transform),
transition,
}}
className={isDragging ? "relative z-10 bg-muted/60" : undefined}
>
<TableCell className="w-10">
<Button
type="button"
variant="ghost"
size="icon-sm"
disabled={disabled}
aria-label={handleLabel}
{...attributes}
{...listeners}
>
<GripVerticalIcon className="text-muted-foreground" />
</Button>
</TableCell>
{children}
</TableRow>
)
}
web/components/dashboard/crud/dashboard-crud-presets.tsx
+130
View File
@@ -0,0 +1,130 @@
"use client"
import type { ComponentProps, ReactNode } from "react"
import { toast } from "sonner"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import type {
DashboardCrudColumn,
DashboardCrudRowAction,
} from "./dashboard-crud-page"
type BadgeVariant = ComponentProps<typeof Badge>["variant"]
export type DashboardCrudStatusColumnOptions<TItem, TStatus> = {
key?: string
label: ReactNode
className?: string
getStatus: (item: TItem) => TStatus
getLabel: (status: TStatus, item: TItem) => ReactNode
getBadgeVariant?: (status: TStatus, item: TItem) => BadgeVariant
isEnabled?: (status: TStatus, item: TItem) => boolean
toggle?: {
disabled?: (item: TItem) => boolean
getNextStatus: (item: TItem) => TStatus
updateStatus: (item: TItem, nextStatus: TStatus) => Promise<unknown>
successMessage: (item: TItem, nextStatus: TStatus) => string
errorMessage: string
ariaLabel: (item: TItem) => string
}
}
export type DashboardCrudStatusToggleActionOptions<TItem, TStatus> = {
key?: string
icon?: ReactNode | ((item: TItem) => ReactNode)
label: (item: TItem, nextStatus: TStatus) => ReactNode
visible?: (item: TItem) => boolean
disabled?: (item: TItem) => boolean
getNextStatus: (item: TItem) => TStatus
updateStatus: (item: TItem, nextStatus: TStatus) => Promise<unknown>
successMessage: (item: TItem, nextStatus: TStatus) => string
errorMessage: string
}
export function createDashboardStatusColumn<TItem, TStatus>({
key = "status",
label,
className,
getStatus,
getLabel,
getBadgeVariant,
isEnabled,
toggle,
}: DashboardCrudStatusColumnOptions<TItem, TStatus>): DashboardCrudColumn<TItem> {
return {
key,
label,
className,
render: (item, { itemId, actionLoading, reload, setActionLoadingId }) => {
const status = getStatus(item)
const badge = (
<Badge variant={getBadgeVariant?.(status, item) ?? "outline"}>
{getLabel(status, item)}
</Badge>
)
if (!toggle) {
return badge
}
return (
<div className="flex items-center gap-3">
<Switch
checked={isEnabled ? isEnabled(status, item) : Boolean(status)}
disabled={actionLoading || toggle.disabled?.(item)}
onCheckedChange={() => {
void (async () => {
setActionLoadingId(itemId)
try {
const nextStatus = toggle.getNextStatus(item)
await toggle.updateStatus(item, nextStatus)
toast.success(toggle.successMessage(item, nextStatus))
await reload()
} catch (error) {
toast.error(
error instanceof Error ? error.message : toggle.errorMessage
)
} finally {
setActionLoadingId(null)
}
})()
}}
aria-label={toggle.ariaLabel(item)}
/>
{badge}
</div>
)
},
}
}
export function createDashboardStatusToggleAction<TItem, TStatus>({
key = "toggle-status",
icon,
label,
visible,
disabled,
getNextStatus,
updateStatus,
successMessage,
errorMessage,
}: DashboardCrudStatusToggleActionOptions<TItem, TStatus>): DashboardCrudRowAction<TItem> {
return {
key,
icon,
visible,
disabled,
label: (item) => label(item, getNextStatus(item)),
run: async ({ item, reload }) => {
try {
const nextStatus = getNextStatus(item)
await updateStatus(item, nextStatus)
toast.success(successMessage(item, nextStatus))
await reload()
} catch (error) {
toast.error(error instanceof Error ? error.message : errorMessage)
}
},
}
}
web/components/dashboard/crud/dashboard-crud-utils.test.mjs
+50
View File
@@ -75,6 +75,27 @@ describe("buildDashboardCrudQuery", () => {
})
})
describe("buildDashboardCrudInitialFilters", () => {
it("creates stable filter state from defaults", async () => {
const { buildDashboardCrudInitialFilters } = await loadModule()
assert.deepEqual(
plain(
buildDashboardCrudInitialFilters([
{ name: "keyword", defaultValue: "" },
{ name: "status", defaultValue: "all" },
{ name: "companyId", defaultValue: 0 },
])
),
{
keyword: "",
status: "all",
companyId: 0,
}
)
})
})
describe("normalizeDashboardCrudPageResult", () => {
it("returns a stable empty page when the API result is missing", async () => {
const { normalizeDashboardCrudPageResult } = await loadModule()
@@ -143,3 +164,32 @@ describe("normalizeDashboardCrudSubmitValues", () => {
)
})
})
describe("dashboard CRUD action rules", () => {
it("defaults actions to visible and enabled", async () => {
const {
isDashboardCrudActionVisible,
isDashboardCrudActionDisabled,
} = await loadModule()
const action = {}
assert.equal(isDashboardCrudActionVisible(action, { status: 0 }), true)
assert.equal(isDashboardCrudActionDisabled(action, { status: 0 }), false)
})
it("honors visible and disabled predicates", async () => {
const {
isDashboardCrudActionVisible,
isDashboardCrudActionDisabled,
} = await loadModule()
const action = {
visible: (item) => item.status !== 2,
disabled: (item) => item.status === 1,
}
assert.equal(isDashboardCrudActionVisible(action, { status: 2 }), false)
assert.equal(isDashboardCrudActionVisible(action, { status: 0 }), true)
assert.equal(isDashboardCrudActionDisabled(action, { status: 1 }), true)
assert.equal(isDashboardCrudActionDisabled(action, { status: 0 }), false)
})
})
web/components/dashboard/crud/dashboard-crud-utils.ts
+35
View File
@@ -7,6 +7,13 @@ export type DashboardCrudQueryFilter = {
valueType?: "string" | "number"
}
export type DashboardCrudFilterStateConfig<
TValue extends string | number = string | number,
> = {
name: string
defaultValue: TValue
}
export type DashboardCrudPageResult<T> = {
results: T[]
page: {
@@ -39,11 +46,17 @@ export type DashboardCrudFormField<TItem = unknown> = {
pattern?: RegExp
patternMessage?: string
options?: ReadonlyArray<DashboardCrudFormOption>
loadOptions?: () => Promise<ReadonlyArray<DashboardCrudFormOption>>
colSpan?: 1 | 2
rows?: number
valueFromItem?: (item: TItem) => DashboardCrudFormValue
}
export type DashboardCrudActionRule<TItem> = {
visible?: (item: TItem) => boolean
disabled?: (item: TItem) => boolean
}
export function buildDashboardCrudQuery({
values,
filters,
@@ -86,6 +99,14 @@ export function buildDashboardCrudQuery({
return query
}
export function buildDashboardCrudInitialFilters(
filters: ReadonlyArray<DashboardCrudFilterStateConfig>
): Record<string, string | number | undefined> {
return Object.fromEntries(
filters.map((filter) => [filter.name, filter.defaultValue])
) as Record<string, string | number | undefined>
}
export function normalizeDashboardCrudPageResult<T>(
result: Partial<DashboardCrudPageResult<T>> | null | undefined,
page: number,
@@ -139,3 +160,17 @@ export function normalizeDashboardCrudSubmitValues<TItem>(
return output
}
export function isDashboardCrudActionVisible<TItem>(
action: DashboardCrudActionRule<TItem>,
item: TItem
) {
return action.visible ? action.visible(item) : true
}
export function isDashboardCrudActionDisabled<TItem>(
action: DashboardCrudActionRule<TItem>,
item: TItem
) {
return action.disabled ? action.disabled(item) : false
}
web/components/dashboard/crud/index.ts
+13
View File
@@ -1,5 +1,18 @@
export { DashboardCrudPage } from "./dashboard-crud-page"
export { DashboardCrudFormDialog } from "./dashboard-crud-form-dialog"
export {
createDashboardStatusColumn,
createDashboardStatusToggleAction,
} from "./dashboard-crud-presets"
export { useDashboardCrudFilters } from "./use-dashboard-crud-filters"
export type {
DashboardCrudColumn,
DashboardCrudDialogProps,
DashboardCrudFilter,
DashboardCrudPageProps,
DashboardCrudRowAction,
DashboardCrudRowActionContext,
} from "./dashboard-crud-page"
export type {
DashboardCrudFormField,
DashboardCrudPageResult,
web/components/dashboard/crud/use-dashboard-crud-filters.ts
+43
View File
@@ -0,0 +1,43 @@
"use client"
import { useEffect, useMemo, useState } from "react"
import {
buildDashboardCrudInitialFilters,
type DashboardCrudFilterStateConfig,
} from "./dashboard-crud-utils"
export function useDashboardCrudFilters(
filters: ReadonlyArray<DashboardCrudFilterStateConfig>
) {
const initialFilters = useMemo(
() => buildDashboardCrudInitialFilters(filters),
[filters]
)
const [draftFilters, setDraftFilters] = useState(initialFilters)
const [appliedFilters, setAppliedFilters] = useState(initialFilters)
useEffect(() => {
setDraftFilters(initialFilters)
setAppliedFilters(initialFilters)
}, [initialFilters])
function setDraftFilter(name: string, value: string | number | undefined) {
setDraftFilters((current) => ({
...current,
[name]: value,
}))
}
function applyFilters() {
setAppliedFilters(draftFilters)
}
return {
draftFilters,
appliedFilters,
setDraftFilter,
setDraftFilters,
applyFilters,
}
}