101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Workgroup } from '../../types/workgroup';
|
|
import { User } from '../../types/user';
|
|
import { Link } from 'react-router-dom';
|
|
import { useWorkgroupsQuery } from '../../gql/queries/workgroups';
|
|
import { useUserProfileQuery } from '../../gql/queries/profile';
|
|
import { Loader } from '../Loader';
|
|
|
|
export function WorkgroupsPanel() {
|
|
const workgroupsQuery = useWorkgroupsQuery();
|
|
const userProfileQuery = useUserProfileQuery();
|
|
const [ state, setState ] = useState({ selectedTab: 0 });
|
|
|
|
const isLoading = userProfileQuery.loading || workgroupsQuery.loading;
|
|
if (isLoading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
let { data: { userProfile }} = userProfileQuery;
|
|
let { data: { workgroups }} = workgroupsQuery;
|
|
|
|
const filterTabs = [
|
|
{
|
|
label: "Mes groupes",
|
|
filter: workgroups => workgroups.filter((wg: Workgroup) => {
|
|
return wg.members.some((u: User) => u.id === userProfile.id);
|
|
})
|
|
},
|
|
{
|
|
label: "Ouverts",
|
|
filter: workgroups => workgroups.filter((wg: Workgroup) => !wg.closedAt)
|
|
},
|
|
{
|
|
label: "Clôs",
|
|
filter: workgroups => workgroups.filter((wg: Workgroup) => !!wg.closedAt)
|
|
}
|
|
];
|
|
|
|
const selectTab = (tabIndex: number) => {
|
|
setState(state => ({ ...state, selectedTab: tabIndex }));
|
|
}
|
|
|
|
|
|
let workgroupsItems = [];
|
|
|
|
workgroupsItems = filterTabs[state.selectedTab].filter(workgroups).map((wg: Workgroup) => {
|
|
return (
|
|
<Link to={`/workgroups/${wg.id}`} key={`wg-${wg.id}`} className="panel-block">
|
|
<span className="panel-icon">
|
|
<i className="fas fa-users" aria-hidden="true"></i>
|
|
</span>
|
|
{wg.name}
|
|
</Link>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<nav className="panel is-info">
|
|
<div className="level panel-heading">
|
|
<div className="level-left">
|
|
<p className="level-item">
|
|
Groupes de travail
|
|
</p>
|
|
</div>
|
|
<div className="level-right">
|
|
<button className="button level-item is-outlined is-info is-inverted">
|
|
<i className="icon fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* <div className="panel-block">
|
|
<p className="control has-icons-left">
|
|
<input className="input" type="text" placeholder="Filtrer..." />
|
|
<span className="icon is-left">
|
|
<i className="fas fa-search" aria-hidden="true"></i>
|
|
</span>
|
|
</p>
|
|
</div> */}
|
|
<p className="panel-tabs">
|
|
{
|
|
filterTabs.map((tab, i) => {
|
|
return (
|
|
<a key={`workgroup-tab-${i}`}
|
|
onClick={selectTab.bind(null, i)}
|
|
className={i === state.selectedTab ? 'is-active' : ''}>
|
|
{tab.label}
|
|
</a>
|
|
)
|
|
})
|
|
}
|
|
</p>
|
|
{
|
|
workgroupsItems.length > 0 ?
|
|
workgroupsItems :
|
|
<a className="panel-block has-text-centered is-block">
|
|
<em>Aucun groupe dans cet catégorie pour l'instant.</em>
|
|
</a>
|
|
}
|
|
</nav>
|
|
)
|
|
} |