88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { type FormEvent } from "react";
|
|
import { Check, Loader2Icon } from "lucide-react";
|
|
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
AppFormDialog,
|
|
dialogPrimaryButtonClass,
|
|
dialogSecondaryButtonClass,
|
|
} from "~/components/common/AppFormDialog";
|
|
import {
|
|
formFieldClass,
|
|
formInputClass,
|
|
modalFormClass,
|
|
} from "~/features/platform/modalUi";
|
|
|
|
import { useSchedulesStore } from "./state/useSchedulesStore";
|
|
|
|
export function ScheduleRenameDialog() {
|
|
const renameTarget = useSchedulesStore((s) => s.renameTarget);
|
|
const renameName = useSchedulesStore((s) => s.renameName);
|
|
const busy = useSchedulesStore((s) => s.busy);
|
|
const setRenameName = useSchedulesStore((s) => s.setRenameName);
|
|
const closeRenameDialog = useSchedulesStore((s) => s.closeRenameDialog);
|
|
|
|
const renaming = busy === "rename-schedule";
|
|
const trimmed = renameName.trim();
|
|
const unchanged = Boolean(
|
|
renameTarget && trimmed === renameTarget.schedule_name,
|
|
);
|
|
|
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!renameTarget || !trimmed || unchanged) return;
|
|
void useSchedulesStore.getState().renameSchedule(renameTarget, trimmed);
|
|
};
|
|
|
|
return (
|
|
<AppFormDialog
|
|
open={renameTarget !== null}
|
|
onOpenChange={(nextOpen) => {
|
|
if (!nextOpen) closeRenameDialog();
|
|
}}
|
|
eyebrow="SCHEDULE"
|
|
title="改名调度方案"
|
|
titleId="rename-schedule-title"
|
|
>
|
|
<form className={modalFormClass} onSubmit={handleSubmit}>
|
|
<label className={formFieldClass}>
|
|
<span>调度方案名称</span>
|
|
<input
|
|
className={formInputClass}
|
|
autoFocus
|
|
maxLength={255}
|
|
placeholder="请输入新的调度方案名称"
|
|
value={renameName}
|
|
onChange={(event) => setRenameName(event.target.value)}
|
|
onFocus={(event) => event.currentTarget.select()}
|
|
/>
|
|
</label>
|
|
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={renaming}
|
|
onClick={closeRenameDialog}
|
|
className={dialogSecondaryButtonClass}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="default"
|
|
size="sm"
|
|
disabled={renaming || !trimmed || unchanged}
|
|
className={dialogPrimaryButtonClass}
|
|
>
|
|
{renaming
|
|
? <Loader2Icon className="size-4 animate-spin" />
|
|
: <Check size={15} />}
|
|
{renaming ? "正在保存…" : "保存"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</AppFormDialog>
|
|
);
|
|
}
|