mlogclub
428 lines
12 KiB
TypeScript
428 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import type { CSSProperties } from "react"
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
type DragEndEvent,
|
|
KeyboardSensor,
|
|
MouseSensor,
|
|
TouchSensor,
|
|
useSensor,
|
|
useSensors,
|
|
} from "@dnd-kit/core"
|
|
import {
|
|
arrayMove,
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable"
|
|
import { CSS } from "@dnd-kit/utilities"
|
|
import {
|
|
GripVerticalIcon,
|
|
PlusIcon,
|
|
RefreshCwIcon,
|
|
ShieldCheckIcon,
|
|
ShieldIcon,
|
|
} from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import {
|
|
assignRolePermissions,
|
|
createRole,
|
|
fetchPermissions,
|
|
fetchRoleDetail,
|
|
fetchRoles,
|
|
type AdminPermission,
|
|
type AdminRole,
|
|
type CreateAdminRolePayload,
|
|
type PageResult,
|
|
updateRoleSort,
|
|
} from "@/lib/api/admin"
|
|
import {
|
|
DashboardPage,
|
|
DashboardTableShell,
|
|
DashboardTableStateRow,
|
|
DashboardTableSummary,
|
|
DashboardToolbar,
|
|
} from "@/components/dashboard-page"
|
|
import { cn } from "@/lib/utils"
|
|
import { AssignPermissionsDrawer } from "./_components/assign-permissions"
|
|
import { CreateRoleDrawer } from "./_components/create"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Status } from "@/lib/generated/enums"
|
|
import { useAppLocale, useI18n } from "@/i18n/provider"
|
|
import { getRoleDisplayName } from "@/lib/role-i18n"
|
|
|
|
type SortableRoleRowProps = {
|
|
item: AdminRole
|
|
disabled: boolean
|
|
actionLoading: boolean
|
|
onAssignPermissions: (item: AdminRole) => void
|
|
}
|
|
|
|
function SortableRoleRow({
|
|
item,
|
|
disabled,
|
|
actionLoading,
|
|
onAssignPermissions,
|
|
}: SortableRoleRowProps) {
|
|
const t = useI18n()
|
|
const { locale } = useAppLocale()
|
|
const displayName = getRoleDisplayName(item.code, item.name, locale)
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id: item.id,
|
|
disabled,
|
|
})
|
|
|
|
const style: CSSProperties = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
}
|
|
|
|
return (
|
|
<TableRow
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={cn(
|
|
isDragging && "relative z-10 bg-muted/60 shadow-sm",
|
|
!disabled && "cursor-move"
|
|
)}
|
|
>
|
|
<TableCell className="w-14">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 cursor-grab active:cursor-grabbing"
|
|
disabled={disabled}
|
|
aria-label={t("role.dragSort", { name: displayName })}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<GripVerticalIcon className="size-4 text-muted-foreground" />
|
|
</Button>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
|
<ShieldCheckIcon className="size-4" />
|
|
</div>
|
|
<div className="font-medium">{displayName}</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">
|
|
<ShieldIcon className="size-3" />
|
|
{item.code}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={item.status === Status.Ok ? "secondary" : "outline"}>
|
|
{item.status === Status.Ok ? t("status.ok") : t("status.disabled")}
|
|
</Badge>
|
|
{item.isSystem ? (
|
|
<Badge variant="outline" className="ml-2">
|
|
{t("role.system")}
|
|
</Badge>
|
|
) : null}
|
|
</TableCell>
|
|
<TableCell>{item.sortNo}</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onAssignPermissions(item)}
|
|
disabled={disabled || actionLoading}
|
|
>
|
|
{actionLoading ? t("role.processing") : t("role.assignPermissions")}
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
}
|
|
|
|
export default function DashboardRolesPage() {
|
|
const t = useI18n()
|
|
const [loading, setLoading] = useState(true)
|
|
const [sorting, setSorting] = useState(false)
|
|
const [creatingOpen, setCreatingOpen] = useState(false)
|
|
const [savingCreate, setSavingCreate] = useState(false)
|
|
const [savingPermissions, setSavingPermissions] = useState(false)
|
|
const [assignPermissionsLoading, setAssignPermissionsLoading] = useState(false)
|
|
const [assigningRole, setAssigningRole] = useState<AdminRole | null>(null)
|
|
const [assignPermissionOptions, setAssignPermissionOptions] = useState<
|
|
AdminPermission[]
|
|
>([])
|
|
const [assignPermissionIds, setAssignPermissionIds] = useState<number[]>([])
|
|
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
|
|
const [result, setResult] = useState<PageResult<AdminRole>>({
|
|
results: [],
|
|
page: { page: 1, limit: 20, total: 0 },
|
|
})
|
|
|
|
const sensors = useSensors(
|
|
useSensor(MouseSensor, {
|
|
activationConstraint: { distance: 8 },
|
|
}),
|
|
useSensor(TouchSensor, {
|
|
activationConstraint: { delay: 150, tolerance: 8 },
|
|
}),
|
|
useSensor(KeyboardSensor, {
|
|
coordinateGetter: sortableKeyboardCoordinates,
|
|
})
|
|
)
|
|
|
|
async function loadRoles() {
|
|
setLoading(true)
|
|
try {
|
|
setResult(await fetchRoles({ limit: 200 }))
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("role.loadFailed"))
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
function handleCreateDrawerOpenChange(open: boolean) {
|
|
if (savingCreate) {
|
|
return
|
|
}
|
|
setCreatingOpen(open)
|
|
}
|
|
|
|
async function handleCreateRole(payload: CreateAdminRolePayload) {
|
|
if (savingCreate) {
|
|
return
|
|
}
|
|
|
|
setSavingCreate(true)
|
|
try {
|
|
const role = await createRole(payload)
|
|
toast.success(t("role.created", { name: role.name }))
|
|
setCreatingOpen(false)
|
|
await loadRoles()
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("role.createFailed"))
|
|
} finally {
|
|
setSavingCreate(false)
|
|
}
|
|
}
|
|
|
|
async function openAssignPermissionsDrawer(role: AdminRole) {
|
|
setActionLoadingId(role.id)
|
|
setAssigningRole(role)
|
|
setAssignPermissionsLoading(true)
|
|
try {
|
|
const [permissionsResult, roleDetail] = await Promise.all([
|
|
fetchPermissions({ limit: 500 }),
|
|
fetchRoleDetail(role.id),
|
|
])
|
|
const permissionCodeSet = new Set(roleDetail.permissions || [])
|
|
setAssignPermissionOptions(permissionsResult.results)
|
|
setAssignPermissionIds(
|
|
permissionsResult.results
|
|
.filter((permission) => permissionCodeSet.has(permission.code))
|
|
.map((permission) => permission.id)
|
|
)
|
|
} catch (error) {
|
|
setAssigningRole(null)
|
|
toast.error(error instanceof Error ? error.message : t("role.loadAssignFailed"))
|
|
} finally {
|
|
setAssignPermissionsLoading(false)
|
|
setActionLoadingId(null)
|
|
}
|
|
}
|
|
|
|
async function handleDragEnd(event: DragEndEvent) {
|
|
const { active, over } = event
|
|
if (!over || active.id === over.id || sorting) {
|
|
return
|
|
}
|
|
|
|
const previousResults = result.results
|
|
const oldIndex = previousResults.findIndex((item) => item.id === active.id)
|
|
const newIndex = previousResults.findIndex((item) => item.id === over.id)
|
|
if (oldIndex < 0 || newIndex < 0) {
|
|
return
|
|
}
|
|
|
|
const nextResults = arrayMove(previousResults, oldIndex, newIndex)
|
|
setResult((current) => ({
|
|
...current,
|
|
results: nextResults,
|
|
}))
|
|
setSorting(true)
|
|
|
|
try {
|
|
await updateRoleSort(nextResults.map((item) => item.id))
|
|
toast.success(t("role.sortUpdated"))
|
|
await loadRoles()
|
|
} catch (error) {
|
|
setResult((current) => ({
|
|
...current,
|
|
results: previousResults,
|
|
}))
|
|
toast.error(error instanceof Error ? error.message : t("role.sortUpdateFailed"))
|
|
} finally {
|
|
setSorting(false)
|
|
}
|
|
}
|
|
|
|
function handleAssignPermissionsOpenChange(open: boolean) {
|
|
if (savingPermissions) {
|
|
return
|
|
}
|
|
if (!open) {
|
|
setAssigningRole(null)
|
|
setAssignPermissionOptions([])
|
|
setAssignPermissionIds([])
|
|
}
|
|
}
|
|
|
|
async function handleAssignPermissions(permissionIds: number[]) {
|
|
if (!assigningRole || savingPermissions) {
|
|
return
|
|
}
|
|
|
|
setSavingPermissions(true)
|
|
try {
|
|
await assignRolePermissions(assigningRole.id, permissionIds)
|
|
toast.success(t("role.permissionsUpdated", { name: assigningRole.name }))
|
|
setAssigningRole(null)
|
|
setAssignPermissionOptions([])
|
|
setAssignPermissionIds([])
|
|
await loadRoles()
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("role.savePermissionsFailed"))
|
|
} finally {
|
|
setSavingPermissions(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
void loadRoles()
|
|
}, [])
|
|
|
|
return (
|
|
<DashboardPage>
|
|
<DashboardToolbar
|
|
actions={
|
|
<>
|
|
<Button
|
|
type="button"
|
|
onClick={() => setCreatingOpen(true)}
|
|
disabled={loading || sorting}
|
|
>
|
|
<PlusIcon className="size-4" />
|
|
{t("role.add")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => void loadRoles()}
|
|
disabled={loading || sorting}
|
|
>
|
|
<RefreshCwIcon className={cn((loading || sorting) && "animate-spin")} />
|
|
{t("role.refresh")}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="text-sm text-muted-foreground">
|
|
{t("role.dragHint")}
|
|
</div>
|
|
</DashboardToolbar>
|
|
<DashboardTableShell
|
|
pagination={
|
|
<DashboardTableSummary>
|
|
<span>
|
|
{t("role.pageSummary", { page: result.page.page, limit: result.page.limit })}
|
|
</span>
|
|
<span>{t("pagination.total", { total: result.page.total })}</span>
|
|
</DashboardTableSummary>
|
|
}
|
|
>
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={(event) => void handleDragEnd(event)}
|
|
>
|
|
<Table>
|
|
<TableHeader className="bg-muted/40">
|
|
<TableRow>
|
|
<TableHead className="w-14"></TableHead>
|
|
<TableHead>{t("role.columnRole")}</TableHead>
|
|
<TableHead>{t("role.columnCode")}</TableHead>
|
|
<TableHead>{t("role.columnStatus")}</TableHead>
|
|
<TableHead>{t("role.columnSort")}</TableHead>
|
|
<TableHead className="text-right">{t("role.columnActions")}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<SortableContext
|
|
items={result.results.map((item) => item.id)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{result.results.map((item) => (
|
|
<SortableRoleRow
|
|
key={item.id}
|
|
item={item}
|
|
disabled={loading || sorting}
|
|
actionLoading={actionLoadingId === item.id}
|
|
onAssignPermissions={(current) =>
|
|
void openAssignPermissionsDrawer(current)
|
|
}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
{loading || result.results.length === 0 ? (
|
|
<DashboardTableStateRow
|
|
colSpan={6}
|
|
loading={loading}
|
|
loadingText={t("role.loading")}
|
|
emptyText={t("role.empty")}
|
|
/>
|
|
) : null}
|
|
</TableBody>
|
|
</Table>
|
|
</DndContext>
|
|
</DashboardTableShell>
|
|
<AssignPermissionsDrawer
|
|
open={!!assigningRole}
|
|
saving={savingPermissions}
|
|
loading={assignPermissionsLoading}
|
|
item={assigningRole}
|
|
permissions={assignPermissionOptions}
|
|
selectedPermissionIds={assignPermissionIds}
|
|
onOpenChange={handleAssignPermissionsOpenChange}
|
|
onSubmit={handleAssignPermissions}
|
|
/>
|
|
<CreateRoleDrawer
|
|
open={creatingOpen}
|
|
saving={savingCreate}
|
|
onOpenChange={handleCreateDrawerOpenChange}
|
|
onSubmit={handleCreateRole}
|
|
/>
|
|
</DashboardPage>
|
|
)
|
|
}
|