80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import { FunctionalComponent, h } from "preact";
|
||
import { useEffect } from "preact/hooks";
|
||
import * as style from "./style.css";
|
||
import { newProject } from "../../models/project";
|
||
import TaskTable from "./tasks-table";
|
||
import TimePreview from "./time-preview";
|
||
import FinancialPreview from "./financial-preview";
|
||
import { useProjectReducer, addTask, updateTaskEstimation, removeTask } from "../../hooks/use-project-reducer";
|
||
import { Task, TaskID, EstimationConfidence } from "../../models/task";
|
||
import { getProjectStorageKey } from "../../util/storage";
|
||
import { useLocalStorage } from "../../hooks/use-local-storage";
|
||
|
||
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 onTaskAdd = (task: Task) => {
|
||
dispatch(addTask(task));
|
||
};
|
||
|
||
const onTaskRemove = (taskId: TaskID) => {
|
||
dispatch(removeTask(taskId));
|
||
}
|
||
|
||
const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
|
||
dispatch(updateTaskEstimation(taskId, confidence, value));
|
||
};
|
||
|
||
// Save project in local storage on change
|
||
useEffect(()=> {
|
||
storeProject(project);
|
||
}, [project]);
|
||
|
||
return (
|
||
<div class={`container ${style.estimation}`}>
|
||
<h3 class="is-size-3">
|
||
{project.label ? project.label : "Projet sans nom"}
|
||
|
||
<i class="icon is-size-4">🖋️</i>
|
||
</h3>
|
||
<div class="tabs">
|
||
<ul>
|
||
<li class="is-active">
|
||
<a>
|
||
<span class="icon is-small">📋</span>
|
||
Estimation
|
||
</a>
|
||
</li>
|
||
{/* <li>
|
||
<a disabled>
|
||
<span class="icon is-small">⚙️</span>
|
||
Paramètres
|
||
</a>
|
||
</li> */}
|
||
</ul>
|
||
</div>
|
||
<div class="columns">
|
||
<div class="column is-9">
|
||
<TaskTable
|
||
project={project}
|
||
onTaskAdd={onTaskAdd}
|
||
onTaskRemove={onTaskRemove}
|
||
onEstimationChange={onEstimationChange} />
|
||
</div>
|
||
<div class="column is-3">
|
||
<TimePreview project={project} />
|
||
<FinancialPreview project={project} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Project;
|