103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import { X } from "lucide-react";
|
|
import { type Employee, type Workspace } from "../../services/api";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
formFieldClass,
|
|
modalBackdropClass,
|
|
modalCompactClass,
|
|
modalEyebrowClass,
|
|
modalFooterClass,
|
|
modalFormClass,
|
|
modalHeaderClass,
|
|
modalTitleClass,
|
|
} from "../platform/modalUi";
|
|
import { UserMultiSelect } from "./UserMultiSelect";
|
|
|
|
const CLOSE_BUTTON_CLASS =
|
|
"size-[34px] rounded-[7px] border border-[#dfe6ed] bg-white hover:bg-[#f7faff] hover:border-[#b9c9da]";
|
|
const SECONDARY_BUTTON_CLASS =
|
|
"h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
|
|
const PRIMARY_BUTTON_CLASS =
|
|
"h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";
|
|
|
|
export function ImportMemberDialog({
|
|
open,
|
|
selectedProject,
|
|
availableUsers,
|
|
selectedUserIds,
|
|
existingMemberIds,
|
|
saving,
|
|
onNotify,
|
|
onChangeSelectedUserIds,
|
|
onSubmit,
|
|
onClose,
|
|
}: {
|
|
open: boolean;
|
|
selectedProject: Workspace | null;
|
|
availableUsers: Employee[];
|
|
selectedUserIds: string[];
|
|
existingMemberIds: string[];
|
|
saving: boolean;
|
|
onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
|
|
onChangeSelectedUserIds: (ids: string[]) => void;
|
|
onSubmit: () => Promise<void> | void;
|
|
onClose: () => void;
|
|
}) {
|
|
if (!open || !selectedProject) return null;
|
|
|
|
return (
|
|
<div className={modalBackdropClass} role="presentation">
|
|
<section className={modalCompactClass} role="dialog" aria-modal="true">
|
|
<div className={modalHeaderClass}>
|
|
<div>
|
|
<span className={modalEyebrowClass}>IMPORT MEMBER</span>
|
|
<h2 className={modalTitleClass}>导入成员到 {selectedProject?.workspace_name ?? "项目"}</h2>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
type="button"
|
|
aria-label="关闭"
|
|
onClick={() => onClose()}
|
|
className={CLOSE_BUTTON_CLASS}
|
|
>
|
|
<X size={16} />
|
|
</Button>
|
|
</div>
|
|
<form className={modalFormClass}>
|
|
<label className={`${formFieldClass} pb-[120px]`}>
|
|
<span>选择用户<span className="text-[#e74c3c]">*</span></span>
|
|
<UserMultiSelect
|
|
users={availableUsers}
|
|
selectedUserIds={selectedUserIds}
|
|
onChange={onChangeSelectedUserIds}
|
|
existingMemberIds={existingMemberIds}
|
|
/>
|
|
</label>
|
|
<div className={modalFooterClass}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
type="button"
|
|
onClick={() => onClose()}
|
|
className={SECONDARY_BUTTON_CLASS}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="button"
|
|
disabled={saving || selectedUserIds.length === 0}
|
|
onClick={() => void onSubmit()}
|
|
className={PRIMARY_BUTTON_CLASS}
|
|
>
|
|
{saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|