admin display working somewhat

bcgov · Jun 12, 2024 · 741801b · 741801b
1 parent 9592bf6
commit 741801b
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 92 deletions.
diff --git a/backend/src/admin/admin.service.ts b/backend/src/admin/admin.service.ts
@@ -28,7 +28,6 @@ export class AdminService {
       const returnData: UserInfo[] = [];
       const adminData = adminResponse.data.data;
       adminData.map((admin: IdirUserInfo) => {
-        console.log(admin);
         returnData.push({
           username: admin.attributes.idir_username[0],
           email: admin.email,
@@ -57,8 +56,6 @@ export class AdminService {
           });
         }
       });
-      console.log([...adminData, ...userData]);
-      console.log(adminData[0].attributes);
       return returnData;
     } catch (err) {
       console.log("Error findAll Admin");

diff --git a/frontend/src/common/admin.ts b/frontend/src/common/admin.ts
@@ -1,44 +1,10 @@
+import type { UserInfo } from '@/types/types'
 import config from '../config'
 import * as api from './api'
 
-export async function getUsers(): Promise<any[]> {
+export async function getUsers(): Promise<UserInfo[]> {
   const adminDataUrl: string = `${config.API_BASE_URL}/admin`
-  console.log(adminDataUrl)
   const getParameters = api.generateApiParameters(adminDataUrl)
-  const adminData: any[] = await api.get(getParameters)
+  const adminData: UserInfo[] = await api.get(getParameters)
   return adminData
 }
-
-// export const findIdirUser = async (
-//   email: string,
-// ): Promise<{ foundUserObject: any | null; error: string | null }> => {
-//   const url = `${config.API_BASE_URL}/admin/search-users`
-//   const data = { email }
-//   const postParameters = api.generateApiParameters(url, data)
-//   const response: { userObject: any | null; error: string | null } =
-//     await api.post(postParameters)
-//   return {
-//     foundUserObject: response.userObject || null,
-//     error: response.error || null,
-//   }
-// }
-
-// export const addAdmin = async (
-//   idirUsername: string,
-// ): Promise<{ userObject: any; error: string }> => {
-//   const url = `${config.API_BASE_URL}/admin/add-admin`
-//   const data = { idirUsername }
-//   const postParameters = api.generateApiParameters(url, data)
-//   const response: { userObject: any; error: string } =
-//     await api.post(postParameters)
-//   return response
-// }
-
-// export const removeAdmin = async (
-//   idirUsername: string,
-// ): Promise<{ error: string | null }> => {
-//   const url = `${config.API_BASE_URL}/admin/remove-admin`
-//   const data = { idirUsername }
-//   const postParameters = api.generateApiParameters(url, data)
-//   return api.post(postParameters)
-// }
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
@@ -1,58 +1,41 @@
-// import apiService from '@/service/api-service'
-import _kc from '@/keycloak'
 import type { GridRenderCellParams } from '@mui/x-data-grid'
-import { Link, Dialog, DialogActions, DialogContent, DialogTitle, Button, Typography, Tabs, Tab } from '@mui/material'
+import {
+  Link,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Typography,
+  Tabs,
+  Tab,
+  Select,
+  MenuItem,
+} from '@mui/material'
 import { DataGrid, GridToolbar } from '@mui/x-data-grid'
 import { useEffect, useState } from 'react'
 import { Box } from '@mui/system'
 import { getUsers } from '@/common/admin'
-// import { useState } from 'react'
-// import type { AxiosResponse } from '~/axios'
+import type { UserInfo } from '@/types/types'
+import Roles from '@/roles'
 
 export default function AdminPage() {
   const [open, setOpen] = useState(false)
   const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
   const [selectedTab, setSelectedTab] = useState(0)
+  const [userData, setUserData] = useState<UserInfo[]>([])
 
   useEffect(() => {
     console.log('getting users')
-    fetchUsers()
+    const getUserData = async () => {
+      // setUserData(await getUsers())
+      const users: UserInfo[] = await getUsers()
+      console.log(users[0])
+      setUserData(users)
+    }
+    getUserData()
   }, [])
 
-  const fetchUsers = async () => {
-    const users = await getUsers()
-    console.log('users:', users)
-    return users
-  }
-
-  // const [data, setData] = useState<any>([])
-  const [userData] = useState([
-    {
-      id: 1,
-      name: 'Michael Tennant',
-      username: 'mtennant',
-      email: 'michael@email.com',
-      company: 'Salus Systems',
-      role: 'Admin',
-    },
-    {
-      id: 2,
-      name: 'Test tester',
-      username: 'ttester',
-      email: 'test@email.com',
-      company: 'Test Company',
-      role: 'Data Submitter',
-    },
-    {
-      id: 3,
-      name: 'Harold Ackerman',
-      username: 'hackerman',
-      email: 'hackerman@email.com',
-      company: 'Test Company',
-      role: 'Operational Staff',
-    },
-  ])
-
   const [companyData] = useState([
     {
       id: 'pqr123',
@@ -81,6 +64,9 @@ export default function AdminPage() {
     setSelectedUserId(null)
   }
 
+  const allRoles = [Roles.ENMODS_ADMIN, Roles.ENMODS_USER]
+  console.log(allRoles)
+
   const userColumns = [
     {
       field: 'name',
@@ -104,23 +90,37 @@ export default function AdminPage() {
       sortable: true,
       filterable: true,
       flex: 1,
-      minWidth: 180,
+      minWidth: 240,
     },
     {
       field: 'company',
       headerName: 'Company/Agency',
       sortable: true,
       filterable: true,
       flex: 1,
-      minWidth: 180,
+      minWidth: 170,
     },
     {
       field: 'role',
       headerName: 'User Role',
       sortable: true,
       filterable: true,
       flex: 1,
-      minWidth: 140,
+      minWidth: 170,
+      renderCell: (params: GridRenderCellParams) => {
+        const roles = params.value as string[]
+        console.log(roles)
+
+        return (
+          <Select value={roles[0]}>
+            {allRoles.map((role) => (
+              <MenuItem key={role} value={role}>
+                {role}
+              </MenuItem>
+            ))}
+          </Select>
+        )
+      },
     },
     {
       field: 'revoke',
@@ -191,7 +191,10 @@ export default function AdminPage() {
     },
   ]
 
-  const handleTabChange = (event: React.SyntheticEvent, newValue: number): void => {
+  const handleTabChange = (
+    event: React.SyntheticEvent,
+    newValue: number,
+  ): void => {
     setSelectedTab(newValue)
   }
 
@@ -204,7 +207,11 @@ export default function AdminPage() {
         marginLeft: '4em',
       }}
     >
-      <Tabs value={selectedTab} onChange={handleTabChange} aria-label="admin tabs">
+      <Tabs
+        value={selectedTab}
+        onChange={handleTabChange}
+        aria-label="admin tabs"
+      >
         <Tab
           label="Users"
           style={{
@@ -242,8 +249,8 @@ export default function AdminPage() {
             rows={userData}
             columns={userColumns}
             pageSizeOptions={[5, 10, 20, 50, 100]}
-            getRowId={(row) => row['id']}
-            style={{ minWidth: 920 }}
+            getRowId={(row) => row['username']}
+            style={{ minWidth: 1000 }}
           />
         )}
       </Box>
@@ -275,7 +282,9 @@ export default function AdminPage() {
       <Dialog open={open} onClose={handleClose}>
         <DialogTitle>Revoke User Privileges</DialogTitle>
         <DialogContent sx={{ paddingTop: '24px' }}>
-          <Typography>Are you sure you want to revoke access for this user?</Typography>
+          <Typography>
+            Are you sure you want to revoke access for this user?
+          </Typography>
         </DialogContent>
         <DialogActions sx={{ paddingBottom: '24px' }}>
           <Button
@@ -292,7 +301,12 @@ export default function AdminPage() {
           >
             Cancel
           </Button>
-          <Button color="secondary" onClick={handleConfirmRevoke} variant="contained" autoFocus>
+          <Button
+            color="secondary"
+            onClick={handleConfirmRevoke}
+            variant="contained"
+            autoFocus
+          >
             Confirm
           </Button>
         </DialogActions>

diff --git a/frontend/src/roles.ts b/frontend/src/roles.ts
@@ -1,6 +1,6 @@
 enum Roles {
-    ENMODS_USER = 'Enmods user',
-    ENMODS_ADMIN = "Enmods admin",
+  ENMODS_USER = 'Enmods User',
+  ENMODS_ADMIN = 'Enmods Admin',
 }
 
-export default Roles;
+export default Roles
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
@@ -0,0 +1,10 @@
+/**
+ * Type returned from the frontend for displaying users on Admin page
+ */
+export type UserInfo = {
+  username: string
+  email: string
+  name: string
+  company: string
+  role: string[]
+}