149 lines
4.5 KiB
TypeScript
149 lines
4.5 KiB
TypeScript
import { CoreButton } from "../../core/ui/button/button";
|
|
import { Icon } from "../../core/ui/icons/icons";
|
|
import { Dropdown } from "antd";
|
|
import { CoreText, CoreTextType } from "../../core/ui/text/text";
|
|
import { ProcessStatus } from "../dataset/dataset_model";
|
|
import { IMenuItem } from "../dataset/card_dataset";
|
|
import type { MenuProps } from "antd";
|
|
|
|
export interface ISkillCardProps {
|
|
processStatus?: string;
|
|
name?: string;
|
|
isFinished?: boolean;
|
|
id?: string;
|
|
emptyOnClick?: Function;
|
|
startOnClick?: (id: string) => void;
|
|
continueOnClick?: (id: string) => void;
|
|
empty: boolean;
|
|
onEdit?: (id: string) => void;
|
|
onDelete?: (id: string) => void;
|
|
}
|
|
|
|
export const SkillCard = (props: ISkillCardProps) => {
|
|
const menu: IMenuItem[] = [
|
|
{
|
|
onClick: () => {
|
|
if (props.onEdit && props.id) props.onEdit(props.id);
|
|
},
|
|
name: "Редактировать",
|
|
},
|
|
{
|
|
onClick: () => {
|
|
if (props.onDelete && props.id) props.onDelete(props.id);
|
|
},
|
|
name: "Удалить",
|
|
},
|
|
];
|
|
|
|
const items: MenuProps["items"] = menu.map((el, index) => {
|
|
return {
|
|
key: String(index),
|
|
label: <CoreText text={el.name} type={CoreTextType.medium} />,
|
|
onClick: () => el.onClick(props.id),
|
|
};
|
|
});
|
|
return (
|
|
<div
|
|
style={{
|
|
margin: 10,
|
|
backgroundColor: "#f7f2fa",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
width: 150,
|
|
height: "max-content",
|
|
alignContent: "center",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "stretch",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
{props.empty ? (
|
|
<div
|
|
onClick={() => {
|
|
if (props.empty && props.emptyOnClick) props.emptyOnClick();
|
|
}}
|
|
style={{ display: "flex", justifyContent: "center", alignItems: "center" }}
|
|
>
|
|
<Icon type="PlusCircle" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<CoreText text={props.name ?? ""} type={CoreTextType.medium} />
|
|
<Dropdown overlayStyle={{ backgroundColor: "rgba(243, 237, 247, 1)" }} menu={{ items }}>
|
|
<div>
|
|
<Icon type="Settings" />
|
|
</div>
|
|
</Dropdown>
|
|
</div>
|
|
<div style={{ height: 10 }} />
|
|
<div>
|
|
{props.processStatus === ProcessStatus.NONE ? (
|
|
<>
|
|
<CoreButton
|
|
text="старт"
|
|
onClick={() => {
|
|
if (props.startOnClick && props.id) props.startOnClick(props.id);
|
|
}}
|
|
/>
|
|
<div style={{ height: 10 }} />
|
|
<CoreButton
|
|
text="продолжить"
|
|
onClick={() => {
|
|
if (props.continueOnClick && props.id) props.continueOnClick(props.id);
|
|
}}
|
|
/>
|
|
</>
|
|
) : null}
|
|
{props.processStatus === ProcessStatus.END ? (
|
|
<>
|
|
<CoreButton
|
|
text="старт"
|
|
onClick={() => {
|
|
if (props.startOnClick && props.id) props.startOnClick(props.id);
|
|
}}
|
|
/>
|
|
<div style={{ height: 10 }} />
|
|
<CoreButton
|
|
text="продолжить"
|
|
onClick={() => {
|
|
if (props.continueOnClick && props.id) props.continueOnClick(props.id);
|
|
}}
|
|
/>
|
|
</>
|
|
) : null}
|
|
{props.processStatus === ProcessStatus.RUN ? (
|
|
<>
|
|
<CoreButton
|
|
onClick={() => {
|
|
// if (props.type.isEqual(CardDataSetType.COMPLETED) && props.onClickButton && props.id) {
|
|
// props.onClickButton(props.id);
|
|
}}
|
|
block={true}
|
|
text="Стоп"
|
|
/>
|
|
</>
|
|
) : null}
|
|
{props.processStatus === ProcessStatus.ERROR ? (
|
|
<CoreButton
|
|
style={{
|
|
backgroundColor: "red",
|
|
}}
|
|
onClick={() => {}}
|
|
filled={true}
|
|
text="Ошибка"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|