82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { type Employee, type Workspace } from "../../services/api";
|
|
import {
|
|
AppFormDialog,
|
|
dialogPrimaryButtonClass,
|
|
dialogSecondaryButtonClass,
|
|
} from "~/components/common/AppFormDialog";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
formFieldClass,
|
|
modalFormClass,
|
|
} from "../platform/modalUi";
|
|
import { UserMultiSelect } from "./UserMultiSelect";
|
|
|
|
export function ImportMemberDialog({
|
|
open,
|
|
selectedProject,
|
|
availableUsers,
|
|
selectedUserIds,
|
|
existingMemberIds,
|
|
saving,
|
|
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;
|
|
}) {
|
|
return (
|
|
<AppFormDialog
|
|
open={open && selectedProject !== null}
|
|
onOpenChange={(nextOpen) => {
|
|
if (!nextOpen) onClose();
|
|
}}
|
|
eyebrow="IMPORT MEMBER"
|
|
title={`导入成员到 ${selectedProject?.workspace_name ?? "项目"}`}
|
|
footer={
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
type="button"
|
|
onClick={() => onClose()}
|
|
className={dialogSecondaryButtonClass}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="button"
|
|
disabled={saving || selectedUserIds.length === 0}
|
|
onClick={() => void onSubmit()}
|
|
className={dialogPrimaryButtonClass}
|
|
>
|
|
{saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className={modalFormClass}>
|
|
<label className={`${formFieldClass} pb-[120px]`}>
|
|
<span>选择用户<span className="text-danger">*</span></span>
|
|
<UserMultiSelect
|
|
users={availableUsers}
|
|
selectedUserIds={selectedUserIds}
|
|
onChange={onChangeSelectedUserIds}
|
|
existingMemberIds={existingMemberIds}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</AppFormDialog>
|
|
);
|
|
}
|