progress scene builder

ui/src/features/all_projects/presentation/all_projects_screen.tsx

@@ -1,52 +1,103 @@
 import * as React from "react";
 import { AllProjectStore } from "./all_projects_store";
-import { ProjectRepository } from "../data/project_repository";
-import { LoadPage } from "../../../core/ui/pages/load_page";
 import { observer } from "mobx-react-lite";
 import { useNavigate } from "react-router-dom";
-import { Button } from "antd";
-import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";
-import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
+import { Modal, Upload } from "antd";
+import { PreviewPage } from "../../../core/ui/pages/preview_page";
+import { CoreText, CoreTextType } from "../../../core/ui/text/text";
+import { CoreButton } from "../../../core/ui/button/button";
+import { CoreInput } from "../../../core/ui/input/input";
+import { DetailsScreenPath } from "../../details/details_screen";
 
 export const AllProjectScreenPath = "/";
 export const AllProjectScreen: React.FunctionComponent = observer(() => {
-  const [store] = React.useState(() => new AllProjectStore(new ProjectRepository()));
+  const [store] = React.useState(() => new AllProjectStore());
   const navigate = useNavigate();
 
   React.useEffect(() => {
     store.init();
-  }, [store]);
+  }, []);
 
   return (
-    <>
-      <LoadPage
-        largeText={"Projects"}
-        needBackButton={false}
-        minText="create project?"
-        path={CreateProjectScreenPath}
-        isError={false}
-        isLoading={store.isLoading}
-        children={
-          <div>
-            {store.projectsModels?.map((el) => {
-              return (
-                <div style={{ margin: 10, backgroundColor: "chartreuse" }}>
-                  {el.isActive ? (
-                    <Button
-                      onClick={() => {
-                        navigate(`${PipelineInstanceScreenPath}${el._id}`);
-                      }}
-                    >
-                      instance screen
-                    </Button>
-                  ) : <Button style={{ backgroundColor: 'red' }} onClick={() => store.setActiveProject(el._id as string)}>active project</Button>}
-                  <div style={{ margin: "10px", display: "contents" }}> {el.description}</div>
-                </div>
-              );
-            })}
-          </div>
-        }
-      />
-    </>
+    <PreviewPage
+      largeText={"Проекты"}
+      needBackButton={false}
+      minText="Создать новый проект?"
+      click={() => store.showModal()}
+      isError={false}
+      isLoading={store.isLoading}
+      children={
+        <>
+          {store.projectsModels?.map((el) => {
+            return (
+              <div
+                style={{
+                  border: "1px solid #CAC4D0",
+                  margin: 10,
+                  height: 60,
+                  alignItems: "center",
+                  borderRadius: 7,
+                  display: "flex",
+                  justifyContent: "space-between",
+                  backgroundColor: el.isActive ? "rgba(104, 80, 164, 1)" : "rgba(255, 255, 255, 1)",
+                }}
+              >
+                <CoreText
+                  text={el.description}
+                  type={CoreTextType.medium}
+                  style={{ color: el.isActive ? "white" : "black", margin: 10 }}
+                />
+                {el.isActive ? (
+                  <CoreButton
+                    text="Перейти"
+                    onClick={() => {
+                      navigate(`${DetailsScreenPath}`);
+                    }}
+                    textStyle={{ color: "black",textAlign:'center' }}
+                    style={{ marginRight: 10, backgroundColor: "white", width: 126 }}
+                  />
+                ) : (
+                  <CoreButton
+                    text="Активировать"
+                    onClick={() => store.setActiveProject(el._id as string)}
+                    style={{ marginRight: 10, width: 126 }}
+                    filled={true}
+                  />
+                )}
+              </div>
+            );
+          })}
+          <Modal
+            destroyOnClose={true}
+            open={store.isModalOpen}
+            footer={null}
+            closable={false}
+            closeIcon={null}
+            onCancel={store.handleCancel}
+          >
+            <CoreText text="Новый проект" type={CoreTextType.big} />
+            <CoreInput label={"название проекта"} onChange={(text) => store.setDescriptionToNewProject(text)} />
+            <div style={{ height: 20 }} />
+            <Upload
+              onChange={(e) => {
+                store.file = e.file.originFileObj;
+              }}
+            >
+              <CoreButton text="файл проекта" />
+            </Upload>
+            <div style={{ height: 20 }} />
+            <div style={{ display: "flex" }}>
+              <CoreButton
+                text="Сохранить"
+                onClick={() => store.saveProject()}
+                style={{ marginRight: 10 }}
+                filled={true}
+              />
+              <CoreButton text="Отменить" onClick={() => store.handleCancel()} style={{ marginRight: 10 }} />
+            </div>
+          </Modal>
+        </>
+      }
+    />
   );
 });