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' ;
2020-08-28 16:00:36 +02:00
import { OptionsSection } from './OptionsSection' ;
2020-09-10 11:12:58 +02:00
import { useIsAuthorized } from '../../gql/queries/authorization' ;
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
}
2020-09-10 19:27:17 +02:00
} ,
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
2020-09-10 11:12:58 +02:00
const { isAuthorized } = useIsAuthorized ( {
variables : {
action : 'update' ,
object : {
decisionSupportFileId : state.dsf.id ,
}
}
} , id === 'new' ) ;
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 >
2020-09-10 11:12:58 +02:00
< h2 className = "is-size-3 title is-spaced" > { state . dsf . title } < span className = { ` ml-3 tag is-warning is-medium ${ isAuthorized ? 'is-hidden' : '' } ` } > Lecture seule < / span > < / h2 >
2020-07-31 18:04:31 +02:00
< 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" >
2020-09-10 19:27:17 +02:00
{
isAuthorized ?
< 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 > :
null
}
2020-08-26 14:51:53 +02:00
< / 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 ?
2020-09-10 11:12:58 +02:00
< ClarificationSection readOnly = { ! isAuthorized } dsf = { state . dsf } updateDSF = { updateDSF } / > :
2020-08-05 17:53:52 +02:00
null
}
2020-08-28 16:00:36 +02:00
{
state . selectedTabIndex === 1 ?
2020-09-10 11:12:58 +02:00
< OptionsSection readOnly = { ! isAuthorized } dsf = { state . dsf } updateDSF = { updateDSF } / > :
2020-08-28 16:00:36 +02:00
null
}
2020-07-31 18:04:31 +02:00
< / div >
< div className = "column is-3" >
2020-09-10 11:12:58 +02:00
< MetadataPanel readOnly = { ! isAuthorized } dsf = { state . dsf } updateDSF = { updateDSF } / >
2020-07-31 18:04:31 +02:00
< AppendixPanel dsf = { state . dsf } / >
< / div >
< / div >
< / div >
< / Page >
) ;
} ;