127 lines
4.9 KiB
TypeScript
127 lines
4.9 KiB
TypeScript
import { FunctionalComponent, h, Fragment } from "preact";
|
||
import { Project } from "../../models/project";
|
||
import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
|
||
import { getRoundUpEstimations, getCurrency, getTimeUnit, getHideFinancialPreviewOnPrint } from "../../models/params";
|
||
import TaskCategoriesTable from "./task-categories-table";
|
||
import { useState } from "preact/hooks";
|
||
import { route } from "preact-router";
|
||
import { getProjectStorageKey } from "../../util/storage";
|
||
|
||
export interface ParamsTabProps {
|
||
project: Project
|
||
dispatch: (action: ProjectReducerActions) => void
|
||
}
|
||
|
||
const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) => {
|
||
const [ deleteButtonEnabled, setDeleteButtonEnabled ] = useState(false);
|
||
|
||
const onEnableDeleteButtonChange = (evt: Event) => {
|
||
const checked = (evt.currentTarget as HTMLInputElement).checked;
|
||
setDeleteButtonEnabled(checked);
|
||
}
|
||
|
||
const onRoundUpChange = (evt: Event) => {
|
||
const checked = (evt.currentTarget as HTMLInputElement).checked;
|
||
dispatch(updateParam("roundUpEstimations", checked));
|
||
};
|
||
|
||
const onHideFinancialPreview = (evt: Event) => {
|
||
const checked = (evt.currentTarget as HTMLInputElement).checked;
|
||
dispatch(updateParam("hideFinancialPreviewOnPrint", checked));
|
||
};
|
||
|
||
const onCurrencyChange = (evt: Event) => {
|
||
const value = (evt.currentTarget as HTMLInputElement).value;
|
||
dispatch(updateParam("currency", value));
|
||
};
|
||
|
||
const timeUnit = getTimeUnit(project);
|
||
|
||
const onTimeUnitLabelChange = (evt: Event) => {
|
||
const value = (evt.currentTarget as HTMLInputElement).value;
|
||
dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
|
||
};
|
||
|
||
const onTimeUnitAcronymChange = (evt: Event) => {
|
||
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('/');
|
||
};
|
||
|
||
return (
|
||
<Fragment>
|
||
<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 />
|
||
<div class="field">
|
||
<label class="label is-size-5">Unité de temps</label>
|
||
<div class="control">
|
||
<input class="input" type="text"
|
||
onChange={onTimeUnitLabelChange}
|
||
value={timeUnit.label} />
|
||
</div>
|
||
<label class="label is-size-6">Acronyme</label>
|
||
<div class="control">
|
||
<input class="input" type="text"
|
||
onChange={onTimeUnitAcronymChange}
|
||
value={timeUnit.acronym} />
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<hr />
|
||
<div class="field">
|
||
<label class="label is-size-5">Devise</label>
|
||
<div class="control">
|
||
<input class="input" type="text"
|
||
onChange={onCurrencyChange}
|
||
value={getCurrency(project)} />
|
||
</div>
|
||
</div>
|
||
<hr />
|
||
<TaskCategoriesTable project={project} dispatch={dispatch} />
|
||
<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 />
|
||
</Fragment>
|
||
);
|
||
};
|
||
|
||
export default ParamsTab;
|