Administration list adjustments

Author: modularcoder

src/Administration/Users/UsersList/UsersList.js

@@ -68,6 +68,11 @@ const UsersList = ({ match }) => {
       label: 'Email',
       isSortable: true,
     },
+    {
+      id: 'status',
+      label: 'Status',
+      isSortable: true,
+    },
     {
       id: 'createdAt',
       label: 'Created',

src/Administration/Users/UsersList/UsersListTableItems.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedDate } from 'react-intl'
 import { Link } from 'react-router-dom'
-import { makeStyles, TableCell, TableRow, Avatar } from '@material-ui/core'
+import { makeStyles, TableCell, TableRow, Avatar, Chip } from '@material-ui/core'
 import { Skeleton } from '@material-ui/lab'
 
 import { Edit as EditIcon, Delete as DeleteIcon } from '@material-ui/icons/'
@@ -39,6 +39,9 @@ const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) =>
             <TableCell>
               <Skeleton variant="text" />
             </TableCell>
+            <TableCell>
+              <Skeleton variant="text" />
+            </TableCell>
           </TableRow>
         ))}
       {users.map(row => (
@@ -52,6 +55,14 @@ const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) =>
           <TableCell>{row.lastName}</TableCell>
           <TableCell>{row.username}</TableCell>
           <TableCell>{row.email}</TableCell>
+          <TableCell>
+            <Chip
+              label={row.status}
+              variant="outlined"
+              size="small"
+              color={row.status === 'active' ? 'secondary' : 'default'}
+            />
+          </TableCell>
           <TableCell>
             <FormattedDate
               value={new Date(row.createdAt)}
@@ -81,8 +92,8 @@ UsersListTableItems.propTypes = {}
 
 const useStyles = makeStyles(theme => ({
   link: {
-    color: "inherit"
-  }
+    color: 'inherit',
+  },
 }))
 
 export default UsersListTableItems

src/_api/_mocks/_data/usersData.ts

@@ -14,6 +14,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl: 'https://avatars3.githubusercontent.com/u/3959008?v=3&s=40',
     globalRole: 'admin',
+    status: 'active',
   },
   {
     id: 2,
@@ -23,6 +24,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg',
+    status: 'active',
   },
   {
     id: 3,
@@ -32,6 +34,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NjYzMzE1MV5BMl5BanBnXkFtZTgwNTA4NDY4OTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
+    status: 'active',
   },
   {
     id: 4,
@@ -41,6 +44,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://images-na.ssl-images-amazon.com/images/M/MV5BMTc0MzgxMzQ5N15BMl5BanBnXkFtZTgwMzMzNjkwOTE@._V1_UX172_CR0,0,172,256_AL_.jpg',
+    status: 'active',
   },
   {
     id: 5,
@@ -49,6 +53,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://images-na.ssl-images-amazon.com/images/M/MV5BMTgxMTc1MTYzM15BMl5BanBnXkFtZTgwNzI5NjMwOTE@._V1_UY256_CR16,0,172,256_AL_.jpg',
+    status: 'disabled',
   },
   {
     id: 6,
@@ -58,6 +63,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/women/29.jpg',
     globalRole: 'admin',
+    status: 'active',
   },
   {
     id: 7,
@@ -66,6 +72,7 @@ const list: User[] = [
     username: 'sanders',
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/women/26.jpg',
+    status: 'active',
   },
   {
     id: 8,
@@ -74,6 +81,7 @@ const list: User[] = [
     username: 'scjx',
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/men/87.jpg',
+    status: 'pending',
   },
   {
     id: 9,
@@ -82,13 +90,15 @@ const list: User[] = [
     username: null,
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/men/88.jpg',
+    status: 'pending',
   },
   {
     id: 10,
     firstName: 'Penny',
     lastName: 'Lawrence',
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/women/79.jpg',
+    status: 'active',
   },
   {
     id: 11,
@@ -98,6 +108,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/men/85.jpg',
     globalRole: 'admin',
+    status: 'disabled',
   },
   {
     id: 12,
@@ -107,6 +118,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=3759e09a5b9fbe53088b23c615b6312e',
+    status: 'pending',
   },
   {
     id: 13,
@@ -116,6 +128,7 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://images.unsplash.com/photo-1456327102063-fb5054efe647?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=f05c14dd4db49f08a789e6449604c490',
+    status: 'active',
   },
   {
     id: 14,
@@ -125,13 +138,15 @@ const list: User[] = [
     email: '[email protected]',
     avatarUrl:
       'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=a72ca28288878f8404a795f39642a46f',
+    status: 'active',
   },
   {
     id: 15,
     firstName: 'Lucy',
     lastName: 'Walker',
     email: '[email protected]',
     avatarUrl: 'https://randomuser.me/api/portraits/women/0.jpg',
+    status: 'active',
   },
 ].map(user => {
   const userToOrganization = usersToOrganizationsData.byUserId[user.id] || []

src/_api/_types/User.ts

@@ -18,6 +18,7 @@ export interface UserSubmissionData {
   password?: string
   avatarUrl?: string
   globalRole?: string
+  status?: string
 }
 
 export default interface User extends UserSubmissionData, Entity {