client/src/components/HomePage/WorkgroupsPanel.tsx

@@ -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)
     }
   ];

client/src/components/WorkgroupPage/MembersPanel.tsx

@@ -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>
           );
         })

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -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">
+                        <button onClick={onCloseWorkgroupClick} className="button is-danger is-medium">
-                          <span>Clôre</span>
+                          <span>Clore</span>
                           <span className="icon"><i className="far fa-times-circle"></i></span>
                         </button>
                       </Fragment> :

client/src/gql/mutations/workgroups.tsx

@@ -74,4 +74,23 @@ 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);
 }