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

client/src/components/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 import { HomePage } from './HomePage/HomePage';
 import { ProfilePage } from './ProfilePage/ProfilePage';
 import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
+import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage';
 
 export class App extends React.Component {
   render() {
@@ -12,6 +13,7 @@ export class App extends React.Component {
           <Route path="/" exact component={HomePage} />
           <Route path="/profile" exact component={ProfilePage} />
           <Route path="/workgroups/:id" exact component={WorkgroupPage} />
+          <Route path="/decisions/:id" exact component={DecisionSupportFilePage} />
           <Route component={() => <Redirect to="/" />} />
         </Switch>
       </BrowserRouter>

client/src/components/DecisionSupportFilePage/AppendixPanel.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+
+export interface AppendixPanelProps {
+  dsf: DecisionSupportFile,
+};
+
+export const AppendixPanel: FunctionComponent<AppendixPanelProps> = ({ dsf }) => {
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Annexes
+      </p>
+      <div className="panel-block">
+      </div>
+    </nav>
+  );
+};

client/src/components/DecisionSupportFilePage/ClarificationSection.tsx

@@ -0,0 +1,67 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+
+export interface ClarificationSectionProps {
+  dsf: DecisionSupportFile,
+};
+
+export const ClarificationSection: FunctionComponent<ClarificationSectionProps> = ({ dsf }) => {
+  return (
+    <section>
+      <div className="box">
+        <div className="field">
+          <label className="label">Intitulé du dossier</label>
+          <div className="control">
+            <input className="input" type="text" />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Quelle décision devons nous prendre ?</label>
+          <div className="control">
+            <textarea className="textarea" placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." rows={10}></textarea>
+          </div>
+          <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
+        </div>
+        <div className="field">
+          <label className="label">Pourquoi devons nous prendre cette décision ?</label>
+          <div className="control">
+            <textarea className="textarea" placeholder="Décrire pourquoi il est important de prendre cette décision." rows={10}></textarea>
+          </div>
+          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
+        </div>
+        <div className="field">
+          <label className="label">Portée de la décision</label>
+          <div className="control">
+            <div className="select">
+              <select>
+                <option></option>
+                <option>Individuelle</option>
+                <option>Groupe identifié</option>
+                <option>Collective</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Nature de la décision</label>
+          <div className="control">
+            <div className="select">
+              <select>
+                <option></option>
+                <option>Opérationnelle</option>
+                <option>Tactique</option>
+                <option>Stratégique</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Existe t'il une échéance particulière pour cette décision ?</label>
+          <div className="control">
+            <input className="input" type="date" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

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>
+  );
+};

client/src/components/DecisionSupportFilePage/MetadataPanel.tsx

@@ -0,0 +1,54 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+
+export interface MetadataPanelProps {
+  dsf: DecisionSupportFile,
+};
+
+export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf }) => {
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Métadonnées
+      </p>
+      <div className="panel-block">
+        <div style={{width:'100%'}}>
+          <div className="field">
+            <div className="label">Groupe de travail</div>
+            <div className="control is-expanded">
+              <div className="select is-fullwidth">
+                <select>
+                  <option></option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="field">
+            <div className="label">Statut</div>
+            <div className="control is-expanded">
+              <div className="select is-fullwidth">
+                <select>
+                  <option>En préparation</option>
+                  <option>Prêt à voter</option>
+                  <option>Voté</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="field">
+            <div className="label">Créé le</div>
+            <div className="control">
+              <p>--</p>
+            </div>
+          </div>
+          <div className="field">
+            <div className="label">Dernière modification</div>
+            <div className="control">
+              <p>--</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};

client/src/components/DecisionSupportFilePage/OptionsSection.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+
+export interface OptionsSectionProps {
+  dsf: DecisionSupportFile,
+};
+
+export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf }) => {
+  return (
+    <section>
+      <h4 id="options-section" className="is-size-4 title is-spaced"><a href="#options-section">Explorer les options</a></h4>
+      <div className="box">
+        
+      </div>
+    </section>
+  );
+};

client/src/components/HomePage/DecisionSupportFilePanel.tsx

@@ -31,7 +31,7 @@ export function DecisionSupportFilePanel() {
   return (
     <ItemPanel
       className='is-link'
-      title="Dossiers d'Aide à la Décision"
+      title="D.A.D."
       newItemUrl="/decisions/new"
       items={decisions}
       tabs={tabs}

client/src/components/HomePage/ItemPanel.tsx

@@ -78,7 +78,7 @@ export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
 
   return (
     <nav className={`panel ${className}`}>
-      <div className="level panel-heading mb-0">
+      <div className="level is-mobile panel-heading mb-0">
         <div className="level-left">
           <p className="level-item">{title}</p>
         </div>

client/src/components/Navbar.tsx

@@ -15,7 +15,7 @@ export function Navbar() {
   };
   
   return (
-    <nav className="navbar" role="navigation" aria-label="main navigation">
+    <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
       <div className="container is-fluid">
         <div className="navbar-brand">
           <Link className="navbar-item" to="/">