63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { FunctionalComponent, h } from "preact";
|
|
import { useEffect } from "preact/hooks";
|
|
import style from "./style.module.css";
|
|
import { newProject } from "../../models/project";
|
|
import { useProjectReducer, updateProjectLabel } from "../../hooks/use-project-reducer";
|
|
import { getProjectStorageKey } from "../../util/storage";
|
|
import { useLocalStorage } from "../../hooks/use-local-storage";
|
|
import EditableText from "../../components/editable-text";
|
|
import Tabs from "../../components/tabs";
|
|
import EstimationTab from "./estimation-tab";
|
|
import ParamsTab from "./params-tab";
|
|
|
|
export interface ProjectProps {
|
|
projectId: string
|
|
}
|
|
|
|
const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
|
|
const projectStorageKey = getProjectStorageKey(projectId);
|
|
const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
|
|
const [ project, dispatch ] = useProjectReducer(storedProject);
|
|
|
|
const onProjectLabelChange = (projectLabel: string) => {
|
|
dispatch(updateProjectLabel(projectLabel));
|
|
};
|
|
|
|
// Save project in local storage on change
|
|
useEffect(()=> {
|
|
storeProject(project);
|
|
}, [project]);
|
|
|
|
return (
|
|
<div class={`container ${style.estimation}`}>
|
|
<EditableText
|
|
editIconClass="is-size-4"
|
|
render={(value) => (<h2 class="is-size-3">{value}</h2>)}
|
|
onChange={onProjectLabelChange}
|
|
value={project.label ? project.label : "Projet sans nom"} />
|
|
<div class={style.tabContainer}>
|
|
<Tabs items={[
|
|
{
|
|
label: 'Estimation',
|
|
icon: '📋',
|
|
render: () => <EstimationTab project={project} dispatch={dispatch} />
|
|
},
|
|
{
|
|
label: 'Paramètres',
|
|
icon: '⚙️',
|
|
render: () => <ParamsTab project={project} dispatch={dispatch} />
|
|
},
|
|
{
|
|
label: 'Exporter',
|
|
icon: '↗️',
|
|
render: () => null
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Project;
|