Enable search on staff table

Author: vgeorge

cypress/e2e/organizations/pagination.cy.js

@@ -79,6 +79,11 @@ describe('Organization page', () => {
     cy.get('[data-cy=org-staff-table-pagination]').within(() => {
       cy.contains('Showing 1-3 of 3')
     })
+
+    // Perform search by username
+    cy.get('[data-cy=org-staff-table-search-input]').type('2')
+    cy.get('[data-cy=org-staff-table-search-submit]').click()
+    cy.get('[data-cy=org-staff-table-pagination]').contains('Showing 1-1 of 1')
   })
 
   it('Organization teams and members tables are populated and paginated', () => {
@@ -185,7 +190,7 @@ describe('Organization page', () => {
     // Item from page 2 is present
     cy.get('[data-cy=org-members-table]').contains('User 207')
 
-    // Add search term
+    // Perform search by username
     cy.get('[data-cy=org-members-table-search-input]').type('User 2')
     cy.get('[data-cy=org-members-table-search-submit]').click()
     cy.get('[data-cy=org-members-table-pagination]').contains(

src/models/organization.js

@@ -1,6 +1,6 @@
 const db = require('../lib/db')
 const team = require('./team')
-const { map, prop, includes, has, isNil, propEq, find } = require('ramda')
+const { map, prop, includes, has, isNil } = require('ramda')
 const { unpack, PropertyRequiredError } = require('../../app/lib/utils')
 const { serverRuntimeConfig } = require('../../next.config')
 const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
@@ -91,6 +91,9 @@ async function create(data, osmId) {
 
   if (!data.name) throw new Error('data.name property is required')
 
+  // Cache username
+  await team.resolveMemberNames([osmId])
+
   return db.transaction(async (trx) => {
     const [row] = await trx('organization')
       .insert(data)
@@ -186,6 +189,9 @@ async function removeOwner(id, osmId) {
  * @return {promise}
  */
 async function addManager(id, osmId) {
+  // Cache username
+  await team.resolveMemberNames([osmId])
+
   const isAlreadyManager = await isManager(id, osmId)
 
   // Only ids that are not already in manager list should be added. Duplicate requests should fail silently
@@ -232,6 +238,9 @@ async function removeManager(id, osmId) {
  * @return {promise}
  */
 async function createOrgTeam(organizationId, data, osmId) {
+  // Cache username
+  await team.resolveMemberNames([osmId])
+
   return db.transaction(async (trx) => {
     const record = await team.create(data, osmId, trx)
     await trx('organization_team').insert({
@@ -438,44 +447,54 @@ async function getOrgStaff(options) {
 async function getOrgStaffPaginated(organizationId, options = {}) {
   // Get owners
   let ownerQuery = db('organization_owner')
-    .select(db.raw("organization_id, osm_id, 'owner' as type"))
-    .where('organization_id', organizationId)
+    .join('osm_users', 'organization_owner.osm_id', 'osm_users.id')
+    .select(
+      'organization_owner.organization_id',
+      'organization_owner.osm_id',
+      db.raw("'owner' as type"),
+      'osm_users.name'
+    )
+    .where('organization_owner.organization_id', organizationId)
+
+  // Apply search to owners sub-query
+  if (options.search) {
+    ownerQuery = ownerQuery.whereILike('osm_users.name', `%${options.search}%`)
+  }
 
   // Get managers that are not owners
   let managerQuery = db('organization_manager')
-    .select(db.raw("organization_id, osm_id, 'manager' as type"))
-    .where('organization_id', organizationId)
+    .join('osm_users', 'organization_manager.osm_id', 'osm_users.id')
+    .select(
+      'organization_manager.organization_id',
+      'organization_manager.osm_id',
+      db.raw("'manager' as type"),
+      'osm_users.name'
+    )
+    .where('organization_manager.organization_id', organizationId)
     .whereNotIn(
-      'osm_id',
+      'organization_manager.osm_id',
       db('organization_owner')
-        .select('osm_id')
+        .select('organization_owner.osm_id')
         .where('organization_id', organizationId)
     )
 
-  // Execute query with pagination
-  const result = await ownerQuery.unionAll(managerQuery).paginate({
+  // Apply search managers sub-query
+  if (options.search) {
+    managerQuery = managerQuery.whereILike(
+      'osm_users.name',
+      `%${options.search}%`
+    )
+  }
+
+  // Unite owner and manager queries
+  let staffQuery = ownerQuery.unionAll(managerQuery)
+
+  // Execute staff query with pagination
+  return await staffQuery.paginate({
     isLengthAware: true,
     currentPage: options.page || 1,
     perPage: options.perPage || DEFAULT_PAGE_SIZE,
   })
-
-  // Get osm user meta from ids
-  const osmUsers = await team.resolveMemberNames(
-    result.data.map((m) => m.osm_id)
-  )
-
-  return {
-    ...result,
-    // Apply OSM display names to results
-    data: result.data.map((u) => {
-      const osmUser = find(propEq('id', u.osm_id))(osmUsers)
-      return {
-        ...u,
-        id: u.osm_id,
-        name: osmUser?.name || '',
-      }
-    }),
-  }
 }
 
 /**

src/models/team.js

@@ -344,6 +344,9 @@ async function create(data, osmId, trx) {
     })
   }
 
+  // Cache username
+  await resolveMemberNames([osmId])
+
   return conn.transaction(async (trx) => {
     const [row] = await trx('team')
       .insert(data)

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

@@ -40,14 +40,16 @@ handler.get(
       orgId: Yup.number().required().positive().integer().required(),
       page: Yup.number().min(0).integer(),
       perPage: Yup.number().min(1).max(100).integer(),
+      search: Yup.string(),
     }).required(),
   }),
   async function (req, res) {
-    const { orgId, page, perPage } = req.query
+    const { orgId, page, perPage, search } = req.query
 
     const staff = await Organization.getOrgStaffPaginated(orgId, {
       page,
       perPage,
+      search,
     })
 
     return res.send(staff)

src/pages/organizations/[id]/index.js

@@ -373,6 +373,7 @@ class Organization extends Component {
               </div>
             </Section>
             <UsersTable
+              isSearchable
               type='org-staff'
               orgId={org.data.id}
               onRowClick={(row) => this.openProfileModal(row)}