wpetit/guesstimate
1
0
Fork 0
Code Issues 3 Pull Requests 1 Releases Wiki Activity

Better print style + base tabs

Browse Source
This commit is contained in:
wpetit
2020-04-21 14:10:50 +02:00
parent 6e0ccd5575
commit 642b555b3d
17 changed files with 287 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/routes/project/tasks-table.tsx
View File

@ -4,8 +4,7 @@ import * as style from "./style.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";
export interface TaskTableProps {
project: Project
@ -27,6 +26,8 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
[EstimationConfidence.Pessimistic]: 0,
} as EstimationTotals);
const isPrint = usePrintMediaQuery();
useEffect(() => {
let optimistic = 0;
let likely = 0;
@ -76,10 +77,10 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
return (
<div class="table-container">
<table class="table is-bordered is-striped is-hoverable is-fullwidth">
<table class={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
<thead>
<tr>
<th class={style.noBorder} rowSpan={2}></th>
<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</th>
@ -97,7 +98,7 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
const categoryLabel = category ? category.label : '???';
return (
<tr key={`taks-${t.id}`}>
<td class="is-narrow">
<td class={`is-narrow noPrint`}>
<button
onClick={onTaskRemoveClick.bind(null, t.id)}
class="button is-danger is-small is-outlined">
@ -112,19 +113,31 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
</td>
<td>{ categoryLabel }</td>
<td>
<input class="input" type="number" value={t.estimations.optimistic}
min={0}
onChange={onOptimisticChange.bind(null, t.id)} />
{
isPrint ?
<span>{t.estimations.optimistic}</span> :
<input class="input" type="number" value={t.estimations.optimistic}
min={0}
onChange={onOptimisticChange.bind(null, t.id)} />
}
</td>
<td>
<input class="input" type="number" value={t.estimations.likely}
min={0}
onChange={onLikelyChange.bind(null, t.id)} />
{
isPrint ?
<span>{t.estimations.likely}</span> :
<input class="input" type="number" value={t.estimations.likely}
min={0}
onChange={onLikelyChange.bind(null, t.id)} />
}
</td>
<td>
<input class="input" type="number" value={t.estimations.pessimistic}
min={0}
onChange={onPessimisticChange.bind(null, t.id)} />
{
isPrint ?
<span>{t.estimations.pessimistic}</span> :
<input class="input" type="number" value={t.estimations.pessimistic}
min={0}
onChange={onPessimisticChange.bind(null, t.id)} />
}
</td>
</tr>
)
@ -133,7 +146,7 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
{
Object.keys(project.tasks).length === 0 ?
<tr>
<td class={style.noBorder}></td>
<td class={`${style.noBorder} noPrint`}></td>
<td class={style.noTasks} colSpan={5}>Aucune tâche pour l'instant.</td>
</tr> :
null
@ -141,9 +154,9 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
</tbody>
<tfoot>
<tr>
<td class={style.noBorder}></td>
<td colSpan={2}>
<div class="field has-addons">
<td class={`${style.noBorder} noPrint`}></td>
<td colSpan={2} class={isPrint ? style.noBorder : ''}>
<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} />
@ -171,7 +184,7 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
<th colSpan={3}>Total</th>
</tr>
<tr>
<td colSpan={3} class={style.noBorder}></td>
<td colSpan={isPrint ? 2 : 3} class={style.noBorder}></td>
<td>{totals.optimistic}</td>
<td>{totals.likely}</td>
<td>{totals.pessimistic}</td>