Task categories edition

src/models/task.ts

@@ -1,4 +1,5 @@
 import { uuidV4 } from "../util/uuid"
+import { defaults } from "./params";
 
 export type TaskID = string
 
@@ -35,3 +36,11 @@ export function newTask(label: string, category: TaskCategoryID): Task {
     }
   };
 }
+
+export function createTaskCategory(): TaskCategory {
+  return {
+    id: uuidV4(),
+    costPerTimeUnit: defaults.costPerTimeUnit,
+    label: ""
+  };
+}

src/routes/project/task-categories-table.tsx

@@ -1,11 +1,11 @@
 import { FunctionalComponent, h } from "preact";
 import { Project } from "../../models/project";
 import style from './style.module.css';
-import { projectReducer, ProjectReducerActions, updateTaskCategoryCost, updateTaskCategoryLabel, removeTaskCategory } from "../../hooks/use-project-reducer";
+import { ProjectReducerActions, updateTaskCategoryCost, updateTaskCategoryLabel, removeTaskCategory, addTaskCategory } from "../../hooks/use-project-reducer";
 import EditableText from "../../components/editable-text";
-import { TaskCategoryID } from "../../models/task";
+import { TaskCategoryID, createTaskCategory } from "../../models/task";
-import ProjectTimeUnit from "../../components/project-time-unit";
 import { getCurrency, getTaskCategoryCost } from "../../models/params";
+import { useState } from "preact/hooks";
 
 export interface TaskCategoriesTableProps {
   project: Project
@@ -13,6 +13,8 @@ export interface TaskCategoriesTableProps {
 }
 
 const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ project, dispatch }) => {
+  const [ newTaskCategory, setNewTaskCategory ] = useState(createTaskCategory());
+  
   const onTaskCategoryRemove = (categoryId: TaskCategoryID) => {
     dispatch(removeTaskCategory(categoryId));
   };
@@ -26,6 +28,21 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
     dispatch(updateTaskCategoryCost(categoryId, cost));
   };
 
+  const onNewTaskCategoryCostChange = (evt: Event) => {
+    const costPerTimeUnit = parseFloat((evt.currentTarget as HTMLInputElement).value);
+    setNewTaskCategory(newTaskCategory => ({ ...newTaskCategory, costPerTimeUnit }));
+  };
+
+  const onNewTaskCategoryLabelChange = (evt: Event) => {
+    const label = (evt.currentTarget as HTMLInputElement).value;
+    setNewTaskCategory(newTaskCategory => ({ ...newTaskCategory, label }));
+  };
+
+  const onNewTaskCategoryAddClick = (evt: Event) => {
+    dispatch(addTaskCategory(newTaskCategory));
+    setNewTaskCategory(createTaskCategory());
+  };
+  
   return (
     <div class="table-container">
       <label class="label">Catégories de tâche</label>
@@ -49,7 +66,8 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
                   🗑️
                   </button>
                 </td>
-                                    <td><EditableText value={tc.label} 
+                <td>
+                  <EditableText value={tc.label} 
                     onChange={onTaskCategoryLabelChange.bind(null, tc.id)} />
                 </td>
                 <td>
@@ -62,6 +80,31 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
           })
         }
         </tbody>
+        <tfoot>
+          <tr>
+            <td class={`${style.noBorder}`}></td>
+            <td colSpan={2}>
+              <div  class="field has-addons">
+                <p class="control is-expanded">
+                  <input class="input" type="text" placeholder="Nouvelle catégorie"
+                    value={newTaskCategory.label} onChange={onNewTaskCategoryLabelChange} />
+                </p>
+                <p class="control">
+                  <input class="input" type="number"
+                    value={newTaskCategory.costPerTimeUnit} onChange={onNewTaskCategoryCostChange} />
+                </p>
+                <p class="control">
+                  <a class="button is-static">{getCurrency(project)}</a>
+                </p>
+                <p class="control">
+                  <a class="button is-primary" onClick={onNewTaskCategoryAddClick}>
+                  Ajouter
+                  </a>
+                </p>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
       </table>
     </div>
   );