74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}; |