Ajout du suivi des opérations spécifiques dans les vues DAD et GdT

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -9,6 +9,7 @@ import { useDecisionSupportFiles } from '../../gql/queries/dsf';
 import { useCreateDecisionSupportFileMutation, useUpdateDecisionSupportFileMutation } from '../../gql/mutations/dsf';
 import { OptionsSection } from './OptionsSection';
 import { useIsAuthorized } from '../../gql/queries/authorization';
+import { TimelinePanel } from './TimelinePanel';
 
 export interface DecisionSupportFilePageProps {
 
@@ -127,7 +128,7 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
           </div>
         </section>
         <div className="columns mt-3">
-          <div className="column is-9">
+          <div className="column is-8">
             <div className="tabs is-medium is-toggle">
               <ul>
                 <li className={`has-background-white ${state.selectedTabIndex === 0 ? 'is-active': ''}`}
@@ -164,9 +165,10 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
               null
             }
           </div>
-          <div className="column is-3">
+          <div className="column is-4">
             <MetadataPanel readOnly={!isAuthorized} dsf={state.dsf} updateDSF={updateDSF} />
             <AppendixPanel dsf={state.dsf} />
+            <TimelinePanel dsf={state.dsf} />
           </div>
         </div>
       </div>

client/src/components/DecisionSupportFilePage/TimelinePanel.tsx

@@ -0,0 +1,36 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+import { Timeline } from '../Timeline';
+import { useEvents } from '../../gql/queries/event';
+
+export interface TimelinePanelProps {
+  dsf: DecisionSupportFile,
+};
+
+export const TimelinePanel: FunctionComponent<TimelinePanelProps> = ({ dsf }) => {
+  const { events } = useEvents({
+    variables: {
+      filter: {
+        objectType: 'dsf',
+        objectId: dsf.id
+      }
+    }
+  });
+
+  return (
+    <div className="panel">
+      <p className="level panel-heading mb-0">
+        <div className="level-left">
+          <div className="level-item">
+          Suivi des opérations
+          </div>
+        </div>
+        <div className="level-right">
+        </div>
+      </p>
+      <div className="panel-block">
+        <Timeline events={events} />
+      </div>
+    </div>
+  );
+};

client/src/components/WorkgroupPage/TimelinePanel.tsx

@@ -0,0 +1,37 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+import { Timeline } from '../Timeline';
+import { useEvents } from '../../gql/queries/event';
+import { Workgroup } from '../../types/workgroup';
+
+export interface TimelinePanelProps {
+  workgroup: Workgroup,
+};
+
+export const TimelinePanel: FunctionComponent<TimelinePanelProps> = ({ workgroup }) => {
+  const { events } = useEvents({
+    variables: {
+      filter: {
+        objectType: 'workgroup',
+        objectId: workgroup.id
+      }
+    }
+  });
+
+  return (
+    <div className="panel">
+      <p className="level panel-heading mb-0">
+        <div className="level-left">
+          <div className="level-item">
+          Suivi des opérations
+          </div>
+        </div>
+        <div className="level-right">
+        </div>
+      </p>
+      <div className="panel-block">
+        <Timeline events={events} />
+      </div>
+    </div>
+  );
+};

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -9,6 +9,7 @@ import { User } from '../../types/user';
 import { InfoPanel } from './InfoPanel';
 import { Workgroup } from '../../types/workgroup';
 import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation, useCloseWorkgroupMutation } from '../../gql/mutations/workgroups';
+import { TimelinePanel } from './TimelinePanel';
 
 export function WorkgroupPage() {
   const { id } = useParams();
@@ -134,12 +135,15 @@ export function WorkgroupPage() {
             </div>
           </div>
           <div className="columns">
-            <div className="column">
+            <div className="column is-4">
               <InfoPanel workgroup={state.workgroup as Workgroup} />
             </div>
-            <div className="column">
+            <div className="column is-4">
               <MembersPanel users={state.workgroup.members as User[]} />
             </div>
+            <div className="column is-4">
+              <TimelinePanel workgroup={state.workgroup} />
+            </div>
           </div>
         </section>
       </div>