97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
import React, { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
|
|
import { DecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
|
|
import { useWorkgroups } from '../../gql/queries/workgroups';
|
|
import { useUserProfile } from '../../gql/queries/profile';
|
|
import { inWorkgroup } from '../../types/workgroup';
|
|
import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
|
|
import { asDate, formatDate } from '../../util/date';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export interface MetadataPanelProps extends DecisionSupportFileUpdaterProps {};
|
|
|
|
export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf, updateDSF, readOnly }) => {
|
|
const { user } = useUserProfile();
|
|
const { workgroups } = useWorkgroups();
|
|
|
|
const [ userOpenedWorkgroups, setUserOpenedWorkgroups ] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const filtered = workgroups.filter(wg => !wg.closedAt && inWorkgroup(user, wg));
|
|
setUserOpenedWorkgroups(filtered);
|
|
}, [workgroups, user])
|
|
|
|
const onStatusChanged = (evt: ChangeEvent<HTMLSelectElement>) => {
|
|
const status = evt.currentTarget.value as DecisionSupportFileStatus;
|
|
updateDSF({ ...dsf, status });
|
|
};
|
|
|
|
const onWorkgroupChanged = (evt: ChangeEvent<HTMLSelectElement>) => {
|
|
const workgroupId = evt.currentTarget.value;
|
|
const workgroup = workgroups.find(wg => wg.id === workgroupId);
|
|
updateDSF({ ...dsf, workgroup });
|
|
};
|
|
|
|
return (
|
|
<nav className="panel">
|
|
<p className="panel-heading">
|
|
Métadonnées
|
|
</p>
|
|
<div className="panel-block">
|
|
<div style={{width:'100%'}}>
|
|
<div className="field">
|
|
<div className="label">Groupe de travail</div>
|
|
{
|
|
readOnly && dsf.workgroup !== null ?
|
|
<Link to={`/workgroups/${dsf.workgroup.id}`}>{dsf.workgroup.name}</Link> :
|
|
<div className="control is-expanded">
|
|
<div className="select is-fullwidth">
|
|
<select
|
|
disabled={readOnly}
|
|
onChange={onWorkgroupChanged}
|
|
value={dsf.workgroup ? dsf.workgroup.id : ''}>
|
|
<option></option>
|
|
{
|
|
userOpenedWorkgroups.map(wg => {
|
|
return (
|
|
<option key={`wg-${wg.id}`} value={wg.id}>{wg.name}</option>
|
|
);
|
|
})
|
|
}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className="field">
|
|
<div className="label">Statut</div>
|
|
<div className="control is-expanded">
|
|
<div className="select is-fullwidth">
|
|
<select
|
|
disabled={readOnly}
|
|
onChange={onStatusChanged}
|
|
value={dsf.status}>
|
|
<option value="draft">Brouillon</option>
|
|
<option value="ready">Prêt à voter</option>
|
|
<option value="voted">Voté</option>
|
|
<option value="closed">Clôs</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<div className="label">Créé le</div>
|
|
<div className="control">
|
|
<p>{formatDate(dsf.createdAt)}</p>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<div className="label">Voté le</div>
|
|
<div className="control">
|
|
<p>{dsf.votedAt ? formatDate(dsf.votedAt) : '--'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}; |