Création/mise à jour basique d'un DAD

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -1,12 +1,13 @@
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import { Page } from '../Page';
 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';
+import { useParams, useHistory } from 'react-router';
+import { useDecisionSupportFiles } from '../../gql/queries/dsf';
+import { useCreateDecisionSupportFileMutation, useUpdateDecisionSupportFileMutation } from '../../gql/mutations/dsf';
+import { useDebounce } from '../../hooks/useDebounce';
 
 export interface DecisionSupportFilePageProps {
 
@@ -14,31 +15,69 @@ export interface DecisionSupportFilePageProps {
 
 export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageProps> = () => {
   const { id } = useParams();
-  const { decisions } = useDecisions({
+  const history = useHistory();
+  const { decisionSupportFiles } = useDecisionSupportFiles({
     variables:{
-      filter: { 
-        ids: [id],
+      filter: {
+        ids: id !== 'new' ? [id] : undefined,
       }
     }
   });
 
   const [ state, setState ] = useState({ 
-    dsf: decisions.length > 0 ? decisions[0] : newDecisionSupportFile(), 
-    selectedTabIndex: 0 
+    dsf: newDecisionSupportFile(),
+    saved: true,
+    selectedTabIndex: 0,
   });
-  
-  const isNew = state.dsf.id === '';
-  const isClosed = state.dsf.status === DecisionSupportFileStatus.Closed;
+
+  useEffect(() => {
+    const dsf = decisionSupportFiles.length > 0 && decisionSupportFiles[0].id === id ? decisionSupportFiles[0] : {};
+    setState(state => ({ ...state, dsf: { ...state.dsf, ...dsf }}))
+  }, [ decisionSupportFiles ]);
 
   const selectTab = (tabIndex: number) => {
     setState(state => ({ ...state, selectedTabIndex: tabIndex }));
   };
 
   const updateDSF = (dsf: DecisionSupportFile) => {
-    setState(state => ({...state, dsf}));
+    setState(state => {
+      return { ...state, saved: false, dsf: { ...state.dsf, ...dsf } };
+    });
   };
 
-  console.log(state.dsf);
+  const [ createDecisionSupportFile ] = useCreateDecisionSupportFileMutation();
+  const [ updateDecisionSupportFile ] = useUpdateDecisionSupportFileMutation();
+
+  const saveDSF = () => {
+    const changes = {
+      title: state.dsf.title !== '' ? state.dsf.title : undefined,
+      status: state.dsf.status,
+      workgroupId: state.dsf.workgroup ? state.dsf.workgroup.id : undefined,
+      sections: state.dsf.sections,
+    };
+
+    if (!changes.workgroupId) return;
+
+    if (state.dsf.id === '') {
+      createDecisionSupportFile({
+        variables: { changes },
+      }).then(({ data }) => {
+        history.push(`/decisions/${data.createDecisionSupportFile.id}`);
+      });
+    } else {
+      updateDecisionSupportFile({
+        variables: { changes, id: state.dsf.id },
+      }).then(({ data }) => {
+        setState(state => {
+          return { ...state, saved: true, dsf: { ...state.dsf, ...data.updateDecisionSupportFile } };
+        });
+      });
+    }
+  };
+
+  const canSave = !!state.dsf.workgroup && !state.saved;
+  const isNew = state.dsf.id === '';
+  const isClosed = state.dsf.status === DecisionSupportFileStatus.Closed;
 
   return (
     <Page title="Dossier d'Aide à la Décision">
@@ -62,6 +101,14 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
                 </div>
               }
             </div>
+            <div className="level-right">
+              <div className="level-item buttons">
+                <button className="button is-medium is-success" disabled={!canSave} onClick={saveDSF}>
+                  <span className="icon"><i className="fa fa-save"></i></span>
+                  <span>Enregistrer</span>
+                </button>
+              </div>
+            </div>
           </div>
         </section>
         <div className="columns mt-3">
@@ -98,7 +145,7 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
             }
           </div>
           <div className="column is-3">
-            <MetadataPanel dsf={state.dsf} />
+            <MetadataPanel dsf={state.dsf} updateDSF={updateDSF} />
             <AppendixPanel dsf={state.dsf} />
           </div>
         </div>