PIMS-668 Users Table

[dbarkowsky]

🎯 Summary

PIMS-668

Changes

• Added table to display users
• Added keywork search component for quicksearch.
• Add select field with quick filtering options
• Added function for downloading Excel file and added button for UsersTable

Testing

In order to test, you'll have to configure the get users endpoint to return some mock data.
Here's what I used for testing:

Expand Me

export const getUsers = async (req: Request, res: Response) => {
  const rows = [
    {
      id: 0,
      firstName: 'Graham',
      lastName: 'Stewart',
      status: 'Active',
      created: '2023-04-02',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 1,
      firstName: 'John',
      lastName: 'Smith',
      status: 'Pending',
      created: '2023-04-02',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 2,
      firstName: 'Alice',
      lastName: 'Johnson',
      status: 'Hold',
      created: '2023-02-03',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 3,
      firstName: 'Bob',
      lastName: 'Anderson',
      status: 'Active',
      created: '2023-04-03',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 4,
      firstName: 'Emma',
      lastName: 'White',
      status: 'Pending',
      created: '2023-06-04',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 5,
      firstName: 'David',
      lastName: 'Taylor',
      status: 'Hold',
      created: '2023-04-04',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 6,
      firstName: 'Sophie',
      lastName: 'Brown',
      status: 'Active',
      created: '2023-04-05',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 7,
      firstName: 'Michael',
      lastName: 'Jones',
      status: 'Pending',
      created: '2023-04-05',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 8,
      firstName: 'Olivia',
      lastName: 'Wilson',
      status: 'Active',
      created: '2023-04-06',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 9,
      firstName: 'Daniel',
      lastName: 'Miller',
      status: 'Hold',
      created: '2023-04-06',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
    {
      id: 10,
      firstName: 'Cotton-Eye',
      lastName: 'Joe',
      status: 'Hold',
      created: '2023-04-06',
      username: 'username@idir',
      email: '[email protected]',
      agency: 'CITZ',
      position: 'Captain',
      role: 'Admin',
      lastLogin: '2024-02-06',
    },
  ];
  return res.status(200).json(rows);
};

🔰 Checklist

• I have read and agree with the following checklist and am following the guidelines in our Code of Conduct document.

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation where required.
• I have tested my changes to the best of my ability.
• My changes generate no new warnings.

[codeclimate]

Code Climate has analyzed commit 6a6f487 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 93.8%.

View more on Code Climate.

[TaylorFries]

Table looks great!
Filtering works as expected, table is responsive to window size, paging works well, and search feature works.
Code looks good and is well documented in my opinion.

[dbarkowsky]

I want to wait to merge this until it has been modified to work with the new API hooks and the recently merged backend code.

[GrahamS-Quartech]

Tested this, all works as expected. Some great new components in here too. I'll hold off on approval if you wanna wire this up to the hooks next though.
Edit: One thing we should decide on is using material-icons or mdi, they're pretty similar so I'm fine with either but we only really need one of these.