Add sort and search to org teams list

Author: vgeorge

cypress/e2e/organizations/pagination.cy.js

@@ -128,6 +128,25 @@ describe('Organization page', () => {
      */
     cy.get('[data-cy=org-teams-table]').contains('Org 1 Team 010')
 
+    // Sort by name
+    cy.get('[data-cy=org-teams-table-head-column-name]').click()
+    cy.get('[data-cy=org-teams-table]')
+      .find('tbody tr:nth-child(4) td:nth-child(1)')
+      .contains('Team 032')
+
+    // Reset sort
+    cy.get('[data-cy=org-teams-table-head-column-name]').click()
+
+    // Perform search by username
+    cy.get('[data-cy=org-teams-table-search-input]').type('02')
+    cy.get('[data-cy=org-teams-table-search-submit]').click()
+    cy.get('[data-cy=org-teams-table-pagination]').contains(
+      'Showing 1-10 of 11'
+    )
+    cy.get('[data-cy=org-teams-table]')
+      .find('tbody tr:nth-child(9) td:nth-child(1)')
+      .contains('Team 027')
+
     // Verify index, then click on last page button
     cy.get('[data-cy=org-teams-table-pagination]').within(() => {
       cy.contains('Showing 1-10 of 35')
@@ -196,7 +215,7 @@ describe('Organization page', () => {
     // Item from page 2 is present
     cy.get('[data-cy=org-members-table]').contains('User 207')
 
-    // Sort by team name
+    // Sort by user name
     cy.get('[data-cy=org-members-table-head-column-name]').click()
     cy.get('[data-cy=org-members-table]')
       .find('tbody tr:nth-child(4) td:nth-child(1)')

src/components/tables/teams.js

@@ -5,11 +5,25 @@ import join from 'url-join'
 import { useFetchList } from '../../hooks/use-fetch-list'
 import { useState } from 'react'
 import Pagination from '../pagination'
+import SearchInput from './search-input'
+import qs from 'qs'
 
 const APP_URL = process.env.APP_URL
 
 function TeamsTable({ type, orgId }) {
   const [page, setPage] = useState(1)
+  const [search, setSearch] = useState(null)
+  const [sort, setSort] = useState({
+    key: 'name',
+    direction: 'asc',
+  })
+
+  const querystring = qs.stringify({
+    search,
+    page,
+    sort: sort.key,
+    order: sort.direction,
+  })
 
   let apiBasePath
   let emptyMessage
@@ -33,22 +47,32 @@ function TeamsTable({ type, orgId }) {
   const {
     result: { data, pagination },
     isLoading,
-  } = useFetchList(`${apiBasePath}?page=${page}`)
+  } = useFetchList(`${apiBasePath}?${querystring}`)
 
-  const columns = [{ key: 'name' }, { key: 'members' }]
+  const columns = [
+    { key: 'name', sortable: true },
+    { key: 'members', sortable: true },
+  ]
 
   return (
     <>
+      <SearchInput
+        data-cy={`${type}-table`}
+        onSearch={(search) => {
+          // Reset to page 1 and search
+          setPage(1)
+          setSearch(search)
+        }}
+      />
       <Table
         data-cy={`${type}-table`}
         rows={data}
         columns={columns}
         emptyPlaceHolder={isLoading ? 'Loading...' : emptyMessage}
+        sort={sort}
+        setSort={setSort}
         onRowClick={(row) => {
-          Router.push(
-            join(APP_URL, `/team?id=${row.id}`),
-            join(APP_URL, `/teams/${row.id}`)
-          )
+          Router.push(join(APP_URL, `/teams/${row.id}`))
         }}
       />
       {pagination?.total > 0 && (

src/models/team.js

@@ -197,7 +197,12 @@ async function count({ organizationId }) {
  * @return {Promise[Array]}
  **/
 async function paginatedList(options = {}) {
-  const { bbox, osmId, organizationId, page, includePrivate } = options
+  const currentPage = options?.page || 1
+  const sort = options?.sort || 'name'
+  const order = options?.order || 'asc'
+  const perPage = options?.perPage || DEFAULT_PAGE_SIZE
+
+  const { bbox, osmId, organizationId, includePrivate } = options
   const st = knexPostgis(db)
 
   let query = db('team').select(
@@ -206,6 +211,11 @@ async function paginatedList(options = {}) {
     db('member').count().whereRaw('team.id = member.team_id').as('members')
   )
 
+  // Apply search
+  if (options.search) {
+    query = query.whereILike('name', `%${options.search}%`)
+  }
+
   if (!includePrivate) {
     query.where('privacy', 'public')
   }
@@ -230,13 +240,13 @@ async function paginatedList(options = {}) {
     )
   }
 
-  // Always sort by team name
-  query = query.orderBy('name')
+  // Apply sort
+  query = query.orderBy(sort, order)
 
   return query.paginate({
     isLengthAware: true,
-    currentPage: page || 1,
-    perPage: DEFAULT_PAGE_SIZE,
+    currentPage,
+    perPage,
   })
 }
 

src/pages/api/organizations/[orgId]/teams.js

@@ -96,17 +96,25 @@ handler.get(
     query: Yup.object({
       orgId: Yup.number().required().positive().integer(),
       page: Yup.number().min(0).integer(),
+      perPage: Yup.number().min(1).max(100).integer(),
+      search: Yup.string(),
+      sort: Yup.mixed().oneOf(['name', 'members']),
+      order: Yup.mixed().oneOf(['asc', 'desc']),
     }).required(),
   }),
   async function (req, res) {
-    const { orgId, page } = req.query
+    const { orgId, page, perPage, search, sort, order } = req.query
     const {
       org: { isMember, isOwner, isManager },
     } = req
     return res.send(
       await Team.paginatedList({
         organizationId: orgId,
         page,
+        perPage,
+        search,
+        sort,
+        order,
         includePrivate: isMember || isManager || isOwner,
       })
     )