progress

ui/src/core/extensions/array.ts

@@ -54,7 +54,7 @@ export const ArrayExtensions = () => {
   if ([].repeat === undefined) {
     // eslint-disable-next-line no-extend-native
     Array.prototype.repeat = function (quantity) {
-      return Array(quantity).fill(this[0]);
+      return Array(quantity).fill(this).flat(1);
     };
   }
 };

ui/src/core/model/style.ts

@@ -0,0 +1,3 @@
+export interface IStyle{
+    style?: React.CSSProperties;
+}

ui/src/core/ui/button/button.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { CoreText, CoreTextType } from "../text/text";
+import { IStyle } from "../../model/style";
 
-export interface IButtonProps {
+export interface IButtonProps extends IStyle {
   block?: boolean;
   filled?: boolean;
   text?: string;
   onClick?: any;
-  style?: React.CSSProperties;
 }
 
 export function CoreButton(props: IButtonProps) {

ui/src/core/ui/icons/icons.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Result } from "../../helper/result";
+import { IStyle } from "../../model/style";
 
-export interface IIconsProps {
+export interface IIconsProps extends IStyle {
   type: string;
-  style?: React.CSSProperties;
   onClick?: Function;
 }
 

ui/src/core/ui/input/input.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { CoreText, CoreTextType } from "../text/text";
+import { IStyle } from "../../model/style";
 
-interface IInputProps {
+interface IInputProps extends IStyle {
   label: string;
   value?: string;
   onChange?: (value: string) => void;
-  style?: React.CSSProperties;
   validation?: (value: string) => boolean;
   error?: string;
 }

ui/src/core/ui/link/link.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { Typography } from "antd";
 import { useNavigate } from "react-router-dom";
+import { IStyle } from "../../model/style";
 
 const { Link } = Typography;
 
-export interface ILinkTypography {
+export interface ILinkTypography extends IStyle {
   path: string;
   text: string;
-  style?: React.CSSProperties;
 }
 
 export const LinkTypography: React.FunctionComponent<ILinkTypography> = (

ui/src/core/ui/select/select.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { CoreText, CoreTextType } from "../text/text";
+import { IStyle } from "../../model/style";
 
-interface ISelectCoreProps {
+interface ISelectCoreProps extends IStyle {
   items: string[];
   value: string;
   label: string;
   onChange: (value: string) => void;
-  style?: React.CSSProperties;
 }
 export const SelectCore = (props: ISelectCoreProps) => {
   const ref = React.useRef<HTMLDivElement>(null);

ui/src/features/dataset/card_dataset.tsx

@@ -133,7 +133,6 @@ export const CardDataSet = (props: ICardDataSetProps) => {
                 />):null}
               {props.processStatus === ProcessStatus.RUN ? (<>
                 <CoreButton
-                  
                   onClick={() => {
                     if (props.type.isEqual(CardDataSetType.COMPLETED) && props.onClickButton && props.id) {
                       props.onClickButton(props.id);

ui/src/features/dataset/p.json

@@ -1 +0,0 @@
- 

ui/src/features/skils/skil_card.tsx

@@ -0,0 +1,74 @@
+import { CoreButton } from "../../core/ui/button/button";
+import { Icon } from "../../core/ui/icons/icons";
+import { CoreText, CoreTextType } from "../../core/ui/text/text";
+import { ProcessStatus } from "../dataset/dataset_model";
+
+export interface ISkillCardProps {
+  processStatus?: string;
+  name?: string;
+  emptyOnClick?: Function;
+  empty: boolean;
+}
+
+export const SkillCard = (props: ISkillCardProps) => {
+  return (
+    <div
+      style={{
+        margin: 10,
+        backgroundColor: "#f7f2fa",
+        borderRadius: 10,
+        padding: 10,
+        width: 150,
+        height: 100,
+        alignContent: "center",
+      }}
+    >
+      {props.empty ? (
+        <div
+          onClick={() => {
+            if (props.empty && props.emptyOnClick) props.emptyOnClick();
+          }}
+          style={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+        >
+          <Icon type="PlusCircle" />
+        </div>
+      ) : (
+        <>
+          <CoreText text={props.name ?? ""} type={CoreTextType.medium} />
+          {props.processStatus === ProcessStatus.END ? (
+            <CoreButton
+              onClick={() => {
+                // if (props.type.isEqual(CardDataSetType.COMPLETED) && props.onClickButton && props.id) {
+                //   props.onClickButton(props.id);
+                // }
+              }}
+              text="Завершен"
+            />
+          ) : 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>
+  );
+};

ui/src/features/skils/skills_repository.tsx

@@ -0,0 +1,32 @@
+import { Result } from "../../core/helper/result";
+import { HttpError, HttpMethod, HttpRepository } from "../../core/repository/http_repository";
+import { UUID } from "../all_projects/data/project_repository";
+import { IDatasetModel } from "../dataset/dataset_model";
+import { SkillModel } from "./skills_store";
+export interface IEducations {
+  _id: string;
+  name: string;
+  processStatus: string;
+  isFinished: boolean;
+  datasetId: any;
+  project: any;
+  __v: number;
+}
+
+export class SkillsRepository extends HttpRepository {
+  getAllSkills = async () => {
+    return this._jsonRequest<IEducations[]>(HttpMethod.GET, "/weights");
+  };
+  deleteSkill = async (id: string) => {
+    return this._jsonRequest<void>(HttpMethod.DELETE, `/weights?id=${id}`);
+  };
+  addNewSkill = async (model: SkillModel) => {
+    return this._jsonRequest(HttpMethod.POST, "/weights", model);
+  };
+  getDatasetsActiveProject = async (): Promise<Result<HttpError, IDatasetModel[]>> => {
+    return this._jsonRequest<IDatasetModel[]>(HttpMethod.GET, "/datasets");
+  };
+  getActiveProjectId(): Promise<Result<HttpError, UUID>> {
+    return this._jsonRequest<UUID>(HttpMethod.GET, "/projects/get/active/project/id");
+  }
+}

ui/src/features/skils/skills_screen.tsx

@@ -1,20 +1,97 @@
+import React from "react";
 import { MainPage } from "../../core/ui/pages/main_page";
+import { CoreText, CoreTextType } from "../../core/ui/text/text";
+import { DrawersSkill, SkillStore } from "./skills_store";
+import { observer } from "mobx-react-lite";
+import { SkillCard } from "./skil_card";
+import { Drawer } from "antd";
+import { CoreInput } from "../../core/ui/input/input";
+import { CoreButton } from "../../core/ui/button/button";
+import { CoreSwitch } from "../../core/ui/switch/switch";
+
+interface IItem {
+  name: string;
+  isActive: boolean;
+}
+
+const skills: IItem[] = [{ name: "ML", isActive: true }];
 
 export const SkillPath = "/skills";
-export const SkillScreen = () => {
+export const SkillScreen = observer(() => {
+  const [store] = React.useState(() => new SkillStore());
+
+  React.useEffect(() => {
+    store.init();
+  }, [store]);
   return (
     <>
       <MainPage
         page={"Навыки"}
-     
+        panelChildren={
+          <div style={{ justifyContent: "center", display: "flex", padding: 10 }}>
+            {skills.map((el) => (
+              <CoreText text={el.name} type={CoreTextType.header} />
+            ))}
+          </div>
+        }
         bodyChildren={
-          <>
-            <div style={{ display: "flex", width: "100%" }}>
-              
-            </div>
-          </>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(150px,1px))",
+              width: "100%",
+              gap: 20,
+              margin: 12,
+              overflow: "auto",
+              height: window.innerHeight,
+            }}
+          >
+            {store.skils?.map((el) => (
+              <SkillCard name={el.name} processStatus={el.processStatus} empty={false} />
+            ))}
+            <SkillCard empty={true} emptyOnClick={() => store.edtDrawer(DrawersSkill.NEW_SKILL, true)} />
+          </div>
         }
       />
+      <Drawer
+        title={store.titleDrawer}
+        destroyOnClose={true}
+        onClose={() => store.edtDrawer(DrawersSkill.NEW_SKILL, false)}
+        open={store.drawers.find((el) => el.name === DrawersSkill.NEW_SKILL)?.status}
+      >
+        <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}>
+          <CoreInput value={store.skill.name} label={"Имя навыка"} onChange={(e) => store.changeSkillName(e)} />
+          <div style={{ height: "100%" }}>
+            {store.datasets?.map((el) => (
+              <div
+                style={{
+                  border: "1px solid rgb(103, 80, 164)",
+                  backgroundColor: "rgb(254, 247, 255)",
+                  borderRadius: 12,
+                  margin: 10,
+                  padding: 10,
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                {el.name}
+                <CoreSwitch
+                  isSelected={store.skill.datasetId.isEqual(el._id)}
+                  id={el._id}
+                  onChange={() => store.selectDataset(el._id)}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div style={{ display: "flex" }}>
+            <CoreButton text="Сохранить" filled={true} onClick={() => store.saveSkill()} />
+            <div style={{ width: 10 }} />
+            <CoreButton text="Отмена" onClick={() => store.edtDrawer(DrawersSkill.NEW_SKILL, false)} />
+          </div>
+        </div>
+      </Drawer>
     </>
   );
-};
+});

ui/src/features/skils/skills_store.tsx

@@ -1,3 +1,93 @@
-export class SkillStore{
-    
-}
+import { NavigateFunction } from "react-router-dom";
+import { HttpError } from "../../core/repository/http_repository";
+import { UiErrorState } from "../../core/store/base_store";
+import makeAutoObservable from "mobx-store-inheritance";
+import { IEducations as ISkils, SkillsRepository as SkillsHttpRepository } from "./skills_repository";
+import { Drawer } from "../dataset/dataset_store";
+import { IDatasetModel } from "../dataset/dataset_model";
+import { Result } from "../../core/helper/result";
+import { message } from "antd";
+import { UUID } from "../all_projects/data/project_repository";
+
+export enum DrawersSkill {
+  NEW_SKILL = "Новый навык",
+}
+
+export class SkillModel {
+  constructor(public name: string, public datasetId: string, public project: string) {
+    makeAutoObservable(this);
+  }
+  static empty() {
+    return new SkillModel("", "", "");
+  }
+  valid(): Result<string, SkillModel> {
+    if (this.name.isEmpty()) {
+      return Result.error("name is empty");
+    }
+    if (this.datasetId.isEmpty()) {
+      return Result.error("datasetId is empty");
+    }
+    if (this.project.isEmpty()) {
+      return Result.error("project is empty");
+    }
+    return Result.ok(this);
+  }
+}
+export class SkillStore extends UiErrorState<HttpError> {
+  drawers: Drawer[];
+  skillsHttpRepository: SkillsHttpRepository;
+  skils?: ISkils[];
+  datasets?: IDatasetModel[];
+  activeProjectId?: UUID;
+  skill: SkillModel;
+  titleDrawer: string = DrawersSkill.NEW_SKILL;
+
+  constructor() {
+    super();
+    this.drawers = Object.entries(DrawersSkill).map((k, v) => {
+      return {
+        name: k.at(1) ?? "",
+        status: false,
+      };
+    });
+    this.skill = SkillModel.empty();
+    this.skillsHttpRepository = new SkillsHttpRepository();
+    makeAutoObservable(this);
+  }
+  errorHandingStrategy: (error: HttpError) => {};
+  init = async (navigate?: NavigateFunction | undefined) => {
+    await this.mapOk("skils", this.skillsHttpRepository.getAllSkills());
+    await this.mapOk("datasets", this.skillsHttpRepository.getDatasetsActiveProject());
+    await this.mapOk("activeProjectId", this.skillsHttpRepository.getActiveProjectId());
+  };
+  changeSkillName(name: string): void {
+    this.skill.name = name;
+  }
+  saveSkill() {
+    console.log(this.activeProjectId);
+    this.skill.project = this.activeProjectId?.id ?? "";
+    this.skill.valid().fold(
+      async (model) => {
+        (await this.skillsHttpRepository.addNewSkill(model)).fold(
+          (s) => {
+            message.success("Новый ");
+            this.skill = SkillModel.empty();
+          },
+          (e) => message.error(e.message)
+        );
+      },
+      async (e) => message.error(e)
+    );
+  }
+  selectDataset(id: string): void {
+    this.skill.datasetId = id;
+  }
+  edtDrawer(drawerName: DrawersSkill, status: boolean): void {
+    this.drawers = this.drawers.map((el) => {
+      if (el.name === drawerName) {
+        el.status = status;
+      }
+      return el;
+    });
+  }
+}