103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import * as React from "react";
|
|
import { AllProjectStore } from "./all_projects_store";
|
|
import { observer } from "mobx-react-lite";
|
|
import { useNavigate } from "react-router-dom";
|
|
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());
|
|
const navigate = useNavigate();
|
|
|
|
React.useEffect(() => {
|
|
store.init();
|
|
}, []);
|
|
|
|
return (
|
|
<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>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
});
|