Fallback pour localStorage et config simplifiée de l'adresse publique de l'app client

.nvmrc

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

Dockerfile

@@ -1,25 +1,21 @@
-FROM golang:1.19 AS build
+FROM golang:1.13 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 ca-certificates gnupg
+RUN apt-get update && apt-get install -y build-essential git bash curl
 
-RUN echo 'Package: nodejs\nPin: origin deb.nodesource.com\nPin-Priority: 600' > /etc/apt/preferences.d/nodesource \
+RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - \
-    && 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 make deps \
+RUN ( cd client && npm install ) \
+    && ( cd server && go mod vendor ) \
     && make ARCH_TARGETS=amd64 release
 
 FROM busybox

Makefile

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

README.md

@@ -9,7 +9,6 @@ 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
  
@@ -30,7 +29,6 @@ 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,23 +6,21 @@
   "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.9.4",
+    "bulma": "^0.8.2",
     "bulma-switch": "^2.0.0",
     "json-merge-patch": "^0.2.3",
-    "react": "^16.13.1",
+    "local-storage-fallback": "^4.1.1",
-    "react-dom": "^16.13.1",
+    "preact": "^10.4.1",
-    "react-redux": "^7.2.0",
+    "preact-markup": "^1.6.0",
-    "react-router": "^5.2.0",
+    "preact-render-to-string": "^5.1.6",
-    "react-router-dom": "^5.2.0",
+    "preact-router": "^3.2.1",
-    "redux-saga": "^1.1.3",
     "style-loader": "^1.1.4",
     "typescript": "^3.8.3"
   },
   "devDependencies": {
     "@teamsupercell/typings-for-css-modules-loader": "^2.1.1",
-    "@types/react": "^16.9.34",
+    "@types/react": "^16.9.3",
     "css-loader": "^3.5.2",
     "fork-ts-checker-webpack-plugin": "^4.1.3",
     "html-webpack-plugin": "^4.2.0",
@@ -31,7 +29,7 @@
     "ts-loader": "^7.0.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.10.3"
   },
   "scripts": {
     "dev": "NODE_ENV=development webpack-dev-server --watch",

client/src/components/app.tsx

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

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

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

client/src/components/editable-text/style.module.css.d.ts

@@ -1,13 +1,13 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     editIcon: string;
     editableText: string;
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

client/src/components/estimation-range.tsx

@@ -1,7 +1,7 @@
 import ProjectTimeUnit from "./project-time-unit";
-import { getRoundUpEstimations } from "../models/params";
+import { defaults, getRoundUpEstimations } from "../models/params";
 import { Project } from "../models/project";
-import React, { Fragment,FunctionComponent } from "react";
+import { FunctionalComponent, Fragment, h } from "preact";
 import { Estimation } from "../hooks/use-project-estimations";
 
 export interface EstimationRangeProps {
@@ -9,7 +9,7 @@ export interface EstimationRangeProps {
     estimation: Estimation
 }
 
-export const EstimationRange: FunctionComponent<EstimationRangeProps> = ({ project, estimation }) => {
+export const EstimationRange: FunctionalComponent<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,6 +1,5 @@
-import React, { FunctionComponent } from "react";
+import { FunctionalComponent, h } from "preact";
 import style from "./style.module.css";
-import { formatDate } from "../../util/date";
 
 declare var __BUILD__: any;
 
@@ -8,17 +7,19 @@ export interface FooterProps {
   class?: string
 }
 
-const Footer: FunctionComponent<FooterProps> = ({ ...props}) => {
+const Footer: FunctionalComponent<FooterProps> = ({ ...props}) => {
+  console.log(__BUILD__)
   return (
-    <div className={`container ${style.footer} ${props.class ? props.class : ''}`}>
+    <div class={`container ${style.footer} ${props.class ? props.class : ''}`}>
-      <div className="columns">
+      <div class="columns">
-        <div className="column is-4 is-offset-8">
+        <div class="column is-4 is-offset-8">
-          <p className="has-text-right is-size-7">
+          <p class="has-text-right is-size-7">
-            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>.
+            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>.
           </p>
-          <p className="has-text-right is-size-7">
+          <p class="has-text-right is-size-7">
-            Réf.: {__BUILD__.gitRef ? __BUILD__.gitRef : '??'} | 
+            Version: {__BUILD__.version} - 
-            Date de construction: {__BUILD__.buildDate ? formatDate(__BUILD__.buildDate) : '??'}
+            Réf.: {__BUILD__.gitRef ? __BUILD__.gitRef : '??'} - 
+            Date de construction: {__BUILD__.buildDate ? __BUILD__.buildDate : '??'}
           </p>
         </div>
       </div>

client/src/components/footer/style.module.css.d.ts

@@ -1,12 +1,12 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     footer: string;
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

client/src/components/header/index.tsx

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

@@ -1,12 +1,12 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     header: string;
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

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

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

client/src/components/tabs/index.tsx

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

client/src/components/tabs/style.module.css.d.ts

@@ -1,13 +1,13 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     tabContent: string;
     tabs: string;
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

client/src/hooks/use-debounce.tsx

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

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

@@ -1,12 +1,20 @@
-import { useState } from "react";
+import { useState } from "preact/hooks";
+import storage from 'local-storage-fallback'
 
 export function useLocalStorage<T>(key: string, initialValue: T) {
+    //Define storage to localStorage and fallback if not avalaible (in wkhtmltopdf for exemple)
+    let localStorage: any;
+    localStorage = window.localStorage
+    if (null === localStorage) {
+      localStorage = storage;
+    }
+
     // State to store our value
     // Pass initial state function to useState so logic is only executed once
     const [storedValue, setStoredValue] = useState(() => {
       try {
         // Get from local storage by key
-        const item = window.localStorage.getItem(key);
+        const item = localStorage.getItem(key);
         // Parse stored json or if none return initialValue
         return item ? JSON.parse(item) : initialValue;
       } catch (error) {
@@ -26,7 +34,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
         // Save state
         setStoredValue(valueToStore);
         // Save to local storage
-        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        localStorage.setItem(key, JSON.stringify(valueToStore));
       } catch (error) {
         // A more advanced implementation would handle the error case
         console.error(error);

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { Project, sanitize } from "../models/project";
+import { Project } from "../models/project";
 import { Task, TaskID, EstimationConfidence, TaskCategoryID, TaskCategory } from "../models/task";
-import { useReducer } from "react";
+import { useReducer } from "preact/hooks";
 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', action);
+  console.log(action);
   switch(action.type) {
     case ADD_TASK:
     return handleAddTask(project, action as AddTask);
@@ -44,9 +44,6 @@ 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);
     
@@ -86,12 +83,7 @@ export function handleAddTask(project: Project, action: AddTask): Project {
     tasks: {
       ...project.tasks,
       [task.id]: task,
-    },
+    }
-    ordering: [
-      ...project.ordering,
-      task.id
-    ],
-    updatedAt: new Date(),
   };
 }
 
@@ -108,18 +100,9 @@ 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(),
   };
 }
 
@@ -141,6 +124,14 @@ 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: {
@@ -148,9 +139,8 @@ export function handleUpdateTaskEstimation(project: Project, action: UpdateTaskE
       [action.id]: {
         ...project.tasks[action.id],
         estimations: estimations,
-      },
+      }
-    },
+    }
-    updatedAt: new Date(),
   };
 }
 
@@ -168,8 +158,7 @@ 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(),
   };
 }
 
@@ -193,48 +182,10 @@ 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
@@ -252,8 +203,7 @@ export function handleUpdateParam(project: Project, action: UpdateParam): Projec
     params: {
       ...project.params,
       [action.name]: action.value,
-    },
+    }
-    updatedAt: new Date(),
   };
 }
 
