Création d'une page tableau en lecture seule et possibilité d'exporter en PDF via wkhtmltopdf

This commit is contained in:
2020-06-15 15:05:28 -04:00
parent 3c21412344
commit 6ebe4c90d7
17 changed files with 151 additions and 31 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -8,6 +8,8 @@ import { useProjectReducer, addTask, updateTaskEstimation, removeTask, updateTas
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
@ -20,14 +22,21 @@ const Pdf: FunctionalComponent<PdfProps> = ({ projectId }) => {
return (
<div class={`container ${style.pdf}`}>
<div class="column is-9">
<TaskTable
project={project}
readonly={true} />
<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="column is-3">
<TimePreview project={project} />
<RepartitionPreview project={project} />
<div class="columns">
<div class={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
<FinancialPreview project={project} />
</div>
</div>
</div>
);

View File

@ -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;

View File

@ -91,7 +91,10 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
<table class={`table is-bordered is-striped is-hoverable is-fullwidth ${style.middleTable}`}>
<thead>
<tr>
{
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>
@ -109,6 +112,8 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
const categoryLabel = category ? category.label : '???';
return (
<tr key={`taks-${t.id}`}>
{
readonly ? '' :
<td class={`is-narrow noPrint`}>
<button
onClick={onTaskRemoveClick.bind(null, t.id)}
@ -116,6 +121,7 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
🗑
</button>
</td>
}
<td class={style.mainColumn}>
<EditableText
render={(value) => (<span>{value}</span>)}
@ -166,7 +172,9 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
<tfoot>
<tr>
<td class={`${style.noBorder} noPrint`}></td>
<td colSpan={2} class={readonly ? style.noBorder : ''}>
<td colSpan={readonly ? 1 : 2} class={readonly ? style.noBorder : ''}>
{
readonly ? '' :
<div class="field has-addons noPrint">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Nouvelle tâche"
@ -191,6 +199,7 @@ const TaskTable: FunctionalComponent<TaskTableProps> = ({ project, onTaskAdd, on
</a>
</p>
</div>
}
</td>
<th colSpan={3}>Total</th>
</tr>

View File

@ -27,6 +27,9 @@ module.exports = {
proxy: {
'/api': {
target: 'http://127.0.0.1:8081',
},
'/export': {
target: 'http://127.0.0.1:8081',
}
}
},