webstudio/ui/src/features/skils/skill_card.tsx

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";
import { match } from "ts-pattern";

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;
  epoch?: number;
  onDelete?: (id: string) => void;
  datasetName?: string;
  epochNextTraining?: number;
}

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: 200,
        height: "max-content",
        alignContent: "center",
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        justifyContent: "space-between",
      }}
    >
      {match(props.empty)
        .with(true, () => (
          <>
            <div
              onClick={() => {
                if (props.empty && props.emptyOnClick) props.emptyOnClick();
              }}
              style={{ display: "flex", justifyContent: "center", alignItems: "center" }}
            >
              <Icon type="PlusCircle" />
            </div>
          </>
        ))
        .with(false, () => (
          <>
            <>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <div style={{ display: "flex", flexDirection: "column", margin: 10 }}>
                  <CoreText text={props.name ?? ""} type={CoreTextType.medium} />
                  <div style={{ height: 10 }} />
                  <CoreText text={"обученных эпох: " + props.epoch?.toString() ?? ""} type={CoreTextType.small} />
                  <CoreText text={"обучится эпох: " + props.epoch?.toString() ?? ""} type={CoreTextType.small} />

                  <CoreText text={"Датасет: " + props.datasetName ?? ""} type={CoreTextType.small} />
                </div>
                <div style={{ height: 10 }}>
                  <Dropdown overlayStyle={{ backgroundColor: "rgba(243, 237, 247, 1)" }} menu={{ items }}>
                    <div>
                      <Icon type="Settings" />
                    </div>
                  </Dropdown>
                </div>
              </div>
              <div style={{ height: 10 }} />
              <div>
                {match(props.processStatus)
                  .with(ProcessStatus.ERROR, () => (
                    <>
                      <CoreButton
                        style={{
                          backgroundColor: "red",
                        }}
                        onClick={() => {
                          if (props.startOnClick && props.id) props.startOnClick(props.id);
                        }}
                        filled={true}
                        text="Ошибка"
                      />
                    </>
                  ))

                  .with(ProcessStatus.END, () => (
                    <>
                      <CoreButton
                        text="дообучение"
                        onClick={() => {
                          if (props.continueOnClick && props.id) props.continueOnClick(props.id);
                        }}
                      />
                      <div style={{ height: 10 }} />
                      <CoreButton
                        text="заново"
                        onClick={() => {
                          if (props.startOnClick && props.id) props.startOnClick(props.id);
                        }}
                      />
                    </>
                  ))
                  .with(ProcessStatus.NONE, () => (
                    <>
                      <CoreButton
                        text="старт"
                        onClick={() => {
                          if (props.startOnClick && props.id) props.startOnClick(props.id);
                        }}
                      />
                    </>
                  ))

                  .otherwise(() => (
                    <></>
                  ))}
              </div>
            </>
          </>
        ))
        .otherwise(() => (
          <></>
        ))}
    </div>
  );
};