From 089d91a84c4f4f52a0960b2e00f5c2606a5badc2 Mon Sep 17 00:00:00 2001
From: Teddy Cornaut <tcornaut@cadoles.com>
Date: Mon, 31 Aug 2020 13:18:39 +0200
Subject: [PATCH] Suppression des options OK + CSS

---
 .../OptionsSection.tsx                        | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/src/components/DecisionSupportFilePage/OptionsSection.tsx b/client/src/components/DecisionSupportFilePage/OptionsSection.tsx
index 766eb0f..a87e4a7 100644
--- a/client/src/components/DecisionSupportFilePage/OptionsSection.tsx
+++ b/client/src/components/DecisionSupportFilePage/OptionsSection.tsx
@@ -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>