完整性更新
现在已经实现了大部分基础功能
This commit is contained in:
SpecialX
779
src/modules/school/components/grades-view.tsx
Normal file
779
src/modules/school/components/grades-view.tsx
Normal file
@@ -0,0 +1,779 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { parseAsString, useQueryState } from "nuqs"
|
||||
|
||||
import type { GradeListItem, SchoolListItem, StaffOption } from "../types"
|
||||
import { createGradeAction, deleteGradeAction, updateGradeAction } from "../actions"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/shared/components/ui/dropdown-menu"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/shared/components/ui/alert-dialog"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
|
||||
type FormState = {
|
||||
schoolId: string
|
||||
name: string
|
||||
order: string
|
||||
gradeHeadId: string
|
||||
teachingHeadId: string
|
||||
}
|
||||
|
||||
const toFormState = (item: GradeListItem | null, fallbackSchoolId: string): FormState => ({
|
||||
schoolId: item?.school.id ?? fallbackSchoolId,
|
||||
name: item?.name ?? "",
|
||||
order: String(item?.order ?? 0),
|
||||
gradeHeadId: item?.gradeHead?.id ?? "",
|
||||
teachingHeadId: item?.teachingHead?.id ?? "",
|
||||
})
|
||||
|
||||
type FormErrors = Partial<Record<keyof FormState, string>>
|
||||
|
||||
const normalizeName = (v: string) => v.trim().replace(/\s+/g, " ")
|
||||
|
||||
const NONE_SELECT_VALUE = "__none__"
|
||||
|
||||
const parseOrder = (raw: string) => {
|
||||
const v = raw.trim()
|
||||
if (!v) return 0
|
||||
const n = Number(v)
|
||||
if (!Number.isFinite(n) || !Number.isInteger(n) || n < 0) return null
|
||||
return n
|
||||
}
|
||||
|
||||
const validateForm = (
|
||||
state: FormState,
|
||||
params: { grades: GradeListItem[]; excludeGradeId?: string }
|
||||
): { ok: boolean; errors: FormErrors } => {
|
||||
const errors: FormErrors = {}
|
||||
|
||||
const schoolId = state.schoolId.trim()
|
||||
if (!schoolId) errors.schoolId = "请选择学校"
|
||||
|
||||
const name = normalizeName(state.name)
|
||||
if (!name) errors.name = "请输入年级名称"
|
||||
if (name.length > 100) errors.name = "年级名称最多 100 个字符"
|
||||
|
||||
const order = parseOrder(state.order)
|
||||
if (order === null) errors.order = "Order 必须是非负整数"
|
||||
|
||||
if (schoolId && name) {
|
||||
const dup = params.grades.find((g) => {
|
||||
if (params.excludeGradeId && g.id === params.excludeGradeId) return false
|
||||
return g.school.id === schoolId && normalizeName(g.name).toLowerCase() === name.toLowerCase()
|
||||
})
|
||||
if (dup) errors.name = "该学校下已存在同名年级"
|
||||
}
|
||||
|
||||
return { ok: Object.keys(errors).length === 0, errors }
|
||||
}
|
||||
|
||||
const formatStaffDetail = (u: StaffOption | null) => {
|
||||
if (!u) return <Badge variant="outline">未设置</Badge>
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="truncate">{u.name}</div>
|
||||
<div className="truncate text-xs text-muted-foreground">{u.email}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function GradesClient({
|
||||
grades,
|
||||
schools,
|
||||
staff,
|
||||
}: {
|
||||
grades: GradeListItem[]
|
||||
schools: SchoolListItem[]
|
||||
staff: StaffOption[]
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [editItem, setEditItem] = useState<GradeListItem | null>(null)
|
||||
const [deleteItem, setDeleteItem] = useState<GradeListItem | null>(null)
|
||||
|
||||
const [q, setQ] = useQueryState("q", parseAsString.withDefault(""))
|
||||
const [school, setSchool] = useQueryState("school", parseAsString.withDefault("all"))
|
||||
const [head, setHead] = useQueryState("head", parseAsString.withDefault("all"))
|
||||
const [sort, setSort] = useQueryState("sort", parseAsString.withDefault("default"))
|
||||
|
||||
const defaultSchoolId = useMemo(() => schools[0]?.id ?? "", [schools])
|
||||
const [createState, setCreateState] = useState<FormState>(() => toFormState(null, defaultSchoolId))
|
||||
const [editState, setEditState] = useState<FormState>(() => toFormState(null, defaultSchoolId))
|
||||
|
||||
useEffect(() => {
|
||||
if (!createOpen) return
|
||||
if (createState.schoolId.trim().length > 0) return
|
||||
if (!defaultSchoolId) return
|
||||
setCreateState((p) => ({ ...p, schoolId: defaultSchoolId }))
|
||||
}, [createOpen, createState.schoolId, defaultSchoolId])
|
||||
|
||||
useEffect(() => {
|
||||
if (!editItem) return
|
||||
if (editState.schoolId.trim().length > 0) return
|
||||
if (!defaultSchoolId) return
|
||||
setEditState((p) => ({ ...p, schoolId: defaultSchoolId }))
|
||||
}, [editItem, editState.schoolId, defaultSchoolId])
|
||||
|
||||
const staffOptions = useMemo(() => {
|
||||
return [...staff].sort((a, b) => {
|
||||
const byName = a.name.localeCompare(b.name)
|
||||
if (byName !== 0) return byName
|
||||
return a.email.localeCompare(b.email)
|
||||
})
|
||||
}, [staff])
|
||||
|
||||
const filteredGrades = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase()
|
||||
const bySchool = school === "all" ? "" : school
|
||||
|
||||
return grades
|
||||
.filter((g) => {
|
||||
if (bySchool && g.school.id !== bySchool) return false
|
||||
if (head === "missing") {
|
||||
if (g.gradeHead || g.teachingHead) return false
|
||||
}
|
||||
if (head === "missing_grade_head") {
|
||||
if (g.gradeHead) return false
|
||||
}
|
||||
if (head === "missing_teaching_head") {
|
||||
if (g.teachingHead) return false
|
||||
}
|
||||
|
||||
if (!needle) return true
|
||||
const hay = [
|
||||
g.name,
|
||||
g.school.name,
|
||||
g.gradeHead?.name ?? "",
|
||||
g.gradeHead?.email ?? "",
|
||||
g.teachingHead?.name ?? "",
|
||||
g.teachingHead?.email ?? "",
|
||||
]
|
||||
.join(" ")
|
||||
.toLowerCase()
|
||||
return hay.includes(needle)
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (sort === "updated_desc") return b.updatedAt.localeCompare(a.updatedAt)
|
||||
if (sort === "updated_asc") return a.updatedAt.localeCompare(b.updatedAt)
|
||||
if (sort === "name_asc") return a.name.localeCompare(b.name)
|
||||
if (sort === "name_desc") return b.name.localeCompare(a.name)
|
||||
if (sort === "order_asc") return a.order - b.order
|
||||
if (sort === "order_desc") return b.order - a.order
|
||||
return 0
|
||||
})
|
||||
}, [grades, head, q, school, sort])
|
||||
|
||||
const hasFilters = q.length > 0 || school !== "all" || head !== "all" || sort !== "default"
|
||||
|
||||
const openEdit = (item: GradeListItem) => {
|
||||
setEditItem(item)
|
||||
setEditState(toFormState(item, defaultSchoolId))
|
||||
}
|
||||
|
||||
const openCreate = () => {
|
||||
setCreateState(toFormState(null, defaultSchoolId))
|
||||
setCreateOpen(true)
|
||||
}
|
||||
|
||||
const createValidation = useMemo(() => validateForm(createState, { grades }), [createState, grades])
|
||||
const editValidation = useMemo(
|
||||
() => validateForm(editState, { grades, excludeGradeId: editItem?.id }),
|
||||
[editItem?.id, editState, grades]
|
||||
)
|
||||
|
||||
const isEditDirty = useMemo(() => {
|
||||
if (!editItem) return false
|
||||
const next = {
|
||||
schoolId: editState.schoolId.trim(),
|
||||
name: normalizeName(editState.name),
|
||||
order: parseOrder(editState.order),
|
||||
gradeHeadId: editState.gradeHeadId || "",
|
||||
teachingHeadId: editState.teachingHeadId || "",
|
||||
}
|
||||
const prev = {
|
||||
schoolId: editItem.school.id,
|
||||
name: normalizeName(editItem.name),
|
||||
order: editItem.order,
|
||||
gradeHeadId: editItem.gradeHead?.id ?? "",
|
||||
teachingHeadId: editItem.teachingHead?.id ?? "",
|
||||
}
|
||||
return (
|
||||
next.schoolId !== prev.schoolId ||
|
||||
next.name !== prev.name ||
|
||||
(typeof next.order === "number" ? next.order : null) !== prev.order ||
|
||||
next.gradeHeadId !== prev.gradeHeadId ||
|
||||
next.teachingHeadId !== prev.teachingHeadId
|
||||
)
|
||||
}, [editItem, editState])
|
||||
|
||||
const handleCreate = async () => {
|
||||
const validation = validateForm(createState, { grades })
|
||||
if (!validation.ok) {
|
||||
toast.error(Object.values(validation.errors)[0] || "请完善表单信息")
|
||||
return
|
||||
}
|
||||
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.set("schoolId", createState.schoolId)
|
||||
fd.set("name", normalizeName(createState.name))
|
||||
fd.set("order", createState.order)
|
||||
fd.set("gradeHeadId", createState.gradeHeadId)
|
||||
fd.set("teachingHeadId", createState.teachingHeadId)
|
||||
|
||||
const res = await createGradeAction(undefined, fd)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setCreateOpen(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to create grade")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to create grade")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdate = async () => {
|
||||
if (!editItem) return
|
||||
const validation = validateForm(editState, { grades, excludeGradeId: editItem.id })
|
||||
if (!validation.ok) {
|
||||
toast.error(Object.values(validation.errors)[0] || "请完善表单信息")
|
||||
return
|
||||
}
|
||||
if (!isEditDirty) {
|
||||
toast.message("没有可保存的变更")
|
||||
return
|
||||
}
|
||||
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.set("schoolId", editState.schoolId)
|
||||
fd.set("name", normalizeName(editState.name))
|
||||
fd.set("order", editState.order)
|
||||
fd.set("gradeHeadId", editState.gradeHeadId)
|
||||
fd.set("teachingHeadId", editState.teachingHeadId)
|
||||
|
||||
const res = await updateGradeAction(editItem.id, undefined, fd)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setEditItem(null)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to update grade")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to update grade")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteItem) return
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await deleteGradeAction(deleteItem.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setDeleteItem(null)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to delete grade")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to delete grade")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-1 flex-col gap-2 md:flex-row md:items-center">
|
||||
<div className="flex-1 md:max-w-sm">
|
||||
<Input placeholder="搜索年级/学校/组长..." value={q} onChange={(e) => setQ(e.target.value || null)} />
|
||||
</div>
|
||||
|
||||
<Select value={school} onValueChange={(v) => setSchool(v === "all" ? null : v)}>
|
||||
<SelectTrigger className="w-full md:w-[220px]">
|
||||
<SelectValue placeholder="学校" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部学校</SelectItem>
|
||||
{schools.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={head} onValueChange={(v) => setHead(v === "all" ? null : v)}>
|
||||
<SelectTrigger className="w-full md:w-[220px]">
|
||||
<SelectValue placeholder="负责人" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部</SelectItem>
|
||||
<SelectItem value="missing">两者都未设置</SelectItem>
|
||||
<SelectItem value="missing_grade_head">未设置年级组长</SelectItem>
|
||||
<SelectItem value="missing_teaching_head">未设置教研组长</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={sort} onValueChange={(v) => setSort(v === "default" ? null : v)}>
|
||||
<SelectTrigger className="w-full md:w-[220px]">
|
||||
<SelectValue placeholder="排序" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">默认排序</SelectItem>
|
||||
<SelectItem value="updated_desc">更新时间（新→旧）</SelectItem>
|
||||
<SelectItem value="updated_asc">更新时间（旧→新）</SelectItem>
|
||||
<SelectItem value="name_asc">年级名称（A→Z）</SelectItem>
|
||||
<SelectItem value="name_desc">年级名称（Z→A）</SelectItem>
|
||||
<SelectItem value="order_asc">Order（小→大）</SelectItem>
|
||||
<SelectItem value="order_desc">Order（大→小）</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{hasFilters ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setQ(null)
|
||||
setSchool(null)
|
||||
setHead(null)
|
||||
setSort(null)
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<Button onClick={openCreate} disabled={isWorking || schools.length === 0}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
新建年级
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">年级列表</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{filteredGrades.length}
|
||||
</Badge>
|
||||
{filteredGrades.length !== grades.length ? (
|
||||
<div className="text-xs text-muted-foreground tabular-nums">/ {grades.length}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{schools.length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无学校"
|
||||
description="请先创建学校，再在学校下创建年级。"
|
||||
className="h-auto border-none shadow-none"
|
||||
/>
|
||||
) : filteredGrades.length === 0 ? (
|
||||
<EmptyState
|
||||
title={grades.length === 0 ? "暂无年级" : "没有匹配结果"}
|
||||
description={grades.length === 0 ? "创建年级以便管理负责人和班级。" : "尝试修改筛选条件或清空搜索。"}
|
||||
className="h-auto border-none shadow-none"
|
||||
/>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>学校</TableHead>
|
||||
<TableHead>年级</TableHead>
|
||||
<TableHead>Order</TableHead>
|
||||
<TableHead>年级组长</TableHead>
|
||||
<TableHead>教研组长</TableHead>
|
||||
<TableHead>更新时间</TableHead>
|
||||
<TableHead className="w-[60px]" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredGrades.map((g) => (
|
||||
<TableRow key={g.id}>
|
||||
<TableCell className="text-muted-foreground">{g.school.name}</TableCell>
|
||||
<TableCell className="font-medium">{g.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{g.order}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatStaffDetail(g.gradeHead)}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatStaffDetail(g.teachingHead)}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatDate(g.updatedAt)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={isWorking}>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
router.push(`/admin/school/grades/insights?gradeId=${encodeURIComponent(g.id)}`)
|
||||
}
|
||||
>
|
||||
学情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => openEdit(g)}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => setDeleteItem(g)}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<DialogContent className="sm:max-w-[560px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建年级</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form
|
||||
className="space-y-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
void handleCreate()
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">School</Label>
|
||||
<div className="col-span-3">
|
||||
<Select
|
||||
value={createState.schoolId}
|
||||
onValueChange={(v) => setCreateState((p) => ({ ...p, schoolId: v }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a school" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{schools.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{createValidation.errors.schoolId ? (
|
||||
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
||||
{createValidation.errors.schoolId}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-grade-name" className="text-right">
|
||||
Grade
|
||||
</Label>
|
||||
<Input
|
||||
id="create-grade-name"
|
||||
className="col-span-3"
|
||||
value={createState.name}
|
||||
onChange={(e) => setCreateState((p) => ({ ...p, name: e.target.value }))}
|
||||
placeholder="e.g. Grade 10"
|
||||
autoFocus
|
||||
/>
|
||||
{createValidation.errors.name ? (
|
||||
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
||||
{createValidation.errors.name}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-grade-order" className="text-right">
|
||||
Order
|
||||
</Label>
|
||||
<Input
|
||||
id="create-grade-order"
|
||||
className="col-span-3"
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={0}
|
||||
step={1}
|
||||
value={createState.order}
|
||||
onChange={(e) => setCreateState((p) => ({ ...p, order: e.target.value }))}
|
||||
/>
|
||||
{createValidation.errors.order ? (
|
||||
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
||||
{createValidation.errors.order}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">年级组长</Label>
|
||||
<div className="col-span-3">
|
||||
<Select
|
||||
value={createState.gradeHeadId}
|
||||
onValueChange={(v) =>
|
||||
setCreateState((p) => ({ ...p, gradeHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Optional" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
||||
{staffOptions.map((u) => (
|
||||
<SelectItem key={u.id} value={u.id}>
|
||||
{u.name} ({u.email})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">教研组长</Label>
|
||||
<div className="col-span-3">
|
||||
<Select
|
||||
value={createState.teachingHeadId}
|
||||
onValueChange={(v) =>
|
||||
setCreateState((p) => ({ ...p, teachingHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Optional" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
||||
{staffOptions.map((u) => (
|
||||
<SelectItem key={u.id} value={u.id}>
|
||||
{u.name} ({u.email})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => setCreateOpen(false)} disabled={isWorking}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isWorking}>
|
||||
创建
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(editItem)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setEditItem(null)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[560px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑年级</DialogTitle>
|
||||
</DialogHeader>
|
||||
{editItem ? (
|
||||
<form
|
||||
className="space-y-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
void handleUpdate()
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">School</Label>
|
||||
<div className="col-span-3">
|
||||
<Select
|
||||
value={editState.schoolId}
|
||||
onValueChange={(v) => setEditState((p) => ({ ...p, schoolId: v }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a school" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{schools.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{editValidation.errors.schoolId ? (
|
||||
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
||||
{editValidation.errors.schoolId}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="edit-grade-name" className="text-right">
|
||||
Grade
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-grade-name"
|
||||
className="col-span-3"
|
||||
value={editState.name}
|
||||
onChange={(e) => setEditState((p) => ({ ...p, name: e.target.value }))}
|
||||
/>
|
||||
{editValidation.errors.name ? (
|
||||
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
||||
{editValidation.errors.name}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="edit-grade-order" className="text-right">
|
||||
Order
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-grade-order"
|
||||
className="col-span-3"
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
min={0}
|
||||
step={1}
|
||||
value={editState.order}
|
||||
onChange={(e) => setEditState((p) => ({ ...p, order: e.target.value }))}
|
||||
/>
|
||||
{editValidation.errors.order ? (
|
||||
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
||||
{editValidation.errors.order}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">年级组长</Label>
|
||||
<div className="col-span-3">
|
||||
<Select
|
||||
value={editState.gradeHeadId}
|
||||
onValueChange={(v) =>
|
||||
setEditState((p) => ({ ...p, gradeHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Optional" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
||||
{staffOptions.map((u) => (
|
||||
<SelectItem key={u.id} value={u.id}>
|
||||
{u.name} ({u.email})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">教研组长</Label>
|
||||
<div className="col-span-3">
|
||||
<Select
|
||||
value={editState.teachingHeadId}
|
||||
onValueChange={(v) =>
|
||||
setEditState((p) => ({ ...p, teachingHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Optional" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
||||
{staffOptions.map((u) => (
|
||||
<SelectItem key={u.id} value={u.id}>
|
||||
{u.name} ({u.email})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => setEditItem(null)} disabled={isWorking}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isWorking}>
|
||||
保存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog
|
||||
open={Boolean(deleteItem)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setDeleteItem(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>删除年级</AlertDialogTitle>
|
||||
<AlertDialogDescription>将永久删除 {deleteItem?.name || "该年级"}。</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isWorking}>取消</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} disabled={isWorking}>
|
||||
删除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user