60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import React, { FunctionComponent, useEffect } from "react";
|
|
import style from "./style.module.css";
|
|
import { newProject, Project } from "../../types/project";
|
|
import { useProjectReducer, updateProjectLabel } from "../../hooks/useProjectReducer";
|
|
import EditableText from "../EditableText/EditableText";
|
|
import Tabs from "../../components/Tabs/Tabs";
|
|
import EstimationTab from "./EstimationTab";
|
|
import ParamsTab from "./ParamsTab";
|
|
import ExportTab from "./ExportTab";
|
|
import { useParams } from "react-router";
|
|
import { Page } from "../Page";
|
|
|
|
export interface ProjectProps {
|
|
projectId: string
|
|
}
|
|
|
|
export const ProjectPage: FunctionComponent<ProjectProps> = () => {
|
|
const { id } = useParams();
|
|
const [ project, dispatch ] = useProjectReducer(newProject());
|
|
|
|
const onProjectLabelChange = (projectLabel: string) => {
|
|
dispatch(updateProjectLabel(projectLabel));
|
|
};
|
|
|
|
return (
|
|
<Page title="Projet">
|
|
<div className="container is-fluid">
|
|
<div className="columns">
|
|
<div className="column mt-3 is-10">
|
|
<EditableText
|
|
editIconClass="is-size-4"
|
|
render={(value) => (<h2 className="is-size-3">{value}</h2>)}
|
|
onChange={onProjectLabelChange}
|
|
value={project.label ? project.label : "Projet sans nom"}
|
|
/>
|
|
<div className={`box mt-3 ${style.tabContainer}`}>
|
|
<Tabs items={[
|
|
{
|
|
label: 'Estimation',
|
|
icon: 'fa fa-clipboard',
|
|
render: () => <EstimationTab project={project} dispatch={dispatch} />
|
|
},
|
|
{
|
|
label: 'Options avancées',
|
|
icon: 'fa fa-sliders-h',
|
|
render: () => <ParamsTab project={project} dispatch={dispatch} />
|
|
},
|
|
{
|
|
label: 'Exporter',
|
|
icon: 'fa fa-file-export',
|
|
render: () => <ExportTab project={project} />
|
|
}
|
|
]} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Page>
|
|
);
|
|
}; |