Suppression des options OK + CSS

This commit is contained in:
Teddy Cornaut 2020-08-31 13:18:39 +02:00
parent 2d66888ed3
commit 089d91a84c

View File

@ -65,6 +65,14 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
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 (
<section>
<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}`}>
<td>
<button
onClick={onRemoveOptionClick.bind(null, index)}
className="button is-danger is-small is-outlined">
🗑
</button>
@ -100,7 +108,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
</textarea>
</td>
<td>
<textarea className="textarea"
<textarea className="textarea is-success"
value={o.pros}
onChange={onOptionChange.bind(null, index, 'pros')}
placeholder="Décrire les avantages de cette décision."
@ -108,7 +116,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
</textarea>
</td>
<td>
<textarea className="textarea"
<textarea className="textarea is-danger"
value={o.cons}
onChange={onOptionChange.bind(null, index, 'cons')}
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 ?
<tr>
<td className={`noPrint`}></td>
<td></td>
<td colSpan={4}>Aucune option pour l'instant.</td>
</tr> :
null
@ -130,15 +138,10 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
</tbody>
<tfoot>
<tr>
<td className={`noPrint`} colSpan={3}></td>
<td colSpan={2}>
<div className="field has-addons noPrint">
<p className="control">
<a className="button is-primary" onClick={onAddOptionClick}>
Ajouter
</a>
</p>
</div>
<td colSpan={5}>
<a className="button is-primary is-pulled-right" onClick={onAddOptionClick}>
Ajouter
</a>
</td>
</tr>
</tfoot>