From 18f43482e0423e7fd89619da1c714de828b02a0b Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Thu, 31 Aug 2023 20:33:59 -0600
Subject: [PATCH] feat: remove auto updating of likely/pessimistic values

---
 client/src/hooks/use-project-reducer.ts   |   8 -
 client/src/routes/project/tasks-table.tsx | 342 +++++++++++-----------
 2 files changed, 175 insertions(+), 175 deletions(-)

diff --git a/client/src/hooks/use-project-reducer.ts b/client/src/hooks/use-project-reducer.ts
index 7fdc6e3..7d9ec39 100644
--- a/client/src/hooks/use-project-reducer.ts
+++ b/client/src/hooks/use-project-reducer.ts
@@ -124,14 +124,6 @@ export function handleUpdateTaskEstimation(project: Project, action: UpdateTaskE
     [action.confidence]: action.value
   };
   
-  if (estimations.likely < estimations.optimistic) {
-    estimations.likely = estimations.optimistic;
-  }
-  
-  if (estimations.pessimistic < estimations.likely) {
-    estimations.pessimistic = estimations.likely;
-  }
-  
   return {
     ...project,
     tasks: {
diff --git a/client/src/routes/project/tasks-table.tsx b/client/src/routes/project/tasks-table.tsx
index ba770c2..4a100e4 100644
--- a/client/src/routes/project/tasks-table.tsx
+++ b/client/src/routes/project/tasks-table.tsx
@@ -8,192 +8,200 @@ import { defaults, getTimeUnit } from "../../models/params";
 import ProjectTimeUnit from "../../components/project-time-unit";
 
 export interface TaskTableProps {
-    project: Project
-    onTaskAdd: (task: Task) => void
-    onTaskRemove: (taskId: TaskID) => void
-    onEstimationChange: (taskId: TaskID, confidence: EstimationConfidence, value: number) => void
-    onTaskLabelUpdate: (taskId: TaskID, label: string) => void
+  project: Project
+  onTaskAdd: (task: Task) => void
+  onTaskRemove: (taskId: TaskID) => void
+  onEstimationChange: (taskId: TaskID, confidence: EstimationConfidence, value: number) => void
+  onTaskLabelUpdate: (taskId: TaskID, label: string) => void
 }
 
 export type EstimationTotals = { [confidence in EstimationConfidence]: number }
 
 const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate }) => {
-    
-    const defaultTaskCategory = Object.keys(project.params.taskCategories)[0];
-    const [ task, setTask ] = useState(newTask("", defaultTaskCategory));
-    const [ totals, setTotals ] = useState({
-        [EstimationConfidence.Optimistic]: 0,
-        [EstimationConfidence.Likely]: 0,
-        [EstimationConfidence.Pessimistic]: 0,
-    } as EstimationTotals);
 
-    const isPrint = usePrintMediaQuery();
+  const defaultTaskCategory = Object.keys(project.params.taskCategories)[0];
+  const [task, setTask] = useState(newTask("", defaultTaskCategory));
+  const [totals, setTotals] = useState({
+    [EstimationConfidence.Optimistic]: 0,
+    [EstimationConfidence.Likely]: 0,
+    [EstimationConfidence.Pessimistic]: 0,
+  } as EstimationTotals);
 
-    useEffect(() => {
-        let optimistic = 0;
-        let likely = 0;
-        let pessimistic = 0;
+  const isPrint = usePrintMediaQuery();
 
-        Object.values(project.tasks).forEach(t => {
-            optimistic += t.estimations.optimistic;
-            likely += t.estimations.likely;
-            pessimistic += t.estimations.pessimistic;
-        });
+  useEffect(() => {
+    let optimistic = 0;
+    let likely = 0;
+    let pessimistic = 0;
 
-        setTotals({ optimistic, likely, pessimistic });
-    }, [project.tasks]);
+    Object.values(project.tasks).forEach(t => {
+      optimistic += t.estimations.optimistic;
+      likely += t.estimations.likely;
+      pessimistic += t.estimations.pessimistic;
+    });
 
-    const onNewTaskLabelChange = (evt: ChangeEvent) => {
-        const value = (evt.currentTarget as HTMLInputElement).value;
-        setTask({...task, label: value});
-    };
+    setTotals({ optimistic, likely, pessimistic });
+  }, [project.tasks]);
 
-    const onNewTaskCategoryChange = (evt: ChangeEvent) => {
-        const value = (evt.currentTarget as HTMLInputElement).value;
-        setTask({...task, category: value});
-    };
+  const onNewTaskLabelChange = (evt: ChangeEvent) => {
+    const value = (evt.currentTarget as HTMLInputElement).value;
+    setTask({ ...task, label: value });
+  };
 
-    const onTaskLabelChange = (taskId: TaskID, value: string) => {
-        onTaskLabelUpdate(taskId, value);
-    };
+  const onNewTaskCategoryChange = (evt: ChangeEvent) => {
+    const value = (evt.currentTarget as HTMLInputElement).value;
+    setTask({ ...task, category: value });
+  };
 
-    const onAddTaskClick = (evt: MouseEvent) => {
-        onTaskAdd(task);
-        setTask(newTask("", defaultTaskCategory));
-    };
+  const onTaskLabelChange = (taskId: TaskID, value: string) => {
+    onTaskLabelUpdate(taskId, value);
+  };
 
-    const onTaskRemoveClick = (taskId: TaskID, evt: MouseEvent) => {
-        onTaskRemove(taskId);
-    };
+  const onAddTaskClick = (evt: MouseEvent) => {
+    onTaskAdd(task);
+    setTask(newTask("", defaultTaskCategory));
+  };
 
-    const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: ChangeEvent) => {
-        const textValue = (evt.currentTarget as HTMLInputElement).value;
-        const value = parseFloat(textValue);
-        onEstimationChange(taskID, confidence, value);
-    };
+  const onTaskRemoveClick = (taskId: TaskID, evt: MouseEvent) => {
+    onTaskRemove(taskId);
+  };
 
