Base édition nouveau DAD

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -4,15 +4,42 @@ import { ClarificationSection } from './ClarificationSection';
 import { OptionsSection } from './OptionsSection';
 import { MetadataPanel } from './MetadataPanel';
 import { AppendixPanel } from './AppendixPanel';
+import { DecisionSupportFile, newDecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
+import { useParams } from 'react-router';
+import { useDecisions } from '../../gql/queries/decisions';
 
 export interface DecisionSupportFilePageProps {
 
 };
 
 export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageProps> = () => {
-  const [ state, setState ] = useState({ dsf: null });
-  const isNew = true;
-  const isClosed = false;
+  const { id } = useParams();
+  const { decisions } = useDecisions({
+    variables:{
+      filter: { 
+        ids: [id],
+      }
+    }
+  });
+
+  const [ state, setState ] = useState({ 
+    dsf: decisions.length > 0 ? decisions[0] : newDecisionSupportFile(), 
+    selectedTabIndex: 0 
+  });
+  
+  const isNew = state.dsf.id === '';
+  const isClosed = state.dsf.status === DecisionSupportFileStatus.Closed;
+
+  const selectTab = (tabIndex: number) => {
+    setState(state => ({ ...state, selectedTabIndex: tabIndex }));
+  };
+
+  const updateDSF = (dsf: DecisionSupportFile) => {
+    setState(state => ({...state, dsf}));
+  };
+
+  console.log(state.dsf);
+
   return (
     <Page title="Dossier d'Aide à la Décision">
       <div className="container is-fluid">
@@ -39,21 +66,24 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
         </section>
         <div className="columns mt-3">
           <div className="column is-9">
-            <div className="tabs is-medium is-toggle has-background-white">
+            <div className="tabs is-medium is-toggle">
               <ul>
-                <li className="is-active">
+                <li className={`has-background-white ${state.selectedTabIndex === 0 ? 'is-active': ''}`}
+                  onClick={selectTab.bind(null, 0)}>
                   <a>
                     <span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span>
                     <span>Clarifier la décision</span>
                   </a>
                 </li>
-                <li>
+                <li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`} 
+                    onClick={selectTab.bind(null, 1)}>
                   <a>
                     <span className="icon is-small"><i className="fas fa-search" aria-hidden="true"></i></span>
                     <span>Explorer les options</span>
                   </a>
                 </li>
-                <li>
+                <li className={`has-background-white ${state.selectedTabIndex === 2 ? 'is-active': ''}`} 
+                    onClick={selectTab.bind(null, 2)}>
                   <a>
                     <span className="icon is-small"><i className="fas fa-person-booth" aria-hidden="true"></i></span>
                     <span>Prendre la décision</span>
@@ -61,7 +91,11 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
                 </li>
               </ul>
             </div>
-            <ClarificationSection dsf={state.dsf} />
+            {
+              state.selectedTabIndex === 0 ?
+              <ClarificationSection dsf={state.dsf} updateDSF={updateDSF} /> :
+              null
+            }
           </div>
           <div className="column is-3">
             <MetadataPanel dsf={state.dsf} />