Clore un groupe de travail

This commit is contained in:
wpetit 2020-07-23 08:25:19 +02:00
parent 4a340529da
commit e990184a0b
4 changed files with 39 additions and 10 deletions

View File

@ -17,9 +17,9 @@ export function WorkgroupsPanel() {
const filterTabs = [
{
label: "Mes groupes",
label: "Mes groupes en cours",
filter: workgroups => workgroups.filter((wg: Workgroup) => {
return wg.members.some((u: User) => u.id === (userProfile ? userProfile.id : ''));
return wg.closedAt === null && wg.members.some((u: User) => u.id === (userProfile ? userProfile.id : ''));
})
},
{
@ -27,7 +27,7 @@ export function WorkgroupsPanel() {
filter: workgroups => workgroups.filter((wg: Workgroup) => !wg.closedAt)
},
{
label: "Clôs",
label: "Clos",
filter: workgroups => workgroups.filter((wg: Workgroup) => !!wg.closedAt)
}
];

View File

@ -18,7 +18,7 @@ export const MembersPanel: FunctionComponent<MembersPanelProps> = ({ users }) =>
<span className="panel-icon">
<i className="fas fa-user" aria-hidden="true"></i>
</span>
<span>{`${ u.name ? u.name : '' } - `}</span><span className="is-italic">{`${u.email}`}</span>
<span>{`${ u.name ? (u.name + ' - ') : '' }`}</span><span className="is-italic">{`${u.email}`}</span>
</div>
);
})

View File

@ -8,7 +8,7 @@ import { MembersPanel } from './MembersPanel';
import { User } from '../../types/user';
import { InfoPanel } from './InfoPanel';
import { Workgroup } from '../../types/workgroup';
import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation } from '../../gql/mutations/workgroups';
import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation, useCloseWorkgroupMutation } from '../../gql/mutations/workgroups';
export function WorkgroupPage() {
const { id } = useParams();
@ -22,6 +22,7 @@ export function WorkgroupPage() {
const userProfileQuery = useUserProfileQuery();
const [ joinWorkgroup, joinWorkgroupMutation ] = useJoinWorkgroupMutation();
const [ leaveWorkgroup, leaveWorkgroupMutation ] = useLeaveWorkgroupMutation();
const [ closeWorkgroup, closeWorkgroupMutation ] = useCloseWorkgroupMutation();
const [ state, setState ] = useState({
userProfileId: '',
workgroup: {
@ -59,8 +60,17 @@ export function WorkgroupPage() {
});
}
const onCloseWorkgroupClick = () => {
closeWorkgroup({
variables: {
workgroupId: state.workgroup.id,
}
});
}
const isNew = state.workgroup.id === '';
const isWorkgroupMember = state.workgroup.members.some(u => u.id === state.userProfileId);
const isClosed = state.workgroup.closedAt !== null;
return (
<Page title="Groupe de travail">
@ -79,7 +89,7 @@ export function WorkgroupPage() {
<div className="level-item">
<div>
<h2 className="is-size-3 title is-spaced">{state.workgroup.name}</h2>
<h3 className="is-size-5 subtitle">Groupe de travail</h3>
<h3 className="is-size-5 subtitle">Groupe de travail <span className="is-italic">{ isClosed ? '(clos)' : null }</span></h3>
</div>
</div>
}
@ -87,17 +97,17 @@ export function WorkgroupPage() {
<div className="level-right">
<div className="buttons is-right level-item">
{
isNew ? null :
isNew || isClosed ? null :
<Fragment>
{
isWorkgroupMember ?
<Fragment>
<button onClick={onLeaveWorkgroupClick} className="button is-info is-warning is-medium">
<span>Quitter</span>
<span className="icon"><i className="fas fa-user-minus"></i></span>
<span className="icon"><i className="fas fa-sign-out-alt"></i></span>
</button>
<button className="button is-danger is-medium">
<span>Clôre</span>
<button onClick={onCloseWorkgroupClick} className="button is-danger is-medium">
<span>Clore</span>
<span className="icon"><i className="far fa-times-circle"></i></span>
</button>
</Fragment> :

View File

@ -75,3 +75,22 @@ mutation leaveWorkgroup($workgroupId: ID!) {
export function useLeaveWorkgroupMutation() {
return useMutation(MUTATION_LEAVE_WORKGROUP);
}
const MUTATION_CLOSE_WORKGROUP = gql`
mutation closeWorkgroup($workgroupId: ID!) {
closeWorkgroup(workgroupId: $workgroupId) {
id,
name,
createdAt,
closedAt,
members {
id,
name,
email
}
}
}`;
export function useCloseWorkgroupMutation() {
return useMutation(MUTATION_CLOSE_WORKGROUP);
}