implement data table on users page

Author: joshunrau

apps/web/src/routes/_app/admin/groups/index.tsx

@@ -48,11 +48,8 @@ const RouteComponent = () => {
         data={groupsQuery.data}
         rowActions={[
           {
-            label: t({
-              en: 'Manage',
-              fr: 'Gérer'
-            }),
-            onSelect: (row) => setSelectedGroup(row)
+            label: t('common.manage'),
+            onSelect: setSelectedGroup
           }
         ]}
         togglesComponent={() => (

apps/web/src/routes/_app/admin/users/index.tsx

@@ -2,15 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { isAllUndefined, snakeToCamelCase } from '@douglasneuroinformatics/libjs';
 import { estimatePasswordStrength } from '@douglasneuroinformatics/libpasswd';
-import {
-  Button,
-  ClientTable,
-  Dialog,
-  Form,
-  Heading,
-  SearchBar,
-  Sheet
-} from '@douglasneuroinformatics/libui/components';
+import { Button, DataTable, Dialog, Form, Heading, Sheet } from '@douglasneuroinformatics/libui/components';
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { FormTypes } from '@opendatacapture/runtime-core';
 import { $UserPermission } from '@opendatacapture/schemas/core';
@@ -24,7 +16,6 @@ import { PageHeader } from '@/components/PageHeader';
 import { WithFallback } from '@/components/WithFallback';
 import { useDeleteUserMutation } from '@/hooks/useDeleteUserMutation';
 import { groupsQueryOptions, useGroupsQuery } from '@/hooks/useGroupsQuery';
-import { useSearch } from '@/hooks/useSearch';
 import { useUpdateUserMutation } from '@/hooks/useUpdateUserMutation';
 import { usersQueryOptions, useUsersQuery } from '@/hooks/useUsersQuery';
 import { useAppStore } from '@/store';
@@ -276,7 +267,6 @@ const RouteComponent = () => {
   const deleteUserMutation = useDeleteUserMutation();
   const updateUserMutation = useUpdateUserMutation();
   const [selectedUser, setSelectedUser] = useState<null | User>(null);
-  const { filteredData, searchTerm, setSearchTerm } = useSearch(usersQuery.data ?? [], 'username');
 
   const [data, setData] = useState<null | UpdateUserFormInputData>(null);
 
@@ -307,34 +297,16 @@ const RouteComponent = () => {
           })}
         </Heading>
       </PageHeader>
-      <div className="mb-3 flex gap-3">
-        <SearchBar
-          className="grow"
-          data-testid="admin-users-search"
-          placeholder={t({
-            en: 'Search by Username',
-            fr: "Recherche par nom d'utilisateur"
-          })}
-          value={searchTerm}
-          onValueChange={setSearchTerm}
-        />
-        <Button variant="outline">
-          <Link to="/admin/users/create">
-            {t({
-              en: 'Add User',
-              fr: 'Ajouter un utilisateur'
-            })}
-          </Link>
-        </Button>
-      </div>
-      <ClientTable<User>
+      <DataTable
         columns={[
           {
-            field: 'username',
-            label: t('common.username')
+            accessorKey: 'username',
+            header: t('common.username')
           },
           {
-            field: ({ basePermissionLevel }) => {
+            accessorKey: 'basePermissionLevel',
+            cell: (ctx) => {
+              const basePermissionLevel = ctx.getValue() as User['basePermissionLevel'];
               if (!basePermissionLevel) {
                 return t({
                   en: 'None',
@@ -343,14 +315,27 @@ const RouteComponent = () => {
               }
               return t(`common.${snakeToCamelCase(basePermissionLevel)}`);
             },
-            label: t('common.basePermissionLevel')
+            header: t('common.basePermissionLevel')
           }
         ]}
-        data={filteredData}
+        data={usersQuery.data}
         data-testid="admin-users-table"
-        entriesPerPage={15}
-        minRows={15}
-        onEntryClick={setSelectedUser}
+        rowActions={[
+          {
+            label: t('common.manage'),
+            onSelect: setSelectedUser
+          }
+        ]}
+        togglesComponent={() => (
+          <Button variant="outline">
+            <Link to="/admin/users/create">
+              {t({
+                en: 'Add User',
+                fr: 'Ajouter un utilisateur'
+              })}
+            </Link>
+          </Button>
+        )}
       />
       <Sheet.Content className="flex flex-col p-0" data-testid="admin-user-edit-sheet">
         <Sheet.Header className="px-6 pt-6">

apps/web/src/translations/common.json

@@ -77,6 +77,10 @@
     "en": "Insufficient password strength",
     "fr": "Mot de passe trop faible"
   },
+  "manage": {
+    "en": "Manage",
+    "fr": "Gérer"
+  },
   "method": {
     "en": "Method",
     "fr": "Méthode"
@@ -85,6 +89,10 @@
     "en": "Password",
     "fr": "Mot de passe"
   },
+  "passwordsMustMatch": {
+    "en": "Passwords Must Match",
+    "fr": "Les mots de passe doivent correspondre"
+  },
   "personalInfo": {
     "en": "Personal Information",
     "fr": "Renseignements personnels"
@@ -101,10 +109,6 @@
     "en": "Standard",
     "fr": "Standard"
   },
-  "passwordsMustMatch": {
-    "en": "Passwords Must Match",
-    "fr": "Les mots de passe doivent correspondre"
-  },
   "subjectIdentification": {
     "description": {
       "en": "The following items are used to compute a unique identifier that enables consistent cross-session identification.",
@@ -154,5 +158,9 @@
   "usernameExists": {
     "en": "Username already exists",
     "fr": "Le nom d'utilisateur existe déjà"
+  },
+  "view": {
+    "en": "View",
+    "fr": "Voir"
   }
 }

apps/web/src/translations/layout.json

@@ -50,10 +50,6 @@
       "en": "Data Hub",
       "fr": "Centre de données"
     },
-    "upload": {
-      "en": "Upload Data",
-      "fr": "Téléverser les données"
-    },
     "endSession": {
       "en": "End Current Session",
       "fr": "Terminer la session en cours"
@@ -66,6 +62,10 @@
       "en": "Start Session",
       "fr": "Commencer une session"
     },
+    "upload": {
+      "en": "Upload Data",
+      "fr": "Téléverser les données"
+    },
     "viewCurrentSubject": {
       "en": "View Current Subject",
       "fr": "Voir le client actuel"