Project deletion

This commit is contained in:
wpetit 2020-04-22 23:18:18 +02:00
parent b0bffe6fb8
commit 4412851d32
4 changed files with 67 additions and 25 deletions

View File

@ -27,11 +27,19 @@ const FinancialPreview: FunctionalComponent<FinancialPreviewProps> = ({ project
<tbody>
<tr>
<td class="is-narrow">Maximum</td>
<td>{maxCost} {getCurrency(project)}</td>
<td>
<details>
<summary>~ {maxCost} {getCurrency(project)}</summary>
</details>
</td>
</tr>
<tr>
<td class="is-narrow">Minimum</td>
<td>{minCost} {getCurrency(project)}</td>
<td>
<details>
<summary>~ {minCost} {getCurrency(project)}</summary>
</details>
</td>
</tr>
</tbody>
</table>

View File

@ -43,7 +43,7 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
render: () => <EstimationTab project={project} dispatch={dispatch} />
},
{
label: 'Paramètres',
label: 'Options avancées',
icon: '⚙️',
render: () => <ParamsTab project={project} dispatch={dispatch} />
},

View File

@ -3,6 +3,9 @@ import { Project } from "../../models/project";
import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
import { getRoundUpEstimations, getCurrency, getTimeUnit } 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
@ -10,6 +13,13 @@ export interface ParamsTabProps {
}
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));
@ -32,8 +42,28 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
};
const onDeleteProjectClick = (evt: Event) => {
const projectStorageKey = getProjectStorageKey(project.id);
window.localStorage.removeItem(projectStorageKey);
route('/');
};
return (
<Fragment>
<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"
@ -45,22 +75,7 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
</div>
<hr />
<div class="field">
<label class="label">Unité de temps</label>
<div class="control">
<input class="input" type="text"
onChange={onTimeUnitLabelChange}
value={timeUnit.label} />
</div>
<label class="label">Acronyme</label>
<div class="control">
<input class="input" type="text"
onChange={onTimeUnitAcronymChange}
value={timeUnit.acronym} />
</div>
</div>
<hr />
<div class="field">
<label class="label">Devise</label>
<label class="label is-size-5">Devise</label>
<div class="control">
<input class="input" type="text"
onChange={onCurrencyChange}
@ -69,6 +84,25 @@ const ParamsTab: FunctionalComponent<ParamsTabProps> = ({ project, dispatch }) =
</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>
);
};

View File

@ -45,7 +45,7 @@ const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ pr
return (
<div class="table-container">
<label class="label">Catégories de tâche</label>
<label class="label is-size-5">Catégories de tâche</label>
<table class={`table is-bordered is-striped" ${style.middleTable}`}>
<thead>
<tr>