Gestion des liens profonds sur les tabs dans la page DAD

client/src/components/App.tsx

@@ -45,7 +45,7 @@ export const App: FunctionComponent<AppProps> = () => {
             <Route path="/unauthorized" exact component={UnauthorizedPage} />
             <PrivateRoute path="/profile" exact component={ProfilePage} />
             <PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
-            <PrivateRoute path="/decisions/:id" exact component={DecisionSupportFilePage} />
+            <PrivateRoute path="/decisions/:id" component={DecisionSupportFilePage} />
             <PrivateRoute path="/dashboard" exact component={DashboardPage} />
             <PrivateRoute path="/logout" exact component={LogoutPage} />
             <Route component={() => <Redirect to="/" />} />

client/src/components/DecisionSupportFilePage/ClarificationSection.tsx

@@ -49,90 +49,88 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
 
   return (
     <section>
-      <div className="box">
-        <div className="field">
-          <label className="label is-medium">Intitulé du dossier</label>
-          <div className="control">
-            <input className="input is-medium" type="text" readOnly={readOnly} value={dsf.title} onChange={onTitleChange} />
+      <div className="field">
+        <label className="label is-medium">Intitulé du dossier</label>
+        <div className="control">
+          <input className="input is-medium" type="text" readOnly={readOnly} value={dsf.title} onChange={onTitleChange} />
+        </div>
+      </div>
+      <div className="field">
+        <label className="label is-medium">Quelle décision devons nous prendre ?</label>
+        <div className="control">
+          <textarea className="textarea is-medium"
+            readOnly={readOnly}
+            value={state.section.objectives}
+            onChange={onSectionAttrChange.bind(null, 'objectives')}
+            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 is-medium">Pourquoi devons nous prendre cette décision ?</label>
+        <div className="control">
+          <textarea className="textarea is-medium"
+            readOnly={readOnly}
+            value={state.section.motivations}
+            onChange={onSectionAttrChange.bind(null, 'motivations')}
+            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 is-medium">Portée de la décision</label>
+        <div className="control">
+          <div className="select is-medium">
+            <select
+              disabled={readOnly}
+              onChange={onSectionAttrChange.bind(null, 'scope')} 
+              value={state.section.scope}>
+              <option></option>
+              <option value="individual">Individuelle</option>
+              <option value="identified-group">Groupe identifié</option>
+              <option value="collective">Collective</option>
+            </select>
           </div>
         </div>
-        <div className="field">
-          <label className="label is-medium">Quelle décision devons nous prendre ?</label>
-          <div className="control">
-            <textarea className="textarea is-medium"
-              readOnly={readOnly}
-              value={state.section.objectives}
-              onChange={onSectionAttrChange.bind(null, 'objectives')}
-              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 is-medium">Pourquoi devons nous prendre cette décision ?</label>
-          <div className="control">
-            <textarea className="textarea is-medium"
-              readOnly={readOnly}
-              value={state.section.motivations}
-              onChange={onSectionAttrChange.bind(null, 'motivations')}
-              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 is-medium">Portée de la décision</label>
-          <div className="control">
-            <div className="select is-medium">
-              <select
-                disabled={readOnly}
-                onChange={onSectionAttrChange.bind(null, 'scope')} 
-                value={state.section.scope}>
-                <option></option>
-                <option value="individual">Individuelle</option>
-                <option value="identified-group">Groupe identifié</option>
-                <option value="collective">Collective</option>
-              </select>
-            </div>
+      </div>
+      <div className="field">
+        <label className="label is-medium">Nature de la décision</label>
+        <div className="control">
+          <div className="select is-medium">
+            <select
+              disabled={readOnly}
+              onChange={onSectionAttrChange.bind(null, 'nature')} 
+              value={state.section.nature}>
+              <option></option>
+              <option value="operational">Opérationnelle</option>
+              <option value="tactic">Tactique</option>
+              <option value="strategic">Stratégique</option>
+            </select>
           </div>
         </div>
-        <div className="field">
-          <label className="label is-medium">Nature de la décision</label>
-          <div className="control">
-            <div className="select is-medium">
-              <select
-                disabled={readOnly}
-                onChange={onSectionAttrChange.bind(null, 'nature')} 
-                value={state.section.nature}>
-                <option></option>
-                <option value="operational">Opérationnelle</option>
-                <option value="tactic">Tactique</option>
-                <option value="strategic">Stratégique</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        
-        <div className="columns">
-          <div className="column">
-            <label className="checkbox">
-              <input type="checkbox"
-                className="is-medium"
-                disabled={readOnly}
-                onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
-                checked={state.section.hasDeadline} />
-              <span className="ml-1 has-text-weight-bold is-size-5">Existe t'il une échéance particulière pour cette décision ?</span>
-            </label>
-            <div className="field">
-              <div className="control">
-                <input disabled={!state.section.hasDeadline}
-                  readOnly={readOnly}
-                  value={state.section.deadline ? asDate(state.section.deadline).toISOString().substr(0, 10) : ''}
-                  onChange={onDeadlineChange}
-                  type="date" className="input is-medium" />
-              </div>
+      </div>
+      
+      <div className="columns">
+        <div className="column">
+          <label className="checkbox">
+            <input type="checkbox"
+              className="is-medium"
+              disabled={readOnly}
+              onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
+              checked={state.section.hasDeadline} />
+            <span className="ml-1 has-text-weight-bold is-size-5">Existe t'il une échéance particulière pour cette décision ?</span>
+          </label>
+          <div className="field">
+            <div className="control">
+              <input disabled={!state.section.hasDeadline}
+                readOnly={readOnly}
+                value={state.section.deadline ? asDate(state.section.deadline).toISOString().substr(0, 10) : ''}
+                onChange={onDeadlineChange}
+                type="date" className="input is-medium" />
             </div>
           </div>
         </div>

client/src/components/DecisionSupportFilePage/DecisionReportSection.tsx

@@ -32,19 +32,17 @@ export const DecisionReportSection: FunctionComponent<DecisionReportSectionProps
 
   return (
     <section>
-      <div className="box">
-        <div className="field">
-          <label className="label is-medium">Compte rendu du vote</label>
-          <div className="control">
-            <textarea className="textarea is-medium"
-              readOnly={readOnly}
-              value={state.section.report}
-              onChange={onSectionAttrChange.bind(null, 'report')}
-              rows={20}>
-            </textarea>
-          </div>
-          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer le résultat du vote et les éléments de contexte liés à la prise de décision.</p>
+      <div className="field">
+        <label className="label is-medium">Compte rendu du vote</label>
+        <div className="control">
+          <textarea className="textarea is-medium"
+            readOnly={readOnly}
+            value={state.section.report}
+            onChange={onSectionAttrChange.bind(null, 'report')}
+            rows={20}>
+          </textarea>
         </div>
+        <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer le résultat du vote et les éléments de contexte liés à la prise de décision.</p>
       </div>
     </section>
   );

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -11,6 +11,7 @@ import { OptionsSection } from './OptionsSection';
 import { useIsAuthorized } from '../../gql/queries/authorization';
 import { TimelinePanel } from './TimelinePanel';
 import { DecisionReportSection } from './DecisionReportSection';
+import { RoutedTabs } from '../RoutedTabs';
 
 export interface DecisionSupportFilePageProps {
 
@@ -30,10 +31,8 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
   const [ state, setState ] = useState({ 
     dsf: newDecisionSupportFile(),
     saved: true,
-    selectedTabIndex: 0,
   });
 
-
   const { isAuthorized } = useIsAuthorized({
     variables: {
       action: 'update',
@@ -48,9 +47,26 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
     setState(state => ({ ...state, dsf: { ...state.dsf, ...dsf }}))
   }, [ decisionSupportFiles ]);
 
-  const selectTab = (tabIndex: number) => {
-    setState(state => ({ ...state, selectedTabIndex: tabIndex }));
-  };
+  const tabs = [
+    {
+      name: "Clarifier la proposition",
+      icon: "fas fa-pen",
+      route: '/info',
+      render: () => (<ClarificationSection readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} />)
+    },
+    {
+      name: "Explorer les options",
+      icon: "fas fa-search",
+      route: '/options',
+      render: () => (<OptionsSection readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} />)
+    },
+    {
+      name: "Prendre la décision",
+      icon: "fas fa-person-booth",
+      route: '/vote',
+      render: () => (<DecisionReportSection readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} />)
+    }
+  ];
 
   const updateDSF = (dsf: DecisionSupportFile) => {
     setState(state => {
@@ -130,46 +146,9 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
         </section>
         <div className="columns mt-3">
           <div className="column is-8">
-            <div className="tabs is-medium is-toggle">
-              <ul>
-                <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 proposition</span>
-                  </a>
-                </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 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>
-                  </a>
-                </li>
-              </ul>
+            <div className="box">
+              <RoutedTabs baseRoute={`/decisions/${id}`} tabs={tabs} />
             </div>
-            {
-              state.selectedTabIndex === 0 ?
-              <ClarificationSection readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} /> :
-              null
-            }
-            {
-              state.selectedTabIndex === 1 ?
-              <OptionsSection readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} /> :
-              null
-            }
-            {
-              state.selectedTabIndex === 2 ?
-              <DecisionReportSection readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} /> :
-              null
-            }
           </div>
           <div className="column is-4">
             <MetadataPanel readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} />