@@ -280,8 +230,7 @@ export function handleUpdateTaskCategoryLabel(project: Project, action: UpdateTa
           label: action.label
         },
       }
-    },
+    }
-    updatedAt: new Date(),
   };
 }
 
@@ -308,8 +257,7 @@ export function handleUpdateTaskCategoryCost(project: Project, action: UpdateTas
           costPerTimeUnit: action.costPerTimeUnit
         },
       }
-    },
+    }
-    updatedAt: new Date(),
   };
 }
 
@@ -333,8 +281,7 @@ export function handleAddTaskCategory(project: Project, action: AddTaskCategory)
         ...project.params.taskCategories,
         [taskCategory.id]: taskCategory,
       }
-    },
+    }
-    updatedAt: new Date(),
   };
 }
 
@@ -356,8 +303,7 @@ export function handleRemoveTaskCategory(project: Project, action: RemoveTaskCat
     params: {
       ...project.params,
       taskCategories
-    },
+    }
-    updatedAt: new Date(),
   };
 }
 
@@ -375,9 +321,5 @@ export function handlePatchProject(project: Project, action: PatchProject): Proj
   const p = diff(project, action.from);
   console.log('patch to apply', p);
   if (!p) return project;
-  const patched: Project = applyPatch(project, p) as Project
+  return applyPatch(project, p) as Project;
-  
-  sanitize(patched)
-
-  return patched;
 }

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

@@ -1,6 +1,8 @@
 import { Project } from "../models/project";
