Permettre de gérer les options proposées dans un DAD #19
|
@ -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))
|
||||||
|
|||||||
|
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">
|
|
||||||
<p className="control">
|
|
||||||
<a className="button is-primary" onClick={onAddOptionClick}>
|
|
||||||
Ajouter
|
Ajouter
|
||||||
</a>
|
</a>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
|
|
Loading…
Reference in New Issue
Idem,
const
semble préférable àvar
ici.