client/src/components/DecisionSupportFilePage/OptionsSection.tsx

@@ -75,8 +75,7 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
 
   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">
+      <h4 id="options-section" className="is-size-4 title is-spaced">Explorer les options</h4>
       <div className="table-container">
             <table className={`table is-bordered is-striped is-hoverable is-fullwidth`}>
                 <thead>
@@ -154,7 +153,6 @@ export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, up
                 </tfoot>
             </table>
         </div>
-      </div>
     </section>
   );
 };

client/src/components/RoutedTabs.tsx

@@ -0,0 +1,79 @@
+import React, { FunctionComponent, ReactNode, useEffect, useState } from 'react';
+import { useHistory, useLocation, useRouteMatch } from 'react-router';
+import { Link } from 'react-router-dom';
+
+export interface Tab {
+  route: string
+  name: string
+  icon ?: string
+  render: (tab: Tab) => ReactNode
+}
+
+export interface RoutedTabsProps {
+  tabs: Tab[]
+  baseRoute?: string
+  defaultTabIndex?: number
+}
+
+
+
+export const RoutedTabs: FunctionComponent<RoutedTabsProps> = ({ tabs, baseRoute, defaultTabIndex }) => {
+  const history = useHistory();
+  const location = useLocation();
+
+  const tabRoute = (route: string): string => {
+    return `${baseRoute}${route}`;
+  };
+
+  const [ selectedTabIndex, setSelectedTabIndex ] = useState(defaultTabIndex || 0);
+  const expectedTab = tabs[selectedTabIndex];
+  const expectedTabRoute = tabRoute(expectedTab.route);
+  
+  let matchExpectedTabRoute = useRouteMatch(expectedTabRoute);
+
+  useEffect(() => {
+    if (matchExpectedTabRoute) return;
+ 
+    const newTabIndex = tabs.findIndex(t => location.pathname === tabRoute(t.route));
+
+    if (newTabIndex !== -1) {
+      selectTab(newTabIndex);
+      return;
+    }
+
+    history.push(expectedTabRoute);
+  }, [matchExpectedTabRoute]);
+
+  const selectTab = (tabIndex: number) => {
+    setSelectedTabIndex(tabIndex);
+    const newTab = tabs[tabIndex];
+    history.push(tabRoute(newTab.route));
+  };
+
+  return (
+    <React.Fragment>
+      <div className="tabs is-medium is-boxed">
+        <ul>
+          {
+            tabs.map((t: Tab, i: number) => {
+              return (
+                <li key={`tab-${i}`} className={`has-background-white ${selectedTabIndex === i ? 'is-active': ''}`}
+                  onClick={selectTab.bind(null, i)}>
+                  <a>
+                    {
+                      t.icon ?
+                      <span className="icon is-small"><i className={t.icon} aria-hidden="true"></i></span> :
+                      null
+                    }
+                    <span>{t.name}</span>
+                  </a>
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
+      { expectedTab.render(expectedTab) }
+    </React.Fragment>
+  );
+}