mlogclub
548 lines
19 KiB
TypeScript
548 lines
19 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react"
|
|
import { ArrowLeftIcon, CheckIcon, Loader2Icon, XIcon } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import { OptionCombobox } from "@/components/option-combobox"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
fetchAgentTeamsAll,
|
|
generateAgentTeamScheduleBatch,
|
|
previewAgentTeamScheduleBatch,
|
|
type AdminAgentTeam,
|
|
type AdminAgentTeamScheduleBatchPreview,
|
|
type BatchAdminAgentTeamSchedulePayload,
|
|
} from "@/lib/api/admin"
|
|
import { useI18n } from "@/i18n/provider"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type BatchScheduleDialogProps = {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onSuccess: (created: number) => void | Promise<void>
|
|
}
|
|
|
|
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
|
|
|
const weekdayKeys = [
|
|
"weekdayMon",
|
|
"weekdayTue",
|
|
"weekdayWed",
|
|
"weekdayThu",
|
|
"weekdayFri",
|
|
"weekdaySat",
|
|
"weekdaySun",
|
|
] as const
|
|
|
|
function getWeekdayOptions(t: TFunction) {
|
|
return weekdayKeys.map((key, index) => ({
|
|
value: index + 1,
|
|
label: t(`agentTeamSchedule.${key}`),
|
|
}))
|
|
}
|
|
|
|
function todayDateValue() {
|
|
const today = new Date()
|
|
const year = today.getFullYear()
|
|
const month = String(today.getMonth() + 1).padStart(2, "0")
|
|
const day = String(today.getDate()).padStart(2, "0")
|
|
return `${year}-${month}-${day}`
|
|
}
|
|
|
|
function defaultFormState() {
|
|
const today = todayDateValue()
|
|
return {
|
|
selectedTeamIds: [] as number[],
|
|
startDate: today,
|
|
endDate: today,
|
|
weekdays: [1, 2, 3, 4, 5],
|
|
startTime: "09:00",
|
|
endTime: "18:00",
|
|
remark: "",
|
|
}
|
|
}
|
|
|
|
type BatchFormState = ReturnType<typeof defaultFormState>
|
|
type DialogStep = "form" | "preview"
|
|
|
|
function buildPayload(form: BatchFormState): BatchAdminAgentTeamSchedulePayload {
|
|
return {
|
|
teamIds: [...form.selectedTeamIds],
|
|
startDate: form.startDate,
|
|
endDate: form.endDate,
|
|
weekdays: [...form.weekdays],
|
|
startTime: form.startTime,
|
|
endTime: form.endTime,
|
|
remark: form.remark.trim(),
|
|
}
|
|
}
|
|
|
|
function getWeekdayLabel(value: number, t: TFunction) {
|
|
const weekdayOptions = getWeekdayOptions(t)
|
|
return weekdayOptions.find((option) => option.value === value)?.label ?? String(value)
|
|
}
|
|
|
|
function validateForm(form: BatchFormState, t: TFunction) {
|
|
const today = todayDateValue()
|
|
if (form.selectedTeamIds.length === 0) {
|
|
return t("agentTeamSchedule.selectAtLeastOneTeam")
|
|
}
|
|
if (!form.startDate || !form.endDate) {
|
|
return t("agentTeamSchedule.selectDateRange")
|
|
}
|
|
if (form.startDate < today) {
|
|
return t("agentTeamSchedule.startBeforeToday")
|
|
}
|
|
if (form.endDate < form.startDate) {
|
|
return t("agentTeamSchedule.endBeforeStart")
|
|
}
|
|
if (form.weekdays.length === 0) {
|
|
return t("agentTeamSchedule.selectAtLeastOneWeekday")
|
|
}
|
|
if (!form.startTime || !form.endTime) {
|
|
return t("agentTeamSchedule.selectStartEndTime")
|
|
}
|
|
if (form.endTime <= form.startTime) {
|
|
return t("agentTeamSchedule.endAfterStart")
|
|
}
|
|
return ""
|
|
}
|
|
|
|
export function BatchScheduleDialog({
|
|
open,
|
|
onOpenChange,
|
|
onSuccess,
|
|
}: BatchScheduleDialogProps) {
|
|
const t = useI18n()
|
|
const [teams, setTeams] = useState<AdminAgentTeam[]>([])
|
|
const [form, setForm] = useState(defaultFormState)
|
|
const [step, setStep] = useState<DialogStep>("form")
|
|
const [preview, setPreview] = useState<AdminAgentTeamScheduleBatchPreview | null>(null)
|
|
const [previewPayload, setPreviewPayload] = useState<BatchAdminAgentTeamSchedulePayload | null>(null)
|
|
const [loadingTeams, setLoadingTeams] = useState(false)
|
|
const [previewing, setPreviewing] = useState(false)
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const openRef = useRef(open)
|
|
const previewRequestIdRef = useRef(0)
|
|
const busy = loadingTeams || previewing || submitting
|
|
const weekdayOptions = useMemo(() => getWeekdayOptions(t), [t])
|
|
|
|
const teamOptions = useMemo(
|
|
() =>
|
|
teams
|
|
.filter((team) => !form.selectedTeamIds.includes(team.id))
|
|
.map((team) => ({ value: String(team.id), label: team.name })),
|
|
[form.selectedTeamIds, teams]
|
|
)
|
|
|
|
const selectedTeams = useMemo(() => {
|
|
const teamMap = new Map(teams.map((team) => [team.id, team]))
|
|
return form.selectedTeamIds.map((teamId) => teamMap.get(teamId)).filter(Boolean) as AdminAgentTeam[]
|
|
}, [form.selectedTeamIds, teams])
|
|
|
|
const selectedWeekdays = useMemo(
|
|
() => new Set(form.weekdays),
|
|
[form.weekdays]
|
|
)
|
|
|
|
const hasConflict = preview?.conflict === true
|
|
|
|
useEffect(() => {
|
|
openRef.current = open
|
|
}, [open])
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
previewRequestIdRef.current += 1
|
|
setForm(defaultFormState())
|
|
setStep("form")
|
|
setPreview(null)
|
|
setPreviewPayload(null)
|
|
setPreviewing(false)
|
|
setSubmitting(false)
|
|
return
|
|
}
|
|
|
|
let ignore = false
|
|
async function loadTeams() {
|
|
setLoadingTeams(true)
|
|
try {
|
|
const data = await fetchAgentTeamsAll()
|
|
if (!ignore) {
|
|
setTeams(data)
|
|
}
|
|
} catch (error) {
|
|
if (!ignore) {
|
|
toast.error(error instanceof Error ? error.message : t("agentTeamSchedule.loadTeamsFailed"))
|
|
}
|
|
} finally {
|
|
if (!ignore) {
|
|
setLoadingTeams(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
void loadTeams()
|
|
return () => {
|
|
ignore = true
|
|
}
|
|
}, [open, t])
|
|
|
|
function updateForm(values: Partial<BatchFormState>) {
|
|
previewRequestIdRef.current += 1
|
|
setForm((current) => ({ ...current, ...values }))
|
|
setPreview(null)
|
|
setPreviewPayload(null)
|
|
setPreviewing(false)
|
|
setStep("form")
|
|
}
|
|
|
|
function handleOpenChange(nextOpen: boolean) {
|
|
if (!nextOpen && busy) {
|
|
return
|
|
}
|
|
onOpenChange(nextOpen)
|
|
}
|
|
|
|
function handleTeamSelect(value: string) {
|
|
const teamId = Number(value)
|
|
if (!Number.isFinite(teamId) || form.selectedTeamIds.includes(teamId)) {
|
|
return
|
|
}
|
|
updateForm({ selectedTeamIds: [...form.selectedTeamIds, teamId] })
|
|
}
|
|
|
|
function removeTeam(teamId: number) {
|
|
updateForm({
|
|
selectedTeamIds: form.selectedTeamIds.filter((selectedTeamId) => selectedTeamId !== teamId),
|
|
})
|
|
}
|
|
|
|
function toggleWeekday(weekday: number) {
|
|
const nextWeekdays = selectedWeekdays.has(weekday)
|
|
? form.weekdays.filter((value) => value !== weekday)
|
|
: [...form.weekdays, weekday].sort((a, b) => a - b)
|
|
updateForm({ weekdays: nextWeekdays })
|
|
}
|
|
|
|
async function handlePreview() {
|
|
const validationMessage = validateForm(form, t)
|
|
if (validationMessage) {
|
|
toast.error(validationMessage)
|
|
return
|
|
}
|
|
|
|
const payload = buildPayload(form)
|
|
const requestId = previewRequestIdRef.current + 1
|
|
previewRequestIdRef.current = requestId
|
|
setPreviewing(true)
|
|
try {
|
|
const data = await previewAgentTeamScheduleBatch(payload)
|
|
if (!openRef.current || previewRequestIdRef.current !== requestId) {
|
|
return
|
|
}
|
|
setPreview(data)
|
|
setPreviewPayload(payload)
|
|
setStep("preview")
|
|
} catch (error) {
|
|
if (openRef.current && previewRequestIdRef.current === requestId) {
|
|
toast.error(error instanceof Error ? error.message : t("agentTeamSchedule.previewFailed"))
|
|
}
|
|
} finally {
|
|
if (openRef.current && previewRequestIdRef.current === requestId) {
|
|
setPreviewing(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
if (!preview || !previewPayload) {
|
|
toast.error(t("agentTeamSchedule.previewFirst"))
|
|
return
|
|
}
|
|
if (preview.conflict) {
|
|
toast.error(t("agentTeamSchedule.conflictCannotSubmit"))
|
|
return
|
|
}
|
|
|
|
const payload = previewPayload
|
|
setSubmitting(true)
|
|
try {
|
|
const data = await generateAgentTeamScheduleBatch(payload)
|
|
toast.success(t("agentTeamSchedule.batchCreated", { count: data.created }))
|
|
setPreview(null)
|
|
setPreviewPayload(null)
|
|
onOpenChange(false)
|
|
try {
|
|
await onSuccess(data.created)
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? t("agentTeamSchedule.batchRefreshFailed", { message: error.message }) : t("agentTeamSchedule.batchRefreshFailedFallback"))
|
|
}
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("agentTeamSchedule.generateFailed"))
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl">
|
|
<DialogHeader className="shrink-0 px-6 pt-6">
|
|
<DialogTitle>{t("agentTeamSchedule.batch")}</DialogTitle>
|
|
<DialogDescription>
|
|
{t("agentTeamSchedule.batchDescription")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
|
|
{step === "form" ? (
|
|
<div className="space-y-5">
|
|
<div className="space-y-2">
|
|
<Label>{t("agentTeamSchedule.team")}</Label>
|
|
<div className="flex gap-2">
|
|
<div className="min-w-0 flex-1">
|
|
<OptionCombobox
|
|
value=""
|
|
options={teamOptions}
|
|
placeholder={loadingTeams ? t("agentTeamSchedule.loadingTeams") : t("agentTeamSchedule.addTeam")}
|
|
searchPlaceholder={t("agentTeamSchedule.searchTeam")}
|
|
emptyText={teams.length === 0 ? t("agentTeamSchedule.noTeams") : t("agentTeamSchedule.allTeamsSelected")}
|
|
disabled={loadingTeams}
|
|
onChange={handleTeamSelect}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{selectedTeams.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedTeams.map((team) => (
|
|
<Badge key={team.id} variant="secondary" className="gap-1 pr-1">
|
|
<span className="max-w-44 truncate">{team.name}</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="size-5 rounded-sm"
|
|
onClick={() => removeTeam(team.id)}
|
|
aria-label={t("agentTeamSchedule.removeTeam", { name: team.name })}
|
|
>
|
|
<XIcon className="size-3" />
|
|
</Button>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-muted-foreground">{t("agentTeamSchedule.noSelectedTeams")}</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="batch-schedule-start-date">{t("agentTeamSchedule.startDate")}</Label>
|
|
<Input
|
|
id="batch-schedule-start-date"
|
|
type="date"
|
|
min={todayDateValue()}
|
|
value={form.startDate}
|
|
onChange={(event) => updateForm({ startDate: event.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="batch-schedule-end-date">{t("agentTeamSchedule.endDate")}</Label>
|
|
<Input
|
|
id="batch-schedule-end-date"
|
|
type="date"
|
|
min={form.startDate || todayDateValue()}
|
|
value={form.endDate}
|
|
onChange={(event) => updateForm({ endDate: event.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>{t("agentTeamSchedule.weekday")}</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{weekdayOptions.map((option) => {
|
|
const selected = selectedWeekdays.has(option.value)
|
|
return (
|
|
<Button
|
|
key={option.value}
|
|
type="button"
|
|
variant={selected ? "default" : "outline"}
|
|
size="sm"
|
|
aria-pressed={selected}
|
|
onClick={() => toggleWeekday(option.value)}
|
|
>
|
|
{selected ? <CheckIcon className="size-4" /> : null}
|
|
{option.label}
|
|
</Button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="batch-schedule-start-time">{t("agentTeamSchedule.startTime")}</Label>
|
|
<Input
|
|
id="batch-schedule-start-time"
|
|
type="time"
|
|
value={form.startTime}
|
|
onChange={(event) => updateForm({ startTime: event.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="batch-schedule-end-time">{t("agentTeamSchedule.endTime")}</Label>
|
|
<Input
|
|
id="batch-schedule-end-time"
|
|
type="time"
|
|
value={form.endTime}
|
|
onChange={(event) => updateForm({ endTime: event.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="batch-schedule-remark">{t("agentTeamSchedule.remark")}</Label>
|
|
<Textarea
|
|
id="batch-schedule-remark"
|
|
rows={4}
|
|
placeholder={t("agentTeamSchedule.remarkPlaceholder")}
|
|
value={form.remark}
|
|
onChange={(event) => updateForm({ remark: event.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="text-sm text-muted-foreground">
|
|
{hasConflict
|
|
? t("agentTeamSchedule.previewSummaryConflict", { total: preview?.total ?? 0 })
|
|
: t("agentTeamSchedule.previewSummaryReady", { total: preview?.total ?? 0 })}
|
|
</div>
|
|
{hasConflict ? (
|
|
<Badge variant="destructive">{t("agentTeamSchedule.hasConflict")}</Badge>
|
|
) : (
|
|
<Badge variant="secondary">{t("agentTeamSchedule.noConflict")}</Badge>
|
|
)}
|
|
</div>
|
|
<div className="overflow-x-auto rounded-lg border">
|
|
<div className="min-w-[760px]">
|
|
<Table>
|
|
<TableHeader className="bg-muted/40">
|
|
<TableRow>
|
|
<TableHead>{t("agentTeamSchedule.team")}</TableHead>
|
|
<TableHead>{t("agentTeamSchedule.date")}</TableHead>
|
|
<TableHead>{t("agentTeamSchedule.weekday")}</TableHead>
|
|
<TableHead>{t("agentTeamSchedule.time")}</TableHead>
|
|
<TableHead>{t("agentTeamSchedule.remark")}</TableHead>
|
|
<TableHead>{t("agentTeamSchedule.status")}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{preview?.items.map((item, index) => (
|
|
<TableRow
|
|
key={`${item.teamId}-${item.startAt}-${index}`}
|
|
className={cn(
|
|
item.conflict && "bg-destructive/10 text-destructive hover:bg-destructive/10"
|
|
)}
|
|
>
|
|
<TableCell>
|
|
<div className="font-medium">{item.teamName || t("agentTeamSchedule.teamFallback", { id: item.teamId })}</div>
|
|
<div className="text-xs text-muted-foreground">{t("agentTeamSchedule.teamId", { id: item.teamId })}</div>
|
|
</TableCell>
|
|
<TableCell>{item.date}</TableCell>
|
|
<TableCell>{getWeekdayLabel(item.weekday, t)}</TableCell>
|
|
<TableCell>
|
|
{item.startAt.slice(11, 16)} - {item.endAt.slice(11, 16)}
|
|
</TableCell>
|
|
<TableCell className="max-w-56 truncate">{item.remark || "-"}</TableCell>
|
|
<TableCell>
|
|
{item.conflict ? (
|
|
<span className="font-medium">
|
|
{item.conflictReason || t("agentTeamSchedule.conflictFallback")}
|
|
</span>
|
|
) : (
|
|
<span className="text-muted-foreground">{t("agentTeamSchedule.canGenerate")}</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{preview && preview.items.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="py-10 text-center text-muted-foreground">
|
|
{t("agentTeamSchedule.emptyPreview")}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : null}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="mx-0 mb-0 shrink-0 border-t px-6 py-4">
|
|
{step === "preview" ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setStep("form")}
|
|
disabled={submitting}
|
|
>
|
|
<ArrowLeftIcon />
|
|
{t("agentTeamSchedule.backToEdit")}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => handleOpenChange(false)}
|
|
disabled={busy}
|
|
>
|
|
{t("agentTeamSchedule.cancel")}
|
|
</Button>
|
|
{step === "form" ? (
|
|
<Button type="button" onClick={() => void handlePreview()} disabled={busy}>
|
|
{previewing ? <Loader2Icon className="animate-spin" /> : <CheckIcon />}
|
|
{t("agentTeamSchedule.preview")}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
onClick={() => void handleSubmit()}
|
|
disabled={submitting || hasConflict || !preview || !previewPayload || preview.items.length === 0}
|
|
>
|
|
{submitting ? <Loader2Icon className="animate-spin" /> : <CheckIcon />}
|
|
{t("agentTeamSchedule.generate")}
|
|
</Button>
|
|
)}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|