-import { useEffect, useState } from "react";
+import { usePrevious } from "./use-previous";
+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,5 +1,5 @@
-import { Project, sanitize } from "../models/project";
+import {Project} from "../models/project";
-import { useState } from "react";
+import { useState } from "preact/hooks";
 import { ProjectStorageKeyPrefix } from "../util/storage";
 
 export function loadStoredProjects(): Project[] {
@@ -10,13 +10,10 @@ export function loadStoredProjects(): Project[] {
             try {
                 const data = window.localStorage.getItem(key);
                 if (data) {
-          const project: Project = JSON.parse(data);
+                    const project = JSON.parse(data);
-
-          sanitize(project)
-
                     projects.push(project);
                 }
-      } catch (err) {
+            } catch(err) {
                 console.error(err);
             }
         }
@@ -26,7 +23,7 @@ export function loadStoredProjects(): Project[] {
 }
 
 export function useStoredProjectList(): [Project[], () => void] {
-  const [projects, setProjects] = useState(() => {
+    const [ projects, setProjects ] = useState(() => {
         return loadStoredProjects();
     });
 
@@ -34,5 +31,5 @@ export function useStoredProjectList(): [Project[], () => void] {
         setProjects(loadStoredProjects());
     };
 
-  return [projects, refresh];
+    return [ projects, refresh];
 }

client/src/hooks/use-title.ts

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

client/src/hooks/useSort.tsx

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

client/src/models/project.ts

@@ -1,4 +1,4 @@
-import { Task, TaskID } from './task';
+import { Task, TaskCategory, TaskID } from './task';
 import { Params, defaults } from "./params";
 import { uuidV4 } from "../util/uuid";
 
@@ -10,9 +10,6 @@ export interface Project {
   description: string
   tasks: Tasks
   params: Params
-  createdAt: Date
-  updatedAt: Date
-  ordering: TaskID[]
 }
 
 export interface Tasks {
@@ -28,24 +25,5 @@ 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,92 +1,52 @@
-import React, { FunctionComponent, MouseEvent, useCallback, useEffect, useState } from "react";
+import { FunctionalComponent, h } from "preact";
 import style from "./style.module.css";
-import { useHistory } from 'react-router';
+import { route } from 'preact-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: FunctionComponent = () => {
+const Home: FunctionalComponent = () => {
-  useTitle('Accueil')
+    const [ projects, refreshProjects ] = useStoredProjectList();
-
-  const [projects] = useStoredProjectList()
-  const [sortingKey, setSortingKey] = useState('updatedAt')
-  const [sortingDirection, setSortingDirection] = useState<Direction>(Direction.DESC)
-  const sortedProjects = useKeySort(projects, sortingKey, sortingDirection)
-  const history = useHistory()
 
     const openNewProject = () => {
-    const uuid = base58UUID()
+        const uuid = base58UUID();
-    history.push(`/p/${uuid}`)
+        route(`/p/${uuid}`);
     };
 
-  const openProject = useCallback((evt: MouseEvent<HTMLTableRowElement>) => {
-    const projectId = evt.currentTarget.dataset.projectId;
-    history.push(`/p/${projectId}`)
-  }, [])
-
-  const sortBy = useCallback((evt: MouseEvent<HTMLTableCellElement>) => {
-    const key = evt.currentTarget.dataset.sortKey
-    if (!key) return
-
-    if (sortingKey !== key) {
-      setSortingKey(key)
-      return
-    }
-
-    setSortingDirection(sortingDirection => -sortingDirection)
-  }, [sortingKey, sortingDirection])
-
     return (
-    <div className={`container ${style.home}`}>
+        <div class={`container ${style.home}`}>
-      <div className="columns">
+            <div class="columns">
-        <div className="column">
+                <div class="column">
-          <div className="buttons is-right">
+                    <div class="buttons is-right">
-            <button className="button is-primary is-medium"
+                        <button class="button is-primary"
                             onClick={openNewProject}>
                             <strong>+</strong>&nbsp;&nbsp;Nouveau projet
                         </button>
                     </div>
-          <div className="box">
+                    <div class="panel">
-            <div className="table-container">
+                        <p class="panel-heading">
-              <table className="table is-fullwidth is-hoverable">
+                            Mes projets
-                <thead>
+                        </p>
-                  <tr className="is-size-5">
+                        {/* <div class="panel-block">
-                    <TableHeader onClick={sortBy} label="Projet" isCurrentSortingKey={sortingKey === 'label'} sortingDirection={sortingDirection} sortingKey="label" />
+                            <p class="control has-icons-left">
-                    <TableHeader onClick={sortBy} label="Mis à jour le" isCurrentSortingKey={sortingKey === 'updatedAt'} sortingDirection={sortingDirection} sortingKey="updatedAt" />
+                                <input class="input" type="text" placeholder="Search" />
-                  </tr>
+                                <span class="icon is-left">🔍</span>
-                </thead>
+                            </p>
-                <tbody>
+                        </div> */}
                         {
-                    sortedProjects.map(p => (
+                            projects.map(p => (
-                      <tr 
+                                <a class="panel-block" href={`/p/${p.id}`}>
-                        key={`project-${p.id}`}
+                                    <span class="panel-icon">🗒️</span>
-                        data-project-id={p.id}
+                                    { p.label ? p.label : "Projet sans nom" }
-                        onClick={openProject} 
+                                </a>
-                        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}>
+                            <p class="panel-block">
-                        <td colSpan={2}>
+                                <div class={style.noProjects}>Aucun project pour l'instant.</div>
-                          Aucun project pour l'instant.
+                            </p> :
-                        </td>
-                      </tr> :
                             null
                         }
-                </tbody>
-              </table>
-            </div>
                     </div>
                 </div>
             </div>
@@ -94,18 +54,4 @@ const Home: FunctionComponent = () => {
     );
 };
 
-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/home/style.module.css.d.ts

@@ -1,13 +1,13 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     home: string;
     noProjects: string;
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

client/src/routes/notfound/index.tsx

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

client/src/routes/notfound/style.module.css.d.ts

@@ -1,12 +1,12 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     notFound: string;
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

client/src/routes/pdf/index.tsx

@@ -0,0 +1,45 @@
+import { FunctionalComponent, h } from "preact";
+import style from "./style.module.css";
+import { newProject, Project } from "../../models/project";
+import { getProjectStorageKey } from "../../util/storage";
+import { useLocalStorage } from "../../hooks/use-local-storage";
+import TaskTable from "../project/tasks-table";
+import { useProjectReducer, addTask, updateTaskEstimation, removeTask, updateTaskLabel } from "../../hooks/use-project-reducer";
+import { Task, TaskID, EstimationConfidence } from "../../models/task";
+import TimePreview from "../project/time-preview";
+import RepartitionPreview from "../project/repartition-preview";
+import FinancialPreview from "../project/financial-preview";
+import { getHideFinancialPreviewOnPrint } from "../../models/params";
+
+export interface PdfProps {
+    projectId: string
+}
+
+const Pdf: FunctionalComponent<PdfProps> = ({ projectId }) => {
+    const projectStorageKey = getProjectStorageKey(projectId);
+    const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
+    const [ project, dispatch ] = useProjectReducer(storedProject);
+
+    return (
+        <div class={`container ${style.pdf}`}>
+            <div class="columns">
+                <div class="column is-9">
+                    <TaskTable 
+                    project={project} 
+                    readonly={true} />
+                </div>
+                <div class="column is-3">
+                    <TimePreview project={project} />
+                    <RepartitionPreview project={project} />
+                </div>
+            </div>
+            <div class="columns">
+                <div class={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
+                    <FinancialPreview project={project} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Pdf;

client/src/routes/pdf/style.module.css

@@ -0,0 +1,3 @@
+.pdf {
+    height: 100%;
+}

client/src/routes/pdf/style.module.css.d.ts

@@ -0,0 +1,12 @@
+declare namespace StyleModuleCssNamespace {
+  export interface IStyleModuleCss {
+    pdf: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

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

@@ -1,9 +1,9 @@
-import React, { FunctionComponent, Fragment, useCallback } from "react";
+import { FunctionalComponent, h, Fragment } from "preact";
 import { Project } from "../../models/project";
 import TaskTable from "./tasks-table";
 import TimePreview from "./time-preview";
 import FinancialPreview from "./financial-preview";
-import { addTask, updateTaskEstimation, removeTask, updateTaskLabel, ProjectReducerActions, moveTask } from "../../hooks/use-project-reducer";
+import { addTask, updateTaskEstimation, removeTask, updateProjectLabel, updateTaskLabel, ProjectReducerActions } from "../../hooks/use-project-reducer";
 import { Task, TaskID, EstimationConfidence } from "../../models/task";
 import RepartitionPreview from "./repartition-preview";
 import { getHideFinancialPreviewOnPrint } from "../../models/params";
@@ -13,7 +13,7 @@ export interface EstimationTabProps {
     dispatch: (action: ProjectReducerActions) => void
 }
 
-const EstimationTab: FunctionComponent<EstimationTabProps> = ({ project, dispatch }) => {
+const EstimationTab: FunctionalComponent<EstimationTabProps> = ({ project, dispatch }) => {
     const onTaskAdd = (task: Task) => {
         dispatch(addTask(task));
     };
@@ -30,36 +30,31 @@ const EstimationTab: FunctionComponent<EstimationTabProps> = ({ project, dispatc
         dispatch(updateTaskEstimation(taskId, confidence, value));
     };
 
-  const onTaskMove = useCallback((taskId: TaskID, move: number) => {
-    dispatch(moveTask(taskId, move))
-  }, [dispatch])
-
     return (
       <Fragment>
-      <div className="columns">
+        <div class="columns">
-        <div className="column is-9">
+          <div class="column is-9">
             <TaskTable 
               project={project} 
-            onTaskMove={onTaskMove}
               onTaskAdd={onTaskAdd}
               onTaskRemove={onTaskRemove}
               onTaskLabelUpdate={onTaskLabelUpdate}
               onEstimationChange={onEstimationChange} />
           </div>
-        <div className="column is-3">
+          <div class="column is-3">
             <TimePreview project={project} />
             <RepartitionPreview project={project} />
           </div>
         </div>
-      <div className="columns">
+        <div class="columns">
-        <div className={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint' : ''}`}>
+          <div class={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
             <FinancialPreview project={project} />
           </div>
         </div>
         {
           Object.keys(project.tasks).length <= 20 ?
-          <div className="message noPrint">
+          <div class="message noPrint">
-            <div className="message-body">
+            <div class="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>

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

@@ -1,14 +1,63 @@
-import React, { FunctionComponent } from "react";
+import { FunctionalComponent, h, Fragment } from "preact";
 import { Project } from "../../models/project";
+import { route } from 'preact-router';
 
 export interface ExportTabProps {
     project: Project
 }
 
-const ExportTab: FunctionComponent<ExportTabProps> = ({ project }) => {
+const ExportTab: FunctionalComponent<ExportTabProps> = ({ project }) => {
+  const displayPdf = () => {
+    const uuid = project.id;
+    route(`/pdf/${uuid}`);
+  };
+
+  const showFile = (blob:any) => {
+    var newBlob = new Blob([blob], {type: "application/pdf"})
+  
+    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+      window.navigator.msSaveOrOpenBlob(newBlob);
+      return;
+    } 
+  
+    const data = window.URL.createObjectURL(newBlob);
+    var link = document.createElement('a');
+    link.href = data;
+    link.download=project.label+".pdf";
+    link.click();
+    setTimeout(function(){
+      window.URL.revokeObjectURL(data);
+    }, 100);
+  }
+
+  const options = {
+    projectURL: `//${window.location.host}/export/projects`,
+  }
+
+  const exportPdf = () => {
+    return fetch(`${options.projectURL}/${project.id}`, {
+      method: 'GET',
+    }).then(r => r.blob())
+    .then(showFile);
+  };
+
   return (
     <div>
-      <label className="label is-size-4">Format JSON</label>
+      <label class="label is-size-4">Format PDF</label>
+      <div class="field">
+        <button class="button is-default"
+          onClick={displayPdf}>
+          Aperçu PDF
+        </button>
+      </div>
+      <div class="field">
+        <a class="button is-primary"
+          onClick={exportPdf}>
+          Exporter PDF
+        </a>
+      </div>
+      <hr />
+      <label class="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 React, { FunctionComponent } from "react";
+import { FunctionalComponent, h } from "preact";
 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: FunctionComponent<FinancialPreviewProps> = ({ project }) => {
+const FinancialPreview: FunctionalComponent<FinancialPreviewProps> = ({ project }) => {
     const estimations = useProjectEstimations(project);
     const costs = getMinMaxCosts(project, estimations.p99);
     const roundUp = getRoundUpEstimations(project);
     return (
-        <div className="table-container">
+        <div class="table-container">
-            <table className="table is-bordered is-striped is-fullwidth">
+            <table class="table is-bordered is-striped is-fullwidth">
                 <thead>
                     <tr>
                         <th colSpan={2}>
                           <span>Prévisionnel financier</span><br />
-                          <span className="is-size-7 has-text-weight-normal">confiance >= 99.7%</span>
+                          <span class="is-size-7 has-text-weight-normal">confiance {'>'}= 99.7%</span>
                         </th>
                     </tr>
                     <tr>
-                        <th className="is-narrow">Temps</th>
+                        <th class="is-narrow">Temps</th>
                         <th>Coût</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td className="is-narrow">Maximum</td>
+                        <td class="is-narrow">Maximum</td>
                         <td>
                           <CostDetails project={project} cost={costs.max} roundUp={roundUp} />
                         </td>
                     </tr>
                     <tr>
-                        <td className="is-narrow">Minimum</td>
+                        <td class="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:FunctionComponent<CostDetailsProps> = ({ project, cost, roundUp }) => {
+export const CostDetails:FunctionalComponent<CostDetailsProps> = ({ project, cost, roundUp }) => {
   return (
     <details>
       <summary><strong>
         ≈ {cost.totalCost} {getCurrency(project)}</strong>
-        <span className="is-pulled-right">{ roundUp ? Math.ceil(cost.totalTime) : cost.totalTime.toFixed(2) } <ProjectTimeUnit project={project} /></span>
+        <span class="is-pulled-right">{ roundUp ? Math.ceil(cost.totalTime) : cost.totalTime.toFixed(2) } <ProjectTimeUnit project={project} /></span>
       </summary>
-      <table className={`table is-fullwidth`}>
+      <table class={`table is-fullwidth`}>
         <tbody>
         {
           Object.keys(cost.details).map(taskCategoryId => {
@@ -69,9 +69,9 @@ export const CostDetails:FunctionComponent<CostDetailsProps> = ({ project, cost,
             const details = cost.details[taskCategoryId];
             return (
               <tr key={`task-category-cost-${taskCategory.id}`}>
-                <td className={`${style.noBorder} is-size-6`}>{taskCategory.label}</td>
+                <td class={`${style.noBorder} is-size-6`}>{taskCategory.label}</td>
-                <td className={`${style.noBorder} is-size-6`}>{details.cost} {getCurrency(project)}</td>
+                <td class={`${style.noBorder} is-size-6`}>{details.cost} {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>
+                <td class={`${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,6 +1,7 @@
-import React, { FunctionComponent, useEffect } from "react";
+import { FunctionalComponent, h } from "preact";
+import { useEffect } from "preact/hooks";
 import style from "./style.module.css";
-import { newProject, Project, sanitize } from "../../models/project";
+import { newProject, Project } from "../../models/project";
 import { useProjectReducer, updateProjectLabel, patchProject } from "../../hooks/use-project-reducer";
 import { getProjectStorageKey } from "../../util/storage";
 import { useLocalStorage } from "../../hooks/use-local-storage";
@@ -10,21 +11,17 @@ 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
 }
 
-const Project: FunctionComponent<ProjectProps> = () => {
+const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
-  const { projectId } = useParams<{ projectId: string }>();
     const projectStorageKey = getProjectStorageKey(projectId);
     const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
-  const [ project, dispatch ] = useProjectReducer(sanitize(storedProject));
+    const [ project, dispatch ] = useProjectReducer(storedProject);
     
     useServerSync(project, (project: Project) => {
-    sanitize(project)
       dispatch(patchProject(project));
     });
 
@@ -37,17 +34,14 @@ const Project: FunctionComponent<ProjectProps> = () => {
         storeProject(project);
     }, [project]);
 
-  useTitle(project.label ? project.label : "Projet sans nom")
-  
     return (
-    <div className={`container ${style.estimation}`}>
+        <div class={`container ${style.estimation}`}>
             <EditableText
                 editIconClass="is-size-4"
-        render={(value) => (<h2 className="is-size-3">{value}</h2>)}
+                render={(value) => (<h2 class="is-size-3">{value}</h2>)}
                 onChange={onProjectLabelChange}
-        value={project.label ? project.label : "Projet sans nom"} 
+                value={project.label ? project.label : "Projet sans nom"} />
-      />
+            <div class={style.tabContainer}>
-      <div className={style.tabContainer}>
                 <Tabs items={[
                         {
                             label: 'Estimation',
@@ -64,7 +58,8 @@ const Project: FunctionComponent<ProjectProps> = () => {
                             icon: '↗️',
                             render: () => <ExportTab project={project} />
                         }
-        ]} />
+                    ]}
+                />
             </div>
         </div>
     );

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

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

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

@@ -1,16 +1,19 @@
-import React, { FunctionComponent } from "react";
+import { FunctionalComponent, h } from "preact";
 import { Project } from "../../models/project";
-import { getTaskCategoriesMeanRepartition } from "../../util/stat";
+import { useProjectEstimations } from "../../hooks/use-project-estimations";
+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: FunctionComponent<RepartitionPreviewProps> = ({ project }) => {
+const RepartitionPreview: FunctionalComponent<RepartitionPreviewProps> = ({ project }) => {
     const repartition = getTaskCategoriesMeanRepartition(project);   
     return (
-      <div className="table-container">
+      <div class="table-container">
-        <table className="table is-bordered is-striped is-fullwidth">
+        <table class="table is-bordered is-striped is-fullwidth">
           <thead>
             <tr>
               <th colSpan={2}>Répartition moyenne</th>

client/src/routes/project/style.module.css.d.ts

@@ -1,4 +1,4 @@
-declare namespace StyleModuleCssModule {
+declare namespace StyleModuleCssNamespace {
   export interface IStyleModuleCss {
     estimation: string;
     mainColumn: string;
@@ -9,9 +9,9 @@ declare namespace StyleModuleCssModule {
   }
 }
 
-declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+declare const StyleModuleCssModule: StyleModuleCssNamespace.IStyleModuleCss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModuleCssModule.IStyleModuleCss;
+  locals: StyleModuleCssNamespace.IStyleModuleCss;
 };
 
 export = StyleModuleCssModule;

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

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

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

@@ -1,48 +1,34 @@
-import React, { FunctionComponent, useState, useEffect, ChangeEvent, MouseEvent, useCallback } from "react";
+import { FunctionalComponent, h } from "preact";
+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
-  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
+    readonly?: boolean;
 }
 
 export type EstimationTotals = { [confidence in EstimationConfidence]: number }
 
-const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate, onTaskMove }) => {
+const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate, readonly }) => {
     
     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.Likely]: 0,
         [EstimationConfidence.Pessimistic]: 0,
     } as EstimationTotals);
 
-  const [tasks, setTasks] = useState<Task[]>([])
-  useEffect(() => {
-    setTasks(Object.values(project.tasks))
-  }, [project.tasks])
-
-  const sortTask = useCallback((a: Task, b: Task) => {
-    const aIndex = (project.ordering ?? []).findIndex(taskId => a.id === taskId)
-    const bIndex = (project.ordering ?? []).findIndex(taskId => b.id === taskId)
-    return aIndex - bIndex;
-  }, [project.ordering])
-
-  const sorted = useSort(tasks, sortTask)
-
-  const [ activeTaskActions, setActiveTaskActions ] = useState<string|null>(null);
-
     const isPrint = usePrintMediaQuery();
 
     useEffect(() => {
@@ -59,53 +45,41 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
         setTotals({ optimistic, likely, pessimistic });
     }, [project.tasks]);
 
-  const toggleActiveTaskAction = useCallback((evt: MouseEvent<HTMLButtonElement>) => {
+    const onNewTaskLabelChange = (evt: Event) => {
-    const taskId = evt.currentTarget.dataset.taskId;
-    if (!taskId) return
-    setActiveTaskActions(activeTaskActions === taskId ? null : taskId)
-  }, [activeTaskActions])
-
-  const onNewTaskLabelChange = (evt: ChangeEvent) => {
         const value = (evt.currentTarget as HTMLInputElement).value;
-    setTask({ ...task, label: value });
+        setTask({...task, label: value});
     };
 
-  const onNewTaskCategoryChange = (evt: ChangeEvent) => {
+    const onNewTaskCategoryChange = (evt: Event) => {
         const value = (evt.currentTarget as HTMLInputElement).value;
-    setTask({ ...task, category: value });
+        setTask({...task, category: value});
     };
 
     const onTaskLabelChange = (taskId: TaskID, value: string) => {
+        if(onTaskLabelUpdate){
             onTaskLabelUpdate(taskId, value);
+        }
     };
 
-  const onAddTaskClick = (evt: MouseEvent) => {
+    const onAddTaskClick = (evt: Event) => {
+        if(onTaskAdd){
             onTaskAdd(task);
             setTask(newTask("", defaultTaskCategory));
+        }
     };
 
-  const onTaskRemoveClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
+    const onTaskRemoveClick = (taskId: TaskID, evt: Event) => {
-    const taskId = evt.currentTarget.dataset.taskId;
+        if(onTaskRemove){
-    if (!taskId) return
             onTaskRemove(taskId);
-  }, []);
+        }
+    };
 
-  const onTaskMoveUpClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
+    const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: Event) => {
-    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);
+        if(onEstimationChange){
             onEstimationChange(taskID, confidence, value);
+        }
     };
 
     const onOptimisticChange = withEstimationChange.bind(null, EstimationConfidence.Optimistic);
@@ -113,12 +87,15 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
     const onPessimisticChange = withEstimationChange.bind(null, EstimationConfidence.Pessimistic);
 
     return (
-    <div className="table-container">
+        <div class="table-container">
-      <table className={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
+            <table class={`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>
+                        readonly ? '' :
+                        <th class={`${style.noBorder} noPrint`} rowSpan={2}></th>
+                        }
+                        <th class={style.mainColumn} rowSpan={2}>Tâche</th>
                         <th rowSpan={2}>Catégorie</th>
                         <th colSpan={3}>Estimation (en <ProjectTimeUnit project={project} />)</th>
                     </tr>
@@ -130,71 +107,51 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
                 </thead>
                 <tbody>
                     {
-            sorted.map(t => {
+                        Object.values(project.tasks).map(t => {
                             const category = project.params.taskCategories[t.category];
                             const categoryLabel = category ? category.label : '???';
                             return (
                                 <tr key={`taks-${t.id}`}>
-                  <td className={`is-narrow noPrint`}>
+                                    {
-                    <div className={`dropdown ${activeTaskActions === t.id ? 'is-active' : ''}`}>
+                                    readonly ? '' :
-                      <div className="dropdown-trigger">
+                                    <td class={`is-narrow noPrint`}>
-                        <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">
+                                        <button
-                          <span>⁝</span>
+                                            onClick={onTaskRemoveClick.bind(null, t.id)}
+                                            class="button is-danger is-small is-outlined">
+                                        🗑️
                                         </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}>
+                                    }
+                                    <td class={style.mainColumn}>
                                         <EditableText
                                             render={(value) => (<span>{value}</span>)}
                                             onChange={onTaskLabelChange.bind(null, t.id)}
                                             value={t.label} />
                                     </td>
-                  <td>{categoryLabel}</td>
+                                    <td>{ categoryLabel }</td>
                                     <td>
                                         {
-                      isPrint ?
+                                            readonly ?
                                             <span>{t.estimations.optimistic}</span> :
-                        <input
+                                            <input class="input" type="number" value={t.estimations.optimistic}
-                          className="input" type="number"
-                          value={t.estimations.optimistic}
                                                 min={0}
                                                 onChange={onOptimisticChange.bind(null, t.id)} />
                                         }
                                     </td>
                                     <td>
                                         {
-                      isPrint ?
+                                            readonly ?
                                             <span>{t.estimations.likely}</span> :
-                        <input
+                                            <input class="input" type="number" value={t.estimations.likely}
-                          className={`input ${t.estimations.likely < t.estimations.optimistic ? 'is-danger' : ''}`}
-                          type="number"
-                          value={t.estimations.likely}
                                                 min={0}
                                                 onChange={onLikelyChange.bind(null, t.id)} />
                                         }
                                     </td>
                                     <td>
                                         {
-                      isPrint ?
+                                            readonly ?
                                             <span>{t.estimations.pessimistic}</span> :
-                        <input
+                                            <input class="input" type="number" value={t.estimations.pessimistic}
-                          className={`input ${t.estimations.pessimistic < t.estimations.likely ? 'is-danger' : ''}`}
-                          type="number"
-                          value={t.estimations.pessimistic}
                                                 min={0}
                                                 onChange={onPessimisticChange.bind(null, t.id)} />
                                         }
@@ -206,23 +163,25 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
                     {
                         Object.keys(project.tasks).length === 0 ?
                         <tr>
-                <td className={`${style.noBorder} noPrint`}></td>
+                            <td class={`${style.noBorder} noPrint`}></td>
-                <td className={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
+                            <td class={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
                         </tr> :
                         null
                     }
                 </tbody>
                 <tfoot>
                     <tr>
-            <td className={`${style.noBorder} noPrint`}></td>
+                        <td class={`${style.noBorder} noPrint`}></td>
-            <td colSpan={2} className={isPrint ? style.noBorder : ''}>
+                        <td colSpan={readonly ? 1 : 2} class={readonly ? style.noBorder : ''}>
-              <div className="field has-addons noPrint">
+                            {
-                <p className="control is-expanded">
+                            readonly ? '' :
-                  <input className="input" type="text" placeholder="Nouvelle tâche"
+                            <div  class="field has-addons noPrint">
+                                <p class="control is-expanded">
+                                    <input class="input" type="text" placeholder="Nouvelle tâche"
                                         value={task.label} onChange={onNewTaskLabelChange} />
                                 </p>
-                <p className="control">
+                                <p class="control">
-                  <span className="select">
+                                    <span class="select">
                                     <select onChange={onNewTaskCategoryChange} value={task.category}>
                                         {
                                             Object.values(project.params.taskCategories).map(tc => {
@@ -234,17 +193,18 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
                                     </select>
                                     </span>
                                 </p>
-                <p className="control">
+                                <p class="control">
-                  <a className="button is-primary" onClick={onAddTaskClick}>
+                                    <a class="button is-primary" onClick={onAddTaskClick}>
                                     Ajouter
                                     </a>
                                 </p>
                             </div>
+                            }
                         </td>
                         <th colSpan={3}>Total</th>
                     </tr>
                     <tr>
-            <td colSpan={isPrint ? 2 : 3} className={style.noBorder}></td>
+                        <td colSpan={readonly ? 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>

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

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

@@ -1,20 +0,0 @@
-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,3 +1,4 @@
+import { useState } from "preact/hooks/src";
 import { ProjectID } from "../models/project";
 
 export const ProjectStorageKeyPrefix = "project-";

client/tsconfig.json

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

client/webpack.config.js

@@ -11,14 +11,13 @@ 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',
     publicPath: '/'
   },
   resolve: {
-    extensions: [".ts", ".tsx", ".js", ".jsx"]
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
   },
   devServer: {
     compress: true,
@@ -28,6 +27,9 @@ module.exports = {
     proxy: {
       '/api': {
         target: 'http://127.0.0.1:8081',
+      },
+      '/export': {
+        target: 'http://127.0.0.1:8081',
       }
     }
   },
@@ -64,7 +66,7 @@ module.exports = {
   plugins: [
     new ForkTsCheckerWebpackPlugin(),
     new HtmlWebpackPlugin({
-      title: '⏱️ Guesstimate',
+      title: 'Guesstimate',
       scriptLoading: 'defer',
 
       template: path.join(__dirname, 'src/index.html')    
@@ -77,6 +79,7 @@ module.exports = {
     }),
     new webpack.DefinePlugin({
       __BUILD__: JSON.stringify({
+        version: getCurrentVersion(),
         gitRef: getCurrentGitRef(),
         buildDate: new Date(),
       })
@@ -84,6 +87,14 @@ 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,6 +24,7 @@ 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}" \
@@ -40,7 +41,7 @@ function current_commit_ref {
 }
 
 function current_version {
-  local latest_tag=$(git describe --always 2>/dev/null)
+  local latest_tag=$(git describe --abbrev=0 2>/dev/null)
   echo ${latest_tag:-0.0.0}
 }
 

server/go.mod

@@ -1,24 +1,19 @@
 module forge.cadoles.com/wpetit/guesstimate
 
-go 1.19
+go 1.14
 
 require (
+	github.com/SebastiaanKlippert/go-wkhtmltopdf v1.5.0
 	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.4.0
+	gopkg.in/yaml.v2 v2.2.8
 )
 
-require (
+// replace gitlab.com/wpetit/goweb => ../goweb
-	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,3 +1,4 @@
+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=
@@ -18,10 +19,13 @@ github.com/DataDog/zstd v1.4.1 h1:3oxKN3wbHibqx897utPC2LTQU4J+IHWWJO+glkAkpFM=
 github.com/DataDog/zstd v1.4.1/go.mod h1:1jcaCB/ufaK+sKp1NBhlGmpz41jOoPQ35bpF36t7BBo=
 github.com/GeertJohan/go.incremental v1.0.0/go.mod h1:6fAjUhbVuX1KcMD3c8TEgVUqmo4seqhv0i0kdATSkM0=
 github.com/GeertJohan/go.rice v1.0.0/go.mod h1:eH6gbSOAUv07dQuZVnBmoDP8mgsM1rtixis4Tib9if0=
+github.com/SebastiaanKlippert/go-wkhtmltopdf v1.5.0 h1:KNMkSqhko6c7eVncl/laVCS95jRryULVhVwwL0VynnU=
+github.com/SebastiaanKlippert/go-wkhtmltopdf v1.5.0/go.mod h1:zRBvVJtIfhaWvQ9lPIkXrtona4qqSmjZ1HfKvq4dQzI=
 github.com/Sereal/Sereal v0.0.0-20190618215532-0b8ac451a863 h1:BRrxwOZBolJN4gIwvZMJY1tzqBvQgpaZiQRuIDD40jM=
 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=
@@ -34,16 +38,18 @@ 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=
@@ -53,15 +59,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=
@@ -73,6 +79,7 @@ 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=
@@ -81,6 +88,8 @@ 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=
@@ -90,14 +99,15 @@ 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=
@@ -115,9 +125,8 @@ 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=
@@ -128,10 +137,12 @@ 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=
@@ -163,8 +174,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-20200301022130-244492dfa37a h1:GuSPYbZzB5/dcLNCwLQLsg3obCJtX9IJhpXkvY7kzk0=
+golang.org/x/net v0.0.0-20200324143707-d3edc9973b7e h1:3G+cUijn7XD+S4eJFddp53Pv7+slrESplyjG25HgL+k=
-golang.org/x/net v0.0.0-20200301022130-244492dfa37a/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20200324143707-d3edc9973b7e/go.mod h1:qpuaurCH72eLCgpAm/N6yyVIVM9cpaDIP3A8BGJEC5A=
 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=
@@ -186,13 +197,12 @@ 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-20220722155257-8c9f86f7a55f h1:v4INt8xihDGvnrfjMDVXGxw9wrfxYyCjk0KbXjhR55s=
+golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd h1:xhmwyvizuTgC2qz7ZlMluP20uW+C3Rm0FD/WLDX8884=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 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=
@@ -212,6 +222,7 @@ 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=
@@ -249,11 +260,8 @@ 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.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
+gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
-gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
+gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-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/config/config.go

@@ -10,16 +10,25 @@ import (
 	"gopkg.in/yaml.v2"
 )
 
+// Config is the configuration struct
 type Config struct {
 	HTTP   HTTPConfig   `yaml:"http"`
+	Client ClientConfig `yaml:"client"`
 	Data   DataConfig   `ymal:"data"`
 }
 
+// HTTPConfig is the configuration part which defines HTTP related params
 type HTTPConfig struct {
 	Address   string `yaml:"address" env:"GUESSTIMATE_HTTP_ADDRESS"`
 	PublicDir string `yaml:"publicDir" env:"GUESSTIMATE_PUBLIC_DIR"`
 }
 
+// ClientConfig is the configuration part which defines the client app related params
+type ClientConfig struct {
+	PublicBaseURL string `yaml:"publicbaseurl" env:"GUESSTIMATE_CLIENT_PUBLIC_BASE_URL"`
+}
+
+// DataConfig is the configuration part which defines data related params
 type DataConfig struct {
 	Path string `yaml:"path" env:"GUESSTIMATE_DATA_PATH"`
 }
@@ -40,6 +49,7 @@ func NewFromFile(filepath string) (*Config, error) {
 	return config, nil
 }
 
+// WithEnvironment retrieves the configuration from env vars
 func WithEnvironment(conf *Config) error {
 	if err := env.Parse(conf); err != nil {
 		return err
@@ -48,23 +58,29 @@ func WithEnvironment(conf *Config) error {
 	return nil
 }
 
+// NewDumpDefault retrieves the default configuration
 func NewDumpDefault() *Config {
 	config := NewDefault()
 	return config
 }
 
+// NewDefault creates and returns a new default configuration
 func NewDefault() *Config {
 	return &Config{
 		HTTP: HTTPConfig{
 			Address:   ":8081",
 			PublicDir: "public",
 		},
+		Client: ClientConfig{
+			PublicBaseURL: "http://localhost:8080",
+		},
 		Data: DataConfig{
 			Path: "guesstimate.db",
 		},
 	}
 }
 
+// Dump writes a given config to a config file
 func Dump(config *Config, w io.Writer) error {
 	data, err := yaml.Marshal(config)
 	if err != nil {

server/internal/config/provider.go

@@ -2,6 +2,7 @@ package config
 
 import "gitlab.com/wpetit/goweb/service"
 
+// ServiceProvider returns the current config service
 func ServiceProvider(config *Config) service.Provider {
 	return func(ctn *service.Container) (interface{}, error) {
 		return config, nil

server/internal/config/service.go

@@ -5,6 +5,7 @@ import (
 	"gitlab.com/wpetit/goweb/service"
 )
 
+// ServiceName defines the project's service
 const ServiceName service.Name = "config"
 
 // From retrieves the config service in the given container

server/internal/model/project.go

@@ -1,7 +1,5 @@
 package model
 
-import "time"
-
 type ProjectID string
 
 type ProjectEntry struct {
@@ -15,10 +13,7 @@ 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 {
@@ -26,7 +21,6 @@ type Params struct {
 	TimeUnit           TimeUnit                        `json:"timeUnit"`
 	Currency           string                          `json:"currency"`
 	RoundUpEstimations bool                            `json:"roundUpEstimations"`
-	HideFinancialPreviewOnPrint bool                            `json:"hideFinancialPreviewOnPrint"`
 }
 
 type TimeUnit struct {

server/internal/route/mount.go

@@ -9,6 +9,7 @@ import (
 	"gitlab.com/wpetit/goweb/static"
 )
 
+// Mount endoints for server app
 func Mount(r *chi.Mux, config *config.Config) error {
 	r.Route("/api/v1", func(r chi.Router) {
 		r.Get("/projects/{projectID}", handleGetProject)
@@ -17,6 +18,10 @@ func Mount(r *chi.Mux, config *config.Config) error {
 		r.Delete("/projects/{projectID}", handleDeleteProject)
 	})
 
+	r.Route("/export", func(r chi.Router) {
+		r.Get("/projects/{projectID}", handleExportProject)
+	})
+
 	clientIndex := path.Join(config.HTTP.PublicDir, "index.html")
 
 	serveClientIndex := func(w http.ResponseWriter, r *http.Request) {
@@ -24,6 +29,7 @@ func Mount(r *chi.Mux, config *config.Config) error {
 	}
 
 	r.Get("/p/*", serveClientIndex)
+	r.Get("/pdf/*", serveClientIndex)
 
 	notFoundHandler := r.NotFoundHandler()
 	r.Get("/*", static.Dir(config.HTTP.PublicDir, "", notFoundHandler))

server/internal/route/project.go

@@ -2,14 +2,17 @@ package route
 
 import (
 	"encoding/json"
+	"fmt"
 	"log"
 	"net/http"
 	"strconv"
 
 	jsonpatch "gopkg.in/evanphx/json-patch.v4"
 
+	"forge.cadoles.com/wpetit/guesstimate/internal/config"
 	"forge.cadoles.com/wpetit/guesstimate/internal/model"
 	"forge.cadoles.com/wpetit/guesstimate/internal/storm"
+	"github.com/SebastiaanKlippert/go-wkhtmltopdf"
 	"github.com/go-chi/chi"
 	"github.com/pkg/errors"
 	"gitlab.com/wpetit/goweb/middleware/container"
@@ -74,6 +77,55 @@ func handleGetProject(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+func handleExportProject(w http.ResponseWriter, r *http.Request) {
+	ctn := container.Must(r.Context())
+	cfg := config.Must(ctn)
+
+	projectID := getProjectID(r)
+
+	var (
+		err error
+		url string
+	)
+
+	url = string(cfg.Client.PublicBaseURL) + "/pdf/" + string(projectID)
+
+	// Create new PDF generator
+	pdfg, err := wkhtmltopdf.NewPDFGenerator()
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	// Set global options
+	pdfg.Dpi.Set(300)
+	pdfg.Orientation.Set(wkhtmltopdf.OrientationPortrait)
+	pdfg.Grayscale.Set(true)
+
+	// Create a new input page from an URL
+	page := wkhtmltopdf.NewPage(url)
+
+	// Set options for this page
+	page.FooterRight.Set("[page]")
+	page.FooterFontSize.Set(10)
+	page.Zoom.Set(0.95)
+
+	// Add to document
+	pdfg.AddPage(page)
+
+	// Create PDF document in internal buffer
+	err = pdfg.Create()
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	rsp, err := writePDF(w, http.StatusOK, pdfg.Bytes())
+	if err != nil {
+		panic(errors.Wrap(err, "could not write pdf response"))
+	}
+
+	fmt.Println(rsp)
+}
+
 type createRequest struct {
 	Project *model.Project `json:"project"`
 }
@@ -246,3 +298,12 @@ func writeJSON(w http.ResponseWriter, statusCode int, data interface{}) error {
 
 	return encoder.Encode(data)
 }
+
+func writePDF(w http.ResponseWriter, statusCode int, data []byte) (int, error) {
+	w.Header().Set("Content-Disposition", "attachment; filename=estimation.pdf")
+	w.Header().Set("Content-Type", "application/pdf")
+
+	w.WriteHeader(statusCode)
+
+	return w.Write(data)
+}