-    const onOptimisticChange = withEstimationChange.bind(null, EstimationConfidence.Optimistic);
-    const onLikelyChange = withEstimationChange.bind(null, EstimationConfidence.Likely);
-    const onPessimisticChange = withEstimationChange.bind(null, EstimationConfidence.Pessimistic);
+  const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: ChangeEvent) => {
+    const textValue = (evt.currentTarget as HTMLInputElement).value;
+    const value = parseFloat(textValue);
+    onEstimationChange(taskID, confidence, value);
+  };
 
-    return (
-        <div className="table-container">
-            <table className={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
-                <thead>
-                    <tr>
-                        <th className={`${style.noBorder} noPrint`} rowSpan={2}></th>
-                        <th className={style.mainColumn} rowSpan={2}>Tâche</th>
-                        <th rowSpan={2}>Catégorie</th>
-                        <th colSpan={3}>Estimation (en <ProjectTimeUnit project={project} />)</th>
-                    </tr>
-                    <tr>
-                        <th>Optimiste</th>
-                        <th>Probable</th>
-                        <th>Pessimiste</th>
-                    </tr>
-                </thead>
-                <tbody>
+  const onOptimisticChange = withEstimationChange.bind(null, EstimationConfidence.Optimistic);
+  const onLikelyChange = withEstimationChange.bind(null, EstimationConfidence.Likely);
+  const onPessimisticChange = withEstimationChange.bind(null, EstimationConfidence.Pessimistic);
+
+  return (
+    <div className="table-container">
+      <table className={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
+        <thead>
+          <tr>
+            <th className={`${style.noBorder} noPrint`} rowSpan={2}></th>
+            <th className={style.mainColumn} rowSpan={2}>Tâche</th>
+            <th rowSpan={2}>Catégorie</th>
+            <th colSpan={3}>Estimation (en <ProjectTimeUnit project={project} />)</th>
+          </tr>
+          <tr>
+            <th>Optimiste</th>
+            <th>Probable</th>
+            <th>Pessimiste</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            Object.values(project.tasks).map(t => {
+              const category = project.params.taskCategories[t.category];
+              const categoryLabel = category ? category.label : '???';
+              return (
+                <tr key={`taks-${t.id}`}>
+                  <td className={`is-narrow noPrint`}>
+                    <button
+                      onClick={onTaskRemoveClick.bind(null, t.id)}
+                      className="button is-danger is-small is-outlined">
+                      🗑️
+                    </button>
+                  </td>
+                  <td className={style.mainColumn}>
+                    <EditableText
+                      render={(value) => (<span>{value}</span>)}
+                      onChange={onTaskLabelChange.bind(null, t.id)}
+                      value={t.label} />
+                  </td>
+                  <td>{categoryLabel}</td>
+                  <td>
                     {
-                        Object.values(project.tasks).map(t => {
-                            const category = project.params.taskCategories[t.category];
-                            const categoryLabel = category ? category.label : '???';
-                            return (
-                                <tr key={`taks-${t.id}`}>
-                                    <td className={`is-narrow noPrint`}>
-                                        <button
-                                            onClick={onTaskRemoveClick.bind(null, t.id)}
-                                            className="button is-danger is-small is-outlined">
-                                        🗑️
-                                        </button>
-                                    </td>
-                                    <td className={style.mainColumn}>
-                                        <EditableText
-                                            render={(value) => (<span>{value}</span>)}
-                                            onChange={onTaskLabelChange.bind(null, t.id)}
-                                            value={t.label} />
-                                    </td>
-                                    <td>{ categoryLabel }</td>
-                                    <td>
-                                        {
-                                            isPrint ?
-                                            <span>{t.estimations.optimistic}</span> :
-                                            <input className="input" type="number" value={t.estimations.optimistic}
-                                                min={0}
-                                                onChange={onOptimisticChange.bind(null, t.id)} />
-                                        }
-                                    </td>
-                                    <td>
-                                        {
-                                            isPrint ?
-                                            <span>{t.estimations.likely}</span> :
-                                            <input className="input" type="number" value={t.estimations.likely}
-                                                min={0}
-                                                onChange={onLikelyChange.bind(null, t.id)} />
-                                        }
-                                    </td>
-                                    <td>
-                                        {
-                                            isPrint ?
-                                            <span>{t.estimations.pessimistic}</span> :
-                                            <input className="input" type="number" value={t.estimations.pessimistic}
-                                                min={0}
-                                                onChange={onPessimisticChange.bind(null, t.id)} />
-                                        }
-                                    </td>
-                                </tr>
-                            )
+                      isPrint ?
+                        <span>{t.estimations.optimistic}</span> :
+                        <input
+                          className="input" type="number"
+                          value={t.estimations.optimistic}
+                          min={0}
+                          onChange={onOptimisticChange.bind(null, t.id)} />
+                    }
+                  </td>
+                  <td>
+                    {
+                      isPrint ?
+                        <span>{t.estimations.likely}</span> :
+                        <input 
+                          className={`input ${t.estimations.likely < t.estimations.optimistic ? 'is-danger' : ''}`} 
+                          type="number" 
+                          value={t.estimations.likely}
+                          min={0}
+                          onChange={onLikelyChange.bind(null, t.id)} />
+                    }
+                  </td>
+                  <td>
+                    {
+                      isPrint ?
+                        <span>{t.estimations.pessimistic}</span> :
+                        <input 
+                          className={`input ${t.estimations.pessimistic < t.estimations.likely ? 'is-danger' : ''}`} 
+                          type="number" 
+                          value={t.estimations.pessimistic}
+                          min={0}
+                          onChange={onPessimisticChange.bind(null, t.id)} />
+                    }
+                  </td>
+                </tr>
+              )
+            })
+          }
+          {
+            Object.keys(project.tasks).length === 0 ?
+              <tr>
+                <td className={`${style.noBorder} noPrint`}></td>
+                <td className={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
+              </tr> :
+              null
+          }
+        </tbody>
+        <tfoot>
+          <tr>
+            <td className={`${style.noBorder} noPrint`}></td>
+            <td colSpan={2} className={isPrint ? style.noBorder : ''}>
+              <div className="field has-addons noPrint">
+                <p className="control is-expanded">
+                  <input className="input" type="text" placeholder="Nouvelle tâche"
+                    value={task.label} onChange={onNewTaskLabelChange} />
+                </p>
+                <p className="control">
+                  <span className="select">
+                    <select onChange={onNewTaskCategoryChange} value={task.category}>
+                      {
+                        Object.values(project.params.taskCategories).map(tc => {
+                          return (
+                            <option key={`task-category-${tc.id}`} value={tc.id}>{tc.label}</option>
+                          );
                         })
-                    }
-                    {
-                        Object.keys(project.tasks).length === 0 ?
-                        <tr>
-                            <td className={`${style.noBorder} noPrint`}></td>
-                            <td className={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
-                        </tr> :
-                        null
-                    }
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <td className={`${style.noBorder} noPrint`}></td>
-                        <td colSpan={2} className={isPrint ? style.noBorder : ''}>
-                            <div  className="field has-addons noPrint">
-                                <p className="control is-expanded">
-                                    <input className="input" type="text" placeholder="Nouvelle tâche"
-                                        value={task.label} onChange={onNewTaskLabelChange} />
-                                </p>
-                                <p className="control">
-                                    <span className="select">
-                                    <select onChange={onNewTaskCategoryChange} value={task.category}>
-                                        {
-                                            Object.values(project.params.taskCategories).map(tc => {
-                                                return (
-                                                <option key={`task-category-${tc.id}`} value={tc.id}>{tc.label}</option>
-                                                );
-                                            })
-                                        }
-                                    </select>
-                                    </span>
-                                </p>
-                                <p className="control">
-                                    <a className="button is-primary" onClick={onAddTaskClick}>
-                                    Ajouter
-                                    </a>
-                                </p>
-                            </div>
-                        </td>
-                        <th colSpan={3}>Total</th>
-                    </tr>
-                    <tr>
-                        <td colSpan={isPrint ? 2 : 3} className={style.noBorder}></td>
-                        <td>{totals.optimistic} <ProjectTimeUnit project={project} /></td>
-                        <td>{totals.likely} <ProjectTimeUnit project={project} /></td>
-                        <td>{totals.pessimistic} <ProjectTimeUnit project={project} /></td>
-                    </tr>
-                </tfoot>
-            </table>
-        </div>
-    );
+                      }
+                    </select>
+                  </span>
+                </p>
+                <p className="control">
+                  <a className="button is-primary" onClick={onAddTaskClick}>
+                    Ajouter
+                  </a>
+                </p>
+              </div>
+            </td>
+            <th colSpan={3}>Total</th>
+          </tr>
+          <tr>
+            <td colSpan={isPrint ? 2 : 3} className={style.noBorder}></td>
+            <td>{totals.optimistic} <ProjectTimeUnit project={project} /></td>
+            <td>{totals.likely} <ProjectTimeUnit project={project} /></td>
+            <td>{totals.pessimistic} <ProjectTimeUnit project={project} /></td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
 };
 
 export default TaskTable;