124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
|
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;
|