Editable tasks and project labels

This commit is contained in:
2020-04-21 09:24:39 +02:00
parent 034bc0e90b
commit 6e0ccd5575
6 changed files with 217 additions and 55 deletions

View File

@ -5,10 +5,11 @@ 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 { useProjectReducer, addTask, updateTaskEstimation, removeTask, updateProjectLabel, updateTaskLabel } from "../../hooks/use-project-reducer";
import { Task, TaskID, EstimationConfidence } from "../../models/task";
import { getProjectStorageKey } from "../../util/storage";
import { useLocalStorage } from "../../hooks/use-local-storage";
import EditableText from "../../components/editable-text";
export interface ProjectProps {
projectId: string
@ -27,10 +28,18 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
dispatch(removeTask(taskId));
}
const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
dispatch(updateTaskLabel(taskId, label));
}
const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
dispatch(updateTaskEstimation(taskId, confidence, value));
};
const onProjectLabelChange = (projectLabel: string) => {
dispatch(updateProjectLabel(projectLabel));
};
// Save project in local storage on change
useEffect(()=> {
storeProject(project);
@ -38,11 +47,11 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
return (
<div class={`container ${style.estimation}`}>
<h3 class="is-size-3">
{project.label ? project.label : "Projet sans nom"}
&nbsp;
<i class="icon is-size-4">🖋</i>
</h3>
<EditableText
editIconClass="is-size-4"
render={(value) => (<h3 class="is-size-3">{value}</h3>)}
onChange={onProjectLabelChange}
value={project.label ? project.label : "Projet sans nom"} />
<div class="tabs">
<ul>
<li class="is-active">
@ -65,6 +74,7 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
project={project}
onTaskAdd={onTaskAdd}
onTaskRemove={onTaskRemove}
onTaskLabelUpdate={onTaskLabelUpdate}
onEstimationChange={onEstimationChange} />
</div>
<div class="column is-3">