2020-04-21 20:45:47 +02:00
|
|
|
|
import { FunctionalComponent, h, Fragment } from "preact";
|
|
|
|
|
import { Project } from "../../models/project";
|
2020-04-22 22:07:52 +02:00
|
|
|
|
import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
|
2020-04-23 13:40:20 +02:00
|
|
|
|
import { getRoundUpEstimations, getCurrency, getTimeUnit, getHideFinancialPreviewOnPrint } from "../../models/params";
|
2020-04-21 20:45:47 +02:00
|
|
|
|
import TaskCategoriesTable from "./task-categories-table";
|
2020-04-22 23:18:18 +02:00
|
|
|
|
import { useState } from "preact/hooks";
|
|
|
|
|
import { route } from "preact-router";
|
|
|
|
|
import { getProjectStorageKey } from "../../util/storage";
|
2020-04-21 20:45:47 +02:00
|
|
|
|
|
|
|
|
|
export interface ParamsTabProps {
|
|
|
|
|
project: Project
|
|
|
|
|
dispatch: (action: ProjectReducerActions) => void
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) => {
|
2020-04-22 23:18:18 +02:00
|
|
|
|
const [ deleteButtonEnabled, setDeleteButtonEnabled ] = useState(false);
|
|
|
|
|
|
|
|
|
|
const onEnableDeleteButtonChange = (evt: Event) => {
|
|
|
|
|
const checked = (evt.currentTarget as HTMLInputElement).checked;
|
|
|
|
|
setDeleteButtonEnabled(checked);
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-21 20:45:47 +02:00
|
|
|
|
const onRoundUpChange = (evt: Event) => {
|
2020-04-22 23:18:18 +02:00
|
|
|
|
const checked = (evt.currentTarget as HTMLInputElement).checked;
|
|
|
|
|
dispatch(updateParam("roundUpEstimations", checked));
|
2020-04-21 20:45:47 +02:00
|
|
|
|
};
|
|
|
|
|
|
2020-04-23 13:40:20 +02:00
|
|
|
|
const onHideFinancialPreview = (evt: Event) => {
|
|
|
|
|
const checked = (evt.currentTarget as HTMLInputElement).checked;
|
|
|
|
|
dispatch(updateParam("hideFinancialPreviewOnPrint", checked));
|
|
|
|
|
};
|
|
|
|
|
|
2020-04-21 20:45:47 +02:00
|
|
|
|
const onCurrencyChange = (evt: Event) => {
|
2020-04-22 23:18:18 +02:00
|
|
|
|
const value = (evt.currentTarget as HTMLInputElement).value;
|
|
|
|
|
dispatch(updateParam("currency", value));
|
2020-04-21 20:45:47 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const timeUnit = getTimeUnit(project);
|
|
|
|
|
|
|
|
|
|
const onTimeUnitLabelChange = (evt: Event) => {
|
2020-04-22 23:18:18 +02:00
|
|
|
|
const value = (evt.currentTarget as HTMLInputElement).value;
|
|
|
|
|
dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
|
2020-04-21 20:45:47 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onTimeUnitAcronymChange = (evt: Event) => {
|
2020-04-22 23:18:18 +02:00
|
|
|
|
const value = (evt.currentTarget as HTMLInputElement).value;
|
|
|
|
|
dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onDeleteProjectClick = (evt: Event) => {
|
|
|
|
|
const projectStorageKey = getProjectStorageKey(project.id);
|
|
|
|
|
window.localStorage.removeItem(projectStorageKey);
|
|
|
|
|
route('/');
|
2020-04-21 20:45:47 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Fragment>
|
2020-04-23 13:40:20 +02:00
|
|
|
|
<label class="label is-size-5">Impression</label>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<input type="checkbox"
|
|
|
|
|
id="hideFinancialPreview"
|
|
|
|
|
name="hideFinancialPreview"
|
|
|
|
|
class="switch"
|
|
|
|
|
onChange={onHideFinancialPreview}
|
|
|
|
|
checked={getHideFinancialPreviewOnPrint(project)} />
|
|
|
|
|
<label for="hideFinancialPreview">Cacher le prévisionnel financier lors de l'impression</label>
|
|
|
|
|
</div>
|
|
|
|
|
<hr />
|
2020-04-21 20:45:47 +02:00
|
|
|
|
<div class="field">
|
2020-04-22 23:18:18 +02:00
|
|
|
|
<label class="label is-size-5">Unité de temps</label>
|
2020-04-21 20:45:47 +02:00
|
|
|
|
<div class="control">
|
|
|
|
|
<input class="input" type="text"
|
|
|
|
|
onChange={onTimeUnitLabelChange}
|
|
|
|
|
value={timeUnit.label} />
|
|
|
|
|
</div>
|
2020-04-22 23:18:18 +02:00
|
|
|
|
<label class="label is-size-6">Acronyme</label>
|
2020-04-21 20:45:47 +02:00
|
|
|
|
<div class="control">
|
|
|
|
|
<input class="input" type="text"
|
|
|
|
|
onChange={onTimeUnitAcronymChange}
|
|
|
|
|
value={timeUnit.acronym} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-04-22 23:18:18 +02:00
|
|
|
|
<div class="field">
|
|
|
|
|
<input type="checkbox"
|
|
|
|
|
id="roundUpEstimations"
|
|
|
|
|
name="roundUpEstimations"
|
|
|
|
|
class="switch"
|
|
|
|
|
onChange={onRoundUpChange}
|
|
|
|
|
checked={getRoundUpEstimations(project)} />
|
|
|
|
|
<label for="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
|
|
|
|
|
</div>
|
2020-04-21 20:45:47 +02:00
|
|
|
|
<hr />
|
|
|
|
|
<div class="field">
|
2020-04-22 23:18:18 +02:00
|
|
|
|
<label class="label is-size-5">Devise</label>
|
2020-04-21 20:45:47 +02:00
|
|
|
|
<div class="control">
|
|
|
|
|
<input class="input" type="text"
|
|
|
|
|
onChange={onCurrencyChange}
|
|
|
|
|
value={getCurrency(project)} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr />
|
|
|
|
|
<TaskCategoriesTable project={project} dispatch={dispatch} />
|
2020-04-22 23:18:18 +02:00
|
|
|
|
<hr />
|
|
|
|
|
<div>
|
|
|
|
|
<label class="label is-size-5">Supprimer le projet</label>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<input type="checkbox"
|
|
|
|
|
id="enableDeleteButton"
|
|
|
|
|
name="enableDeleteButton"
|
|
|
|
|
class="switch is-warning"
|
|
|
|
|
onChange={onEnableDeleteButtonChange}
|
|
|
|
|
checked={deleteButtonEnabled} />
|
|
|
|
|
<label for="enableDeleteButton">Supprimer ce projet ?</label>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="button is-danger"
|
|
|
|
|
onClick={onDeleteProjectClick}
|
|
|
|
|
disabled={!deleteButtonEnabled}>
|
|
|
|
|
🗑️ Supprimer
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<hr />
|
2020-04-21 20:45:47 +02:00
|
|
|
|
</Fragment>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ParamsTab;
|