feat: tasks manual reordering

.nvmrc

@@ -0,0 +1 @@
+lts/gallium

Dockerfile

@@ -1,21 +1,25 @@
-FROM golang:1.13 AS build
+FROM golang:1.19 AS build
 
 ARG HTTP_PROXY=
 ARG HTTPS_PROXY=
 ARG http_proxy=
 ARG https_proxy=
+ARG NODE_MAJOR=16
 
-RUN apt-get update && apt-get install -y build-essential git bash curl
+RUN apt-get update && apt-get install -y build-essential git bash curl ca-certificates gnupg
 
-RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - \
+RUN echo 'Package: nodejs\nPin: origin deb.nodesource.com\nPin-Priority: 600' > /etc/apt/preferences.d/nodesource \
+    && mkdir -p /etc/apt/keyrings \
+    && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
+    && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list \
+    && apt-get update \
     && apt-get install -y nodejs
 
 COPY . /src
 
 WORKDIR /src
 
-RUN ( cd client && npm install ) \
+RUN make deps \
-    && ( cd server && go mod vendor ) \
     && make ARCH_TARGETS=amd64 release
 
 FROM busybox

Makefile

@@ -4,8 +4,7 @@ watch:
 	modd
 
 deps:
-	cd client && npm install
+	cd client && npm ci
-	cd server && go mod vendor
 
 build: clean build-server build-client
 
@@ -13,7 +12,7 @@ build-client:
 	cd client && npm run build
 
 build-server:
-	cd server && CGO_ENABLED=0 go build -mod=vendor -v -o bin/server ./cmd/server
+	cd server && CGO_ENABLED=0 go build -v -o bin/server ./cmd/server
 
 clean:
 	rm -rf client/dist server/bin release

README.md

