feat(ui): integrate v1 editor

This commit is contained in:
wpetit 2020-08-09 15:30:06 +02:00
parent f55bce9ee2
commit c7cea6e46b
41 changed files with 1788 additions and 156 deletions

View File

@ -1775,6 +1775,52 @@
"resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.1.0.tgz",
"integrity": "sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==" "integrity": "sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg=="
}, },
"@teamsupercell/typings-for-css-modules-loader": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.2.1.tgz",
"integrity": "sha512-Pv+OXrZAVwTMhUUD5NkbjNsxNSzzWrtqwyJ3RQ6KONdlS5QBnR7RAU3ygt3XJykxjEknokZK0H47C3kjxSPTHA==",
"dev": true,
"requires": {
"camelcase": "^5.3.1",
"loader-utils": "1.2.3",
"prettier": "*",
"schema-utils": "^2.0.1"
},
"dependencies": {
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"dev": true
},
"emojis-list": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
"dev": true
},
"json5": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
"integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^2.0.0",
"json5": "^1.0.1"
}
}
}
},
"@types/anymatch": { "@types/anymatch": {
"version": "1.3.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@ -3782,6 +3828,11 @@
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz", "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
"integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ==" "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
}, },
"bulma-switch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.0.tgz",
"integrity": "sha512-myD38zeUfjmdduq+pXabhJEe3x2hQP48l/OI+Y0fO3HdDynZUY/VJygucvEAJKRjr4HxD5DnEm4yx+oDOBXpAA=="
},
"bytes": { "bytes": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@ -9156,6 +9207,13 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
}, },
"prettier": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
"integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
"dev": true,
"optional": true
},
"pretty-error": { "pretty-error": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",

View File

@ -28,6 +28,7 @@
"@commitlint/cli": "^9.1.2", "@commitlint/cli": "^9.1.2",
"@commitlint/config-conventional": "^9.1.1", "@commitlint/config-conventional": "^9.1.1",
"@fortawesome/fontawesome-free": "^5.11.2", "@fortawesome/fontawesome-free": "^5.11.2",
"@teamsupercell/typings-for-css-modules-loader": "^2.2.1",
"@types/node": "^13.13.4", "@types/node": "^13.13.4",
"@types/react-dom": "^16.9.7", "@types/react-dom": "^16.9.7",
"@types/react-redux": "^7.1.7", "@types/react-redux": "^7.1.7",
@ -56,6 +57,7 @@
"@apollo/client": "^3.0.2", "@apollo/client": "^3.0.2",
"@types/qs": "^6.9.3", "@types/qs": "^6.9.3",
"bulma": "^0.9.0", "bulma": "^0.9.0",
"bulma-switch": "^2.0.0",
"graphql": "^15.3.0", "graphql": "^15.3.0",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",

View File

@ -6,6 +6,7 @@ import { DashboardPage } from './DashboardPage/DashboardPage';
import { PrivateRoute } from './PrivateRoute'; import { PrivateRoute } from './PrivateRoute';
import { useLoggedIn, LoggedInContext } from '../hooks/useLoggedIn'; import { useLoggedIn, LoggedInContext } from '../hooks/useLoggedIn';
import { useUserProfile } from '../gql/queries/user'; import { useUserProfile } from '../gql/queries/user';
import { ProjectPage } from './ProjectPage/ProjectPage';
export interface AppProps { export interface AppProps {
@ -21,6 +22,7 @@ export const App: FunctionComponent<AppProps> = () => {
<Route path="/" exact component={HomePage} /> <Route path="/" exact component={HomePage} />
<PrivateRoute path="/profile" exact component={ProfilePage} /> <PrivateRoute path="/profile" exact component={ProfilePage} />
<PrivateRoute path="/dashboard" exact component={DashboardPage} /> <PrivateRoute path="/dashboard" exact component={DashboardPage} />
<PrivateRoute path="/projects/:id" exact component={ProjectPage} />
<Route component={() => <Redirect to="/" />} /> <Route component={() => <Redirect to="/" />} />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>

View File

@ -1,19 +1,19 @@
import React from 'react'; import React from 'react';
import { EstimationPanel } from './EstimationPanel'; import { ProjectPanel } from './ProjectPanel';
import { ProjectModelPanel } from './ProjectModelPanel';
export function Dashboard() { export function Dashboard() {
return ( return (
<div className="container is-fluid">
<div className="columns"> <div className="columns">
<div className="column is-4"> <div className="column is-4">
<EstimationPanel /> <ProjectPanel />
</div> </div>
<div className="column is-4"> <div className="column is-4">
<ProjectModelPanel />
</div> </div>
<div className="column is-4"> <div className="column is-4">
</div> </div>
</div> </div>
</div>
); );
} }

View File

@ -1,12 +1,17 @@
import React from 'react'; import React from 'react';
import { Page } from '../Page'; import { Page } from '../Page';
import { Dashboard } from './Dashboard'; import { Dashboard } from './Dashboard';
import { useUserProfile } from '../../gql/queries/user';
export function DashboardPage() { export function DashboardPage() {
const { user } = useUserProfile();
return ( return (
<Page title="Tableau de bord"> <Page title="Tableau de bord">
<section className="mt-5"> <section className="mt-5">
<div className="container is-fluid">
<h2 className="subtitle is-size-3">Bonjour <span>{user.name !== '' ? user.name : ' utilisateur mystère'}</span> ! Sur quel projet souhaitez vous travailler aujourd'hui ?</h2>
<Dashboard /> <Dashboard />
</div>
</section> </section>
</Page> </Page>
); );

View File

@ -0,0 +1,20 @@
import React, { FunctionComponent } from "react";
import { ItemPanel } from "./ItemPanel";
export interface ProjectModelPanelProps {
}
export const ProjectModelPanel: FunctionComponent<ProjectModelPanelProps> = () => {
return (
<ItemPanel
title="Mes modèles de projet"
className="is-info"
newItemUrl="/models/new"
items={[]}
itemKey={(item) => { return item.id }}
itemLabel={(item) => { return item.id }}
itemUrl={(item) => { return `/models/${item.id}` }}
/>
);
};

View File

@ -1,20 +1,20 @@
import React, { FunctionComponent } from "react"; import React, { FunctionComponent } from "react";
import { ItemPanel } from "./ItemPanel"; import { ItemPanel } from "./ItemPanel";
export interface EstimationPanelProps { export interface ProjectPanelProps {
} }
export const EstimationPanel: FunctionComponent<EstimationPanelProps> = () => { export const ProjectPanel: FunctionComponent<ProjectPanelProps> = () => {
return ( return (
<ItemPanel <ItemPanel
title="Mes estimations" title="Mes projets"
className="is-primary" className="is-primary"
newItemUrl="/estimations/new" newItemUrl="/projects/new"
items={[]} items={[]}
itemKey={(item) => { return item.id }} itemKey={(item) => { return item.id }}
itemLabel={(item) => { return item.id }} itemLabel={(item) => { return item.id }}
itemUrl={(item) => { return `/estimations/${item.id}` }} itemUrl={(item) => { return `/projects/${item.id}` }}
/> />
); );
}; };

View File

@ -0,0 +1,63 @@
import React, {
FunctionComponent, Fragment,
ReactNode, ChangeEvent,
useState, useEffect
} from "react";
import * as style from "./style.module.css";
export interface EditableTextProps {
value: string
class?: string
editIconClass?: string
onChange?: (value: string) => void
render?: (value: string) => ReactNode
}
const EditableText: FunctionComponent<EditableTextProps> = ({ onChange, value, render, ...props }) => {
const [ internalValue, setInternalValue ] = useState(value);
const [ editMode, setEditMode ] = useState(false);
useEffect(() => {
if (internalValue === value) return;
if (onChange) onChange(internalValue);
}, [internalValue]);
useEffect(() => {
setInternalValue(value);
}, [value])
const onEditIconClick = () => {
setEditMode(true);
};
const onValidateButtonClick = () => {
setEditMode(false);
}
const onValueChange = (evt: ChangeEvent) => {
const currentTarget = evt.currentTarget as HTMLInputElement;
setInternalValue(currentTarget.value);
};
return (
<div className={`${style.editableText} ${props.class ? props.class : ''}`}>
{
editMode ?
<div className="field has-addons">
<div className="control">
<input className="input is-expanded" type="text" value={internalValue} onChange={onValueChange} />
</div>
<div className="control">
<a className="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>
</Fragment>
}
</div>
);
};
export default EditableText;

View File

@ -0,0 +1,17 @@
.editableText {
display: inline-block;
}
.editableText > * {
display: inline-block;
}
.editIcon {
visibility: hidden;
margin-left: 0.25em;
cursor: pointer;
}
.editableText:hover > .editIcon {
visibility: visible;
}

View File

@ -0,0 +1,13 @@
declare namespace StyleModuleCssNamespace {
export interface IStyleModuleCss {
editIcon: string;
editableText: 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;

View File

@ -0,0 +1,35 @@
import ProjectTimeUnit from "./ProjectTimeUnit";
import { getRoundUpEstimations } from "../types/params";
import { Project } from "../types/project";
import React, { Fragment,FunctionComponent } from "react";
import { Estimation } from "../hooks/useProjectEstimations";
export interface EstimationRangeProps {
project: Project,
estimation: Estimation
}
export const EstimationRange: FunctionComponent<EstimationRangeProps> = ({ project, estimation }) => {
const roundUp = getRoundUpEstimations(project);
let e: number|string = estimation.e;
let sd: number|string = estimation.sd;
let max = e+sd;
let min = Math.max(e-sd, 0);
if (roundUp) {
sd = Math.ceil(sd);
e = Math.ceil(e);
max = Math.ceil(max);
min = Math.ceil(min);
} else {
sd = sd.toFixed(2);
e = e.toFixed(2);
}
return (
<Fragment>
<abbr title={`max: ${max.toFixed(2)}, min: ${min.toFixed(2)}`}>{`${e} ± ${sd}`}</abbr>&nbsp;<ProjectTimeUnit project={project} />
</Fragment>
);
}
export default EstimationRange;

View File

@ -20,7 +20,7 @@ export function Navbar() {
<Link className="navbar-item" to={loggedIn ? '/dashboard' : '/'}> <Link className="navbar-item" to={loggedIn ? '/dashboard' : '/'}>
<h1 className="is-size-4"> <h1 className="is-size-4">
<i className="fa fa-stopwatch mr-1"></i> <i className="fa fa-stopwatch mr-1"></i>
Guesstimate <span className="has-text-dark">Guessti</span><span className="has-text-grey">Mate</span>
</h1> </h1>
</Link> </Link>
<a role="button" <a role="button"

View File

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

View File

@ -0,0 +1,18 @@
import React, { FunctionComponent } from "react";
import { Project } from "../../types/project";
export interface ExportTabProps {
project: Project
}
const ExportTab: FunctionComponent<ExportTabProps> = ({ project }) => {
return (
<div>
<label className="label is-size-4">Format JSON</label>
<pre>{ JSON.stringify(project, null, 2) }</pre>
<hr />
</div>
);
};
export default ExportTab;

View File

@ -0,0 +1,84 @@
import React, { FunctionComponent } from "react";
import { Project, getMinMaxCosts, Cost } from "../../types/project";
import { useProjectEstimations } from "../../hooks/useProjectEstimations";
import { getCurrency, defaults, getTaskCategoryCost, getRoundUpEstimations } from "../../types/params";
import * as style from './style.module.css';
import ProjectTimeUnit from "../ProjectTimeUnit";
export interface FinancialPreviewProps {
project: Project
}
const FinancialPreview: FunctionComponent<FinancialPreviewProps> = ({ project }) => {
const estimations = useProjectEstimations(project);
const costs = getMinMaxCosts(project, estimations.p99);
const roundUp = getRoundUpEstimations(project);
return (
<div className="table-container">
<table className="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 &gt;= 99.7%</span>
</th>
</tr>
<tr>
<th className="is-narrow">Temps</th>
<th>Coût</th>
</tr>
</thead>
<tbody>
<tr>
<td className="is-narrow">Maximum</td>
<td>
<CostDetails project={project} cost={costs.max} roundUp={roundUp} />
</td>
</tr>
<tr>
<td className="is-narrow">Minimum</td>
<td>
<CostDetails project={project} cost={costs.min} roundUp={roundUp} />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export interface CostDetailsProps {
project: Project
cost: Cost
roundUp: boolean
}
export const CostDetails:FunctionComponent<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>
</summary>
<table className={`table is-fullwidth`}>
<tbody>
{
Object.keys(cost.details).map(taskCategoryId => {
const taskCategory = project.params.taskCategories[taskCategoryId];
const details = cost.details[taskCategoryId];
return (
<tr key={`task-category-cost-${taskCategory.id}`}>
<td className={`${style.noBorder} is-size-6`}>{taskCategory.label}</td>
<td className={`${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>
</tr>
)
})
}
</tbody>
</table>
</details>
);
};
export default FinancialPreview;

View File

@ -0,0 +1,123 @@
import React, { FunctionComponent, Fragment, useState, ChangeEvent, MouseEvent } from "react";
import { Project } from "../../types/project";
import { ProjectReducerActions, updateParam } from "../../hooks/useProjectReducer";
import { getRoundUpEstimations, getCurrency, getTimeUnit, getHideFinancialPreviewOnPrint } from "../../types/params";
import TaskCategoriesTable from "./TaskCategorieTable";
import { useHistory } from "react-router";
export interface ParamsTabProps {
project: Project
dispatch: (action: ProjectReducerActions) => void
}
const ParamsTab: FunctionComponent<ParamsTabProps> = ({ project, dispatch }) => {
const [ deleteButtonEnabled, setDeleteButtonEnabled ] = useState(false);
const history = useHistory();
const onEnableDeleteButtonChange = (evt: ChangeEvent) => {
const checked = (evt.currentTarget as HTMLInputElement).checked;
setDeleteButtonEnabled(checked);
}
const onRoundUpChange = (evt: ChangeEvent) => {
const checked = (evt.currentTarget as HTMLInputElement).checked;
dispatch(updateParam("roundUpEstimations", checked));
};
const onHideFinancialPreview = (evt: ChangeEvent) => {
const checked = (evt.currentTarget as HTMLInputElement).checked;
dispatch(updateParam("hideFinancialPreviewOnPrint", checked));
};
const onCurrencyChange = (evt: ChangeEvent) => {
const value = (evt.currentTarget as HTMLInputElement).value;
dispatch(updateParam("currency", value));
};
const timeUnit = getTimeUnit(project);
const onTimeUnitLabelChange = (evt: ChangeEvent) => {
const value = (evt.currentTarget as HTMLInputElement).value;
dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
};
const onTimeUnitAcronymChange = (evt: ChangeEvent) => {
const value = (evt.currentTarget as HTMLInputElement).value;
dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
};
const onDeleteProjectClick = (evt: MouseEvent) => {
// TODO
};
return (
<Fragment>
<label className="label is-size-5">Impression</label>
<div className="field">
<input type="checkbox"
id="hideFinancialPreview"
name="hideFinancialPreview"
className="switch"
onChange={onHideFinancialPreview}
checked={getHideFinancialPreviewOnPrint(project)} />
<label htmlFor="hideFinancialPreview">Cacher le prévisionnel financier lors de l'impression</label>
</div>
<hr />
<div className="field">
<label className="label is-size-5">Unité de temps</label>
<div className="control">
<input className="input" type="text"
onChange={onTimeUnitLabelChange}
value={timeUnit.label} />
</div>
<label className="label is-size-6">Acronyme</label>
<div className="control">
<input className="input" type="text"
onChange={onTimeUnitAcronymChange}
value={timeUnit.acronym} />
</div>
</div>
<div className="field">
<input type="checkbox"
id="roundUpEstimations"
name="roundUpEstimations"
className="switch"
onChange={onRoundUpChange}
checked={getRoundUpEstimations(project)} />
<label htmlFor="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
</div>
<hr />
<div className="field">
<label className="label is-size-5">Devise</label>
<div className="control">
<input className="input" type="text"
onChange={onCurrencyChange}
value={getCurrency(project)} />
</div>
</div>
<hr />
<TaskCategoriesTable project={project} dispatch={dispatch} />
<hr />
<div>
<label className="label is-size-5">Supprimer le projet</label>
<div className="field">
<input type="checkbox"
id="enableDeleteButton"
name="enableDeleteButton"
className="switch is-warning"
onChange={onEnableDeleteButtonChange}
checked={deleteButtonEnabled} />
<label htmlFor="enableDeleteButton">Supprimer ce projet ?</label>
</div>
<button className="button is-danger"
onClick={onDeleteProjectClick}
disabled={!deleteButtonEnabled}>
🗑 Supprimer
</button>
</div>
<hr />
</Fragment>
);
};
export default ParamsTab;

View File

@ -0,0 +1,60 @@
import React, { FunctionComponent, useEffect } from "react";
import style from "./style.module.css";
import { newProject, Project } from "../../types/project";
import { useProjectReducer, updateProjectLabel } from "../../hooks/useProjectReducer";
import EditableText from "../EditableText/EditableText";
import Tabs from "../../components/Tabs/Tabs";
import EstimationTab from "./EstimationTab";
import ParamsTab from "./ParamsTab";
import ExportTab from "./ExportTab";
import { useParams } from "react-router";
import { Page } from "../Page";
export interface ProjectProps {
projectId: string
}
export const ProjectPage: FunctionComponent<ProjectProps> = () => {
const { id } = useParams();
const [ project, dispatch ] = useProjectReducer(newProject());
const onProjectLabelChange = (projectLabel: string) => {
dispatch(updateProjectLabel(projectLabel));
};
return (
<Page title="Projet">
<div className="container is-fluid">
<div className="columns">
<div className="column mt-3 is-10">
<EditableText
editIconClass="is-size-4"
render={(value) => (<h2 className="is-size-3">{value}</h2>)}
onChange={onProjectLabelChange}
value={project.label ? project.label : "Projet sans nom"}
/>
<div className={`box mt-3 ${style.tabContainer}`}>
<Tabs items={[
{
label: 'Estimation',
icon: 'fa fa-clipboard',
render: () => <EstimationTab project={project} dispatch={dispatch} />
},
{
label: 'Options avancées',
icon: 'fa fa-sliders-h',
render: () => <ParamsTab project={project} dispatch={dispatch} />
},
{
label: 'Exporter',
icon: 'fa fa-file-export',
render: () => <ExportTab project={project} />
}
]} />
</div>
</div>
</div>
</div>
</Page>
);
};

View File

@ -0,0 +1,40 @@
import React, { FunctionComponent } from "react";
import { Project, getTaskCategoriesMeanRepartition } from "../../types/project";
export interface RepartitionPreviewProps {
project: Project
}
const RepartitionPreview: FunctionComponent<RepartitionPreviewProps> = ({ project }) => {
const repartition = getTaskCategoriesMeanRepartition(project);
return (
<div className="table-container">
<table className="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th colSpan={2}>Répartition moyenne</th>
</tr>
<tr>
<th>Catégorie</th>
<th>Temps (en %)</th>
</tr>
</thead>
<tbody>
{
Object.values(project.params.taskCategories).map(tc => {
let percent = (repartition[tc.id] * 100).toFixed(0);
return (
<tr key={`task-category-${tc.id}`}>
<td>{tc.label}</td>
<td>{percent} %</td>
</tr>
);
})
}
</tbody>
</table>
</div>
);
};
export default RepartitionPreview;

View File

@ -0,0 +1,112 @@
import React, { FunctionComponent, useState, MouseEvent, ChangeEvent } from "react";
import { Project } from "../../types/project";
import style from './style.module.css';
import { ProjectReducerActions, updateTaskCategoryCost, updateTaskCategoryLabel, removeTaskCategory, addTaskCategory } from "../../hooks/useProjectReducer";
import EditableText from "../EditableText/EditableText";
import { TaskCategoryID, createTaskCategory } from "../../types/task";
import { getCurrency, getTaskCategoryCost } from "../../types/params";
export interface TaskCategoriesTableProps {
project: Project
dispatch: (action: ProjectReducerActions) => void
}
const TaskCategoriesTable: FunctionComponent<TaskCategoriesTableProps> = ({ project, dispatch }) => {
const [ newTaskCategory, setNewTaskCategory ] = useState(createTaskCategory());
const onTaskCategoryRemove = (categoryId: TaskCategoryID) => {
dispatch(removeTaskCategory(categoryId));
};
const onTaskCategoryLabelChange = (categoryId: TaskCategoryID, value: string) => {
dispatch(updateTaskCategoryLabel(categoryId, value));
};
const onTaskCategoryCostChange = (categoryId: TaskCategoryID, value: string) => {
const cost = parseFloat(value);
dispatch(updateTaskCategoryCost(categoryId, cost));
};
const onNewTaskCategoryCostChange = (evt: ChangeEvent) => {
const costPerTimeUnit = parseFloat((evt.currentTarget as HTMLInputElement).value);
setNewTaskCategory(newTaskCategory => ({ ...newTaskCategory, costPerTimeUnit }));
};
const onNewTaskCategoryLabelChange = (evt: ChangeEvent) => {
const label = (evt.currentTarget as HTMLInputElement).value;
setNewTaskCategory(newTaskCategory => ({ ...newTaskCategory, label }));
};
const onNewTaskCategoryAddClick = (evt: MouseEvent) => {
dispatch(addTaskCategory(newTaskCategory));
setNewTaskCategory(createTaskCategory());
};
return (
<div className="table-container">
<label className="label is-size-5">Catégories de tâche</label>
<table className={`table is-bordered is-striped" ${style.middleTable}`}>
<thead>
<tr>
<th className={`${style.noBorder} is-narrow`}></th>
<th>Catégorie</th>
<th>Coût par unité de temps</th>
</tr>
</thead>
<tbody>
{
Object.values(project.params.taskCategories).map(tc => {
return (
<tr key={`task-category-${tc.id}`}>
<td>
<button
onClick={onTaskCategoryRemove.bind(null, tc.id)}
className="button is-danger is-small is-outlined">
🗑
</button>
</td>
<td>
<EditableText value={tc.label}
onChange={onTaskCategoryLabelChange.bind(null, tc.id)} />
</td>
<td>
<EditableText value={`${getTaskCategoryCost(tc)}`}
render={value=> (<span>{value} {getCurrency(project)}</span>)}
onChange={onTaskCategoryCostChange.bind(null, tc.id)} />
</td>
</tr>
);
})
}
</tbody>
<tfoot>
<tr>
<td className={`${style.noBorder}`}></td>
<td colSpan={2}>
<div className="field has-addons">
<p className="control is-expanded">
<input className="input" type="text" placeholder="Nouvelle catégorie"
value={newTaskCategory.label} onChange={onNewTaskCategoryLabelChange} />
</p>
<p className="control">
<input className="input" type="number"
value={newTaskCategory.costPerTimeUnit} onChange={onNewTaskCategoryCostChange} />
</p>
<p className="control">
<a className="button is-static">{getCurrency(project)}</a>
</p>
<p className="control">
<a className="button is-primary" onClick={onNewTaskCategoryAddClick}>
Ajouter
</a>
</p>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
);
};
export default TaskCategoriesTable;

View File

@ -0,0 +1,198 @@
import React, { FunctionComponent, useState, useEffect, ChangeEvent, MouseEvent } from "react";
import style from "./style.module.css";
import { Project } from "../../types/project";
import { newTask, Task, TaskID, EstimationConfidence } from "../../types/task";
import EditableText from "../EditableText/EditableText";
import { usePrintMediaQuery } from "../../hooks/useMediaQuery";
import ProjectTimeUnit from "../ProjectTimeUnit";
export interface TaskTableProps {
project: Project
onTaskAdd: (task: Task) => void
onTaskRemove: (taskId: TaskID) => void
onEstimationChange: (taskId: TaskID, confidence: EstimationConfidence, value: number) => void
onTaskLabelUpdate: (taskId: TaskID, label: string) => void
}
export type EstimationTotals = { [confidence in EstimationConfidence]: number }
const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate }) => {
const defaultTaskCategory = Object.keys(project.params.taskCategories)[0];
const [ task, setTask ] = useState(newTask("", defaultTaskCategory));
const [ totals, setTotals ] = useState({
[EstimationConfidence.Optimistic]: 0,
[EstimationConfidence.Likely]: 0,
[EstimationConfidence.Pessimistic]: 0,
} as EstimationTotals);
const isPrint = usePrintMediaQuery();
useEffect(() => {
let optimistic = 0;
let likely = 0;
let pessimistic = 0;
Object.values(project.tasks).forEach(t => {
optimistic += t.estimations.optimistic;
likely += t.estimations.likely;
pessimistic += t.estimations.pessimistic;
});
setTotals({ optimistic, likely, pessimistic });
}, [project.tasks]);
const onNewTaskLabelChange = (evt: ChangeEvent) => {
const value = (evt.currentTarget as HTMLInputElement).value;
setTask({...task, label: value});
};
const onNewTaskCategoryChange = (evt: ChangeEvent) => {
const value = (evt.currentTarget as HTMLInputElement).value;
setTask({...task, category: value});
};
const onTaskLabelChange = (taskId: TaskID, value: string) => {
onTaskLabelUpdate(taskId, value);
};
const onAddTaskClick = (evt: MouseEvent) => {
onTaskAdd(task);
setTask(newTask("", defaultTaskCategory));
};
const onTaskRemoveClick = (taskId: TaskID, evt: MouseEvent) => {
onTaskRemove(taskId);
};
const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: ChangeEvent) => {
const textValue = (evt.currentTarget as HTMLInputElement).value;
const value = parseFloat(textValue);
onEstimationChange(taskID, confidence, value);
};
const onOptimisticChange = withEstimationChange.bind(null, EstimationConfidence.Optimistic);
const onLikelyChange = withEstimationChange.bind(null, EstimationConfidence.Likely);
const onPessimisticChange = withEstimationChange.bind(null, EstimationConfidence.Pessimistic);
return (
<div className="table-container">
<table className={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
<thead>
<tr>
<th className={`${style.noBorder} noPrint`} rowSpan={2}></th>
<th className={style.mainColumn} rowSpan={2}>Tâche</th>
<th rowSpan={2}>Catégorie</th>
<th colSpan={3}>Estimation (en <ProjectTimeUnit project={project} />)</th>
</tr>
<tr>
<th>Optimiste</th>
<th>Probable</th>
<th>Pessimiste</th>
</tr>
</thead>
<tbody>
{
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`}>
<button
onClick={onTaskRemoveClick.bind(null, t.id)}
className="button is-danger is-small is-outlined">
🗑
</button>
</td>
<td className={style.mainColumn}>
<EditableText
render={(value) => (<span>{value}</span>)}
onChange={onTaskLabelChange.bind(null, t.id)}
value={t.label} />
</td>
<td>{ categoryLabel }</td>
<td>
{
isPrint ?
<span>{t.estimations.optimistic}</span> :
<input className="input" type="number" value={t.estimations.optimistic}
min={0}
onChange={onOptimisticChange.bind(null, t.id)} />
}
</td>
<td>
{
isPrint ?
<span>{t.estimations.likely}</span> :
<input className="input" type="number" value={t.estimations.likely}
min={0}
onChange={onLikelyChange.bind(null, t.id)} />
}
</td>
<td>
{
isPrint ?
<span>{t.estimations.pessimistic}</span> :
<input className="input" type="number" value={t.estimations.pessimistic}
min={0}
onChange={onPessimisticChange.bind(null, t.id)} />
}
</td>
</tr>
)
})
}
{
Object.keys(project.tasks).length === 0 ?
<tr>
<td className={`${style.noBorder} noPrint`}></td>
<td className={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
</tr> :
null
}
</tbody>
<tfoot>
<tr>
<td className={`${style.noBorder} noPrint`}></td>
<td colSpan={2} className={isPrint ? style.noBorder : ''}>
<div className="field has-addons noPrint">
<p className="control is-expanded">
<input className="input" type="text" placeholder="Nouvelle tâche"
value={task.label} onChange={onNewTaskLabelChange} />
</p>
<p className="control">
<span className="select">
<select onChange={onNewTaskCategoryChange} value={task.category}>
{
Object.values(project.params.taskCategories).map(tc => {
return (
<option key={`task-category-${tc.id}`} value={tc.id}>{tc.label}</option>
);
})
}
</select>
</span>
</p>
<p className="control">
<a className="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>{totals.optimistic} <ProjectTimeUnit project={project} /></td>
<td>{totals.likely} <ProjectTimeUnit project={project} /></td>
<td>{totals.pessimistic} <ProjectTimeUnit project={project} /></td>
</tr>
</tfoot>
</table>
</div>
);
};
export default TaskTable;

View File

@ -0,0 +1,48 @@
import React, { FunctionComponent } from "react";
import { Project } from "../../types/project";
import { useProjectEstimations } from "../../hooks/useProjectEstimations";
import EstimationRange from "../EstimationRange";
export interface TimePreviewProps {
project: Project
}
export const TimePreview: FunctionComponent<TimePreviewProps> = ({ project }) => {
const estimations = useProjectEstimations(project);
return (
<div className="table-container">
<table className="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>Estimation</th>
</tr>
</thead>
<tbody>
<tr>
<td className="is-narrow">&gt;= 99.7%</td>
<td><EstimationRange project={project} estimation={estimations.p99} /></td>
</tr>
<tr>
<td className="is-narrow">&gt;= 90%</td>
<td><EstimationRange project={project} estimation={estimations.p90} /></td>
</tr>
<tr>
<td className="is-narrow">&gt;= 68%</td>
<td><EstimationRange project={project} estimation={estimations.p68} /></td>
</tr>
</tbody>
<tfoot className="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>
</td>
</tr>
</tfoot>
</table>
</div>
);
};

View File

@ -0,0 +1,24 @@
.estimation {
height: 100%;
}
.noTasks {
text-align: center !important;
font-style: italic;
}
.noBorder {
border: none !important;
}
.mainColumn {
width: 100%;
}
.middleTable td {
vertical-align: middle !important;
}
.tabContainer {
padding-top: 1em;
}

View File

@ -0,0 +1,17 @@
declare namespace StyleModuleCssNamespace {
export interface IStyleModuleCss {
estimation: string;
mainColumn: string;
middleTable: string;
noBorder: string;
noTasks: string;
tabContainer: 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;

View File

@ -0,0 +1,16 @@
import React, { FunctionComponent } from "react";
import { Project } from "../types/project";
import { getTimeUnit } from "../types/params";
export interface ProjectTimeUnitProps {
project: Project
}
const ProjectTimeUnit: FunctionComponent<ProjectTimeUnitProps> = ({ project }) => {
const timeUnit = getTimeUnit(project);
return (
<abbr title={timeUnit.label}>{timeUnit.acronym}</abbr>
);
};
export default ProjectTimeUnit;

View File

@ -0,0 +1,49 @@
import React, { FunctionComponent, useState, ReactNode } from "react";
import style from "./style.module.css";
export interface TabItem {
label: string
icon?: string
render: () => ReactNode
}
export interface TabsProps {
class?: string
items: TabItem[]
}
const Tabs: FunctionComponent<TabsProps> = ({ items, ...props }) => {
const [ selectedTabIndex, setSelectedTabIndex ] = useState(0);
const onTabClick = (tabIndex: number) => {
setSelectedTabIndex(tabIndex);
};
const selectedTab = items[selectedTabIndex];
return (
<div className={`${style.tabs} ${props.class}`}>
<div className="tabs is-boxed">
<ul className={`noPrint`}>
{
items.map((tabItem, tabIndex) => (
<li key={`tab-${tabIndex}`}
onClick={onTabClick.bind(null, tabIndex)}
className={`${selectedTabIndex === tabIndex ? 'is-active' : ''}`}>
<a>
<span className={`icon is-small`}><i className={`${tabItem.icon}`}></i></span>
<span>{tabItem.label}</span>
</a>
</li>
))
}
</ul>
</div>
<div className={style.tabContent}>
{ selectedTab.render() }
</div>
</div>
);
};
export default Tabs;

View File

@ -0,0 +1,8 @@
.tabs {
display: inherit;
}
.tabContent {
padding-top: 1em;
max-width: 100%;
}

View File

@ -0,0 +1,13 @@
declare namespace StyleModuleCssNamespace {
export interface IStyleModuleCss {
tabContent: string;
tabs: 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;

View File

@ -0,0 +1,41 @@
import { useEffect, useState } from "react";
export function useMediaQuery(query: string): boolean {
const media = window.matchMedia(query);
const [ matches, setMatches ] = useState(media.matches);
useEffect(() => {
const listener = (evt: MediaQueryListEvent) => {
setMatches(evt.matches);
};
media.addListener(listener);
return () => {media.removeListener(listener)}
}, []);
return matches;
}
export function usePrintMediaQuery(): boolean {
const isMediaQueryPrint = useMediaQuery("print");
const [ isPrint, setIsPrint ] = useState(false);
// Firefox/IE compatibility layer
useEffect(() => {
const beforePrint = () => {
setIsPrint(true);
};
const afterPrint = () => {
setIsPrint(false);
};
window.addEventListener('beforeprint', beforePrint);
window.addEventListener('afterprint', afterPrint);
return () => {
window.removeEventListener('beforeprint', beforePrint);
window.removeEventListener('afterprint', afterPrint);
};
}, []);
return isMediaQueryPrint || isPrint;
}

View File

@ -0,0 +1,34 @@
import { Project, getProjectWeightedMean, getProjectStandardDeviation } from "../types/project";
import { useState, useEffect } from "react";
export interface Estimation {
e: number
sd: number
}
export interface ProjetEstimations {
p99: Estimation
p90: Estimation
p68: Estimation
}
export function useProjectEstimations(p :Project): ProjetEstimations {
const [ estimations, setEstimations ] = useState({
p99: { e: 0, sd: 0 },
p90: { e: 0, sd: 0 },
p68: { e: 0, sd: 0 },
});
useEffect(() => {
const projectWeightedMean = getProjectWeightedMean(p)
const projectStandardDeviation = getProjectStandardDeviation(p);
setEstimations({
p99: { e: projectWeightedMean, sd: (projectStandardDeviation * 3) },
p90: { e: projectWeightedMean, sd: (projectStandardDeviation * 1.645) },
p68: { e: projectWeightedMean, sd: (projectStandardDeviation) },
})
}, [p.tasks]);
return estimations;
}

View File

@ -0,0 +1,302 @@
import { Project } from "../types/project";
import { Task, TaskID, EstimationConfidence, TaskCategoryID, TaskCategory } from "../types/task";
import { useReducer } from "react";
export interface Action {
type: string
}
export type ProjectReducerActions =
AddTask |
RemoveTask |
UpdateTaskEstimation |
UpdateProjectLabel |
UpdateTaskLabel |
UpdateParam |
UpdateTaskCategoryLabel |
UpdateTaskCategoryCost |
AddTaskCategory |
RemoveTaskCategory
export function useProjectReducer(project: Project) {
return useReducer(projectReducer, project);
}
export function projectReducer(project: Project, action: ProjectReducerActions): Project {
console.log(action);
switch(action.type) {
case ADD_TASK:
return handleAddTask(project, action as AddTask);
case REMOVE_TASK:
return handleRemoveTask(project, action as RemoveTask);
case UPDATE_TASK_ESTIMATION:
return handleUpdateTaskEstimation(project, action as UpdateTaskEstimation);
case UPDATE_PROJECT_LABEL:
return handleUpdateProjectLabel(project, action as UpdateProjectLabel);
case UPDATE_TASK_LABEL:
return handleUpdateTaskLabel(project, action as UpdateTaskLabel);
case UPDATE_PARAM:
return handleUpdateParam(project, action as UpdateParam);
case ADD_TASK_CATEGORY:
return handleAddTaskCategory(project, action as AddTaskCategory);
case REMOVE_TASK_CATEGORY:
return handleRemoveTaskCategory(project, action as RemoveTaskCategory);
case UPDATE_TASK_CATEGORY_LABEL:
return handleUpdateTaskCategoryLabel(project, action as UpdateTaskCategoryLabel);
case UPDATE_TASK_CATEGORY_COST:
return handleUpdateTaskCategoryCost(project, action as UpdateTaskCategoryCost);
}
return project;
}
export interface AddTask extends Action {
task: Task
}
export const ADD_TASK = "ADD_TASK";
export function addTask(task: Task): AddTask {
return { type: ADD_TASK, task };
}
export function handleAddTask(project: Project, action: AddTask): Project {
const task = { ...action.task };
return {
...project,
tasks: {
...project.tasks,
[task.id]: task,
}
};
}
export interface RemoveTask extends Action {
id: TaskID
}
export const REMOVE_TASK = "REMOVE_TASK";
export function removeTask(id: TaskID): RemoveTask {
return { type: REMOVE_TASK, id };
}
export function handleRemoveTask(project: Project, action: RemoveTask): Project {
const tasks = { ...project.tasks };
delete tasks[action.id];
return {
...project,
tasks
};
}
export interface UpdateTaskEstimation extends Action {
id: TaskID
confidence: string
value: number
}
export const UPDATE_TASK_ESTIMATION = "UPDATE_TASK_ESTIMATION";
export function updateTaskEstimation(id: TaskID, confidence: EstimationConfidence, value: number): UpdateTaskEstimation {
return { type: UPDATE_TASK_ESTIMATION, id, confidence, value };
}
export function handleUpdateTaskEstimation(project: Project, action: UpdateTaskEstimation): Project {
const estimations = {
...project.tasks[action.id].estimations,
[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: {
...project.tasks,
[action.id]: {
...project.tasks[action.id],
estimations: estimations,
}
}
};
}
export interface UpdateProjectLabel extends Action {
label: string
}
export const UPDATE_PROJECT_LABEL = "UPDATE_PROJECT_LABEL";
export function updateProjectLabel(label: string): UpdateProjectLabel {
return { type: UPDATE_PROJECT_LABEL, label };
}
export function handleUpdateProjectLabel(project: Project, action: UpdateProjectLabel): Project {
return {
...project,
label: action.label
};
}
export interface UpdateTaskLabel extends Action {
id: TaskID
label: string
}
export const UPDATE_TASK_LABEL = "UPDATE_TASK_LABEL";
export function updateTaskLabel(id: TaskID, label: string): UpdateTaskLabel {
return { type: UPDATE_TASK_LABEL, id, label };
}
export function handleUpdateTaskLabel(project: Project, action: UpdateTaskLabel): Project {
return {
...project,
tasks: {
...project.tasks,
[action.id]: {
...project.tasks[action.id],
label: action.label,
}
}
};
}
export interface UpdateParam extends Action {
name: string
value: any
}
export const UPDATE_PARAM = "UPDATE_PARAM";
export function updateParam(name: string, value: any): UpdateParam {
return { type: UPDATE_PARAM, name, value };
}
export function handleUpdateParam(project: Project, action: UpdateParam): Project {
return {
...project,
params: {
...project.params,
[action.name]: action.value,
}
};
}
export interface UpdateTaskCategoryLabel extends Action {
categoryId: TaskCategoryID
label: string
}
export const UPDATE_TASK_CATEGORY_LABEL = "UPDATE_TASK_CATEGORY_LABEL";
export function updateTaskCategoryLabel(categoryId: TaskCategoryID, label: string): UpdateTaskCategoryLabel {
return { type: UPDATE_TASK_CATEGORY_LABEL, categoryId, label };
}
export function handleUpdateTaskCategoryLabel(project: Project, action: UpdateTaskCategoryLabel): Project {
return {
...project,
params: {
...project.params,
taskCategories: {
...project.params.taskCategories,
[action.categoryId]: {
...project.params.taskCategories[action.categoryId],
label: action.label
},
}
}
};
}
export interface UpdateTaskCategoryCost extends Action {
categoryId: TaskCategoryID
costPerTimeUnit: number
}
export const UPDATE_TASK_CATEGORY_COST = "UPDATE_TASK_CATEGORY_COST";
export function updateTaskCategoryCost(categoryId: TaskCategoryID, costPerTimeUnit: number): UpdateTaskCategoryCost {
return { type: UPDATE_TASK_CATEGORY_COST, categoryId, costPerTimeUnit };
}
export function handleUpdateTaskCategoryCost(project: Project, action: UpdateTaskCategoryCost): Project {
return {
...project,
params: {
...project.params,
taskCategories: {
...project.params.taskCategories,
[action.categoryId]: {
...project.params.taskCategories[action.categoryId],
costPerTimeUnit: action.costPerTimeUnit
},
}
}
};
}
export const ADD_TASK_CATEGORY = "ADD_TASK_CATEGORY";
export interface AddTaskCategory extends Action {
taskCategory: TaskCategory
}
export function addTaskCategory(taskCategory: TaskCategory): AddTaskCategory {
return { type: ADD_TASK_CATEGORY, taskCategory };
}
export function handleAddTaskCategory(project: Project, action: AddTaskCategory): Project {
const taskCategory = { ...action.taskCategory };
return {
...project,
params: {
...project.params,
taskCategories: {
...project.params.taskCategories,
[taskCategory.id]: taskCategory,
}
}
};
}
export interface RemoveTaskCategory extends Action {
taskCategoryId: TaskCategoryID
}
export const REMOVE_TASK_CATEGORY = "REMOVE_TASK_CATEGORY";
export function removeTaskCategory(taskCategoryId: TaskCategoryID): RemoveTaskCategory {
return { type: REMOVE_TASK_CATEGORY, taskCategoryId };
}
export function handleRemoveTaskCategory(project: Project, action: RemoveTaskCategory): Project {
const taskCategories = { ...project.params.taskCategories };
delete taskCategories[action.taskCategoryId];
return {
...project,
params: {
...project.params,
taskCategories
}
};
}

View File

@ -1,14 +1,18 @@
import './sass/_all.scss';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { App } from './components/App'; import { App } from './components/App';
import { client } from './gql/client'; import { client } from './gql/client';
import "./style/index.css";
import "bulma/css/bulma.css";
import "bulma-switch/dist/css/bulma-switch.min.css";
import '@fortawesome/fontawesome-free/js/fontawesome' import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid' import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular' import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands' import '@fortawesome/fontawesome-free/js/brands'
import './resources/favicon.png'; import './resources/favicon.png';
import { ApolloProvider } from '@apollo/client'; import { ApolloProvider } from '@apollo/client';
ReactDOM.render( ReactDOM.render(

View File

@ -1,3 +0,0 @@
@import 'bulma/bulma.sass';
@import '_base.scss';
@import '_loader.scss';

View File

@ -1,44 +0,0 @@
.loader-container {
display: flex;
width: 100%;
justify-content: center;
height: 100%;
align-items: center;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
transform: scale(2);
}
.lds-ripple div {
position: absolute;
border: 4px solid $grey;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}

View File

@ -1,7 +1,18 @@
#app {
display: inherit;
}
@media print
{
.noPrint, .noPrint * {
display: none !important;
}
}
html, body { html, body {
height: 100%; height: 100%;
background-color: #ffffff; background-color: #ffffff;
// Generated with https://www.svgbackgrounds.com/ /* Generated with https://www.svgbackgrounds.com/ */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='351' height='292.5' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='351' height='292.5' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
} }
@ -9,10 +20,6 @@ html, body {
height: 100%; height: 100%;
} }
.has-margin-top-normal {
margin-top: $size-normal;
}
.has-padding-small { .has-padding-small {
padding: 1rem; padding: 1rem;
} }

13
client/src/style/index.css.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
declare namespace IndexCssModule {
export interface IIndexCss {
app: string;
noPrint: string;
}
}
declare const IndexCssModule: IndexCssModule.IIndexCss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: IndexCssModule.IIndexCss;
};
export = IndexCssModule;

View File

@ -1,35 +0,0 @@
import { Workgroup } from "./workgroup";
export enum DecisionSupportFileStatus {
Draft = "draft",
Ready = "ready",
Voted = "voted",
Closed = "closed",
}
export interface DecisionSupportFileSection {
name: string
}
// aka Dossier d'aide à la décision
export interface DecisionSupportFile {
id: string
title: string
sections: {[name: string]: any}
status: DecisionSupportFileStatus
workgroup?: Workgroup,
createdAt: Date
votedAt?: Date
closedAt?: Date
}
export function newDecisionSupportFile(): DecisionSupportFile {
return {
id: '',
title: '',
sections: {},
status: DecisionSupportFileStatus.Draft,
workgroup: null,
createdAt: new Date(),
};
}

View File

@ -0,0 +1,71 @@
import { TaskCategory, TaskCategoryID } from "./task";
import { Project } from "./project";
export interface TaskCategoriesIndex {
[id: string]: TaskCategory
}
export interface TimeUnit {
label: string
acronym: string
}
export interface Params {
taskCategories: TaskCategoriesIndex
timeUnit: TimeUnit
currency: string
roundUpEstimations: boolean
hideFinancialPreviewOnPrint: boolean
}
export const defaults = {
taskCategories: {
"RQ15CD3iX1Ey2f9kat7tfLGZmUx9GGc15nS6A7fYtZv76SnS4": {
id: "RQ15CD3iX1Ey2f9kat7tfLGZmUx9GGc15nS6A7fYtZv76SnS4",
label: "Développement",
costPerTimeUnit: 500,
},
"QRdGS5Pr5si9SSjU84WAq19cjxQ3rUL71jKh8oHSMZSY4bBH9": {
id: "QRdGS5Pr5si9SSjU84WAq19cjxQ3rUL71jKh8oHSMZSY4bBH9",
label: "Conduite de projet",
costPerTimeUnit: 500,
},
"RPcqFMLdQrgBSomv7Sao7EQSb7on6rtjfDQK5JZNhNSg9DwEo": {
id: "RPcqFMLdQrgBSomv7Sao7EQSb7on6rtjfDQK5JZNhNSg9DwEo",
label: "Recette",
costPerTimeUnit: 500,
},
},
timeUnit: {
label: "jour/homme",
acronym: "j/h",
},
roundUpEstimations: true,
currency: "€ H.T.",
costPerTimeUnit: 500,
hideFinancialPreviewOnPrint: false,
}
export function getTimeUnit(project: Project): TimeUnit {
return project.params.timeUnit ? project.params.timeUnit : defaults.timeUnit;
}
export function getRoundUpEstimations(project: Project): boolean {
return project.params.hasOwnProperty("roundUpEstimations") ? project.params.roundUpEstimations : defaults.roundUpEstimations;
}
export function getCurrency(project: Project): string {
return project.params.currency ? project.params.currency : defaults.currency;
}
export function getTaskCategories(project: Project): TaskCategoriesIndex {
return project.params.taskCategories ? project.params.taskCategories : defaults.taskCategories;
}
export function getTaskCategoryCost(taskCategory: TaskCategory): number {
return taskCategory.hasOwnProperty("costPerTimeUnit") ? taskCategory.costPerTimeUnit : defaults.costPerTimeUnit;
}
export function getHideFinancialPreviewOnPrint(project: Project): boolean {
return project.params.hasOwnProperty("hideFinancialPreviewOnPrint") ? project.params.hideFinancialPreviewOnPrint : defaults.hideFinancialPreviewOnPrint;
}

107
client/src/types/project.ts Normal file
View File

@ -0,0 +1,107 @@
import { Task, TaskCategory, TaskID, getTaskWeightedMean, TaskCategoryID, getTaskStandardDeviation } from './task';
import { Params, defaults, getTaskCategoryCost } from "./params";
import { Estimation } from '../hooks/useProjectEstimations';
export type ProjectID = string;
export interface Project {
id: ProjectID
label: string
description: string
tasks: Tasks
params: Params
}
export interface Tasks {
[id: string]: Task
}
export function newProject(): Project {
return {
id: "",
label: "",
description: "",
tasks: {},
params: {
...defaults
},
};
}
export function getProjectWeightedMean(p : Project): number {
return Object.values(p.tasks).reduce((sum: number, t: Task) => {
sum += getTaskWeightedMean(t);
return sum;
}, 0);
}
export function getTaskCategoryWeightedMean(taskCategoryId: TaskCategoryID, p : Project): number {
return Object.values(p.tasks).filter(t => t.category === taskCategoryId).reduce((sum: number, t: Task) => {
sum += getTaskWeightedMean(t);
return sum;
}, 0);
}
export function getProjectStandardDeviation(p : Project): number {
return Math.sqrt(Object.values(p.tasks).reduce((sum: number, t: Task) => {
sum += Math.pow(getTaskStandardDeviation(t), 2);
return sum;
}, 0));
}
export interface MeanRepartition {
[id: string]: number
}
export function getTaskCategoriesMeanRepartition(project: Project): MeanRepartition {
let projectMean = getProjectWeightedMean(project);
const repartition: MeanRepartition = {};
Object.values(project.params.taskCategories).forEach(tc => {
repartition[tc.id] = getTaskCategoryWeightedMean(tc.id, project) / projectMean;
if (Number.isNaN(repartition[tc.id])) repartition[tc.id] = 0;
});
return repartition;
}
export interface MinMaxCost {
max: Cost
min: Cost
}
export interface Cost {
totalCost: number
totalTime: number
details: { [taskCategoryId: string]: { time: number, cost: number } }
}
export function getMinMaxCosts(project: Project, estimation: Estimation): MinMaxCost {
const max: Cost = {totalCost: 0, totalTime: 0, details: {}};
const min: Cost = {totalCost: 0, totalTime: 0, details: {}};
const repartition = getTaskCategoriesMeanRepartition(project);
Object.values(project.params.taskCategories).forEach(tc => {
const cost = getTaskCategoryCost(tc);
const maxTime = Math.round((estimation.e + estimation.sd) * repartition[tc.id]);
max.details[tc.id] = {
time: maxTime,
cost: Math.ceil(maxTime) * cost,
};
max.totalTime += max.details[tc.id].time;
max.totalCost += max.details[tc.id].cost;
const minTime = Math.round((estimation.e - estimation.sd) * repartition[tc.id]);
min.details[tc.id] = {
time: minTime,
cost: Math.ceil(minTime) * cost,
};
min.totalTime += min.details[tc.id].time;
min.totalCost += min.details[tc.id].cost;
});
return { max, min };
}

53
client/src/types/task.ts Normal file
View File

@ -0,0 +1,53 @@
import { defaults } from "./params";
export type TaskID = string
export enum EstimationConfidence {
Optimistic = "optimistic",
Likely = "likely",
Pessimistic = "pessimistic"
}
export interface Task {
id: TaskID
label: string
category: TaskCategoryID
estimations: { [confidence in EstimationConfidence]: number }
}
export type TaskCategoryID = string
export interface TaskCategory {
id: TaskCategoryID
label: string
costPerTimeUnit: number
}
export function newTask(label: string, category: TaskCategoryID): Task {
return {
id: '',
label,
category,
estimations: {
[EstimationConfidence.Optimistic]: 0,
[EstimationConfidence.Likely]: 0,
[EstimationConfidence.Pessimistic]: 0,
}
};
}
export function createTaskCategory(): TaskCategory {
return {
id: '',
costPerTimeUnit: defaults.costPerTimeUnit,
label: ""
};
}
export function getTaskWeightedMean(t: Task): number {
return (t.estimations.optimistic + (4*t.estimations.likely) + t.estimations.pessimistic) / 6;
}
export function getTaskStandardDeviation(t: Task): number {
return (t.estimations.pessimistic - t.estimations.optimistic) / 6;
}

View File

@ -1,18 +0,0 @@
import { User } from "./user";
export interface Workgroup {
id: string
name: string
createdAt: Date
closedAt: Date
members: User[]
}
export function inWorkgroup(u: User, wg: Workgroup): boolean {
for (let m, i = 0; (m = wg.members[i]); i++) {
if(m.id === u.id) {
return true;
}
}
return false;
}

View File

@ -28,27 +28,34 @@ module.exports = {
writeToDisk: true, writeToDisk: true,
}, },
module: { module: {
rules: [{ rules: [
test: /\.s(a|c)ss$/, {
test: /\.tsx?$/,
exclude: /node_modules/,
loaders: ['ts-loader']
},
{
test: /\.module\.css$/,
use: [ use: [
MiniCssExtractPlugin.loader,
{ {
loader: "css-loader", loader: '@teamsupercell/typings-for-css-modules-loader',
options: {}
}, },
{ {
loader: "resolve-url-loader", loader: MiniCssExtractPlugin.loader,
options: {}
}, },
{ { loader: "css-loader", options: { modules: true } }
loader: "sass-loader",
options: {
sourceMap: true,
sourceMapContents: false
}
}
] ]
},{ },
{
test: /^((?!\.module).)*css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{ loader: "css-loader" },
]
},
{
test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/, test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/,
use: [{ use: [{
loader: 'file-loader', loader: 'file-loader',
@ -57,11 +64,8 @@ module.exports = {
outputPath: '/resources/' outputPath: '/resources/'
} }
}] }]
},{ }
test: /\.(t|j)sx?$/, ]
exclude: /node_modules/,
loaders: ['ts-loader']
}]
}, },
plugins: [ plugins: [
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
@ -73,6 +77,8 @@ module.exports = {
template: './src/index.html', template: './src/index.html',
inject: false, inject: false,
favicon: "./src/resources/favicon.png", favicon: "./src/resources/favicon.png",
title: 'Guesstimate',
scriptLoading: 'defer',
}), }),
new CopyPlugin({ new CopyPlugin({
patterns: [ patterns: [