chore: import clean Agent Desk snapshot (6/7)
This commit is contained in:
345
web/app/(dashboard)/dashboard/users/_components/assign-roles.tsx
Normal file
345
web/app/(dashboard)/dashboard/users/_components/assign-roles.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { Controller, Resolver, useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { SearchIcon, ShieldAlertIcon, ShieldCheckIcon, ShieldIcon } from "lucide-react"
|
||||
import { z } from "zod/v4"
|
||||
|
||||
import type { AdminRole, AdminUser } from "@/lib/api/admin"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from "@/components/ui/drawer"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Status } from "@/lib/generated/enums"
|
||||
import { useAppLocale, useI18n } from "@/i18n/provider"
|
||||
import { getRoleDisplayName } from "@/lib/role-i18n"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type AssignRolesDrawerProps = {
|
||||
open: boolean
|
||||
saving: boolean
|
||||
loading: boolean
|
||||
item: AdminUser | null
|
||||
roles: AdminRole[]
|
||||
selectedRoleIds: number[]
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (roleIds: number[]) => Promise<void>
|
||||
}
|
||||
|
||||
const assignRolesSchema = z.object({
|
||||
roleIds: z.array(z.number().int().positive()),
|
||||
})
|
||||
|
||||
type AssignRolesForm = z.infer<typeof assignRolesSchema>
|
||||
|
||||
const assignRolesResolver = zodResolver(assignRolesSchema as never) as Resolver<
|
||||
z.input<typeof assignRolesSchema>,
|
||||
undefined,
|
||||
z.output<typeof assignRolesSchema>
|
||||
>
|
||||
|
||||
function buildForm(selectedRoleIds: number[]): AssignRolesForm {
|
||||
return {
|
||||
roleIds: selectedRoleIds,
|
||||
}
|
||||
}
|
||||
|
||||
export function AssignRolesDrawer({
|
||||
open,
|
||||
saving,
|
||||
loading,
|
||||
item,
|
||||
roles,
|
||||
selectedRoleIds,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: AssignRolesDrawerProps) {
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={onOpenChange} direction="right">
|
||||
{open ? (
|
||||
<AssignRolesDrawerBody
|
||||
key={item ? `assign-roles-${item.id}` : "assign-roles"}
|
||||
saving={saving}
|
||||
loading={loading}
|
||||
item={item}
|
||||
roles={roles}
|
||||
selectedRoleIds={selectedRoleIds}
|
||||
onOpenChange={onOpenChange}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
) : null}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
type AssignRolesDrawerBodyProps = {
|
||||
saving: boolean
|
||||
loading: boolean
|
||||
item: AdminUser | null
|
||||
roles: AdminRole[]
|
||||
selectedRoleIds: number[]
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (roleIds: number[]) => Promise<void>
|
||||
}
|
||||
|
||||
function AssignRolesDrawerBody({
|
||||
saving,
|
||||
loading,
|
||||
item,
|
||||
roles,
|
||||
selectedRoleIds,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: AssignRolesDrawerBodyProps) {
|
||||
const t = useI18n()
|
||||
const { locale } = useAppLocale()
|
||||
const [keyword, setKeyword] = useState("")
|
||||
const form = useForm<
|
||||
z.input<typeof assignRolesSchema>,
|
||||
undefined,
|
||||
z.output<typeof assignRolesSchema>
|
||||
>({
|
||||
resolver: assignRolesResolver,
|
||||
defaultValues: buildForm(selectedRoleIds),
|
||||
})
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = form
|
||||
|
||||
useEffect(() => {
|
||||
reset(buildForm(selectedRoleIds))
|
||||
}, [reset, selectedRoleIds])
|
||||
|
||||
const roleMap = useMemo(
|
||||
() => new Map(roles.map((role) => [role.id, role])),
|
||||
[roles]
|
||||
)
|
||||
|
||||
async function onFormSubmit(values: AssignRolesForm) {
|
||||
await onSubmit(values.roleIds)
|
||||
}
|
||||
|
||||
return (
|
||||
<DrawerContent className="flex min-w-2xl flex-col overflow-hidden">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>{t("user.assignRoles")}</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<form
|
||||
className="flex min-h-0 flex-1 flex-col overflow-hidden"
|
||||
onSubmit={handleSubmit(onFormSubmit)}
|
||||
>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
<Controller
|
||||
control={control}
|
||||
name="roleIds"
|
||||
render={({ field }) => {
|
||||
const value = field.value || []
|
||||
const selectedRoleSet = new Set(value)
|
||||
const initiallySelectedSet = new Set(selectedRoleIds)
|
||||
const selectedRoles = roles.filter((role) => selectedRoleSet.has(role.id))
|
||||
const removedRoles = selectedRoleIds
|
||||
.map((roleId) => roleMap.get(roleId))
|
||||
.filter((role): role is AdminRole => !!role && !selectedRoleSet.has(role.id))
|
||||
const addedRoles = value
|
||||
.map((roleId) => roleMap.get(roleId))
|
||||
.filter((role): role is AdminRole => !!role && !initiallySelectedSet.has(role.id))
|
||||
const filteredRoles = roles.filter((role) => {
|
||||
const output = keyword.trim().toLowerCase()
|
||||
if (!output) {
|
||||
return true
|
||||
}
|
||||
return `${role.name} ${getRoleDisplayName(role.code, role.name, locale)} ${role.code}`
|
||||
.toLowerCase()
|
||||
.includes(output)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-4 px-4 pb-4">
|
||||
<Field>
|
||||
<FieldLabel>{t("user.assignedRoles")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<div className="rounded-lg border p-3">
|
||||
{selectedRoles.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedRoles.map((role) => (
|
||||
<Badge
|
||||
key={role.id}
|
||||
variant={role.status === Status.Ok ? "secondary" : "outline"}
|
||||
className="gap-1"
|
||||
>
|
||||
{role.status === Status.Ok ? (
|
||||
<ShieldCheckIcon className="size-3" />
|
||||
) : (
|
||||
<ShieldAlertIcon className="size-3" />
|
||||
)}
|
||||
{getRoleDisplayName(role.code, role.name, locale)}
|
||||
{role.status !== Status.Ok ? ` (${t("user.disabled")})` : ""}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t("user.unassignedRoles")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={!!errors.roleIds}>
|
||||
<FieldLabel>{t("user.roleList")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<div className="relative">
|
||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={keyword}
|
||||
onChange={(event) => setKeyword(event.target.value)}
|
||||
placeholder={t("user.searchRoleNameOrCode")}
|
||||
className="pl-9"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 max-h-[360px] space-y-1 overflow-y-auto rounded-lg border p-2">
|
||||
{loading ? (
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
{t("user.loadingRoleList")}
|
||||
</div>
|
||||
) : filteredRoles.length > 0 ? (
|
||||
filteredRoles.map((role) => {
|
||||
const checked = selectedRoleSet.has(role.id)
|
||||
const disabled = role.status !== Status.Ok && !checked
|
||||
|
||||
return (
|
||||
<label
|
||||
key={role.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border px-2.5 py-2 text-sm transition-colors",
|
||||
disabled
|
||||
? "cursor-not-allowed border-dashed bg-muted/20 opacity-70"
|
||||
: "cursor-pointer hover:bg-muted/50",
|
||||
checked && "border-primary/40 bg-primary/5"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={(nextChecked) => {
|
||||
if (nextChecked) {
|
||||
field.onChange([...value, role.id])
|
||||
return
|
||||
}
|
||||
field.onChange(
|
||||
value.filter((currentId) => currentId !== role.id)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 whitespace-nowrap">
|
||||
<span className="truncate font-medium">
|
||||
{getRoleDisplayName(role.code, role.name, locale)}
|
||||
</span>
|
||||
<span className="truncate text-muted-foreground">
|
||||
{role.code}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{role.isSystem ? (
|
||||
<Badge variant="outline" className="shrink-0">
|
||||
{t("user.system")}
|
||||
</Badge>
|
||||
) : null}
|
||||
<Badge
|
||||
variant={role.status === Status.Ok ? "secondary" : "outline"}
|
||||
className="shrink-0"
|
||||
>
|
||||
{role.status === Status.Ok ? t("user.enabled") : t("user.disabled")}
|
||||
</Badge>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
{t("user.noMatchedRoles")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<FieldError errors={[errors.roleIds]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>{t("user.changes")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<div className="space-y-3 rounded-lg border p-3">
|
||||
<div>
|
||||
<div className="mb-2 text-sm font-medium">{t("user.addedRoles")}</div>
|
||||
{addedRoles.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{addedRoles.map((role) => (
|
||||
<Badge key={role.id} variant="secondary" className="gap-1">
|
||||
<ShieldIcon className="size-3" />
|
||||
{getRoleDisplayName(role.code, role.name, locale)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">{t("user.noneAdded")}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 text-sm font-medium">{t("user.removedRoles")}</div>
|
||||
{removedRoles.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{removedRoles.map((role) => (
|
||||
<Badge key={role.id} variant="outline" className="gap-1">
|
||||
<ShieldIcon className="size-3" />
|
||||
{getRoleDisplayName(role.code, role.name, locale)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">{t("user.noneRemoved")}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DrawerFooter className="border-t">
|
||||
<Button type="submit" disabled={saving || loading || !item}>
|
||||
{saving ? t("user.saving") : t("user.confirmAssign")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
{t("user.cancel")}
|
||||
</Button>
|
||||
</DrawerFooter>
|
||||
</form>
|
||||
</DrawerContent>
|
||||
)
|
||||
}
|
||||
390
web/app/(dashboard)/dashboard/users/_components/create.tsx
Normal file
390
web/app/(dashboard)/dashboard/users/_components/create.tsx
Normal file
@@ -0,0 +1,390 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { Controller, Resolver, useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { SearchIcon, ShieldAlertIcon, ShieldCheckIcon } from "lucide-react"
|
||||
import { z } from "zod/v4"
|
||||
|
||||
import {
|
||||
fetchRoleListAll,
|
||||
type AdminRole,
|
||||
type CreateAdminUserPayload,
|
||||
} from "@/lib/api/admin"
|
||||
import { useAppLocale, useI18n } from "@/i18n/provider"
|
||||
import { Status } from "@/lib/generated/enums"
|
||||
import { getRoleDisplayName } from "@/lib/role-i18n"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ImageInput } from "@/components/image-input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from "@/components/ui/drawer"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
type CreateUserDrawerProps = {
|
||||
open: boolean
|
||||
saving: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (payload: CreateAdminUserPayload) => Promise<void>
|
||||
}
|
||||
|
||||
type CreateForm = {
|
||||
username: string
|
||||
nickname: string
|
||||
avatar: string
|
||||
mobile: string
|
||||
email: string
|
||||
remark: string
|
||||
roleIds: number[]
|
||||
}
|
||||
|
||||
const emptyForm: CreateForm = {
|
||||
username: "",
|
||||
nickname: "",
|
||||
avatar: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
remark: "",
|
||||
roleIds: [],
|
||||
}
|
||||
|
||||
function toNullableString(value: string) {
|
||||
const output = value.trim()
|
||||
return output ? output : null
|
||||
}
|
||||
|
||||
function buildPayload(form: CreateForm): CreateAdminUserPayload {
|
||||
return {
|
||||
username: form.username.trim(),
|
||||
nickname: form.nickname.trim(),
|
||||
avatar: form.avatar.trim(),
|
||||
mobile: toNullableString(form.mobile),
|
||||
email: toNullableString(form.email),
|
||||
remark: form.remark.trim(),
|
||||
roleIds: form.roleIds,
|
||||
}
|
||||
}
|
||||
|
||||
export function CreateUserDrawer({
|
||||
open,
|
||||
saving,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: CreateUserDrawerProps) {
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={onOpenChange} direction="right">
|
||||
{open ? (
|
||||
<CreateUserDrawerBody
|
||||
key="create-user"
|
||||
saving={saving}
|
||||
onOpenChange={onOpenChange}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
) : null}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
type CreateUserDrawerBodyProps = {
|
||||
saving: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (payload: CreateAdminUserPayload) => Promise<void>
|
||||
}
|
||||
|
||||
function CreateUserDrawerBody({
|
||||
saving,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: CreateUserDrawerBodyProps) {
|
||||
const t = useI18n()
|
||||
const { locale } = useAppLocale()
|
||||
const [rolesLoading, setRolesLoading] = useState(true)
|
||||
const [roles, setRoles] = useState<AdminRole[]>([])
|
||||
const [roleKeyword, setRoleKeyword] = useState("")
|
||||
const createFormSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
username: z.string().trim().min(1, t("user.usernameRequired")),
|
||||
nickname: z.string().trim(),
|
||||
avatar: z.string().trim(),
|
||||
mobile: z
|
||||
.string()
|
||||
.trim()
|
||||
.refine(
|
||||
(value) => value.length === 0 || /^[0-9+\-\s]{6,20}$/.test(value),
|
||||
t("user.mobileInvalid")
|
||||
),
|
||||
email: z
|
||||
.string()
|
||||
.trim()
|
||||
.refine(
|
||||
(value) =>
|
||||
value.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
|
||||
t("user.emailInvalid")
|
||||
),
|
||||
remark: z.string().trim(),
|
||||
roleIds: z.array(z.number().int().positive()),
|
||||
}),
|
||||
[t]
|
||||
)
|
||||
const createFormResolver = useMemo(
|
||||
() => zodResolver(createFormSchema as never) as Resolver<CreateForm>,
|
||||
[createFormSchema]
|
||||
)
|
||||
const form = useForm<CreateForm>({
|
||||
resolver: createFormResolver,
|
||||
defaultValues: emptyForm,
|
||||
})
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = form
|
||||
|
||||
useEffect(() => {
|
||||
async function loadRoles() {
|
||||
setRolesLoading(true)
|
||||
try {
|
||||
const list = await fetchRoleListAll()
|
||||
setRoles(list)
|
||||
} catch {
|
||||
setRoles([])
|
||||
} finally {
|
||||
setRolesLoading(false)
|
||||
}
|
||||
}
|
||||
void loadRoles()
|
||||
}, [])
|
||||
|
||||
const filteredRoles = useMemo(() => {
|
||||
const q = roleKeyword.trim().toLowerCase()
|
||||
if (!q) {
|
||||
return roles
|
||||
}
|
||||
return roles.filter((role) =>
|
||||
`${role.name} ${getRoleDisplayName(role.code, role.name, locale)} ${role.code}`
|
||||
.toLowerCase()
|
||||
.includes(q)
|
||||
)
|
||||
}, [locale, roleKeyword, roles])
|
||||
|
||||
async function onFormSubmit(values: CreateForm) {
|
||||
await onSubmit(buildPayload(values))
|
||||
reset(emptyForm)
|
||||
setRoleKeyword("")
|
||||
}
|
||||
|
||||
return (
|
||||
<DrawerContent className="min-w-2xl overflow-hidden">
|
||||
<DrawerHeader className="shrink-0">
|
||||
<DrawerTitle>{t("user.createTitle")}</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
{t("user.createDescription")}
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<form
|
||||
className="flex min-h-0 flex-1 flex-col"
|
||||
onSubmit={handleSubmit(onFormSubmit)}
|
||||
>
|
||||
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 pb-4">
|
||||
<Field data-invalid={!!errors.username}>
|
||||
<FieldLabel htmlFor="create-username">{t("user.username")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="create-username"
|
||||
placeholder={t("user.usernamePlaceholder")}
|
||||
autoComplete="off"
|
||||
aria-invalid={!!errors.username}
|
||||
{...register("username")}
|
||||
/>
|
||||
<FieldError errors={[errors.username]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.nickname}>
|
||||
<FieldLabel htmlFor="create-nickname">{t("user.nickname")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="create-nickname"
|
||||
placeholder={t("user.nicknameCreatePlaceholder")}
|
||||
aria-invalid={!!errors.nickname}
|
||||
{...register("nickname")}
|
||||
/>
|
||||
<FieldError errors={[errors.nickname]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field className="min-h-32" data-invalid={!!errors.avatar}>
|
||||
<FieldLabel>{t("user.avatar")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="avatar"
|
||||
render={({ field }) => (
|
||||
<ImageInput
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={saving}
|
||||
prefix="avatar"
|
||||
placeholder={t("user.avatarCreatePlaceholder")}
|
||||
className="size-16 rounded-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.avatar]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.mobile}>
|
||||
<FieldLabel htmlFor="create-mobile">{t("user.mobile")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="create-mobile"
|
||||
placeholder={t("user.optional")}
|
||||
aria-invalid={!!errors.mobile}
|
||||
{...register("mobile")}
|
||||
/>
|
||||
<FieldError errors={[errors.mobile]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.email}>
|
||||
<FieldLabel htmlFor="create-email">{t("user.email")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="create-email"
|
||||
placeholder={t("user.optional")}
|
||||
aria-invalid={!!errors.email}
|
||||
{...register("email")}
|
||||
/>
|
||||
<FieldError errors={[errors.email]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.remark}>
|
||||
<FieldLabel htmlFor="create-remark">{t("user.remark")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="create-remark"
|
||||
placeholder={t("user.optional")}
|
||||
aria-invalid={!!errors.remark}
|
||||
{...register("remark")}
|
||||
/>
|
||||
<FieldError errors={[errors.remark]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={!!errors.roleIds}>
|
||||
<FieldLabel>{t("user.rolesOptional")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<div className="relative">
|
||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={roleKeyword}
|
||||
onChange={(event) => setRoleKeyword(event.target.value)}
|
||||
placeholder={t("user.searchRoles")}
|
||||
className="pl-9"
|
||||
disabled={rolesLoading}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="roleIds"
|
||||
render={({ field }) => {
|
||||
const value = field.value || []
|
||||
const selectedSet = new Set(value)
|
||||
return (
|
||||
<div className="mt-2 max-h-[240px] space-y-1 overflow-y-auto rounded-lg border p-2">
|
||||
{rolesLoading ? (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
{t("user.loadingRoles")}
|
||||
</div>
|
||||
) : filteredRoles.length > 0 ? (
|
||||
filteredRoles.map((role) => {
|
||||
const checked = selectedSet.has(role.id)
|
||||
const disabled = role.status !== Status.Ok && !checked
|
||||
return (
|
||||
<label
|
||||
key={role.id}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border px-2.5 py-2 text-sm transition-colors",
|
||||
disabled
|
||||
? "cursor-not-allowed border-dashed bg-muted/20 opacity-70"
|
||||
: "cursor-pointer hover:bg-muted/50",
|
||||
checked && "border-primary/40 bg-primary/5"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={(nextChecked) => {
|
||||
if (nextChecked) {
|
||||
field.onChange([...value, role.id])
|
||||
return
|
||||
}
|
||||
field.onChange(
|
||||
value.filter(
|
||||
(id: number) => id !== role.id
|
||||
)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<span className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{role.status === Status.Ok ? (
|
||||
<ShieldCheckIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<ShieldAlertIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate">
|
||||
{getRoleDisplayName(role.code, role.name, locale)}
|
||||
</span>
|
||||
{role.status !== Status.Ok ? (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{t("user.disabledBadge")}
|
||||
</Badge>
|
||||
) : null}
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
{t("user.emptyRoles")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<FieldError errors={[errors.roleIds]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</div>
|
||||
<DrawerFooter className="shrink-0 border-t bg-background">
|
||||
<Button type="submit" disabled={saving || rolesLoading}>
|
||||
{saving ? t("user.creating") : t("user.createUser")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
{t("user.cancel")}
|
||||
</Button>
|
||||
</DrawerFooter>
|
||||
</form>
|
||||
</DrawerContent>
|
||||
)
|
||||
}
|
||||
281
web/app/(dashboard)/dashboard/users/_components/edit.tsx
Normal file
281
web/app/(dashboard)/dashboard/users/_components/edit.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Controller, Resolver, useForm } from "react-hook-form"
|
||||
import { z } from "zod/v4"
|
||||
|
||||
import {
|
||||
type AdminUser,
|
||||
type UpdateAdminUserPayload,
|
||||
fetchUserDetail,
|
||||
} from "@/lib/api/admin"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import { ImageInput } from "@/components/image-input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from "@/components/ui/drawer"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
type UserEditDrawerProps = {
|
||||
open: boolean
|
||||
saving: boolean
|
||||
itemId: number | null
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (payload: UpdateAdminUserPayload) => Promise<void>
|
||||
}
|
||||
|
||||
const emptyForm: EditForm = {
|
||||
nickname: "",
|
||||
avatar: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
}
|
||||
|
||||
type EditForm = {
|
||||
nickname: string
|
||||
avatar: string
|
||||
mobile: string
|
||||
email: string
|
||||
}
|
||||
|
||||
function toNullableString(value: string) {
|
||||
const output = value.trim()
|
||||
return output ? output : null
|
||||
}
|
||||
|
||||
function buildForm(item: AdminUser | null): EditForm {
|
||||
if (!item) {
|
||||
return emptyForm
|
||||
}
|
||||
|
||||
return {
|
||||
nickname: item.nickname || "",
|
||||
avatar: item.avatar || "",
|
||||
mobile: item.mobile || "",
|
||||
email: item.email || "",
|
||||
}
|
||||
}
|
||||
|
||||
function buildPayload(userId: number, form: EditForm): UpdateAdminUserPayload {
|
||||
return {
|
||||
id: userId,
|
||||
nickname: form.nickname.trim(),
|
||||
avatar: form.avatar.trim(),
|
||||
mobile: toNullableString(form.mobile),
|
||||
email: toNullableString(form.email),
|
||||
remark: "",
|
||||
}
|
||||
}
|
||||
|
||||
export function EditDrawer({
|
||||
open,
|
||||
saving,
|
||||
itemId,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: UserEditDrawerProps) {
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={onOpenChange} direction="right">
|
||||
{open ? (
|
||||
<UserEditDrawerBody
|
||||
key={itemId ? `edit-${itemId}` : "edit"}
|
||||
itemId={itemId}
|
||||
saving={saving}
|
||||
onOpenChange={onOpenChange}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
) : null}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
type UserEditDrawerBodyProps = {
|
||||
saving: boolean
|
||||
itemId: number | null
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (payload: UpdateAdminUserPayload) => Promise<void>
|
||||
}
|
||||
|
||||
function UserEditDrawerBody({
|
||||
saving,
|
||||
itemId,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: UserEditDrawerBodyProps) {
|
||||
const t = useI18n()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [item, setItem] = useState<AdminUser | null>(null)
|
||||
const editFormSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
nickname: z.string().trim().min(1, t("user.nicknameRequired")),
|
||||
avatar: z.string().trim(),
|
||||
mobile: z
|
||||
.string()
|
||||
.trim()
|
||||
.refine(
|
||||
(value) => value.length === 0 || /^[0-9+\-\s]{6,20}$/.test(value),
|
||||
t("user.mobileInvalid")
|
||||
),
|
||||
email: z
|
||||
.string()
|
||||
.trim()
|
||||
.refine(
|
||||
(value) =>
|
||||
value.length === 0 || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
|
||||
t("user.emailInvalid")
|
||||
),
|
||||
}),
|
||||
[t]
|
||||
)
|
||||
const editFormResolver = useMemo(
|
||||
() => zodResolver(editFormSchema as never) as Resolver<EditForm>,
|
||||
[editFormSchema]
|
||||
)
|
||||
const form = useForm<EditForm>({
|
||||
resolver: editFormResolver,
|
||||
defaultValues: emptyForm,
|
||||
})
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
register,
|
||||
formState: { errors },
|
||||
} = form
|
||||
|
||||
useEffect(() => {
|
||||
async function loadDetail() {
|
||||
if (!itemId) {
|
||||
setItem(null)
|
||||
reset(emptyForm)
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await fetchUserDetail(itemId)
|
||||
setItem(data)
|
||||
reset(buildForm(data))
|
||||
} catch (error) {
|
||||
console.error("Failed to load user:", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
void loadDetail()
|
||||
}, [itemId, reset])
|
||||
|
||||
async function onFormSubmit(values: EditForm) {
|
||||
if (!itemId) {
|
||||
return
|
||||
}
|
||||
|
||||
await onSubmit(buildPayload(itemId, values))
|
||||
}
|
||||
|
||||
return (
|
||||
<DrawerContent className="min-w-2xl overflow-hidden">
|
||||
<DrawerHeader className="shrink-0">
|
||||
<DrawerTitle>{t("user.editTitle")}</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
{t("user.currentUser", { username: item?.username || "-" })}
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
{loading ? (
|
||||
<div className="flex min-h-0 flex-1 items-center justify-center py-12">
|
||||
<div className="text-muted-foreground">{t("user.loading")}</div>
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
className="flex min-h-0 flex-1 flex-col"
|
||||
onSubmit={handleSubmit(onFormSubmit)}
|
||||
>
|
||||
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 pb-4">
|
||||
<Field data-invalid={!!errors.nickname}>
|
||||
<FieldLabel htmlFor="user-nickname">{t("user.nickname")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="user-nickname"
|
||||
placeholder={t("user.nicknamePlaceholder")}
|
||||
aria-invalid={!!errors.nickname}
|
||||
{...register("nickname")}
|
||||
/>
|
||||
<FieldError errors={[errors.nickname]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.avatar}>
|
||||
<FieldLabel>{t("user.avatar")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="avatar"
|
||||
render={({ field }) => (
|
||||
<ImageInput
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={saving || loading}
|
||||
prefix="avatar"
|
||||
placeholder={t("user.avatarPlaceholder")}
|
||||
className="size-16 rounded-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.avatar]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.mobile}>
|
||||
<FieldLabel htmlFor="user-mobile">{t("user.mobile")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="user-mobile"
|
||||
placeholder={t("user.mobilePlaceholder")}
|
||||
aria-invalid={!!errors.mobile}
|
||||
{...register("mobile")}
|
||||
/>
|
||||
<FieldError errors={[errors.mobile]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.email}>
|
||||
<FieldLabel htmlFor="user-email">{t("user.email")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="user-email"
|
||||
placeholder={t("user.emailPlaceholder")}
|
||||
aria-invalid={!!errors.email}
|
||||
{...register("email")}
|
||||
/>
|
||||
<FieldError errors={[errors.email]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</div>
|
||||
<DrawerFooter className="shrink-0 border-t bg-background">
|
||||
<Button type="submit" disabled={saving || loading}>
|
||||
{saving ? t("user.saving") : t("user.saveEdit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
{t("user.cancel")}
|
||||
</Button>
|
||||
</DrawerFooter>
|
||||
</form>
|
||||
)}
|
||||
</DrawerContent>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { CopyIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
|
||||
type InitialPasswordDialogProps = {
|
||||
open: boolean
|
||||
username: string
|
||||
password: string
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function InitialPasswordDialog({
|
||||
open,
|
||||
username,
|
||||
password,
|
||||
onOpenChange,
|
||||
}: InitialPasswordDialogProps) {
|
||||
const t = useI18n()
|
||||
const [copying, setCopying] = useState(false)
|
||||
|
||||
async function handleCopy() {
|
||||
if (!password || copying) {
|
||||
return
|
||||
}
|
||||
|
||||
setCopying(true)
|
||||
try {
|
||||
await navigator.clipboard.writeText(password)
|
||||
toast.success(t("user.copied"))
|
||||
} catch {
|
||||
toast.error(t("user.copyFailed"))
|
||||
} finally {
|
||||
setCopying(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("user.createdTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("user.initialPasswordDescription", { username: username || "-" })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="rounded-md border bg-muted/35 p-4">
|
||||
<div className="text-xs text-muted-foreground">{t("user.initialPassword")}</div>
|
||||
<div className="mt-2 break-all font-mono text-base">{password}</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => void handleCopy()}
|
||||
disabled={copying || !password}
|
||||
>
|
||||
<CopyIcon />
|
||||
{copying ? t("user.copying") : t("user.copyPassword")}
|
||||
</Button>
|
||||
<Button type="button" onClick={() => onOpenChange(false)}>
|
||||
{t("user.close")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { CopyIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { type AdminUser } from "@/lib/api/admin"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
|
||||
type ResetPasswordDialogsProps = {
|
||||
open: boolean
|
||||
saving: boolean
|
||||
item: AdminUser | null
|
||||
password: string
|
||||
onOpenChange: (open: boolean) => void
|
||||
onConfirm: () => Promise<void>
|
||||
}
|
||||
|
||||
export function ResetPasswordDialogs({
|
||||
open,
|
||||
saving,
|
||||
item,
|
||||
password,
|
||||
onOpenChange,
|
||||
onConfirm,
|
||||
}: ResetPasswordDialogsProps) {
|
||||
const t = useI18n()
|
||||
const [copying, setCopying] = useState(false)
|
||||
const showingResult = password.trim().length > 0
|
||||
|
||||
async function handleCopy() {
|
||||
if (!password || copying) {
|
||||
return
|
||||
}
|
||||
|
||||
setCopying(true)
|
||||
try {
|
||||
await navigator.clipboard.writeText(password)
|
||||
toast.success(t("user.copied"))
|
||||
} catch {
|
||||
toast.error(t("user.copyFailed"))
|
||||
} finally {
|
||||
setCopying(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open && !showingResult} onOpenChange={onOpenChange}>
|
||||
<DialogContent showCloseButton={!saving}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("user.confirmResetTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("user.confirmResetDescription", { username: item?.username || "-" })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button onClick={() => void onConfirm()} disabled={saving}>
|
||||
{saving ? t("user.resetting") : t("user.confirmReset")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
{t("user.cancel")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={open && showingResult} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("user.resetSuccessTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("user.resetSuccessDescription", { username: item?.username || "-" })}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="rounded-md border bg-muted/35 p-4">
|
||||
<div className="text-xs text-muted-foreground">{t("user.newPassword")}</div>
|
||||
<div className="mt-2 break-all font-mono text-base">{password}</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => void handleCopy()} disabled={copying}>
|
||||
<CopyIcon />
|
||||
{copying ? t("user.copying") : t("user.copyPassword")}
|
||||
</Button>
|
||||
<Button type="button" onClick={() => onOpenChange(false)}>
|
||||
{t("user.close")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
534
web/app/(dashboard)/dashboard/users/page.tsx
Normal file
534
web/app/(dashboard)/dashboard/users/page.tsx
Normal file
@@ -0,0 +1,534 @@
|
||||
"use client"
|
||||
|
||||
import { type KeyboardEvent, useCallback, useMemo, useState } from "react"
|
||||
import {
|
||||
KeyRoundIcon,
|
||||
MoreHorizontalIcon,
|
||||
PlusIcon,
|
||||
SearchIcon,
|
||||
ShieldIcon,
|
||||
UserRoundIcon,
|
||||
} from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import {
|
||||
DashboardPage,
|
||||
DashboardTableShell,
|
||||
DashboardTableStateRow,
|
||||
DashboardToolbar,
|
||||
} from "@/components/dashboard-page"
|
||||
import {
|
||||
useDashboardPagedList,
|
||||
type DashboardListFilter,
|
||||
} from "@/components/dashboard/list"
|
||||
import { ListPagination } from "@/components/list-pagination"
|
||||
import {
|
||||
assignUserRoles,
|
||||
createUser,
|
||||
fetchRoleListAll,
|
||||
fetchUserDetail,
|
||||
fetchUsers,
|
||||
resetUserPassword,
|
||||
updateUser,
|
||||
updateUserStatus,
|
||||
type AdminRole,
|
||||
type AdminUser,
|
||||
type CreateAdminUserPayload,
|
||||
type ResetPasswordResult,
|
||||
type UpdateAdminUserPayload,
|
||||
} from "@/lib/api/admin"
|
||||
import { Status, UserType } from "@/lib/generated/enums"
|
||||
import { useAppLocale, useI18n } from "@/i18n/provider"
|
||||
import { getRoleDisplayName } from "@/lib/role-i18n"
|
||||
import { formatDateTime } from "@/lib/utils"
|
||||
import { AssignRolesDrawer } from "./_components/assign-roles"
|
||||
import { CreateUserDrawer } from "./_components/create"
|
||||
import { EditDrawer } from "./_components/edit"
|
||||
import { InitialPasswordDialog } from "./_components/initial-password-dialog"
|
||||
import { ResetPasswordDialogs } from "./_components/reset-password"
|
||||
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"
|
||||
|
||||
export default function DashboardUsersPage() {
|
||||
const t = useI18n()
|
||||
const { locale } = useAppLocale()
|
||||
const [creatingOpen, setCreatingOpen] = useState(false)
|
||||
const [savingCreate, setSavingCreate] = useState(false)
|
||||
const [initialPassword, setInitialPassword] = useState<{
|
||||
username: string
|
||||
password: string
|
||||
} | null>(null)
|
||||
const [savingEdit, setSavingEdit] = useState(false)
|
||||
const [savingPassword, setSavingPassword] = useState(false)
|
||||
const [savingRoles, setSavingRoles] = useState(false)
|
||||
const [editingUser, setEditingUser] = useState<AdminUser | null>(null)
|
||||
const [resettingUser, setResettingUser] = useState<AdminUser | null>(null)
|
||||
const [assigningRolesUser, setAssigningRolesUser] = useState<AdminUser | null>(null)
|
||||
const [assignRoleOptions, setAssignRoleOptions] = useState<AdminRole[]>([])
|
||||
const [assignRoleIds, setAssignRoleIds] = useState<number[]>([])
|
||||
const [assignRolesLoading, setAssignRolesLoading] = useState(false)
|
||||
const [resetPasswordResult, setResetPasswordResult] =
|
||||
useState<ResetPasswordResult | null>(null)
|
||||
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
|
||||
// Staff and portal visitors share one table, separated only by userType. The
|
||||
// segment keeps them from being read as one list, where an agent account looks
|
||||
// exactly like a visitor's self-registered account.
|
||||
const filters = useMemo<DashboardListFilter[]>(
|
||||
() => [
|
||||
{
|
||||
name: "username",
|
||||
label: t("user.filterUsername"),
|
||||
defaultValue: "",
|
||||
trim: true,
|
||||
},
|
||||
{
|
||||
name: "userType",
|
||||
label: t("user.filterUserType"),
|
||||
type: "segment",
|
||||
defaultValue: "all",
|
||||
allValue: "all",
|
||||
options: [
|
||||
{ value: "all", label: t("user.filterUserTypeAll") },
|
||||
{ value: UserType.Employee, label: t("user.filterUserTypeStaff") },
|
||||
{ value: UserType.User, label: t("user.filterUserTypeVisitor") },
|
||||
],
|
||||
},
|
||||
],
|
||||
[t],
|
||||
)
|
||||
const fetchList = useCallback(
|
||||
(query: Record<string, string | number | boolean | string[] | number[] | undefined>) =>
|
||||
fetchUsers({
|
||||
username: typeof query.username === "string" ? query.username : undefined,
|
||||
userType: typeof query.userType === "string" ? query.userType : undefined,
|
||||
page: Number(query.page),
|
||||
limit: Number(query.limit),
|
||||
}),
|
||||
[],
|
||||
)
|
||||
const list = useDashboardPagedList<AdminUser>({
|
||||
filters,
|
||||
fetchList,
|
||||
loadFailed: t("user.loadFailed"),
|
||||
})
|
||||
|
||||
function applyFilters() {
|
||||
list.applyFilters()
|
||||
}
|
||||
|
||||
function handleFilterKeyDown(event: KeyboardEvent<HTMLInputElement>) {
|
||||
if (event.key !== "Enter") {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function openEditDrawer(user: AdminUser) {
|
||||
setEditingUser(user)
|
||||
}
|
||||
|
||||
async function openAssignRolesDrawer(user: AdminUser) {
|
||||
setActionLoadingId(user.id)
|
||||
setAssigningRolesUser(user)
|
||||
setAssignRolesLoading(true)
|
||||
try {
|
||||
const [roles, userDetail] = await Promise.all([
|
||||
fetchRoleListAll(),
|
||||
fetchUserDetail(user.id),
|
||||
])
|
||||
setAssignRoleOptions(roles)
|
||||
setAssignRoleIds((userDetail.roles || []).map((role) => role.id))
|
||||
} catch (error) {
|
||||
setAssigningRolesUser(null)
|
||||
toast.error(error instanceof Error ? error.message : t("user.loadRoleAssignFailed"))
|
||||
} finally {
|
||||
setAssignRolesLoading(false)
|
||||
setActionLoadingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(nextPage: number) {
|
||||
list.handlePageChange(nextPage)
|
||||
}
|
||||
|
||||
function handleLimitChange(nextLimit: number) {
|
||||
list.handleLimitChange(nextLimit)
|
||||
}
|
||||
|
||||
function handleEditDrawerOpenChange(open: boolean) {
|
||||
if (savingEdit) {
|
||||
return
|
||||
}
|
||||
if (!open) {
|
||||
setEditingUser(null)
|
||||
}
|
||||
}
|
||||
|
||||
function handleCreateDrawerOpenChange(open: boolean) {
|
||||
if (savingCreate) {
|
||||
return
|
||||
}
|
||||
if (!open) {
|
||||
setCreatingOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateUser(payload: CreateAdminUserPayload) {
|
||||
if (savingCreate) {
|
||||
return
|
||||
}
|
||||
|
||||
setSavingCreate(true)
|
||||
try {
|
||||
const result = await createUser(payload)
|
||||
toast.success(t("user.created", { username: result.user.username }))
|
||||
setCreatingOpen(false)
|
||||
setInitialPassword({
|
||||
username: result.user.username,
|
||||
password: result.password,
|
||||
})
|
||||
await list.loadData()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : t("user.createFailed"))
|
||||
} finally {
|
||||
setSavingCreate(false)
|
||||
}
|
||||
}
|
||||
|
||||
function handleAssignRolesOpenChange(open: boolean) {
|
||||
if (savingRoles) {
|
||||
return
|
||||
}
|
||||
if (!open) {
|
||||
setAssigningRolesUser(null)
|
||||
setAssignRoleOptions([])
|
||||
setAssignRoleIds([])
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveUser(payload: UpdateAdminUserPayload) {
|
||||
if (savingEdit) {
|
||||
return
|
||||
}
|
||||
|
||||
setSavingEdit(true)
|
||||
try {
|
||||
await updateUser(payload)
|
||||
toast.success(t("user.updated", { username: editingUser?.username || t("user.fallbackUser") }))
|
||||
setEditingUser(null)
|
||||
await list.loadData()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : t("user.updateFailed"))
|
||||
} finally {
|
||||
setSavingEdit(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAssignRoles(roleIds: number[]) {
|
||||
if (!assigningRolesUser || savingRoles) {
|
||||
return
|
||||
}
|
||||
|
||||
setSavingRoles(true)
|
||||
try {
|
||||
await assignUserRoles(assigningRolesUser.id, roleIds)
|
||||
toast.success(t("user.rolesUpdated", { username: assigningRolesUser.username }))
|
||||
setAssigningRolesUser(null)
|
||||
setAssignRoleOptions([])
|
||||
setAssignRoleIds([])
|
||||
await list.loadData()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : t("user.saveRolesFailed"))
|
||||
} finally {
|
||||
setSavingRoles(false)
|
||||
}
|
||||
}
|
||||
|
||||
function openResetDrawer(user: AdminUser) {
|
||||
setResetPasswordResult(null)
|
||||
setResettingUser(user)
|
||||
}
|
||||
|
||||
function handleResetDrawerOpenChange(open: boolean) {
|
||||
if (savingPassword) {
|
||||
return
|
||||
}
|
||||
if (!open) {
|
||||
setResetPasswordResult(null)
|
||||
setResettingUser(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResetPassword() {
|
||||
if (!resettingUser || savingPassword) {
|
||||
return
|
||||
}
|
||||
|
||||
setSavingPassword(true)
|
||||
try {
|
||||
const result = await resetUserPassword(resettingUser.id)
|
||||
setResetPasswordResult(result)
|
||||
toast.success(t("user.passwordReset", { username: resettingUser.username }))
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : t("user.resetPasswordFailed"))
|
||||
} finally {
|
||||
setSavingPassword(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleStatus(user: AdminUser) {
|
||||
setActionLoadingId(user.id)
|
||||
try {
|
||||
const nextStatus = user.status === Status.Ok ? Status.Disabled : Status.Ok
|
||||
await updateUserStatus(user.id, nextStatus)
|
||||
toast.success(
|
||||
t("user.statusUpdated", {
|
||||
username: user.username,
|
||||
status: nextStatus === Status.Ok ? t("user.enabled") : t("user.disabled"),
|
||||
})
|
||||
)
|
||||
await list.loadData()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : t("user.statusUpdateFailed"))
|
||||
} finally {
|
||||
setActionLoadingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardPage>
|
||||
<DashboardToolbar
|
||||
actions={
|
||||
<Button onClick={() => setCreatingOpen(true)} disabled={list.loading}>
|
||||
<PlusIcon />
|
||||
{t("user.addUser")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<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={String(list.draftFilters.username ?? "")}
|
||||
onChange={(event) =>
|
||||
list.setDraftFilter("username", event.target.value)
|
||||
}
|
||||
onKeyDown={handleFilterKeyDown}
|
||||
placeholder={t("user.filterUsername")}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" onClick={applyFilters} disabled={list.loading}>
|
||||
{t("user.query")}
|
||||
</Button>
|
||||
</DashboardToolbar>
|
||||
<DashboardTableShell
|
||||
pagination={
|
||||
<ListPagination
|
||||
page={list.result.page.page}
|
||||
total={list.result.page.total}
|
||||
limit={list.result.page.limit}
|
||||
loading={list.loading}
|
||||
onPageChange={handlePageChange}
|
||||
onLimitChange={handleLimitChange}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/40">
|
||||
<TableRow>
|
||||
<TableHead className="w-20">ID</TableHead>
|
||||
<TableHead>{t("user.columnUser")}</TableHead>
|
||||
<TableHead>{t("user.columnUserType")}</TableHead>
|
||||
<TableHead>{t("user.columnRoles")}</TableHead>
|
||||
<TableHead>{t("user.columnStatus")}</TableHead>
|
||||
<TableHead>{t("user.columnContact")}</TableHead>
|
||||
<TableHead>{t("user.columnLastLogin")}</TableHead>
|
||||
<TableHead className="w-[92px] text-right">{t("user.columnActions")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{list.result.results.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="font-mono text-sm text-muted-foreground">
|
||||
{item.id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
<UserRoundIcon className="size-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{item.nickname || item.username}</div>
|
||||
<div className="text-xs text-muted-foreground">{item.username}</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={item.userType === UserType.Employee ? "secondary" : "outline"}>
|
||||
{item.userType === UserType.Employee
|
||||
? t("user.userTypeStaff")
|
||||
: t("user.userTypeVisitor")}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{(item.roles || []).length > 0 ? (
|
||||
item.roles?.map((role) => (
|
||||
<Badge key={role.id} variant="outline">
|
||||
<ShieldIcon className="size-3" />
|
||||
{getRoleDisplayName(role.code, role.name, locale)}
|
||||
</Badge>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">{t("user.unassigned")}</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={item.status === Status.Ok ? "secondary" : "outline"}>
|
||||
{item.status === Status.Ok ? t("user.enabled") : t("user.disabled")}
|
||||
</Badge>
|
||||
{item.isSystem ? (
|
||||
<Badge variant="outline" className="ml-2">
|
||||
{t("user.system")}
|
||||
</Badge>
|
||||
) : null}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">{item.mobile || "-"}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{item.email || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">{formatDateTime(item.lastLoginAt)}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{item.lastLoginIp || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<ButtonGroup className="ml-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => openEditDrawer(item)}
|
||||
disabled={actionLoadingId === item.id}
|
||||
>
|
||||
{t("user.edit")}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={<Button variant="outline" size="icon-sm" />}
|
||||
aria-label={t("user.moreActions", { username: item.username })}
|
||||
>
|
||||
<MoreHorizontalIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-40 min-w-40">
|
||||
<DropdownMenuItem
|
||||
onClick={() => void openAssignRolesDrawer(item)}
|
||||
disabled={actionLoadingId === item.id}
|
||||
>
|
||||
<ShieldIcon />
|
||||
{actionLoadingId === item.id
|
||||
? t("user.processing")
|
||||
: t("user.assignRoles")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => openResetDrawer(item)}
|
||||
disabled={actionLoadingId === item.id}
|
||||
>
|
||||
<KeyRoundIcon />
|
||||
{t("user.resetPassword")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleToggleStatus(item)}
|
||||
disabled={actionLoadingId === item.id}
|
||||
>
|
||||
<ShieldIcon />
|
||||
{actionLoadingId === item.id
|
||||
? t("user.processing")
|
||||
: item.status === Status.Ok
|
||||
? t("user.disabled")
|
||||
: t("user.enabled")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</ButtonGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{list.loading || list.result.results.length === 0 ? (
|
||||
<DashboardTableStateRow
|
||||
colSpan={7}
|
||||
loading={list.loading}
|
||||
loadingText={t("user.loadingRows")}
|
||||
emptyText={t("user.emptyRows")}
|
||||
/>
|
||||
) : null}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</DashboardTableShell>
|
||||
</DashboardPage>
|
||||
<CreateUserDrawer
|
||||
open={creatingOpen}
|
||||
saving={savingCreate}
|
||||
onOpenChange={handleCreateDrawerOpenChange}
|
||||
onSubmit={handleCreateUser}
|
||||
/>
|
||||
<InitialPasswordDialog
|
||||
open={!!initialPassword}
|
||||
username={initialPassword?.username ?? ""}
|
||||
password={initialPassword?.password ?? ""}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setInitialPassword(null)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<EditDrawer
|
||||
open={!!editingUser}
|
||||
saving={savingEdit}
|
||||
itemId={editingUser?.id ?? null}
|
||||
onOpenChange={handleEditDrawerOpenChange}
|
||||
onSubmit={handleSaveUser}
|
||||
/>
|
||||
<ResetPasswordDialogs
|
||||
open={!!resettingUser}
|
||||
saving={savingPassword}
|
||||
item={resettingUser}
|
||||
password={resetPasswordResult?.password || ""}
|
||||
onOpenChange={handleResetDrawerOpenChange}
|
||||
onConfirm={handleResetPassword}
|
||||
/>
|
||||
<AssignRolesDrawer
|
||||
open={!!assigningRolesUser}
|
||||
saving={savingRoles}
|
||||
loading={assignRolesLoading}
|
||||
item={assigningRolesUser}
|
||||
roles={assignRoleOptions}
|
||||
selectedRoleIds={assignRoleIds}
|
||||
onOpenChange={handleAssignRolesOpenChange}
|
||||
onSubmit={handleAssignRoles}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user