Base de la page de création/édition d'un DAD

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -0,0 +1,74 @@
+import React, { FunctionComponent, useState } from 'react';
+import { Page } from '../Page';
+import { ClarificationSection } from './ClarificationSection';
+import { OptionsSection } from './OptionsSection';
+import { MetadataPanel } from './MetadataPanel';
+import { AppendixPanel } from './AppendixPanel';
+
+export interface DecisionSupportFilePageProps {
+
+};
+
+export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageProps> = () => {
+  const [ state, setState ] = useState({ dsf: null });
+  const isNew = true;
+  const isClosed = false;
+  return (
+    <Page title="Dossier d'Aide à la Décision">
+      <div className="container is-fluid">
+        <section className="mt-5">
+          <div className="level">
+            <div className="level-left">
+              {
+                isNew ?
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">Nouveau</h2>
+                    <h3 className="is-size-5 subtitle">Dossier d'Aide à la Décision</h3>
+                  </div>
+                </div> :
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">{state.dsf.title}</h2>
+                    <h3 className="is-size-5 subtitle">Dossier d'Aide à la Décision <span className="is-italic">{ isClosed ? '(clos)' : null }</span></h3>
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        </section>
+        <div className="columns mt-3">
+          <div className="column is-9">
+            <div className="tabs is-medium is-toggle has-background-white">
+              <ul>
+                <li className="is-active">
+                  <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>
+                  <a>
+                    <span className="icon is-small"><i className="fas fa-search" aria-hidden="true"></i></span>
+                    <span>Explorer les options</span>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <span className="icon is-small"><i className="fas fa-person-booth" aria-hidden="true"></i></span>
+                    <span>Prendre la décision</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <ClarificationSection dsf={state.dsf} />
+          </div>
+          <div className="column is-3">
+            <MetadataPanel dsf={state.dsf} />
+            <AppendixPanel dsf={state.dsf} />
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+};