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,6 +13,13 @@ 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;
       dispatch(updateParam("roundUpEstimations", checked));
@@ -32,8 +42,28 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
       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">
+                <label class="label is-size-5">Unité de temps</label>
+                <div class="control">
+                    <input class="input" type="text"
+                        onChange={onTimeUnitLabelChange}
+                        value={timeUnit.label} />
+                </div>
+                <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"
@@ -45,22 +75,7 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
             </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>
-                <div class="control">
-                    <input class="input" type="text"
-                        onChange={onTimeUnitAcronymChange}
-                        value={timeUnit.acronym} />
-                </div>
-            </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>