daddy/client/src/components/DecisionSupportFilePage/MetadataPanel.tsx

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 } 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>{asDate(dsf.createdAt).toISOString()}</p>
</div>
</div>
<div className="field">
<div className="label">Voté le</div>
<div className="control">
<p>{dsf.votedAt ? dsf.votedAt : '--'}</p>
</div>
</div>
</div>
</div>
</nav>
);
};