2020-08-26 14:51:53 +02:00
|
|
|
import React, { FunctionComponent, useState, useEffect } from 'react';
|
2020-07-31 18:04:31 +02:00
|
|
|
import { Page } from '../Page';
|
|
|
|
import { ClarificationSection } from './ClarificationSection';
|
|
|
|
import { MetadataPanel } from './MetadataPanel';
|
|
|
|
import { AppendixPanel } from './AppendixPanel';
|
2020-08-05 17:53:52 +02:00
|
|
|
import { DecisionSupportFile, newDecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
|
2020-08-26 14:51:53 +02:00
|
|
|
import { useParams, useHistory } from 'react-router';
|
|
|
|
import { useDecisionSupportFiles } from '../../gql/queries/dsf';
|
|
|
|
import { useCreateDecisionSupportFileMutation, useUpdateDecisionSupportFileMutation } from '../../gql/mutations/dsf';
|
|
|
|
import { useDebounce } from '../../hooks/useDebounce';
|
2020-07-31 18:04:31 +02:00
|
|
|
|
|
|
|
export interface DecisionSupportFilePageProps {
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageProps> = () => {
|
2020-08-05 17:53:52 +02:00
|
|
|
const { id } = useParams();
|
2020-08-26 14:51:53 +02:00
|
|
|
const history = useHistory();
|
|
|
|
const { decisionSupportFiles } = useDecisionSupportFiles({
|
2020-08-05 17:53:52 +02:00
|
|
|
variables:{
|
2020-08-26 14:51:53 +02:00
|
|
|
filter: {
|
|
|
|
ids: id !== 'new' ? [id] : undefined,
|
2020-08-05 17:53:52 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const [ state, setState ] = useState({
|
2020-08-26 14:51:53 +02:00
|
|
|
dsf: newDecisionSupportFile(),
|
|
|
|
saved: true,
|
|
|
|
selectedTabIndex: 0,
|
2020-08-05 17:53:52 +02:00
|
|
|
});
|
2020-08-26 14:51:53 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const dsf = decisionSupportFiles.length > 0 && decisionSupportFiles[0].id === id ? decisionSupportFiles[0] : {};
|
|
|
|
setState(state => ({ ...state, dsf: { ...state.dsf, ...dsf }}))
|
|
|
|
}, [ decisionSupportFiles ]);
|
2020-08-05 17:53:52 +02:00
|
|
|
|
|
|
|
const selectTab = (tabIndex: number) => {
|
|
|
|
setState(state => ({ ...state, selectedTabIndex: tabIndex }));
|
|
|
|
};
|
|
|
|
|
|
|
|
const updateDSF = (dsf: DecisionSupportFile) => {
|
2020-08-26 14:51:53 +02:00
|
|
|
setState(state => {
|
|
|
|
return { ...state, saved: false, dsf: { ...state.dsf, ...dsf } };
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const [ createDecisionSupportFile ] = useCreateDecisionSupportFileMutation();
|
|
|
|
const [ updateDecisionSupportFile ] = useUpdateDecisionSupportFileMutation();
|
|
|
|
|
|
|
|
const saveDSF = () => {
|
|
|
|
const changes = {
|
|
|
|
title: state.dsf.title !== '' ? state.dsf.title : undefined,
|
|
|
|
status: state.dsf.status,
|
|
|
|
workgroupId: state.dsf.workgroup ? state.dsf.workgroup.id : undefined,
|
|
|
|
sections: state.dsf.sections,
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!changes.workgroupId) return;
|
|
|
|
|
|
|
|
if (state.dsf.id === '') {
|
|
|
|
createDecisionSupportFile({
|
|
|
|
variables: { changes },
|
|
|
|
}).then(({ data }) => {
|
|
|
|
history.push(`/decisions/${data.createDecisionSupportFile.id}`);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
updateDecisionSupportFile({
|
|
|
|
variables: { changes, id: state.dsf.id },
|
|
|
|
}).then(({ data }) => {
|
|
|
|
setState(state => {
|
|
|
|
return { ...state, saved: true, dsf: { ...state.dsf, ...data.updateDecisionSupportFile } };
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2020-08-05 17:53:52 +02:00
|
|
|
};
|
|
|
|
|
2020-08-26 14:51:53 +02:00
|
|
|
const canSave = !!state.dsf.workgroup && !state.saved;
|
|
|
|
const isNew = state.dsf.id === '';
|
|
|
|
const isClosed = state.dsf.status === DecisionSupportFileStatus.Closed;
|
2020-08-05 17:53:52 +02:00
|
|
|
|
2020-07-31 18:04:31 +02:00
|
|
|
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>
|
2020-08-26 14:51:53 +02:00
|
|
|
<div className="level-right">
|
|
|
|
<div className="level-item buttons">
|
|
|
|
<button className="button is-medium is-success" disabled={!canSave} onClick={saveDSF}>
|
|
|
|
<span className="icon"><i className="fa fa-save"></i></span>
|
|
|
|
<span>Enregistrer</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-07-31 18:04:31 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div className="columns mt-3">
|
|
|
|
<div className="column is-9">
|
2020-08-05 17:53:52 +02:00
|
|
|
<div className="tabs is-medium is-toggle">
|
2020-07-31 18:04:31 +02:00
|
|
|
<ul>
|
2020-08-05 17:53:52 +02:00
|
|
|
<li className={`has-background-white ${state.selectedTabIndex === 0 ? 'is-active': ''}`}
|
|
|
|
onClick={selectTab.bind(null, 0)}>
|
2020-07-31 18:04:31 +02:00
|
|
|
<a>
|
|
|
|
<span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span>
|
2020-08-13 10:16:00 +02:00
|
|
|
<span>Clarifier la proposition</span>
|
2020-07-31 18:04:31 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
2020-08-05 17:53:52 +02:00
|
|
|
<li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`}
|
|
|
|
onClick={selectTab.bind(null, 1)}>
|
2020-07-31 18:04:31 +02:00
|
|
|
<a>
|
|
|
|
<span className="icon is-small"><i className="fas fa-search" aria-hidden="true"></i></span>
|
|
|
|
<span>Explorer les options</span>
|
|
|
|
</a>
|
|
|
|
</li>
|
2020-08-05 17:53:52 +02:00
|
|
|
<li className={`has-background-white ${state.selectedTabIndex === 2 ? 'is-active': ''}`}
|
|
|
|
onClick={selectTab.bind(null, 2)}>
|
2020-07-31 18:04:31 +02:00
|
|
|
<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>
|
2020-08-05 17:53:52 +02:00
|
|
|
{
|
|
|
|
state.selectedTabIndex === 0 ?
|
|
|
|
<ClarificationSection dsf={state.dsf} updateDSF={updateDSF} /> :
|
|
|
|
null
|
|
|
|
}
|
2020-07-31 18:04:31 +02:00
|
|
|
</div>
|
|
|
|
<div className="column is-3">
|
2020-08-26 14:51:53 +02:00
|
|
|
<MetadataPanel dsf={state.dsf} updateDSF={updateDSF} />
|
2020-07-31 18:04:31 +02:00
|
|
|
<AppendixPanel dsf={state.dsf} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Page>
|
|
|
|
);
|
|
|
|
};
|