Project deletion

src/routes/project/financial-preview.tsx

@@ -27,11 +27,19 @@ const FinancialPreview: FunctionalComponent<FinancialPreviewProps> = ({ project
                 <tbody>
                     <tr>
                         <td class="is-narrow">Maximum</td>
-                        <td>{maxCost} {getCurrency(project)}</td>
+                        <td>
+                          <details>
+                            <summary>~ {maxCost} {getCurrency(project)}</summary>
+                          </details>
+                        </td>
                     </tr>
                     <tr>
                         <td class="is-narrow">Minimum</td>
-                        <td>{minCost} {getCurrency(project)}</td>
+                        <td>
+                          <details>
+                            <summary>~ {minCost} {getCurrency(project)}</summary>
+                          </details>
+                        </td>
                     </tr>
                 </tbody>
             </table>

src/routes/project/index.tsx

@@ -43,7 +43,7 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
                             render: () => <EstimationTab project={project} dispatch={dispatch} />
                         },
                         {
-                            label: 'Paramètres',
+                            label: 'Options avancées',
                             icon: '⚙️',
                             render: () => <ParamsTab project={project} dispatch={dispatch} />
                         },

src/routes/project/params-tab.tsx

@@ -3,6 +3,9 @@ import { Project } from "../../models/project";
 import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
 import { getRoundUpEstimations, getCurrency, getTimeUnit } from "../../models/params";
 import TaskCategoriesTable from "./task-categories-table";
+import { useState } from "preact/hooks";
+import { route } from "preact-router";
+import { getProjectStorageKey } from "../../util/storage";
 
 export interface ParamsTabProps {
     project: Project
@@ -10,57 +13,69 @@ export interface ParamsTabProps {
 }
 
 const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) => {
+    const [ deleteButtonEnabled, setDeleteButtonEnabled ] = useState(false);
+
+    const onEnableDeleteButtonChange = (evt: Event) => {
+      const checked = (evt.currentTarget as HTMLInputElement).checked;
+      setDeleteButtonEnabled(checked);
+    }
+
     const onRoundUpChange = (evt: Event) => {
-        const checked = (evt.currentTarget as HTMLInputElement).checked;
+      const checked = (evt.currentTarget as HTMLInputElement).checked;
-        dispatch(updateParam("roundUpEstimations", checked));
+      dispatch(updateParam("roundUpEstimations", checked));
     };
 
     const onCurrencyChange = (evt: Event) => {
-        const value = (evt.currentTarget as HTMLInputElement).value;
+      const value = (evt.currentTarget as HTMLInputElement).value;
-        dispatch(updateParam("currency", value));
+      dispatch(updateParam("currency", value));
     };
 
     const timeUnit = getTimeUnit(project);
 
     const onTimeUnitLabelChange = (evt: Event) => {
-        const value = (evt.currentTarget as HTMLInputElement).value;
+      const value = (evt.currentTarget as HTMLInputElement).value;
-        dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
+      dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
     };
 
     const onTimeUnitAcronymChange = (evt: Event) => {
-        const value = (evt.currentTarget as HTMLInputElement).value;
+      const value = (evt.currentTarget as HTMLInputElement).value;
-        dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
+      dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
+    };
+
+    const onDeleteProjectClick = (evt: Event) => {
+      const projectStorageKey = getProjectStorageKey(project.id);
+      window.localStorage.removeItem(projectStorageKey);
+      route('/');
     };
 
     return (
         <Fragment>
             <div class="field">
-                <input type="checkbox"
+                <label class="label is-size-5">Unité de temps</label>
-                    id="roundUpEstimations"
-                    name="roundUpEstimations" 
-                    class="switch"
-                    onChange={onRoundUpChange}
-                    checked={getRoundUpEstimations(project)} />
-                <label for="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
-            </div>
-            <hr />
-            <div class="field">
-                <label class="label">Unité de temps</label>
                 <div class="control">
                     <input class="input" type="text"
                         onChange={onTimeUnitLabelChange}
                         value={timeUnit.label} />
                 </div>
-                <label class="label">Acronyme</label>
+                <label class="label is-size-6">Acronyme</label>
                 <div class="control">
                     <input class="input" type="text"
                         onChange={onTimeUnitAcronymChange}
                         value={timeUnit.acronym} />
                 </div>
             </div>
+            <div class="field">
+              <input type="checkbox"
+                id="roundUpEstimations"
+                name="roundUpEstimations" 
+                class="switch"
+                onChange={onRoundUpChange}
+                checked={getRoundUpEstimations(project)} />
+              <label for="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
+            </div>
             <hr />
             <div class="field">
-                <label class="label">Devise</label>
+                <label class="label is-size-5">Devise</label>
                 <div class="control">
                     <input class="input" type="text"
                         onChange={onCurrencyChange}
@@ -69,6 +84,25 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
             </div>
             <hr />
             <TaskCategoriesTable project={project} dispatch={dispatch} />
+            <hr />
+            <div>
+              <label class="label is-size-5">Supprimer le projet</label>
+              <div class="field">
+                <input type="checkbox"
+                    id="enableDeleteButton"
+                    name="enableDeleteButton" 
+                    class="switch is-warning"
+                    onChange={onEnableDeleteButtonChange}
+                    checked={deleteButtonEnabled} />
+                  <label for="enableDeleteButton">Supprimer ce projet ?</label>
+              </div>
+              <button class="button is-danger"
+                onClick={onDeleteProjectClick}
+                disabled={!deleteButtonEnabled}>
+                🗑️ Supprimer
+              </button>
+            </div>
+            <hr />
         </Fragment>
     );
 };

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

@@ -45,7 +45,7 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
   
   return (
     <div class="table-container">
-      <label class="label">Catégories de tâche</label>
+      <label class="label is-size-5">Catégories de tâche</label>
       <table class={`table is-bordered is-striped" ${style.middleTable}`}>
         <thead>
           <tr>