Permettre de gérer les options proposées dans un DAD #19

Manually merged
tcornaut merged 6 commits from feature/options into develop 2020-08-31 15:32:40 +02:00
1 changed files with 16 additions and 13 deletions
Showing only changes of commit 089d91a84c - Show all commits

View File

@ -65,6 +65,14 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
setState(state => ({ ...state, changed: true, section: { ...state.section, options }})); setState(state => ({ ...state, changed: true, section: { ...state.section, options }}));
}; };
const onRemoveOptionClick = (id: string, evt: MouseEvent) => {
if(confirm('Voulez-vous supprimer cette option ?')){
var options = JSON.parse(JSON.stringify(state.section.options))
Review

Idem, const semble préférable à var ici.

Idem, `const` semble préférable à `var` ici.
options.splice(id, 1);
setState(state => ({ ...state, changed: true, section: { ...state.section, options }}));
}
};
return ( return (
<section> <section>
<h4 id="options-section" className="is-size-4 title is-spaced"><a href="#options-section">Explorer les options</a></h4> <h4 id="options-section" className="is-size-4 title is-spaced"><a href="#options-section">Explorer les options</a></h4>
@ -86,7 +94,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
<tr key={`option-${o.id}`}> <tr key={`option-${o.id}`}>
<td> <td>
<button <button
onClick={onRemoveOptionClick.bind(null, index)}
className="button is-danger is-small is-outlined"> className="button is-danger is-small is-outlined">
🗑 🗑
</button> </button>
@ -100,7 +108,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
</textarea> </textarea>
</td> </td>
<td> <td>
<textarea className="textarea" <textarea className="textarea is-success"
value={o.pros} value={o.pros}
onChange={onOptionChange.bind(null, index, 'pros')} onChange={onOptionChange.bind(null, index, 'pros')}
placeholder="Décrire les avantages de cette décision." placeholder="Décrire les avantages de cette décision."
@ -108,7 +116,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
</textarea> </textarea>
</td> </td>
<td> <td>
<textarea className="textarea" <textarea className="textarea is-danger"
value={o.cons} value={o.cons}
onChange={onOptionChange.bind(null, index, 'cons')} onChange={onOptionChange.bind(null, index, 'cons')}
placeholder="Décrire les désavantages de cette décision." placeholder="Décrire les désavantages de cette décision."
@ -122,7 +130,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
{ {
state.section.options.length === 0 ? state.section.options.length === 0 ?
<tr> <tr>
<td className={`noPrint`}></td> <td></td>
<td colSpan={4}>Aucune option pour l'instant.</td> <td colSpan={4}>Aucune option pour l'instant.</td>
</tr> : </tr> :
null null
@ -130,15 +138,10 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td className={`noPrint`} colSpan={3}></td> <td colSpan={5}>
<td colSpan={2}> <a className="button is-primary is-pulled-right" onClick={onAddOptionClick}>
<div className="field has-addons noPrint"> Ajouter
<p className="control"> </a>
<a className="button is-primary" onClick={onAddOptionClick}>
Ajouter
</a>
</p>
</div>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>