progress

ui/src/features/skils/skill_card.tsx

@@ -0,0 +1,149 @@
+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>
+  );
+};