Add functionality to filter teams by organisation

Author: d-rita

frontend/src/components/teamsAndOrgs/management.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Link } from '@reach/router';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
+import { useFetch } from '../../hooks/UseFetch';
 import { CustomButton } from '../button';
 import { PlusIcon, WasteIcon } from '../svgIcons';
+import { ProjectFilterSelect } from '../projects/filterSelectFields';
 
 export const ViewAllLink = ({ link }: Object) => (
   <Link to={link} className="dib mt2 fr red link">
@@ -53,6 +56,34 @@ export function InviteOnlyBox({ className }: Object) {
   );
 }
 
+export function TeamFilter({ query, setQuery }) {
+  const userDetails = useSelector((state) => state.auth.get('userDetails'));
+  const [orgsError, orgsLoading, organisations] = useFetch(
+    `organisations/?omitManagerList=true${
+      userDetails.role === 'ADMIN' ? '' : `&manager_user_id=${userDetails.id}`
+    }`,
+    userDetails && userDetails.id,
+  );
+
+  const { organisation: orgInQuery } = query;
+
+  return (
+    <ProjectFilterSelect
+      fieldsetName="organisation"
+      fieldsetStyle={'w-20-l w-25-m w-50 ph1 pv2 mh0 v-top bn dib'}
+      titleStyle={'dn'}
+      selectedTag={orgInQuery}
+      options={{
+        isError: orgsError,
+        isLoading: orgsLoading,
+        tags: organisations ? organisations.organisations : [],
+      }}
+      setQueryForChild={setQuery}
+      allQueryParamsForChild={query}
+    />
+  );
+}
+
 export function Management(props) {
   // admin users can switch between all teams/orgs and only their teams/orgs
   return (
@@ -85,7 +116,6 @@ export function Management(props) {
           </div>
         )}
       </div>
-
       <div className="w-100 cf dib">{props.children}</div>
     </div>
   );

frontend/src/components/teamsAndOrgs/teams.js

@@ -4,13 +4,22 @@ import { Link } from '@reach/router';
 import { FormattedMessage } from 'react-intl';
 import ReactPlaceholder from 'react-placeholder';
 import { Form, Field } from 'react-final-form';
+import { useQueryParams, StringParam } from 'use-query-params';
 
 import messages from './messages';
 import { useEditTeamAllowed } from '../../hooks/UsePermissions';
 import { UserAvatar, UserAvatarList } from '../user/avatar';
-import { AddButton, ViewAllLink, Management, VisibilityBox, InviteOnlyBox } from './management';
+import {
+  AddButton,
+  ViewAllLink,
+  Management,
+  VisibilityBox,
+  InviteOnlyBox,
+  TeamFilter,
+} from './management';
 import { SwitchToggle, RadioField, OrganisationSelectInput } from '../formInputs';
 import { Button, EditButton } from '../button';
+import ClearFilters from '../projects/clearFilters';
 
 export function TeamsManagement({
   teams,
@@ -23,6 +32,12 @@ export function TeamsManagement({
     (state) => state.auth.get('organisations') && state.auth.get('organisations').length > 0,
   );
 
+  const [query, setQuery] = useQueryParams({ organisation: StringParam });
+
+  const filteredTeams = query.organisation
+    ? teams.filter((t) => t.organisation === query.organisation)
+    : teams;
+
   return (
     <Management
       title={
@@ -42,8 +57,15 @@ export function TeamsManagement({
       setUserOnly={setUserTeamsOnly}
       userOnlyLabel={<FormattedMessage {...messages.myTeams} />}
     >
-      {teams.length ? (
-        teams.map((team, n) => <TeamCard team={team} key={n} managementView={managementView} />)
+      <div>
+        <TeamFilter query={query} setQuery={setQuery} />
+        <ClearFilters url={'/manage/teams/'} className="v-top mh1 mt1 mt2-ns dib" />
+      </div>
+
+      {filteredTeams.length ? (
+        filteredTeams.map((team, n) => (
+          <TeamCard team={team} key={n} managementView={managementView} />
+        ))
       ) : (
         <div className="pb3 pt2">
           <FormattedMessage {...messages.noTeams} />