@@ -9,6 +9,7 @@ Application de création collaborative d’estimations de temps/coût pour la r
 
 - [Go >= 1.13](https://golang.org/)
 - [GNU Make](https://fr.wikipedia.org/wiki/GNU_Make)
+- [NVM](https://github.com/nvm-sh/nvm)
 - Git
 - NodeJS/NPM
  
@@ -29,6 +30,7 @@ Application de création collaborative d’estimations de temps/coût pour la r
 3. Générer une version de distribution
 
     ```
+    nvm use
     make deps
     make release
     ```

client/package.json

@@ -6,14 +6,17 @@
   "dependencies": {
     "@types/bs58": "^4.0.1",
     "@types/json-merge-patch": "0.0.4",
+    "@types/react-router-dom": "^5.1.5",
     "bs58": "^4.0.1",
-    "bulma": "^0.8.2",
+    "bulma": "^0.9.4",
     "bulma-switch": "^2.0.0",
     "json-merge-patch": "^0.2.3",
-    "preact": "^10.4.1",
+    "react": "^16.13.1",
-    "preact-markup": "^1.6.0",
+    "react-dom": "^16.13.1",
-    "preact-render-to-string": "^5.1.6",
+    "react-redux": "^7.2.0",
-    "preact-router": "^3.2.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "redux-saga": "^1.1.3",
     "style-loader": "^1.1.4",
     "typescript": "^3.8.3"
   },
@@ -28,7 +31,7 @@
     "ts-loader": "^7.0.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.11.0"
   },
   "scripts": {
     "dev": "NODE_ENV=development webpack-dev-server --watch",

client/src/components/app.tsx

@@ -1,25 +1,22 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
-import { Route, Router, RouterOnChangeArgs } from "preact-router";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import Home from "../routes/home/index";
 import Project from "../routes/project/index";
-import NotFoundPage from '../routes/notfound/index';
+import NotFound from '../routes/notfound/index';
 import Header from "./header/index";
 import Footer from "./footer";
 
-const App: FunctionalComponent = () => {
+const App: FunctionComponent = () => {
-    let currentUrl: string;
-    const handleRoute = (e: RouterOnChangeArgs) => {
-        currentUrl = e.url;
-    };
-
     return (
       <div id="app">
         <Header class="noPrint" />
-        <Router onChange={handleRoute}>
+        <Router>
-          <Route path="/" component={Home} />
+          <Switch>
-          <Route path="/p/:projectId" component={Project} />
+            <Route exact path="/" component={Home} />
-          <NotFoundPage default />
+            <Route exact path="/p/:projectId" component={Project} />
+            <Route component={NotFound} />
+          </Switch>
         </Router>
         <Footer />
       </div>

client/src/components/editable-text/index.tsx

@@ -1,16 +1,19 @@
-import { FunctionalComponent, h, Component, ComponentChild, Fragment } from "preact";
+import React, { 
+  FunctionComponent, Fragment, 
+  ReactNode, ChangeEvent, 
+  useState, useEffect 
+} from "react";
 import * as style from "./style.module.css";
-import { useState, useEffect } from "preact/hooks";
 
 export interface EditableTextProps {
     value: string
     class?: string
     editIconClass?: string
     onChange?: (value: string) => void
-    render?: (value: string) => ComponentChild
+    render?: (value: string) => ReactNode
 }
 
-const EditableText: FunctionalComponent<EditableTextProps> = ({ onChange, value, render, ...props }) => {
+const EditableText: FunctionComponent<EditableTextProps> = ({ onChange, value, render, ...props }) => {
     const [ internalValue, setInternalValue ] = useState(value);
     const [ editMode, setEditMode ] = useState(false);
 
@@ -31,28 +34,28 @@ const EditableText: FunctionalComponent<EditableTextProps> = ({ onChange, value,
         setEditMode(false);
     }
 
-    const onValueChange = (evt: Event) => {
+    const onValueChange = (evt: ChangeEvent) => {
         const currentTarget = evt.currentTarget as HTMLInputElement;
         setInternalValue(currentTarget.value);
     };
 
     return (
-        <div class={`${style.editableText} ${props.class ? props.class : ''}`}>
+        <div className={`${style.editableText} ${props.class ? props.class : ''}`}>
-            {
+          {
-                editMode ?
+            editMode ?
-                <div class="field has-addons">
+            <div className="field has-addons">
-                    <div class="control">
+              <div className="control">
-                        <input class="input is-expanded" type="text" value={internalValue} onChange={onValueChange} />
+                <input className="input is-expanded" type="text" value={internalValue} onChange={onValueChange} />
-                    </div>
+              </div>
-                    <div class="control">
+              <div className="control">
-                        <a class="button" onClick={onValidateButtonClick}>✔️</a>
+                <a className="button" onClick={onValidateButtonClick}>✔️</a>
-                    </div>
+              </div>
-                </div> :
+            </div> :
-                <Fragment>
+            <Fragment>
-                    { render ? render(internalValue) : <span>{internalValue}</span> }
+              { render ? render(internalValue) : <span>{internalValue}</span> }
-                    <i class={`${style.editIcon} icon ${props.editIconClass ? props.editIconClass : ''}`} onClick={onEditIconClick}>🖋️</i>
+              <i className={`${style.editIcon} icon ${props.editIconClass ? props.editIconClass : ''}`} onClick={onEditIconClick}>🖋️</i>
-                </Fragment>
+            </Fragment>
-            }
+          }
         </div>
     );
 };

client/src/components/estimation-range.tsx

@@ -1,7 +1,7 @@
 import ProjectTimeUnit from "./project-time-unit";
-import { defaults, getRoundUpEstimations } from "../models/params";
+import { getRoundUpEstimations } from "../models/params";
 import { Project } from "../models/project";
-import { FunctionalComponent, Fragment, h } from "preact";
+import React, { Fragment,FunctionComponent } from "react";
 import { Estimation } from "../hooks/use-project-estimations";
 
 export interface EstimationRangeProps {
@@ -9,7 +9,7 @@ export interface EstimationRangeProps {
     estimation: Estimation
 }
 
-export const EstimationRange: FunctionalComponent<EstimationRangeProps> = ({ project, estimation }) => {
+export const EstimationRange: FunctionComponent<EstimationRangeProps> = ({ project, estimation }) => {
     const roundUp = getRoundUpEstimations(project);
     let e: number|string = estimation.e;
     let sd: number|string = estimation.sd;

client/src/components/footer/index.tsx

@@ -1,5 +1,6 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
 import style from "./style.module.css";
+import { formatDate } from "../../util/date";
 
 declare var __BUILD__: any;
 
@@ -7,19 +8,17 @@ export interface FooterProps {
   class?: string
 }
 
-const Footer: FunctionalComponent<FooterProps> = ({ ...props}) => {
+const Footer: FunctionComponent<FooterProps> = ({ ...props}) => {
-  console.log(__BUILD__)
   return (
-    <div class={`container ${style.footer} ${props.class ? props.class : ''}`}>
+    <div className={`container ${style.footer} ${props.class ? props.class : ''}`}>
-      <div class="columns">
+      <div className="columns">
-        <div class="column is-4 is-offset-8">
+        <div className="column is-4 is-offset-8">
-          <p class="has-text-right is-size-7">
+          <p className="has-text-right is-size-7">
-            Propulsé par <a class="has-text-primary" href="https://forge.cadoles.com/wpetit/guesstimate">Guesstimate</a> et publié sous licence <a class="has-text-primary" href="https://www.gnu.org/licenses/agpl-3.0.txt">AGPL-3.0</a>.
+            Propulsé par <a className="has-text-primary" href="https://forge.cadoles.com/wpetit/guesstimate">Guesstimate</a> et publié sous licence <a className="has-text-primary" href="https://www.gnu.org/licenses/agpl-3.0.txt">AGPL-3.0</a>.
           </p>
-          <p class="has-text-right is-size-7">
+          <p className="has-text-right is-size-7">
-            Version: {__BUILD__.version} - 
+            Réf.: {__BUILD__.gitRef ? __BUILD__.gitRef : '??'} | 
-            Réf.: {__BUILD__.gitRef ? __BUILD__.gitRef : '??'} - 
+            Date de construction: {__BUILD__.buildDate ? formatDate(__BUILD__.buildDate) : '??'}
-            Date de construction: {__BUILD__.buildDate ? __BUILD__.buildDate : '??'}
           </p>
         </div>
       </div>

client/src/components/header/index.tsx

@@ -1,21 +1,21 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
 import style from "./style.module.css";
 
 export interface HeaderProps {
     class?: string
 }
 
-const Header: FunctionalComponent<HeaderProps> = ({ ...props}) => {
+const Header: FunctionComponent<HeaderProps> = ({ ...props}) => {
     return (
-        <div class={`container ${style.header} ${props.class ? props.class : ''}`}>
+        <div className={`container ${style.header} ${props.class ? props.class : ''}`}>
-            <div class="columns">
+            <div className="columns">
-                <div class="column">
+                <div className="column">
-                    <nav class="navbar" role="navigation" aria-label="main navigation">
+                    <nav className="navbar" role="navigation" aria-label="main navigation">
-                        <div class="navbar-brand">
+                        <div className="navbar-brand">
-                            <a class="navbar-item" href="/">
+                            <a className="navbar-item" href="/">
-                                <h1 class="title is-size-4">⏱️ Guesstimate</h1>
+                                <h1 className="title is-size-4">⏱️ Guesstimate</h1>
                             </a>
-                            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+                            <a role="button" className="navbar-burger" aria-label="menu" aria-expanded="false">
                                 <span aria-hidden="true"></span>
                                 <span aria-hidden="true"></span>
                                 <span aria-hidden="true"></span>

client/src/components/project-time-unit.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
 import { Project } from "../models/project";
 import { getTimeUnit } from "../models/params";
 
@@ -6,7 +6,7 @@ export interface ProjectTimeUnitProps {
     project: Project
 }
 
-const ProjectTimeUnit: FunctionalComponent<ProjectTimeUnitProps> = ({ project }) => {
+const ProjectTimeUnit: FunctionComponent<ProjectTimeUnitProps> = ({ project }) => {
     const timeUnit = getTimeUnit(project);
     return (
        <abbr title={timeUnit.label}>{timeUnit.acronym}</abbr>

client/src/components/tabs/index.tsx

@@ -1,11 +1,10 @@
-import { FunctionalComponent, h, ComponentChild } from "preact";
+import React, { FunctionComponent, useState, ReactNode } from "react";
 import style from "./style.module.css";
-import { useState } from "preact/hooks";
 
 export interface TabItem {
     label: string
     icon?: string
-    render: () => ComponentChild
+    render: () => ReactNode
 }
 
 export interface TabsProps {
@@ -13,7 +12,7 @@ export interface TabsProps {
     items: TabItem[]
 }
 
-const Tabs: FunctionalComponent<TabsProps> = ({ items, ...props }) => {
+const Tabs: FunctionComponent<TabsProps> = ({ items, ...props }) => {
     const [ selectedTabIndex, setSelectedTabIndex ] = useState(0);
 
     const onTabClick = (tabIndex: number) => {
@@ -23,16 +22,16 @@ const Tabs: FunctionalComponent<TabsProps> = ({ items, ...props }) => {
     const selectedTab = items[selectedTabIndex];
 
     return (
-        <div class={`${style.tabs} ${props.class}`}>
+        <div className={`${style.tabs} ${props.class}`}>
-            <div class="tabs">
+            <div className="tabs">
-                <ul class={`noPrint`}>
+                <ul className={`noPrint`}>
                 {
                     items.map((tabItem, tabIndex) => (
                         <li key={`tab-${tabIndex}`}
                             onClick={onTabClick.bind(null, tabIndex)}
-                            class={`${selectedTabIndex === tabIndex ? 'is-active' : ''}`}>
+                            className={`${selectedTabIndex === tabIndex ? 'is-active' : ''}`}>
                             <a>
-                                <span class="icon is-small">{tabItem.icon}</span>
+                                <span className="icon is-small">{tabItem.icon}</span>
                                 {tabItem.label}
                             </a>
                         </li>
@@ -40,7 +39,7 @@ const Tabs: FunctionalComponent<TabsProps> = ({ items, ...props }) => {
                 }
                 </ul>
             </div>
-            <div class={style.tabContent}>
+            <div className={style.tabContent}>
                 { selectedTab.render() }
             </div>
         </div>

client/src/hooks/use-debounce.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "preact/hooks";
+import { useMemo, useState } from "react";
 
 export default function useDebounce(func: Function, delay: number) {
   const [id, setId] = useState<number|null>(null)

client/src/hooks/use-local-storage.ts

@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useState } from "react";
 
 export function useLocalStorage<T>(key: string, initialValue: T) {
     // State to store our value

client/src/hooks/use-media-query.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "react";
 
 export function useMediaQuery(query: string): boolean {
     const media = window.matchMedia(query);

client/src/hooks/use-previous.ts

@@ -1,7 +1,7 @@
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef } from "react";
 
 export function usePrevious<T>(value: T): T|undefined {
-  const ref = useRef();
+  const ref = useRef<T>();
 
   useEffect(() => {
     ref.current = value;

client/src/hooks/use-project-estimations.ts

@@ -1,5 +1,5 @@
 import { Project } from "../models/project";
-import { useState, useEffect } from "preact/hooks";
+import { useState, useEffect } from "react";
 import { getProjectWeightedMean, getProjectStandardDeviation } from "../util/stat";
 
 export interface Estimation {

client/src/hooks/use-project-reducer.ts

@@ -1,6 +1,6 @@
-import { Project } from "../models/project";
+import { Project, sanitize } from "../models/project";
 import { Task, TaskID, EstimationConfidence, TaskCategoryID, TaskCategory } from "../models/task";
-import { useReducer } from "preact/hooks";
+import { useReducer } from "react";
 import { generate as diff } from "json-merge-patch";
 import { applyPatch } from "../util/patch";
 
@@ -27,7 +27,7 @@ export function useProjectReducer(project: Project) {
 }
 
 export function projectReducer(project: Project, action: ProjectReducerActions): Project {
-  console.log(action);
+  console.log('action', action);
   switch(action.type) {
     case ADD_TASK:
     return handleAddTask(project, action as AddTask);
@@ -44,6 +44,9 @@ export function projectReducer(project: Project, action: ProjectReducerActions):
     case UPDATE_TASK_LABEL:
     return handleUpdateTaskLabel(project, action as UpdateTaskLabel);
 
+    case MOVE_TASK:
+    return handleMoveTask(project, action as MoveTask);
+    
     case UPDATE_PARAM:
     return handleUpdateParam(project, action as UpdateParam);
     
@@ -83,7 +86,12 @@ export function handleAddTask(project: Project, action: AddTask): Project {
     tasks: {
       ...project.tasks,
       [task.id]: task,
-    }
+    },
+    ordering: [
+      ...project.ordering,
+      task.id
+    ],
+    updatedAt: new Date(),
   };
 }
 
@@ -100,9 +108,18 @@ export function removeTask(id: TaskID): RemoveTask {
 export function handleRemoveTask(project: Project, action: RemoveTask): Project {
   const tasks = { ...project.tasks };
   delete tasks[action.id];
+  
+  const ordering = [ ...(project.ordering ?? []) ]
+  const taskIndex = ordering.findIndex(taskId => taskId === action.id)
+  if (taskIndex !== -1) {
+    ordering.splice(taskIndex, 1)
+  }
+
   return {
     ...project,
-    tasks
+    tasks,
+    ordering,
+    updatedAt: new Date(),
   };
 }
 
@@ -124,14 +141,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: {
@@ -139,8 +148,9 @@ export function handleUpdateTaskEstimation(project: Project, action: UpdateTaskE
       [action.id]: {
         ...project.tasks[action.id],
         estimations: estimations,
-      }
+      },
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
@@ -158,7 +168,8 @@ export function updateProjectLabel(label: string): UpdateProjectLabel {
 export function handleUpdateProjectLabel(project: Project, action: UpdateProjectLabel): Project {
   return {
     ...project,
-    label: action.label
+    label: action.label,
+    updatedAt: new Date(),
   };
 }
 
@@ -182,10 +193,48 @@ export function handleUpdateTaskLabel(project: Project, action: UpdateTaskLabel)
         ...project.tasks[action.id],
         label: action.label,
       }
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
+export const MOVE_TASK = "MOVE_TASK";
+
+export interface MoveTask extends Action {
+  id: TaskID
+  move: number
+}
+
+export function moveTask(id: TaskID, move: number): MoveTask {
+  return { type: MOVE_TASK, id, move };
+}
+
+export function handleMoveTask(project: Project, action: MoveTask): Project {
+  let ordering = [
+    ...(project.ordering ?? []),
+  ]
+
+  if (ordering.length === 0) {
+    ordering = Object.keys(project.tasks)
+  }
+
+  const taskIndex = ordering.findIndex(taskId => action.id === taskId)
+
+  if (taskIndex+action.move < 0 || taskIndex+action.move > ordering.length-1 ) {
+    return project
+  }
+
+  ordering.splice(taskIndex, 1)
+  ordering.splice(taskIndex+action.move, 0, action.id)
+
+  return {
+    ...project,
+    ordering,
+    updatedAt: new Date(),
+  }
+}
+
+
 export interface UpdateParam extends Action {
   name: string
   value: any
@@ -203,7 +252,8 @@ export function handleUpdateParam(project: Project, action: UpdateParam): Projec
     params: {
       ...project.params,
       [action.name]: action.value,
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
@@ -230,7 +280,8 @@ export function handleUpdateTaskCategoryLabel(project: Project, action: UpdateTa
           label: action.label
         },
       }
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
@@ -257,7 +308,8 @@ export function handleUpdateTaskCategoryCost(project: Project, action: UpdateTas
           costPerTimeUnit: action.costPerTimeUnit
         },
       }
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
@@ -281,7 +333,8 @@ export function handleAddTaskCategory(project: Project, action: AddTaskCategory)
         ...project.params.taskCategories,
         [taskCategory.id]: taskCategory,
       }
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
@@ -303,7 +356,8 @@ export function handleRemoveTaskCategory(project: Project, action: RemoveTaskCat
     params: {
       ...project.params,
       taskCategories
-    }
+    },
+    updatedAt: new Date(),
   };
 }
 
@@ -321,5 +375,9 @@ export function handlePatchProject(project: Project, action: PatchProject): Proj
   const p = diff(project, action.from);
   console.log('patch to apply', p);
   if (!p) return project;
-  return applyPatch(project, p) as Project;
+  const patched: Project = applyPatch(project, p) as Project
+  
+  sanitize(patched)
+
+  return patched;
 }

client/src/hooks/use-server-sync.ts

@@ -1,8 +1,6 @@
 import { Project } from "../models/project";
-import { usePrevious } from "./use-previous";
+import { useEffect, useState } from "react";
-import { useEffect, useState, useRef } from "preact/hooks";
 import { generate as diff } from "json-merge-patch";
-import useDebounce from "./use-debounce";
 
 export interface ServerSyncOptions {
   projectURL: string

client/src/hooks/use-stored-project-list.ts

@@ -1,35 +1,38 @@
-import {Project} from "../models/project";
+import { Project, sanitize } from "../models/project";
-import { useState } from "preact/hooks";
+import { useState } from "react";
 import { ProjectStorageKeyPrefix } from "../util/storage";
 
 export function loadStoredProjects(): Project[] {
-    const projects: Project[] = [];
+  const projects: Project[] = [];
 
-    Object.keys(window.localStorage).forEach(key => {
+  Object.keys(window.localStorage).forEach(key => {
-        if (key.startsWith(ProjectStorageKeyPrefix)) {
+    if (key.startsWith(ProjectStorageKeyPrefix)) {
-            try {
+      try {
-                const data = window.localStorage.getItem(key);
+        const data = window.localStorage.getItem(key);
-                if (data) {
+        if (data) {
-                    const project = JSON.parse(data);
+          const project: Project = JSON.parse(data);
-                    projects.push(project);
+
-                }
+          sanitize(project)
-            } catch(err) {
+
-                console.error(err);
+          projects.push(project);
-            }
         }
-    });
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  });
 
-    return projects
+  return projects
 }
 
 export function useStoredProjectList(): [Project[], () => void] {
-    const [ projects, setProjects ] = useState(() => {
+  const [projects, setProjects] = useState(() => {
-        return loadStoredProjects();
+    return loadStoredProjects();
-    });
+  });
 
-    const refresh = () => {
+  const refresh = () => {
-        setProjects(loadStoredProjects());
+    setProjects(loadStoredProjects());
-    };
+  };
 
-    return [ projects, refresh];
+  return [projects, refresh];
 }

client/src/hooks/use-title.ts

@@ -0,0 +1,7 @@
+import { useEffect } from "react"
+
+export const useTitle = (title: string) => {
+  useEffect(() => {
+    window.document.title = `⏱️ | ${title}`
+  }, [title])
+}

client/src/hooks/useSort.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from "react";
+
+export enum Direction {
+  ASC = 1,
+  DESC = -1
+}
+
+export function useKeySort<T>(items: T[], key: string, direction: Direction = Direction.ASC): T[] {
+  const predicate = useCallback((a: any, b: any) => {
+    if (!a.hasOwnProperty(key)) return -direction;
+    if (!b.hasOwnProperty(key)) return direction;
+    if (a[key] > b[key]) return direction;
+    if (a[key] < b[key]) return -direction;
+    return 0
+  }, [key, direction])  
+
+  return useSort(items, predicate)
+}
+
+export function useSort<T>(items: T[], predicate: (a:T, b:T) => number): T[] {
+  const [ sorted, setSorted ] = useState(items);
+  useEffect(() => {
+    const sorted = [ ...items ]
+    
+    sorted.sort(predicate)
+
+    setSorted(sorted)
+  }, [items, predicate])
+
+  return sorted
+}

client/src/index.js

@@ -2,13 +2,11 @@ import "./style/index.css";
 import "bulma/css/bulma.css";
 import "bulma-switch/dist/css/bulma-switch.min.css";
 
-import { h, render } from 'preact'
+import React from 'react';
+import { render } from 'react-dom';
 import App from "./components/app";
 
-render(h(App, {}), document.getElementById('app'));
+render(
-
+  React.createElement(App, {}, null), 
-// Hot Module Replacement
+  document.getElementById('app')
-if (module.hot) {
+);
-  require("preact/debug");
-  module.hot.accept();
-}

client/src/models/project.ts

@@ -1,4 +1,4 @@
-import { Task, TaskCategory, TaskID } from './task';
+import { Task, TaskID } from './task';
 import { Params, defaults } from "./params";
 import { uuidV4 } from "../util/uuid";
 
@@ -10,6 +10,9 @@ export interface Project {
   description: string
   tasks: Tasks
   params: Params
+  createdAt: Date
+  updatedAt: Date
+  ordering: TaskID[]
 }
 
 export interface Tasks {
@@ -25,5 +28,24 @@ export function newProject(id?: string): Project {
     params: {
       ...defaults
     },
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    ordering: [],
   };
 }
+
+export function sanitize(project: Project): Project {
+  if (!Array.isArray(project.ordering)) {
+    project.ordering = Object.keys(project.tasks)
+  }
+
+  if (typeof project.updatedAt === 'string') {
+    project.updatedAt = new Date(project.updatedAt)
+  }
+
+  if (typeof project.createdAt === 'string') {
+    project.createdAt = new Date(project.createdAt)
+  }
+
+  return project
+}

client/src/routes/home/index.tsx

@@ -1,57 +1,111 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent, MouseEvent, useCallback, useEffect, useState } from "react";
 import style from "./style.module.css";
-import { route } from 'preact-router';
+import { useHistory } from 'react-router';
 import { base58UUID } from '../../util/uuid';
 import { useStoredProjectList } from "../../hooks/use-stored-project-list";
+import { formatDate } from "../../util/date";
+import { Direction, useKeySort, useSort } from "../../hooks/useSort";
+import { useTitle } from "../../hooks/use-title";
 
-const Home: FunctionalComponent = () => {
+const Home: FunctionComponent = () => {
-    const [ projects, refreshProjects ] = useStoredProjectList();
+  useTitle('Accueil')
 
-    const openNewProject = () => {
+  const [projects] = useStoredProjectList()
-        const uuid = base58UUID();
+  const [sortingKey, setSortingKey] = useState('updatedAt')
-        route(`/p/${uuid}`);
+  const [sortingDirection, setSortingDirection] = useState<Direction>(Direction.DESC)
-    };
+  const sortedProjects = useKeySort(projects, sortingKey, sortingDirection)
+  const history = useHistory()
 
-    return (
+  const openNewProject = () => {
-        <div class={`container ${style.home}`}>
+    const uuid = base58UUID()
-            <div class="columns">
+    history.push(`/p/${uuid}`)
-                <div class="column">
+  };
-                    <div class="buttons is-right">
+
-                        <button class="button is-primary"
+  const openProject = useCallback((evt: MouseEvent<HTMLTableRowElement>) => {
-                            onClick={openNewProject}>
+    const projectId = evt.currentTarget.dataset.projectId;
-                            <strong>+</strong>&nbsp;&nbsp;Nouveau projet
+    history.push(`/p/${projectId}`)
-                        </button>
+  }, [])
-                    </div>
+
-                    <div class="panel">
+  const sortBy = useCallback((evt: MouseEvent<HTMLTableCellElement>) => {
-                        <p class="panel-heading">
+    const key = evt.currentTarget.dataset.sortKey
-                            Mes projets
+    if (!key) return
-                        </p>
+
-                        {/* <div class="panel-block">
+    if (sortingKey !== key) {
-                            <p class="control has-icons-left">
+      setSortingKey(key)
-                                <input class="input" type="text" placeholder="Search" />
+      return
-                                <span class="icon is-left">🔍</span>
+    }
-                            </p>
+
-                        </div> */}
+    setSortingDirection(sortingDirection => -sortingDirection)
-                        {
+  }, [sortingKey, sortingDirection])
-                            projects.map(p => (
+
-                                <a class="panel-block" href={`/p/${p.id}`}>
+  return (
-                                    <span class="panel-icon">🗒️</span>
+    <div className={`container ${style.home}`}>
-                                    { p.label ? p.label : "Projet sans nom" }
+      <div className="columns">
-                                </a>
+        <div className="column">
-                            ))
+          <div className="buttons is-right">
-                        }
+            <button className="button is-primary is-medium"
-                        {
+              onClick={openNewProject}>
-                            projects.length === 0 ?
+              <strong>+</strong>&nbsp;&nbsp;Nouveau projet
-                            <p class="panel-block">
+            </button>
-                                <div class={style.noProjects}>Aucun project pour l'instant.</div>
+          </div>
-                            </p> :
+          <div className="box">
-                            null
+            <div className="table-container">
-                        }
+              <table className="table is-fullwidth is-hoverable">
-                    </div>
+                <thead>
-                </div>
+                  <tr className="is-size-5">
+                    <TableHeader onClick={sortBy} label="Projet" isCurrentSortingKey={sortingKey === 'label'} sortingDirection={sortingDirection} sortingKey="label" />
+                    <TableHeader onClick={sortBy} label="Mis à jour le" isCurrentSortingKey={sortingKey === 'updatedAt'} sortingDirection={sortingDirection} sortingKey="updatedAt" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {
+                    sortedProjects.map(p => (
+                      <tr 
+                        key={`project-${p.id}`}
+                        data-project-id={p.id}
+                        onClick={openProject} 
+                        className="is-clickable">
+                        <td>
+                          <span className="mr-3">🗒️</span>
+                          {p.label ? p.label : "Projet sans nom"}
+                        </td>
+                        <td>
+                          {p.updatedAt ? formatDate(p.updatedAt) : "--"}
+                        </td>
+                      </tr>
+                    ))
+                  }
+                  {
+                    projects.length === 0 ?
+                      <tr className={style.noProjects}>
+                        <td colSpan={2}>
+                          Aucun project pour l'instant.
+                        </td>
+                      </tr> :
+                      null
+                  }
+                </tbody>
+              </table>
             </div>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
+interface TableHeaderProps {
+  onClick?: React.MouseEventHandler<HTMLTableCellElement>
+  sortingKey: string
+  isCurrentSortingKey: boolean
+  sortingDirection: Direction
+  label: string
+}
+
+const TableHeader: FunctionComponent<TableHeaderProps> = ({ onClick, isCurrentSortingKey, sortingKey, label, sortingDirection }) => {
+  return (
+    <th className="is-clickable" onClick={onClick} data-sort-key={sortingKey}>{label}<span className={`ml-1 ${!isCurrentSortingKey ? 'is-hidden' : ''}`}>{sortingDirection === Direction.ASC ? '↑' : '↓'}</span></th>
+  )
+}
+
 export default Home;

client/src/routes/notfound/index.tsx

@@ -1,15 +1,18 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
-import { Link } from 'preact-router/match';
+import { Link } from 'react-router-dom';
 import style from "./style.module.css";
+import { useTitle } from "../../hooks/use-title";
 
-const Notfound: FunctionalComponent = () => {
+const NotFound: FunctionComponent = () => {
-    return (
+  useTitle("Page non trouvée")
-        <div class={style.notFound}>
+
-            <h1>Error 404</h1>
+  return (
-            <p>That page doesn't exist.</p>
+    <div className={style.notFound}>
-            <Link href="/"><h4>Back to Home</h4></Link>
+      <h1>Erreur 404</h1>
-        </div>
+      <p>Cette page n'existe pas</p>
-    );
+      <Link to="/"><h4>Retour à la page d'accueil</h4></Link>
+    </div>
+  );
 };
 
-export default Notfound;
+export default NotFound;

client/src/routes/project/estimation-tab.tsx

@@ -1,69 +1,74 @@
-import { FunctionalComponent, h, Fragment } from "preact";
+import React, { FunctionComponent, Fragment, useCallback } from "react";
 import { Project } from "../../models/project";
 import TaskTable from "./tasks-table";
 import TimePreview from "./time-preview";
 import FinancialPreview from "./financial-preview";
-import { addTask, updateTaskEstimation, removeTask, updateProjectLabel, updateTaskLabel, ProjectReducerActions } from "../../hooks/use-project-reducer";
+import { addTask, updateTaskEstimation, removeTask, updateTaskLabel, ProjectReducerActions, moveTask } from "../../hooks/use-project-reducer";
 import { Task, TaskID, EstimationConfidence } from "../../models/task";
 import RepartitionPreview from "./repartition-preview";
 import { getHideFinancialPreviewOnPrint } from "../../models/params";
 
 export interface EstimationTabProps {
-    project: Project
+  project: Project
-    dispatch: (action: ProjectReducerActions) => void
+  dispatch: (action: ProjectReducerActions) => void
 }
 
-const EstimationTab: FunctionalComponent<EstimationTabProps> = ({ project, dispatch }) => {
+const EstimationTab: FunctionComponent<EstimationTabProps> = ({ project, dispatch }) => {
-    const onTaskAdd = (task: Task) => {
+  const onTaskAdd = (task: Task) => {
-        dispatch(addTask(task));
+    dispatch(addTask(task));
-    };
+  };
 
-    const onTaskRemove = (taskId: TaskID) => {
+  const onTaskRemove = (taskId: TaskID) => {
-        dispatch(removeTask(taskId));
+    dispatch(removeTask(taskId));
-    }
+  }
 
-    const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
+  const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
-        dispatch(updateTaskLabel(taskId, label));
+    dispatch(updateTaskLabel(taskId, label));
-    }
+  }
 
-    const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
+  const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
-        dispatch(updateTaskEstimation(taskId, confidence, value));
+    dispatch(updateTaskEstimation(taskId, confidence, value));
-    };
+  };
 
-    return (
+  const onTaskMove = useCallback((taskId: TaskID, move: number) => {
-      <Fragment>
+    dispatch(moveTask(taskId, move))
-        <div class="columns">
+  }, [dispatch])
-          <div class="column is-9">
+
-            <TaskTable 
+  return (
-              project={project} 
+    <Fragment>
-              onTaskAdd={onTaskAdd}
+      <div className="columns">
-              onTaskRemove={onTaskRemove}
+        <div className="column is-9">
-              onTaskLabelUpdate={onTaskLabelUpdate}
+          <TaskTable
-              onEstimationChange={onEstimationChange} />
+            project={project}
-          </div>
+            onTaskMove={onTaskMove}
-          <div class="column is-3">
+            onTaskAdd={onTaskAdd}
-            <TimePreview project={project} />
+            onTaskRemove={onTaskRemove}
-            <RepartitionPreview project={project} />
+            onTaskLabelUpdate={onTaskLabelUpdate}
-          </div>
+            onEstimationChange={onEstimationChange} />
         </div>
-        <div class="columns">
+        <div className="column is-3">
-          <div class={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
+          <TimePreview project={project} />
-            <FinancialPreview project={project} />
+          <RepartitionPreview project={project} />
-          </div>
         </div>
-        {
+      </div>
-          Object.keys(project.tasks).length <= 20 ?
+      <div className="columns">
-          <div class="message noPrint">
+        <div className={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint' : ''}`}>
-            <div class="message-body">
+          <FinancialPreview project={project} />
+        </div>
+      </div>
+      {
+        Object.keys(project.tasks).length <= 20 ?
+          <div className="message noPrint">
+            <div className="message-body">
               <p><strong>⚠️ Attention</strong></p>
               <p>Votre projet ne contient pas assez de tâches pour que les niveaux de confiance soient fiables. Un minimum de 20 tâches est conseillé pour obtenir une estimation pertinente.</p>
             </div>
           </div> :
           null
-        }
+      }
-        <hr />
+      <hr />
-      </Fragment>
+    </Fragment>
-    );
+  );
 };
 
 export default EstimationTab;

client/src/routes/project/export-tab.tsx

@@ -1,15 +1,14 @@
-import { FunctionalComponent, h, Fragment } from "preact";
+import React, { FunctionComponent } from "react";
 import { Project } from "../../models/project";
-import { useProjectEstimations, Estimation } from "../../hooks/use-project-estimations";
 
 export interface ExportTabProps {
     project: Project
 }
 
-const ExportTab: FunctionalComponent<ExportTabProps> = ({ project }) => {
+const ExportTab: FunctionComponent<ExportTabProps> = ({ project }) => {
   return (
     <div>
-      <label class="label is-size-4">Format JSON</label>
+      <label className="label is-size-4">Format JSON</label>
       <pre>{ JSON.stringify(project, null, 2) }</pre>
       <hr />
     </div>

client/src/routes/project/financial-preview.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
 import { Project } from "../../models/project";
 import { useProjectEstimations } from "../../hooks/use-project-estimations";
 import { getCurrency, defaults, getTaskCategoryCost, getRoundUpEstimations } from "../../models/params";
@@ -10,34 +10,34 @@ export interface FinancialPreviewProps {
     project: Project
 }
 
-const FinancialPreview: FunctionalComponent<FinancialPreviewProps> = ({ project }) => {
+const FinancialPreview: FunctionComponent<FinancialPreviewProps> = ({ project }) => {
     const estimations = useProjectEstimations(project);
     const costs = getMinMaxCosts(project, estimations.p99);
     const roundUp = getRoundUpEstimations(project);
     return (
-        <div class="table-container">
+        <div className="table-container">
-            <table class="table is-bordered is-striped is-fullwidth">
+            <table className="table is-bordered is-striped is-fullwidth">
                 <thead>
                     <tr>
                         <th colSpan={2}>
                           <span>Prévisionnel financier</span><br />
-                          <span class="is-size-7 has-text-weight-normal">confiance >= 99.7%</span>
+                          <span className="is-size-7 has-text-weight-normal">confiance >= 99.7%</span>
                         </th>
                     </tr>
                     <tr>
-                        <th class="is-narrow">Temps</th>
+                        <th className="is-narrow">Temps</th>
                         <th>Coût</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td class="is-narrow">Maximum</td>
+                        <td className="is-narrow">Maximum</td>
                         <td>
                           <CostDetails project={project} cost={costs.max} roundUp={roundUp} />
                         </td>
                     </tr>
                     <tr>
-                        <td class="is-narrow">Minimum</td>
+                        <td className="is-narrow">Minimum</td>
                         <td>
                           <CostDetails project={project} cost={costs.min} roundUp={roundUp} />
                         </td>
@@ -54,14 +54,14 @@ export interface CostDetailsProps {
   roundUp: boolean
 }
 
-export const CostDetails:FunctionalComponent<CostDetailsProps> = ({ project, cost, roundUp }) => {
+export const CostDetails:FunctionComponent<CostDetailsProps> = ({ project, cost, roundUp }) => {
   return (
     <details>
       <summary><strong>
         ≈ {cost.totalCost} {getCurrency(project)}</strong>
-        <span class="is-pulled-right">{ roundUp ? Math.ceil(cost.totalTime) : cost.totalTime.toFixed(2) } <ProjectTimeUnit project={project} /></span>
+        <span className="is-pulled-right">{ roundUp ? Math.ceil(cost.totalTime) : cost.totalTime.toFixed(2) } <ProjectTimeUnit project={project} /></span>
       </summary>
-      <table class={`table is-fullwidth`}>
+      <table className={`table is-fullwidth`}>
         <tbody>
         {
           Object.keys(cost.details).map(taskCategoryId => {
@@ -69,9 +69,9 @@ export const CostDetails:FunctionalComponent<CostDetailsProps> = ({ project, cos
             const details = cost.details[taskCategoryId];
             return (
               <tr key={`task-category-cost-${taskCategory.id}`}>
-                <td class={`${style.noBorder} is-size-6`}>{taskCategory.label}</td>
+                <td className={`${style.noBorder} is-size-6`}>{taskCategory.label}</td>
-                <td class={`${style.noBorder} is-size-6`}>{details.cost} {getCurrency(project)}</td>
+                <td className={`${style.noBorder} is-size-6`}>{details.cost} {getCurrency(project)}</td>
-                <td class={`${style.noBorder} is-size-6`}>{ roundUp ? Math.ceil(details.time) : details.time.toFixed(2) } <ProjectTimeUnit project={project} /> × {getTaskCategoryCost(taskCategory)} {getCurrency(project)}</td>
+                <td className={`${style.noBorder} is-size-6`}>{ roundUp ? Math.ceil(details.time) : details.time.toFixed(2) } <ProjectTimeUnit project={project} /> × {getTaskCategoryCost(taskCategory)} {getCurrency(project)}</td>
               </tr>
             )
           })

client/src/routes/project/index.tsx

@@ -1,7 +1,6 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent, useEffect } from "react";
-import { useEffect } from "preact/hooks";
 import style from "./style.module.css";
-import { newProject, Project } from "../../models/project";
+import { newProject, Project, sanitize } from "../../models/project";
 import { useProjectReducer, updateProjectLabel, patchProject } from "../../hooks/use-project-reducer";
 import { getProjectStorageKey } from "../../util/storage";
 import { useLocalStorage } from "../../hooks/use-local-storage";
@@ -11,58 +10,64 @@ import EstimationTab from "./estimation-tab";
 import ParamsTab from "./params-tab";
 import ExportTab from "./export-tab";
 import { useServerSync } from "../../hooks/use-server-sync";
+import { RouteChildrenProps, RouteProps, useParams } from "react-router";
+import { useTitle } from "../../hooks/use-title";
 
 export interface ProjectProps {
-    projectId: string
+  projectId: string
 }
 
-const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
+const Project: FunctionComponent<ProjectProps> = () => {
-    const projectStorageKey = getProjectStorageKey(projectId);
+  const { projectId } = useParams<{ projectId: string }>();
-    const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
+  const projectStorageKey = getProjectStorageKey(projectId);
-    const [ project, dispatch ] = useProjectReducer(storedProject);
+  const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
+  const [ project, dispatch ] = useProjectReducer(sanitize(storedProject));
   
-    useServerSync(project, (project: Project) => {
+  useServerSync(project, (project: Project) => {
-      dispatch(patchProject(project));
+    sanitize(project)
-    });
+    dispatch(patchProject(project));
+  });
   
-    const onProjectLabelChange = (projectLabel: string) => {
+  const onProjectLabelChange = (projectLabel: string) => {
-        dispatch(updateProjectLabel(projectLabel));
+    dispatch(updateProjectLabel(projectLabel));
-    };
+  };
   
-    // Save project in local storage on change
+  // Save project in local storage on change
-    useEffect(()=> {
+  useEffect(()=> {
-        storeProject(project);
+    storeProject(project);
-    }, [project]);
+  }, [project]);
 
-    return (
+  useTitle(project.label ? project.label : "Projet sans nom")
-        <div class={`container ${style.estimation}`}>
+  
-            <EditableText
+  return (
-                editIconClass="is-size-4"
+    <div className={`container ${style.estimation}`}>
-                render={(value) => (<h2 class="is-size-3">{value}</h2>)}
+      <EditableText
-                onChange={onProjectLabelChange}
+        editIconClass="is-size-4"
-                value={project.label ? project.label : "Projet sans nom"} />
+        render={(value) => (<h2 className="is-size-3">{value}</h2>)}
-            <div class={style.tabContainer}>
+        onChange={onProjectLabelChange}
-                <Tabs items={[
+        value={project.label ? project.label : "Projet sans nom"} 
-                        {
+      />
-                            label: 'Estimation',
+      <div className={style.tabContainer}>
-                            icon: '📋',
+        <Tabs items={[
-                            render: () => <EstimationTab project={project} dispatch={dispatch} />
+          {
-                        },
+            label: 'Estimation',
-                        {
+            icon: '📋',
-                            label: 'Options avancées',
+            render: () => <EstimationTab project={project} dispatch={dispatch} />
-                            icon: '⚙️',
+          },
-                            render: () => <ParamsTab project={project} dispatch={dispatch} />
+          {
-                        },
+            label: 'Options avancées',
-                        {
+            icon: '⚙️',
-                            label: 'Exporter',
+            render: () => <ParamsTab project={project} dispatch={dispatch} />
-                            icon: '↗️',
+          },
-                            render: () => <ExportTab project={project} />
+          {
-                        }
+            label: 'Exporter',
-                    ]}
+            icon: '↗️',
-                />
+            render: () => <ExportTab project={project} />
-            </div>
+          }
-        </div>
+        ]} />
-    );
+      </div>
+    </div>
+  );
 };
   
 export default Project;

client/src/routes/project/params-tab.tsx

@@ -1,10 +1,9 @@
-import { FunctionalComponent, h, Fragment } from "preact";
+import React, { FunctionComponent, Fragment, useState, ChangeEvent, MouseEvent } from "react";
 import { Project } from "../../models/project";
 import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
 import { getRoundUpEstimations, getCurrency, getTimeUnit, getHideFinancialPreviewOnPrint } from "../../models/params";
 import TaskCategoriesTable from "./task-categories-table";
-import { useState } from "preact/hooks";
+import { useHistory } from "react-router";
-import { route } from "preact-router";
 import { getProjectStorageKey } from "../../util/storage";
 
 export interface ParamsTabProps {
@@ -12,88 +11,89 @@ export interface ParamsTabProps {
     dispatch: (action: ProjectReducerActions) => void
 }
 
-const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) => {
+const ParamsTab: FunctionComponent<ParamsTabProps> = ({ project, dispatch }) => {
     const [ deleteButtonEnabled, setDeleteButtonEnabled ] = useState(false);
+    const history = useHistory();
 
-    const onEnableDeleteButtonChange = (evt: Event) => {
+    const onEnableDeleteButtonChange = (evt: ChangeEvent) => {
       const checked = (evt.currentTarget as HTMLInputElement).checked;
       setDeleteButtonEnabled(checked);
     }
 
-    const onRoundUpChange = (evt: Event) => {
+    const onRoundUpChange = (evt: ChangeEvent) => {
       const checked = (evt.currentTarget as HTMLInputElement).checked;
       dispatch(updateParam("roundUpEstimations", checked));
     };
 
-    const onHideFinancialPreview = (evt: Event) => {
+    const onHideFinancialPreview = (evt: ChangeEvent) => {
       const checked = (evt.currentTarget as HTMLInputElement).checked;
       dispatch(updateParam("hideFinancialPreviewOnPrint", checked));
     };
 
-    const onCurrencyChange = (evt: Event) => {
+    const onCurrencyChange = (evt: ChangeEvent) => {
       const value = (evt.currentTarget as HTMLInputElement).value;
       dispatch(updateParam("currency", value));
     };
 
     const timeUnit = getTimeUnit(project);
 
-    const onTimeUnitLabelChange = (evt: Event) => {
+    const onTimeUnitLabelChange = (evt: ChangeEvent) => {
       const value = (evt.currentTarget as HTMLInputElement).value;
       dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
     };
 
-    const onTimeUnitAcronymChange = (evt: Event) => {
+    const onTimeUnitAcronymChange = (evt: ChangeEvent) => {
       const value = (evt.currentTarget as HTMLInputElement).value;
       dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
     };
 
-    const onDeleteProjectClick = (evt: Event) => {
+    const onDeleteProjectClick = (evt: MouseEvent) => {
       const projectStorageKey = getProjectStorageKey(project.id);
       window.localStorage.removeItem(projectStorageKey);
-      route('/');
+      history.push('/');
     };
 
     return (
         <Fragment>
-            <label class="label is-size-5">Impression</label>
+            <label className="label is-size-5">Impression</label>
-            <div class="field">
+            <div className="field">
               <input type="checkbox"
                 id="hideFinancialPreview"
                 name="hideFinancialPreview" 
-                class="switch"
+                className="switch"
                 onChange={onHideFinancialPreview}
                 checked={getHideFinancialPreviewOnPrint(project)} />
-              <label for="hideFinancialPreview">Cacher le prévisionnel financier lors de l'impression</label>
+              <label htmlFor="hideFinancialPreview">Cacher le prévisionnel financier lors de l'impression</label>
             </div>
             <hr />
-            <div class="field">
+            <div className="field">
-                <label class="label is-size-5">Unité de temps</label>
+                <label className="label is-size-5">Unité de temps</label>
-                <div class="control">
+                <div className="control">
-                    <input class="input" type="text"
+                    <input className="input" type="text"
                         onChange={onTimeUnitLabelChange}
                         value={timeUnit.label} />
                 </div>
-                <label class="label is-size-6">Acronyme</label>
+                <label className="label is-size-6">Acronyme</label>
-                <div class="control">
+                <div className="control">
-                    <input class="input" type="text"
+                    <input className="input" type="text"
                         onChange={onTimeUnitAcronymChange}
                         value={timeUnit.acronym} />
                 </div>
             </div>
-            <div class="field">
+            <div className="field">
               <input type="checkbox"
                 id="roundUpEstimations"
                 name="roundUpEstimations" 
-                class="switch"
+                className="switch"
                 onChange={onRoundUpChange}
                 checked={getRoundUpEstimations(project)} />
-              <label for="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
+              <label htmlFor="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
             </div>
             <hr />
-            <div class="field">
+            <div className="field">
-                <label class="label is-size-5">Devise</label>
+                <label className="label is-size-5">Devise</label>
-                <div class="control">
+                <div className="control">
-                    <input class="input" type="text"
+                    <input className="input" type="text"
                         onChange={onCurrencyChange}
                         value={getCurrency(project)} />
                 </div>
@@ -102,17 +102,17 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
             <TaskCategoriesTable project={project} dispatch={dispatch} />
             <hr />
             <div>
-              <label class="label is-size-5">Supprimer le projet</label>
+              <label className="label is-size-5">Supprimer le projet</label>
-              <div class="field">
+              <div className="field">
                 <input type="checkbox"
                     id="enableDeleteButton"
                     name="enableDeleteButton" 
-                    class="switch is-warning"
+                    className="switch is-warning"
                     onChange={onEnableDeleteButtonChange}
                     checked={deleteButtonEnabled} />
-                  <label for="enableDeleteButton">Supprimer ce projet ?</label>
+                  <label htmlFor="enableDeleteButton">Supprimer ce projet ?</label>
               </div>
-              <button class="button is-danger"
+              <button className="button is-danger"
                 onClick={onDeleteProjectClick}
                 disabled={!deleteButtonEnabled}>
                 🗑️ Supprimer

client/src/routes/project/repartition-preview.tsx

@@ -1,19 +1,16 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent } from "react";
 import { Project } from "../../models/project";
-import { useProjectEstimations } from "../../hooks/use-project-estimations";
+import { getTaskCategoriesMeanRepartition } from "../../util/stat";
-import { getCurrency, getRoundUpEstimations } from "../../models/params";
-import ProjectTimeUnit from "../../components/project-time-unit";
-import { getTaskCategoryWeightedMean, getProjectWeightedMean, getTaskCategoriesMeanRepartition } from "../../util/stat";
 
 export interface RepartitionPreviewProps {
     project: Project
 }
 
-const RepartitionPreview: FunctionalComponent<RepartitionPreviewProps> = ({ project }) => {
+const RepartitionPreview: FunctionComponent<RepartitionPreviewProps> = ({ project }) => {
     const repartition = getTaskCategoriesMeanRepartition(project);   
     return (
-      <div class="table-container">
+      <div className="table-container">
-        <table class="table is-bordered is-striped is-fullwidth">
+        <table className="table is-bordered is-striped is-fullwidth">
           <thead>
             <tr>
               <th colSpan={2}>Répartition moyenne</th>

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

@@ -1,18 +1,17 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent, useState, MouseEvent, ChangeEvent } from "react";
 import { Project } from "../../models/project";
 import style from './style.module.css';
 import { ProjectReducerActions, updateTaskCategoryCost, updateTaskCategoryLabel, removeTaskCategory, addTaskCategory } from "../../hooks/use-project-reducer";
 import EditableText from "../../components/editable-text";
 import { TaskCategoryID, createTaskCategory } from "../../models/task";
 import { getCurrency, getTaskCategoryCost } from "../../models/params";
-import { useState } from "preact/hooks";
 
 export interface TaskCategoriesTableProps {
   project: Project
   dispatch: (action: ProjectReducerActions) => void
 }
 
-const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ project, dispatch }) => {
+const TaskCategoriesTable: FunctionComponent<TaskCategoriesTableProps> = ({ project, dispatch }) => {
   const [ newTaskCategory, setNewTaskCategory ] = useState(createTaskCategory());
   
   const onTaskCategoryRemove = (categoryId: TaskCategoryID) => {
@@ -28,28 +27,28 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
     dispatch(updateTaskCategoryCost(categoryId, cost));
   };
 
-  const onNewTaskCategoryCostChange = (evt: Event) => {
+  const onNewTaskCategoryCostChange = (evt: ChangeEvent) => {
     const costPerTimeUnit = parseFloat((evt.currentTarget as HTMLInputElement).value);
     setNewTaskCategory(newTaskCategory => ({ ...newTaskCategory, costPerTimeUnit }));
   };
 
-  const onNewTaskCategoryLabelChange = (evt: Event) => {
+  const onNewTaskCategoryLabelChange = (evt: ChangeEvent) => {
     const label = (evt.currentTarget as HTMLInputElement).value;
     setNewTaskCategory(newTaskCategory => ({ ...newTaskCategory, label }));
   };
 
-  const onNewTaskCategoryAddClick = (evt: Event) => {
+  const onNewTaskCategoryAddClick = (evt: MouseEvent) => {
     dispatch(addTaskCategory(newTaskCategory));
     setNewTaskCategory(createTaskCategory());
   };
   
   return (
-    <div class="table-container">
+    <div className="table-container">
-      <label class="label is-size-5">Catégories de tâche</label>
+      <label className="label is-size-5">Catégories de tâche</label>
-      <table class={`table is-bordered is-striped" ${style.middleTable}`}>
+      <table className={`table is-bordered is-striped" ${style.middleTable}`}>
         <thead>
           <tr>
-            <th class={`${style.noBorder} is-narrow`}></th>
+            <th className={`${style.noBorder} is-narrow`}></th>
             <th>Catégorie</th>
             <th>Coût par unité de temps</th>
           </tr>
@@ -62,7 +61,7 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
                 <td>
                   <button
                     onClick={onTaskCategoryRemove.bind(null, tc.id)}
-                    class="button is-danger is-small is-outlined">
+                    className="button is-danger is-small is-outlined">
                   🗑️
                   </button>
                 </td>
@@ -82,22 +81,22 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
         </tbody>
         <tfoot>
           <tr>
-            <td class={`${style.noBorder}`}></td>
+            <td className={`${style.noBorder}`}></td>
             <td colSpan={2}>
-              <div  class="field has-addons">
+              <div  className="field has-addons">
-                <p class="control is-expanded">
+                <p className="control is-expanded">
-                  <input class="input" type="text" placeholder="Nouvelle catégorie"
+                  <input className="input" type="text" placeholder="Nouvelle catégorie"
                     value={newTaskCategory.label} onChange={onNewTaskCategoryLabelChange} />
                 </p>
-                <p class="control">
+                <p className="control">
-                  <input class="input" type="number"
+                  <input className="input" type="number"
                     value={newTaskCategory.costPerTimeUnit} onChange={onNewTaskCategoryCostChange} />
                 </p>
-                <p class="control">
+                <p className="control">
-                  <a class="button is-static">{getCurrency(project)}</a>
+                  <a className="button is-static">{getCurrency(project)}</a>
                 </p>
-                <p class="control">
+                <p className="control">
-                  <a class="button is-primary" onClick={onNewTaskCategoryAddClick}>
+                  <a className="button is-primary" onClick={onNewTaskCategoryAddClick}>
                   Ajouter
                   </a>
                 </p>

client/src/routes/project/tasks-table.tsx

@@ -1,200 +1,258 @@
-import { FunctionalComponent, h } from "preact";
+import React, { FunctionComponent, useState, useEffect, ChangeEvent, MouseEvent, useCallback } from "react";
-import { useState, useEffect } from "preact/hooks";
 import style from "./style.module.css";
 import { Project } from "../../models/project";
 import { newTask, Task, TaskID, EstimationConfidence } from "../../models/task";
 import EditableText from "../../components/editable-text";
 import { usePrintMediaQuery } from "../../hooks/use-media-query";
-import { defaults, getTimeUnit } from "../../models/params";
 import ProjectTimeUnit from "../../components/project-time-unit";
+import { useSort } from "../../hooks/useSort";
 
 export interface TaskTableProps {
-    project: Project
+  project: Project
-    onTaskAdd: (task: Task) => void
+  onTaskAdd: (task: Task) => void
-    onTaskRemove: (taskId: TaskID) => void
+  onTaskRemove: (taskId: TaskID) => void
-    onEstimationChange: (taskId: TaskID, confidence: EstimationConfidence, value: number) => void
+  onEstimationChange: (taskId: TaskID, confidence: EstimationConfidence, value: number) => void
-    onTaskLabelUpdate: (taskId: TaskID, label: string) => void
+  onTaskLabelUpdate: (taskId: TaskID, label: string) => void
+  onTaskMove: (taskId: TaskID, move: number) => void
 }
 
 export type EstimationTotals = { [confidence in EstimationConfidence]: number }
 
-const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate }) => {
+const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate, onTaskMove }) => {
 
-    const defaultTaskCategory = Object.keys(project.params.taskCategories)[0];
+  const defaultTaskCategory = Object.keys(project.params.taskCategories)[0];
-    const [ task, setTask ] = useState(newTask("", defaultTaskCategory));
+  const [task, setTask] = useState(newTask("", defaultTaskCategory));
-    const [ totals, setTotals ] = useState({
+  const [totals, setTotals] = useState({
-        [EstimationConfidence.Optimistic]: 0,
+    [EstimationConfidence.Optimistic]: 0,
-        [EstimationConfidence.Likely]: 0,
+    [EstimationConfidence.Likely]: 0,
-        [EstimationConfidence.Pessimistic]: 0,
+    [EstimationConfidence.Pessimistic]: 0,
-    } as EstimationTotals);
+  } as EstimationTotals);
 
-    const isPrint = usePrintMediaQuery();
+  const [tasks, setTasks] = useState<Task[]>([])
+  useEffect(() => {
+    setTasks(Object.values(project.tasks))
+  }, [project.tasks])
 
-    useEffect(() => {
+  const sortTask = useCallback((a: Task, b: Task) => {
-        let optimistic = 0;
+    const aIndex = (project.ordering ?? []).findIndex(taskId => a.id === taskId)
-        let likely = 0;
+    const bIndex = (project.ordering ?? []).findIndex(taskId => b.id === taskId)
-        let pessimistic = 0;
+    return aIndex - bIndex;
+  }, [project.ordering])
 
-        Object.values(project.tasks).forEach(t => {
+  const sorted = useSort(tasks, sortTask)
-            optimistic += t.estimations.optimistic;
-            likely += t.estimations.likely;
-            pessimistic += t.estimations.pessimistic;
-        });
 
-        setTotals({ optimistic, likely, pessimistic });
+  const [ activeTaskActions, setActiveTaskActions ] = useState<string|null>(null);
-    }, [project.tasks]);
 
-    const onNewTaskLabelChange = (evt: Event) => {
+  const isPrint = usePrintMediaQuery();
-        const value = (evt.currentTarget as HTMLInputElement).value;
-        setTask({...task, label: value});
-    };
 
-    const onNewTaskCategoryChange = (evt: Event) => {
+  useEffect(() => {
-        const value = (evt.currentTarget as HTMLInputElement).value;
+    let optimistic = 0;
-        setTask({...task, category: value});
+    let likely = 0;
-    };
+    let pessimistic = 0;
 
-    const onTaskLabelChange = (taskId: TaskID, value: string) => {
+    Object.values(project.tasks).forEach(t => {
-        onTaskLabelUpdate(taskId, value);
+      optimistic += t.estimations.optimistic;
-    };
+      likely += t.estimations.likely;
+      pessimistic += t.estimations.pessimistic;
+    });
 
-    const onAddTaskClick = (evt: Event) => {
+    setTotals({ optimistic, likely, pessimistic });
-        onTaskAdd(task);
+  }, [project.tasks]);
-        setTask(newTask("", defaultTaskCategory));
-    };
 
-    const onTaskRemoveClick = (taskId: TaskID, evt: Event) => {
+  const toggleActiveTaskAction = useCallback((evt: MouseEvent<HTMLButtonElement>) => {
-        onTaskRemove(taskId);
+    const taskId = evt.currentTarget.dataset.taskId;
-    };
+    if (!taskId) return
+    setActiveTaskActions(activeTaskActions === taskId ? null : taskId)
+  }, [activeTaskActions])
 
-    const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: Event) => {
+  const onNewTaskLabelChange = (evt: ChangeEvent) => {
-        const textValue = (evt.currentTarget as HTMLInputElement).value;
+    const value = (evt.currentTarget as HTMLInputElement).value;
-        const value = parseFloat(textValue);
+    setTask({ ...task, label: value });
-        onEstimationChange(taskID, confidence, value);
+  };
-    };
 
-    const onOptimisticChange = withEstimationChange.bind(null, EstimationConfidence.Optimistic);
+  const onNewTaskCategoryChange = (evt: ChangeEvent) => {
-    const onLikelyChange = withEstimationChange.bind(null, EstimationConfidence.Likely);
+    const value = (evt.currentTarget as HTMLInputElement).value;
-    const onPessimisticChange = withEstimationChange.bind(null, EstimationConfidence.Pessimistic);
+    setTask({ ...task, category: value });
+  };
 
-    return (
+  const onTaskLabelChange = (taskId: TaskID, value: string) => {
-        <div class="table-container">
+    onTaskLabelUpdate(taskId, value);
-            <table class={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
+  };
-                <thead>
+
-                    <tr>
+  const onAddTaskClick = (evt: MouseEvent) => {
-                        <th class={`${style.noBorder} noPrint`} rowSpan={2}></th>
+    onTaskAdd(task);
-                        <th class={style.mainColumn} rowSpan={2}>Tâche</th>
+    setTask(newTask("", defaultTaskCategory));
-                        <th rowSpan={2}>Catégorie</th>
+  };
-                        <th colSpan={3}>Estimation (en <ProjectTimeUnit project={project} />)</th>
+
-                    </tr>
+  const onTaskRemoveClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
-                    <tr>
+    const taskId = evt.currentTarget.dataset.taskId;
-                        <th>Optimiste</th>
+    if (!taskId) return
-                        <th>Probable</th>
+    onTaskRemove(taskId);
-                        <th>Pessimiste</th>
+  }, []);
-                    </tr>
+
-                </thead>
+  const onTaskMoveUpClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
-                <tbody>
+    const taskId = evt.currentTarget.dataset.taskId;
+    if (!taskId) return
+    onTaskMove(taskId, -1);
+  }, []);
+
+  const onTaskMoveDownClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
+    const taskId = evt.currentTarget.dataset.taskId;
+    if (!taskId) return
+    onTaskMove(taskId, +1);
+  }, []);
+
+  const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: ChangeEvent) => {
+    const textValue = (evt.currentTarget as HTMLInputElement).value;
+    const value = parseFloat(textValue);
+    onEstimationChange(taskID, confidence, value);
+  };
+
+  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>
+          {
+            sorted.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`}>
+                    <div className={`dropdown ${activeTaskActions === t.id ? 'is-active' : ''}`}>
+                      <div className="dropdown-trigger">
+                        <button onClick={toggleActiveTaskAction} data-task-id={t.id} className={`button is-small is-outlined ${activeTaskActions === t.id ? 'is-active' : ''}`} aria-haspopup="true" aria-controls="dropdown-menu">
+                          <span>⁝</span>
+                        </button>
+                      </div>
+                      <div className="dropdown-menu" id="dropdown-menu" role="menu">
+                        <div className="dropdown-content">
+                          <a className="dropdown-item" data-task-id={t.id} onClick={onTaskMoveUpClick}>
+                            ↑ Monter
+                          </a>
+                          <a href="#" className="dropdown-item" data-task-id={t.id} onClick={onTaskMoveDownClick}>
+                            ↓ Descendre
+                          </a>
+                          <a className="dropdown-item" onClick={onTaskRemoveClick} data-task-id={t.id}>
+                            <span className="has-text-danger">🗑 Supprimer</span>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </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 => {
+                      isPrint ?
-                            const category = project.params.taskCategories[t.category];
+                        <span>{t.estimations.optimistic}</span> :
-                            const categoryLabel = category ? category.label : '???';
+                        <input
-                            return (
+                          className="input" type="number"
-                                <tr key={`taks-${t.id}`}>
+                          value={t.estimations.optimistic}
-                                    <td class={`is-narrow noPrint`}>
+                          min={0}
-                                        <button
+                          onChange={onOptimisticChange.bind(null, t.id)} />
-                                            onClick={onTaskRemoveClick.bind(null, t.id)}
+                    }
-                                            class="button is-danger is-small is-outlined">
+                  </td>
-                                        🗑️
+                  <td>
-                                        </button>
+                    {
-                                    </td>
+                      isPrint ?
-                                    <td class={style.mainColumn}>
+                        <span>{t.estimations.likely}</span> :
-                                        <EditableText
+                        <input
-                                            render={(value) => (<span>{value}</span>)}
+                          className={`input ${t.estimations.likely < t.estimations.optimistic ? 'is-danger' : ''}`}
-                                            onChange={onTaskLabelChange.bind(null, t.id)}
+                          type="number"
-                                            value={t.label} />
+                          value={t.estimations.likely}
-                                    </td>
+                          min={0}
-                                    <td>{ categoryLabel }</td>
+                          onChange={onLikelyChange.bind(null, t.id)} />
-                                    <td>
+                    }
-                                        {
+                  </td>
-                                            isPrint ?
+                  <td>
-                                            <span>{t.estimations.optimistic}</span> :
+                    {
-                                            <input class="input" type="number" value={t.estimations.optimistic}
+                      isPrint ?
-                                                min={0}
+                        <span>{t.estimations.pessimistic}</span> :
-                                                onChange={onOptimisticChange.bind(null, t.id)} />
+                        <input
-                                        }
+                          className={`input ${t.estimations.pessimistic < t.estimations.likely ? 'is-danger' : ''}`}
-                                    </td>
+                          type="number"
-                                    <td>
+                          value={t.estimations.pessimistic}
-                                        {
+                          min={0}
-                                            isPrint ?
+                          onChange={onPessimisticChange.bind(null, t.id)} />
-                                            <span>{t.estimations.likely}</span> :
+                    }
-                                            <input class="input" type="number" value={t.estimations.likely}
+                  </td>
-                                                min={0}
+                </tr>
-                                                onChange={onLikelyChange.bind(null, t.id)} />
+              )
-                                        }
+            })
-                                    </td>
+          }
-                                    <td>
+          {
-                                        {
+            Object.keys(project.tasks).length === 0 ?
-                                            isPrint ?
+              <tr>
-                                            <span>{t.estimations.pessimistic}</span> :
+                <td className={`${style.noBorder} noPrint`}></td>
-                                            <input class="input" type="number" value={t.estimations.pessimistic}
+                <td className={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
-                                                min={0}
+              </tr> :
-                                                onChange={onPessimisticChange.bind(null, t.id)} />
+              null
-                                        }
+          }
-                                    </td>
+        </tbody>
-                                </tr>
+        <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>
-                        Object.keys(project.tasks).length === 0 ?
+                  </span>
-                        <tr>
+                </p>
-                            <td class={`${style.noBorder} noPrint`}></td>
+                <p className="control">
-                            <td class={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
+                  <a className="button is-primary" onClick={onAddTaskClick}>
-                        </tr> :
+                    Ajouter
-                        null
+                  </a>
-                    }
+                </p>
-                </tbody>
+              </div>
-                <tfoot>
+            </td>
-                    <tr>
+            <th colSpan={3}>Total</th>
-                        <td class={`${style.noBorder} noPrint`}></td>
+          </tr>
-                        <td colSpan={2} class={isPrint ? style.noBorder : ''}>
+          <tr>
-                            <div  class="field has-addons noPrint">
+            <td colSpan={isPrint ? 2 : 3} className={style.noBorder}></td>
-                                <p class="control is-expanded">
+            <td>{totals.optimistic} <ProjectTimeUnit project={project} /></td>
-                                    <input class="input" type="text" placeholder="Nouvelle tâche"
+            <td>{totals.likely} <ProjectTimeUnit project={project} /></td>
-                                        value={task.label} onChange={onNewTaskLabelChange} />
+            <td>{totals.pessimistic} <ProjectTimeUnit project={project} /></td>
-                                </p>
+          </tr>
-                                <p class="control">
+        </tfoot>
-                                    <span class="select">
+      </table>
-                                    <select onChange={onNewTaskCategoryChange} value={task.category}>
+    </div>
-                                        {
+  );
-                                            Object.values(project.params.taskCategories).map(tc => {
-                                                return (
-                                                <option key={`task-category-${tc.id}`} value={tc.id}>{tc.label}</option>
-                                                );
-                                            })
-                                        }
-                                    </select>
-                                    </span>
-                                </p>
-                                <p class="control">
-                                    <a class="button is-primary" onClick={onAddTaskClick}>
-                                    Ajouter
-                                    </a>
-                                </p>
-                            </div>
-                        </td>
-                        <th colSpan={3}>Total</th>
-                    </tr>
-                    <tr>
-                        <td colSpan={isPrint ? 2 : 3} class={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;

client/src/routes/project/time-preview.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, h, Fragment } from "preact";
+import React, { FunctionComponent } from "react";
 import { Project } from "../../models/project";
 import { useProjectEstimations, Estimation } from "../../hooks/use-project-estimations";
 import EstimationRange from "../../components/estimation-range";
@@ -7,38 +7,38 @@ export interface TimePreviewProps {
     project: Project
 }
 
-const TimePreview: FunctionalComponent<TimePreviewProps> = ({ project }) => {
+const TimePreview: FunctionComponent<TimePreviewProps> = ({ project }) => {
     const estimations = useProjectEstimations(project);
     return (
-        <div class="table-container">
+        <div className="table-container">
-            <table class="table is-bordered is-striped is-fullwidth">
+            <table className="table is-bordered is-striped is-fullwidth">
                 <thead>
                     <tr>
                         <th colSpan={2}>Prévisionnel temps</th>
                     </tr>
                     <tr>
-                        <th class="is-narrow">Confiance</th>
+                        <th className="is-narrow">Confiance</th>
                         <th>Estimation</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td class="is-narrow">>= 99.7%</td>
+                        <td className="is-narrow">>= 99.7%</td>
                         <td><EstimationRange project={project} estimation={estimations.p99} /></td>
                     </tr>
                     <tr>
-                        <td class="is-narrow">>= 90%</td>
+                        <td className="is-narrow">>= 90%</td>
                         <td><EstimationRange project={project} estimation={estimations.p90} /></td>
                     </tr>
                     <tr>
-                        <td class="is-narrow">>= 68%</td>
+                        <td className="is-narrow">>= 68%</td>
                         <td><EstimationRange project={project} estimation={estimations.p68} /></td>
                     </tr>
                 </tbody>
-                <tfoot class="noPrint">
+                <tfoot className="noPrint">
                     <tr>
                         <td colSpan={2}>
-                            <a class="is-small is-pulled-right" href="https://en.wikipedia.org/wiki/Three-point_estimation" target="_blank">❓ Estimation à 3 points</a>
+                            <a className="is-small is-pulled-right" href="https://en.wikipedia.org/wiki/Three-point_estimation" target="_blank">❓ Estimation à 3 points</a>
                         </td>
                     </tr>
                 </tfoot>

client/src/util/date.ts

@@ -0,0 +1,20 @@
+export function asDate (d: Date|string): Date {
+  if (typeof d === 'string') return new Date(d)
+  if (d instanceof Date) return d
+
+  throw new Error(`Unexpected date value '${JSON.stringify(d)}' !`)
+}
+
+const intl = Intl.DateTimeFormat(navigator.language, {
+  weekday: 'long',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+})
+
+export function formatDate (d: Date|string): string {
+  d = asDate(d)
+  return intl.format(d)
+}

client/src/util/storage.ts

@@ -1,4 +1,3 @@
-import { useState } from "preact/hooks/src";
 import { ProjectID } from "../models/project";
 
 export const ProjectStorageKeyPrefix = "project-";

client/tsconfig.json

@@ -6,7 +6,6 @@
     "moduleResolution": "node",
 
     "jsx": "react",
-    "jsxFactory": "h",
 
     "strict": true,
     "allowSyntheticDefaultImports": true

client/webpack.config.js

@@ -11,6 +11,7 @@ module.exports = {
   entry: [
     path.join(__dirname, './src/index.js')
   ],
+  devtool: env.NODE_ENV === 'production' ? 'source-map' : 'eval',
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].[hash].js',
@@ -63,7 +64,7 @@ module.exports = {
   plugins: [
     new ForkTsCheckerWebpackPlugin(),
     new HtmlWebpackPlugin({
-      title: 'Guesstimate',
+      title: '⏱️ Guesstimate',
       scriptLoading: 'defer',
 
       template: path.join(__dirname, 'src/index.html')    
@@ -76,7 +77,6 @@ module.exports = {
     }),
     new webpack.DefinePlugin({
       __BUILD__: JSON.stringify({
-        version: getCurrentVersion(),
         gitRef: getCurrentGitRef(),
         buildDate: new Date(),
       })
@@ -84,14 +84,6 @@ module.exports = {
   ]
 };
 
-function getCurrentVersion() {
-  let version 
-  try {
-    version = exec("git describe --abbrev=0 2>/dev/null")
-  } catch(err) {}
-  return version ? version : "0.0.0";
-}
-
 function getCurrentGitRef() {
   return exec("git log -n 1 --pretty='format:%h'").toString()
 }

misc/script/release.sh

@@ -24,7 +24,6 @@ function build {
   echo "building $dirname..."
 
   CGO_ENABLED=0 GOOS="$os" GOARCH="$arch" go build \
-    -mod=vendor \
     -ldflags="-s -w -X 'main.GitRef=$(current_commit_ref)' -X 'main.ProjectVersion=$(current_version)' -X 'main.BuildDate=$(current_date)'" \
     -gcflags=-trimpath="${PWD}" \
     -asmflags=-trimpath="${PWD}" \
@@ -41,7 +40,7 @@ function current_commit_ref {
 }
 
 function current_version {
-  local latest_tag=$(git describe --abbrev=0 2>/dev/null)
+  local latest_tag=$(git describe --always 2>/dev/null)
   echo ${latest_tag:-0.0.0}
 }
 

server/go.mod

@@ -1,18 +1,24 @@
 module forge.cadoles.com/wpetit/guesstimate
 
-go 1.14
+go 1.19
 
 require (
 	github.com/asdine/storm/v3 v3.1.1
 	github.com/caarlos0/env/v6 v6.2.1
-	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/go-chi/chi v4.1.1+incompatible
-	github.com/gorilla/websocket v1.4.2 // indirect
 	github.com/pkg/errors v0.9.1
 	gitlab.com/wpetit/goweb v0.0.0-20200418152305-76dea96a46ce
-	golang.org/x/net v0.0.0-20200324143707-d3edc9973b7e // indirect
 	gopkg.in/evanphx/json-patch.v4 v4.5.0
-	gopkg.in/yaml.v2 v2.2.8
+	gopkg.in/yaml.v2 v2.4.0
 )
 
-// replace gitlab.com/wpetit/goweb => ../goweb
+require (
+	github.com/golang/protobuf v1.3.4 // indirect
+	github.com/kr/text v0.2.0 // indirect
+	github.com/stretchr/testify v1.7.1-0.20210427113832-6241f9ab9942 // indirect
+	go.etcd.io/bbolt v1.3.4 // indirect
+	golang.org/x/net v0.0.0-20200301022130-244492dfa37a // indirect
+	golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f // indirect
+	golang.org/x/text v0.3.7 // indirect
+	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect
+)

server/go.sum

@@ -1,4 +1,3 @@
-cdr.dev/slog v1.3.0 h1:MYN1BChIaVEGxdS7I5cpdyMC0+WfJfK8BETAfzfLUGQ=
 cdr.dev/slog v1.3.0/go.mod h1:C5OL99WyuOK8YHZdYY57dAPN1jK2WJlCdq2VP6xeQns=
 cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
 cloud.google.com/go v0.34.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
@@ -23,7 +22,6 @@ github.com/Sereal/Sereal v0.0.0-20190618215532-0b8ac451a863 h1:BRrxwOZBolJN4gIwv
 github.com/Sereal/Sereal v0.0.0-20190618215532-0b8ac451a863/go.mod h1:D0JMgToj/WdxCgd30Kc1UcA9E+WdZoJqeVOuYW7iTBM=
 github.com/akavel/rsrc v0.8.0/go.mod h1:uLoCtb9J+EyAqh+26kdrTgmzRBFPGOolLWKpdxkKq+c=
 github.com/alecthomas/assert v0.0.0-20170929043011-405dbfeb8e38/go.mod h1:r7bzyVFMNntcxPZXK3/+KdruV1H5KSlyVY0gc+NgInI=
-github.com/alecthomas/chroma v0.7.0 h1:z+0HgTUmkpRDRz0SRSdMaqOLfJV4F+N1FPDZUZIDUzw=
 github.com/alecthomas/chroma v0.7.0/go.mod h1:1U/PfCsTALWWYHDnsIQkxEBM0+6LLe0v8+RSVMOwxeY=
 github.com/alecthomas/colour v0.0.0-20160524082231-60882d9e2721/go.mod h1:QO9JBoKquHd+jz9nshCh40fOfO+JzsoXy8qTHF68zU0=
 github.com/alecthomas/kong v0.1.17-0.20190424132513-439c674f7ae0/go.mod h1:+inYUSluD+p4L8KdviBSgzcqEjUQOfC5fQDRFuc36lI=
@@ -36,18 +34,16 @@ github.com/caarlos0/env/v6 v6.2.1 h1:/bFpX1dg4TNioJjg7mrQaSrBoQvRfLUHNfXivdFbbEo
 github.com/caarlos0/env/v6 v6.2.1/go.mod h1:3LpmfcAYCG6gCiSgDLaFR5Km1FRpPwFvBbRcjHar6Sw=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/daaku/go.zipexe v1.0.0/go.mod h1:z8IiR6TsVLEYKwXAoE/I+8ys/sDkgTzSL0CLnGVd57E=
-github.com/danwakefield/fnmatch v0.0.0-20160403171240-cbb64ac3d964 h1:y5HC9v93H5EPKqaS1UYVg1uYah5Xf51mBfIoWehClUQ=
 github.com/danwakefield/fnmatch v0.0.0-20160403171240-cbb64ac3d964/go.mod h1:Xd9hchkHSWYkEqJwUGisez3G1QY8Ryz0sdWrLPMGjLk=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dlclark/regexp2 v1.1.6/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
-github.com/dlclark/regexp2 v1.2.0 h1:8sAhBGEM0dRWogWqWyQeIJnxjWO6oIjl8FKqREDsGfk=
 github.com/dlclark/regexp2 v1.2.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
 github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
-github.com/fatih/color v1.7.0 h1:DkWD4oS2D8LGGgTQ6IvwJJXSL5Vp2ffcQg58nFV38Ys=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/go-chi/chi v4.0.2+incompatible/go.mod h1:eB3wogJHnLi3x/kFX2A+IbTBlXxmMeXJVKy9tTv1XzQ=
 github.com/go-chi/chi v4.1.1+incompatible h1:MmTgB0R8Bt/jccxp+t6S/1VGIKdJw5J74CK/c9tTfA4=
@@ -57,15 +53,15 @@ github.com/go-playground/locales v0.12.1/go.mod h1:IUMDtCfWo/w/mtMfIE/IG2K+Ey3yg
 github.com/go-playground/universal-translator v0.16.0/go.mod h1:1AnU7NaIRDWWzGEKwgtJRd2xk99HeFyHw3yid4rvQIY=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
 github.com/golang/groupcache v0.0.0-20190702054246-869f871628b6/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
-github.com/golang/groupcache v0.0.0-20191027212112-611e8accdfc9 h1:uHTyIjqVhYRhLbJ8nIiOJHkEZZ+5YoOsAbD3sk82NiE=
 github.com/golang/groupcache v0.0.0-20191027212112-611e8accdfc9/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
 github.com/golang/mock v1.1.1/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
 github.com/golang/mock v1.2.0/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
 github.com/golang/mock v1.3.1/go.mod h1:sBzyDLLjw3U8JLTeZvSv8jJB+tU5PVekmnlKIyFUx0Y=
 github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/golang/protobuf v1.3.2 h1:6nsPYzhq5kReh6QImI3k5qWzO4PEbvbIW2cwSfR/6xs=
 github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang/protobuf v1.3.4 h1:87PNWwrRvUSnqS4dlcBU/ftvOIBep4sYuBLlh6rX2wk=
+github.com/golang/protobuf v1.3.4/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
 github.com/golang/snappy v0.0.1 h1:Qgr9rKW7uDUkrbSmQeiDsGa8SjGyCOGtuasMWwvp2P4=
 github.com/golang/snappy v0.0.1/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/google/btree v0.0.0-20180813153112-4030bb1f1f0c/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ5JPQ=
@@ -77,7 +73,6 @@ github.com/google/martian v2.1.0+incompatible/go.mod h1:9I4somxYTbIHy5NJKHRl3wXi
 github.com/google/pprof v0.0.0-20181206194817-3ea8567a2e57/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc=
 github.com/google/pprof v0.0.0-20190515194954-54271f7e092f/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc=
 github.com/google/renameio v0.1.0/go.mod h1:KWCgfxg9yswjAJkECMjeO8J8rahYeXnNhOm40UhjYkI=
-github.com/google/uuid v1.1.1 h1:Gkbcsh/GbpXz7lPftLA3P6TYMwjCLYm83jiFQZF/3gY=
 github.com/google/uuid v1.1.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/googleapis/gax-go/v2 v2.0.4/go.mod h1:0Wqv26UfaUD9n4G6kQubkQ+KchISgw+vpHVxEJEs9eg=
 github.com/googleapis/gax-go/v2 v2.0.5/go.mod h1:DWXyrwAJ9X0FpwwEdw+IPEYBICEFu5mhpdKc/us6bOk=
@@ -86,8 +81,6 @@ github.com/gorilla/handlers v1.4.1/go.mod h1:Qkdc/uu4tH4g6mTK6auzZ766c4CA0Ng8+o/
 github.com/gorilla/mux v1.7.3/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
 github.com/gorilla/securecookie v1.1.1/go.mod h1:ra0sb63/xPlUeL+yeDciTfxMRAA+MP+HVt/4epWDjd4=
 github.com/gorilla/sessions v1.2.0/go.mod h1:dk2InVEVJ0sfLlnXv9EAgkf6ecYs/i80K/zI+bUmuGM=
-github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0Ufc=
-github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/hashicorp/golang-lru v0.5.0/go.mod h1:/m3WP610KZHVQ1SGc6re/UDhFvYD7pJ4Ao+sR/qLZy8=
 github.com/hashicorp/golang-lru v0.5.1/go.mod h1:/m3WP610KZHVQ1SGc6re/UDhFvYD7pJ4Ao+sR/qLZy8=
 github.com/hashicorp/hcl v1.0.0/go.mod h1:E5yfLk+7swimpb2L/Alb/PJmXilQ/rhwaUYs4T20WEQ=
@@ -97,15 +90,14 @@ github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+o
 github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
-github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/leodido/go-urn v1.1.0/go.mod h1:+cyI34gQWZcE1eQU7NVgKkkzdXDQHr1dBMtdAPozLkw=
 github.com/mattn/go-colorable v0.0.9/go.mod h1:9vuHe8Xs5qXnSaW/c/ABM9alt+Vo+STaOChaDxuIBZU=
-github.com/mattn/go-colorable v0.1.4 h1:snbPLB8fVfU9iwbbo30TPtbLRzwWu6aJS6Xh4eaaviA=
 github.com/mattn/go-colorable v0.1.4/go.mod h1:U0ppj6V5qS13XJ6of8GYAs25YV2eR4EVcfRqFIhoBtE=
 github.com/mattn/go-isatty v0.0.4/go.mod h1:M+lRXTBqGeGNdLjl/ufCoiOlB5xdOkqRJdNxMWT7Zi4=
 github.com/mattn/go-isatty v0.0.8/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hdxcsrc5s=
-github.com/mattn/go-isatty v0.0.11 h1:FxPOTFNqGkuDUGi3H/qkUbQO4ZiBa2brKq5r0l8TGeM=
 github.com/mattn/go-isatty v0.0.11/go.mod h1:PhnuNfih5lzO57/f3n+odYbM4JtupLOxQOAqxQCu2WE=
 github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y=
 github.com/nkovacs/streamquote v0.0.0-20170412213628-49af9bddb229/go.mod h1:0aYXnNPJ8l7uZxf45rWW1a/uME32OF0rhiYGNQ2oF2E=
@@ -123,8 +115,9 @@ github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+
 github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
-github.com/stretchr/testify v1.5.1 h1:nOGnQDM7FYENwehXlg/kFVnos3rEvtKTjRvOWSzb6H4=
 github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
+github.com/stretchr/testify v1.7.1-0.20210427113832-6241f9ab9942 h1:t0lM6y/M5IiUZyvbBTcngso8SZEZICH7is9B6g/obVU=
+github.com/stretchr/testify v1.7.1-0.20210427113832-6241f9ab9942/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.0.1/go.mod h1:UQGH1tvbgY+Nz5t2n7tXsz52dQxojPUpymEIMZ47gx8=
 github.com/vmihailenco/msgpack v4.0.4+incompatible h1:dSLoQfGFAo3F6OoNhwUmLwVgaUXK79GlxNBwueZn0xI=
@@ -135,12 +128,10 @@ go.etcd.io/bbolt v1.3.4 h1:hi1bXHMVrlQh6WwxAy+qZCV/SYIlqo+Ushwdpa4tAKg=
 go.etcd.io/bbolt v1.3.4/go.mod h1:G5EMThwa9y8QZGBClrRx5EY+Yw9kAhnjy3bSjsnlVTQ=
 go.opencensus.io v0.21.0/go.mod h1:mSImk1erAIZhrmZN+AvHh14ztQfjbGwt4TtuofqLduU=
 go.opencensus.io v0.22.0/go.mod h1:+kGneAE2xo2IficOXnaByMWTGM9T73dGwxeWcUqIpI8=
-go.opencensus.io v0.22.2 h1:75k/FF0Q2YM8QYo07VPddOLBslDt1MZOdEslOHvmzAs=
 go.opencensus.io v0.22.2/go.mod h1:yxeiOL68Rb0Xd1ddK5vPZ/oVn4vY4Ynel7k9FzqtOIw=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
-golang.org/x/crypto v0.0.0-20191206172530-e9b2fee46413 h1:ULYEB3JvPRE/IfO+9uO7vKV/xzVTO7XPAwm8xbf4w2g=
 golang.org/x/crypto v0.0.0-20191206172530-e9b2fee46413/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
@@ -172,8 +163,8 @@ golang.org/x/net v0.0.0-20190603091049-60506f45cf65/go.mod h1:HSz+uSET+XFnRR8LxR
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20191105084925-a882066a44e0/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.0.0-20200324143707-d3edc9973b7e h1:3G+cUijn7XD+S4eJFddp53Pv7+slrESplyjG25HgL+k=
+golang.org/x/net v0.0.0-20200301022130-244492dfa37a h1:GuSPYbZzB5/dcLNCwLQLsg3obCJtX9IJhpXkvY7kzk0=
-golang.org/x/net v0.0.0-20200324143707-d3edc9973b7e/go.mod h1:qpuaurCH72eLCgpAm/N6yyVIVM9cpaDIP3A8BGJEC5A=
+golang.org/x/net v0.0.0-20200301022130-244492dfa37a/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -195,12 +186,13 @@ golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20191026070338-33540a1f6037/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20191210023423-ac6580df4449/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200202164722-d101bd2416d5/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd h1:xhmwyvizuTgC2qz7ZlMluP20uW+C3Rm0FD/WLDX8884=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f h1:v4INt8xihDGvnrfjMDVXGxw9wrfxYyCjk0KbXjhR55s=
-golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.3.2 h1:tW2bmiBqwgJj/UpqtC8EpXEZVYOwU0yG4iWbprSVAcs=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
+golang.org/x/text v0.3.7 h1:olpwvP2KacW1ZWvsR7uQhoyTYvKAupfQrRGBFM352Gk=
+golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
@@ -220,7 +212,6 @@ golang.org/x/tools v0.0.0-20190911174233-4f2ddba30aff/go.mod h1:b+2E5dAYhXwXZwtn
 golang.org/x/tools v0.0.0-20191012152004-8de300cfc20a/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.0.0-20191115202509-3a792d9c32b2/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/api v0.4.0/go.mod h1:8k5glujaEP+g9n7WNsDg8QP6cUVNI86fCNMcbazEtwE=
 google.golang.org/api v0.7.0/go.mod h1:WtwebWUNSVBH/HAw79HIFXZNqEvBhG+Ra+ax0hx3E3M=
@@ -258,8 +249,11 @@ gopkg.in/evanphx/json-patch.v4 v4.5.0/go.mod h1:p8EYWUEYMpynmqDbY58zCKCFZw8pRWMG
 gopkg.in/go-playground/assert.v1 v1.2.1/go.mod h1:9RXL0bg/zibRAgZUYszZSwO/z8Y/a8bDuhia5mkpMnE=
 gopkg.in/go-playground/validator.v9 v9.29.1/go.mod h1:+c9/zcJMFNgbLvly1L1V+PpxWdVbfP1avr/N00E2vyQ=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
+gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
-gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b h1:h8qDotaEPuJATrMmW04NCwg7v22aHH28wwpauUhK9Oo=
+gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.0-20190106161140-3f1c8253044a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.0-20190418001031-e561f6794a2a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=

server/internal/model/project.go

@@ -1,5 +1,7 @@
 package model
 
+import "time"
+
 type ProjectID string
 
 type ProjectEntry struct {
@@ -13,14 +15,18 @@ type Project struct {
 	Label       string          `json:"label"`
 	Description string          `json:"description"`
 	Tasks       map[TaskID]Task `json:"tasks"`
+	Ordering    []TaskID        `json:"ordering"`
 	Params      Params          `json:"params"`
+	CreatedAt   time.Time       `json:"createdAt"`
+	UpdatedAt   time.Time       `json:"updatedAt"`
 }
 
 type Params struct {
-	TaskCategories     map[TaskCategoryID]TaskCategory `json:"taskCategories"`
+	TaskCategories              map[TaskCategoryID]TaskCategory `json:"taskCategories"`
-	TimeUnit           TimeUnit                        `json:"timeUnit"`
+	TimeUnit                    TimeUnit                        `json:"timeUnit"`
-	Currency           string                          `json:"currency"`
+	Currency                    string                          `json:"currency"`
-	RoundUpEstimations bool                            `json:"roundUpEstimations"`
+	RoundUpEstimations          bool                            `json:"roundUpEstimations"`
+	HideFinancialPreviewOnPrint bool                            `json:"hideFinancialPreviewOnPrint"`
 }
 
 type TimeUnit struct {