From 5649cd2aad20e0b0119f29ef85c732eb3b42fe58 Mon Sep 17 00:00:00 2001 From: William Petit Date: Mon, 12 Oct 2020 15:58:19 +0200 Subject: [PATCH] Gestion des liens profonds sur les tabs dans la page DAD --- client/src/components/App.tsx | 2 +- .../ClarificationSection.tsx | 158 +++++++++--------- .../DecisionReportSection.tsx | 22 ++- .../DecisionSupportFilePage.tsx | 67 +++----- .../OptionsSection.tsx | 4 +- client/src/components/RoutedTabs.tsx | 79 +++++++++ 6 files changed, 192 insertions(+), 140 deletions(-) create mode 100644 client/src/components/RoutedTabs.tsx diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx index fe5eaea..5c06542 100644 --- a/client/src/components/App.tsx +++ b/client/src/components/App.tsx @@ -45,7 +45,7 @@ export const App: FunctionComponent = () => { - + } /> diff --git a/client/src/components/DecisionSupportFilePage/ClarificationSection.tsx b/client/src/components/DecisionSupportFilePage/ClarificationSection.tsx index 21c1c0a..37e5785 100644 --- a/client/src/components/DecisionSupportFilePage/ClarificationSection.tsx +++ b/client/src/components/DecisionSupportFilePage/ClarificationSection.tsx @@ -49,90 +49,88 @@ export const ClarificationSection: FunctionComponent return (
-
-
- -
- +
+ +
+ +
+
+
+ +
+ +
+

Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.

+
+
+ +
+ +
+

Penser à indiquer si des obligations légales pèsent sur cette prise de décision.

+
+
+ +
+
+
-
- -
- -
-

Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.

-
-
- -
- -
-

Penser à indiquer si des obligations légales pèsent sur cette prise de décision.

-
-
- -
-
- -
+
+
+ +
+
+
-
- -
-
- -
-
-
- -
-
- -
-
- -
+
+ +
+
+ +
+
+
diff --git a/client/src/components/DecisionSupportFilePage/DecisionReportSection.tsx b/client/src/components/DecisionSupportFilePage/DecisionReportSection.tsx index 315bb48..c26ca37 100644 --- a/client/src/components/DecisionSupportFilePage/DecisionReportSection.tsx +++ b/client/src/components/DecisionSupportFilePage/DecisionReportSection.tsx @@ -32,19 +32,17 @@ export const DecisionReportSection: FunctionComponent -
-
- -
- -
-

Penser à indiquer le résultat du vote et les éléments de contexte liés à la prise de décision.

+
+ +
+
+

Penser à indiquer le résultat du vote et les éléments de contexte liés à la prise de décision.

); diff --git a/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx b/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx index 979da13..a4c6962 100644 --- a/client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx +++ b/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 ({ ...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: () => () + }, + { + name: "Explorer les options", + icon: "fas fa-search", + route: '/options', + render: () => () + }, + { + name: "Prendre la décision", + icon: "fas fa-person-booth", + route: '/vote', + render: () => () + } + ]; const updateDSF = (dsf: DecisionSupportFile) => { setState(state => { @@ -130,46 +146,9 @@ export const DecisionSupportFilePage: FunctionComponent
-
- +
+
- { - state.selectedTabIndex === 0 ? - : - null - } - { - state.selectedTabIndex === 1 ? - : - null - } - { - state.selectedTabIndex === 2 ? - : - null - }
diff --git a/client/src/components/DecisionSupportFilePage/OptionsSection.tsx b/client/src/components/DecisionSupportFilePage/OptionsSection.tsx index d44e5e1..f82832c 100644 --- a/client/src/components/DecisionSupportFilePage/OptionsSection.tsx +++ b/client/src/components/DecisionSupportFilePage/OptionsSection.tsx @@ -75,8 +75,7 @@ export const OptionsSection: FunctionComponent = ({ dsf, up return (
-

Explorer les options

-
+

Explorer les options

@@ -154,7 +153,6 @@ export const OptionsSection: FunctionComponent = ({ dsf, up
-
); }; \ No newline at end of file diff --git a/client/src/components/RoutedTabs.tsx b/client/src/components/RoutedTabs.tsx new file mode 100644 index 0000000..8c3407c --- /dev/null +++ b/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 = ({ 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 ( + +
+ +
+ { expectedTab.render(expectedTab) } + + ); +} \ No newline at end of file -- 2.17.1