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

This commit is contained in:
wpetit 2020-10-05 16:04:10 +02:00
parent a3fa793706
commit 9b8adafe60
4 changed files with 83 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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