Add sorting to admin panel tables (#5461)

* implemet logout for admin system * implement logout on admin dashboard * implement filter for user table * add sorting to tables * add user role filter * fix type error * fix project sorting * fix icon style * fix admin nav icon * fix /admin/location alter message * fix drawer style * implemet logout for admin system * implement logout on admin dashboard * implement filter for user table * add sorting to tables * add user role filter * fix type error * fix project sorting * fix icon style * fix admin nav icon * fix /admin/location alter message * fix drawer style * center align column headings in project route of admin panel * refactoring remove unwanted code * refactor admin code * fix update location issue Co-authored-by: Zulqarnain Hanif <30355034+zulqarnainhanif@users.noreply.github.com>
EtherealEngine · Mar 15, 2022 · 87a66e9 · 87a66e9
1 parent 540d514
commit 87a66e9
Show file tree

Hide file tree

Showing 37 changed files with 625 additions and 442 deletions.
diff --git a/packages/client-core/src/admin/common/Table.tsx b/packages/client-core/src/admin/common/Table.tsx
@@ -1,12 +1,15 @@
 import React from 'react'
 
+import Box from '@mui/material/Box'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
 import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TablePagination from '@mui/material/TablePagination'
 import TableRow from '@mui/material/TableRow'
+import TableSortLabel from '@mui/material/TableSortLabel'
+import { visuallyHidden } from '@mui/utils'
 
 import { useStyles } from '../styles/ui'
 
@@ -19,30 +22,145 @@ interface Props {
   handlePageChange: (e: unknown, newPage: number) => void
   handleRowsPerPageChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
+type Order = 'asc' | 'desc'
+
+interface Data {
+  calories: number
+  carbs: number
+  fat: number
+  name: string
+  protein: number
+}
+
+interface HeadCell {
+  disablePadding: boolean
+  id: keyof Data
+  label: string
+  align?: 'right'
+  minWidth: any
+}
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1
+  }
+  return 0
+}
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key
+): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy)
+}
+
+function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number])
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0])
+    if (order !== 0) {
+      return order
+    }
+    return a[1] - b[1]
+  })
+  return stabilizedThis.map((el) => el[0])
+}
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void
+  order: Order
+  orderBy: string
+  rowCount: number
+  columns: HeadCell[]
+}
+
+const EnhancedTableHead = (props: EnhancedTableProps) => {
+  const { order, orderBy, onRequestSort, columns } = props
+  const classes = useStyles()
+  const createSortHandler = (property: keyof Data) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property)
+  }
+
+  return (
+    <TableHead>
+      <TableRow>
+        {columns.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.align}
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+            className={classes.tableCellHeader}
+            style={{ minWidth: headCell.minWidth }}
+          >
+            {(headCell.id as any) === 'action' ? (
+              <span>{headCell.label} </span>
+            ) : (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+                classes={{ icon: classes.spanWhite, active: classes.spanWhite }}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  )
+}
 
 const TableComponent = (props: Props) => {
   const classes = useStyles()
   const { rows, column, page, rowsPerPage, count, handlePageChange, handleRowsPerPageChange } = props
+  const [order, setOrder] = React.useState<Order>('asc')
+  const [orderBy, setOrderBy] = React.useState<keyof Data>(column[0].id)
+  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Data) => {
+    const isAsc = orderBy === property && order === 'asc'
+    setOrder(isAsc ? 'desc' : 'asc')
+    setOrderBy(property)
+  }
+
   return (
     <React.Fragment>
       <TableContainer className={classes.tableContainer}>
         <Table stickyHeader aria-label="sticky table">
-          <TableHead>
-            <TableRow>
-              {column.map((column, index) => (
-                <TableCell
-                  key={index}
-                  align={column.align}
-                  style={{ minWidth: column.minWidth }}
-                  className={classes.tableCellHeader}
-                >
-                  {column.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
+          <EnhancedTableHead
+            order={order}
+            orderBy={orderBy}
+            onRequestSort={handleRequestSort}
+            rowCount={rows.length}
+            columns={column}
+          />
           <TableBody>
-            {rows.map((row, rIndex) => {
+            {stableSort(rows, getComparator(order, orderBy))
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row, index) => {
+                return (
+                  <TableRow hover role="checkbox" tabIndex={-1} key={row.name}>
+                    {column.map((column, index) => {
+                      const value = row[column.id]
+                      return (
+                        <TableCell key={index} align={column.align} className={classes.tableCellBody}>
+                          {value}
+                        </TableCell>
+                      )
+                    })}
+                  </TableRow>
+                )
+              })}
+            {/* {rows.map((row, rIndex) => {
               return (
                 <TableRow hover role="checkbox" tabIndex={-1} key={rIndex}>
                   {column.map((column, index) => {
@@ -55,7 +173,7 @@ const TableComponent = (props: Props) => {
                   })}
                 </TableRow>
               )
-            })}
+            })} */}
           </TableBody>
         </Table>
       </TableContainer>

diff --git a/packages/client-core/src/admin/common/variables/projects.ts b/packages/client-core/src/admin/common/variables/projects.ts
@@ -0,0 +1,19 @@
+export interface ProjectColumn {
+  id: 'name' | 'update' | 'invalidate' | 'view' | 'action'
+  label: string
+  minWidth?: number
+  align?: 'right' | 'center'
+}
+
+export const projectsColumns: ProjectColumn[] = [
+  { id: 'name', label: 'name', minWidth: 65 },
+  { id: 'update', label: 'Update', minWidth: 65, align: 'center' },
+  { id: 'invalidate', label: 'Invalidate Cache', minWidth: 65, align: 'center' },
+  { id: 'view', label: 'View Project Files', minWidth: 65, align: 'center' },
+  {
+    id: 'action',
+    label: 'Remove',
+    minWidth: 65,
+    align: 'center'
+  }
+]
diff --git a/packages/client-core/src/admin/common/variables/route.ts b/packages/client-core/src/admin/common/variables/route.ts
@@ -1,5 +1,5 @@
 export interface RouteColumn {
-  id: 'project' | 'route' | 'active'
+  id: 'project' | 'route' | 'action'
   label: string
   minWidth?: number
   align?: 'right'
@@ -9,7 +9,7 @@ export const routeColumns: RouteColumn[] = [
   { id: 'project', label: 'Project', minWidth: 65 },
   { id: 'route', label: 'Route', minWidth: 65 },
   {
-    id: 'active',
+    id: 'action',
     label: 'Active',
     minWidth: 65,
     align: 'right'

diff --git a/packages/client-core/src/admin/common/variables/user.ts b/packages/client-core/src/admin/common/variables/user.ts
@@ -65,3 +65,31 @@ export interface UserTabPanelProps {
   index: any
   value: any
 }
+
+export const userFilterMenu = {
+  elevation: 0,
+  sx: {
+    overflow: 'visible',
+    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+    mt: 1.5,
+    '& .MuiAvatar-root': {
+      width: 32,
+      height: 32,
+      ml: -0.5,
+      mr: 1
+    },
+    bgcolor: 'rgb(58, 65, 73) !important',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      right: 14,
+      width: 10,
+      height: 10,
+      bgcolor: 'rgb(58, 65, 73) !important',
+      transform: 'translateY(-50%) rotate(45deg)',
+      zIndex: 0
+    }
+  }
+}
diff --git a/packages/client-core/src/admin/components/Avatars/AvatarDetail.tsx b/packages/client-core/src/admin/components/Avatars/AvatarDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'

diff --git a/packages/client-core/src/admin/components/Group/CreateGroup.tsx b/packages/client-core/src/admin/components/Group/CreateGroup.tsx
@@ -34,7 +34,6 @@ const CreateGroup = (props: Props) => {
   const classes = useStyles()
   const user = useAuthState().user
   const adminScopeTypeState = useScopeTypeState()
-  const adminScopeTypes = adminScopeTypeState.scopeTypes
   const { t } = useTranslation()
 
   const [state, setState] = useState({

diff --git a/packages/client-core/src/admin/components/Group/EditGroup.tsx b/packages/client-core/src/admin/components/Group/EditGroup.tsx
@@ -32,7 +32,6 @@ const EditGroup = (props: Props) => {
   const { groupAdmin, closeEditModal, closeViewModal } = props
   const user = useAuthState().user
   const adminScopeTypeState = useScopeTypeState()
-  const adminScopeTypes = adminScopeTypeState.scopeTypes
   const { t } = useTranslation()
 
   const [state, setState] = useState({

diff --git a/packages/client-core/src/admin/components/Group/GroupTable.tsx b/packages/client-core/src/admin/components/Group/GroupTable.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 
 import { Group } from '@xrengine/common/src/interfaces/Group'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmModel from '../../common/ConfirmModel'
 import TableComponent from '../../common/Table'
@@ -18,7 +17,6 @@ interface Props {
 
 const GroupTable = (props: Props) => {
   const { search } = props
-  const dispatch = useDispatch()
   const classes = useStyles()
   const user = useAuthState().user
   const [viewModel, setViewModel] = useState(false)

diff --git a/packages/client-core/src/admin/components/Instance/InstanceTable.tsx b/packages/client-core/src/admin/components/Instance/InstanceTable.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { Instance } from '@xrengine/common/src/interfaces/Instance'
 import { Location } from '@xrengine/common/src/interfaces/Location'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmModel from '../../common/ConfirmModel'
 import TableComponent from '../../common/Table'
@@ -26,7 +25,6 @@ interface Props {
  */
 const InstanceTable = (props: Props) => {
   const { search } = props
-  const dispatch = useDispatch()
   const classes = useStyles()
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(INSTNCE_PAGE_LIMIT)

diff --git a/packages/client-core/src/admin/components/Invite/InviteModel.tsx b/packages/client-core/src/admin/components/Invite/InviteModel.tsx
@@ -22,7 +22,6 @@ import makeStyles from '@mui/styles/makeStyles'
 import { InviteService } from '../../../social/services/InviteService'
 import { InviteTypeService } from '../../../social/services/InviteTypeService'
 import { useInviteTypeState } from '../../../social/services/InviteTypeService'
-import { useDispatch } from '../../../store'
 import styles from '../Admin.module.scss'
 
 interface Props {
@@ -103,8 +102,7 @@ const InviteModel = (props: Props) => {
   // const [openInvite ,setOpenInvite] = React.useState(false);
   const [openWarning, setOpenWarning] = React.useState(false)
   const { t } = useTranslation()
-  const [error, setError] = React.useState('')
-  const dispatch = useDispatch()
+
   const handleCloseWarning = (event, reason) => {
     if (reason === 'clickaway') {
       return

diff --git a/packages/client-core/src/admin/components/Invite/ReceivedInvite.tsx b/packages/client-core/src/admin/components/Invite/ReceivedInvite.tsx
@@ -21,7 +21,6 @@ import makeStyles from '@mui/styles/makeStyles'
 
 import { InviteService } from '../../../social/services/InviteService'
 import { INVITE_PAGE_LIMIT, useInviteState } from '../../../social/services/InviteService'
-import { useDispatch } from '../../../store'
 
 interface Props {
   invites: any
@@ -111,7 +110,6 @@ const ReceivedInvite = (props: Props) => {
   const { invites } = props
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(INVITE_PAGE_LIMIT)
-  const dispatch = useDispatch()
   const inviteState = useInviteState()
   const receivedInviteCount = inviteState.receivedInvites.total.value
   const rows = invites.map((el, index) => createData(el.id, el.user.name, el.passcode, el.inviteType))

diff --git a/packages/client-core/src/admin/components/Invite/SentInvite.tsx b/packages/client-core/src/admin/components/Invite/SentInvite.tsx
@@ -23,7 +23,6 @@ import makeStyles from '@mui/styles/makeStyles'
 import { InviteService } from '../../../social/services/InviteService'
 import { useInviteState } from '../../../social/services/InviteService'
 import { INVITE_PAGE_LIMIT } from '../../../social/services/InviteService'
-import { useDispatch } from '../../../store'
 
 interface Props {
   sentInvites?: any
@@ -116,7 +115,6 @@ const SentInvite = (props: Props) => {
   const { invites } = props
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(INVITE_PAGE_LIMIT)
-  const dispatch = useDispatch()
   const inviteState = useInviteState()
   const { t } = useTranslation()
   const sentInviteCount = inviteState.sentInvites.total.value

diff --git a/packages/client-core/src/admin/components/Location/CreateLocation.tsx b/packages/client-core/src/admin/components/Location/CreateLocation.tsx
@@ -151,7 +151,14 @@ const CreateLocation = (props: Props) => {
 
   return (
     <React.Fragment>
-      <Drawer anchor="right" classes={{ paper: classes.paperDrawer }} open={open} onClose={() => handleClose(false)}>
+      <Drawer
+        anchor="right"
+        classes={{ paper: classes.paperDrawer }}
+        open={open}
+        onClose={() => {
+          closeViewModel && closeViewModel(false)
+        }}
+      >
         <Container maxWidth="sm" className={classes.marginTp}>
           <DialogTitle id="form-dialog-title" className={classes.texAlign}>
             {t('admin:components.locationModel.createNewLocation')}
@@ -364,9 +371,9 @@ const CreateLocation = (props: Props) => {
               {t('admin:components.locationModel.lbl-cancel')}
             </Button>
           </DialogActions>
-          <AlertMessage open={openWarning} handleClose={handleCloseWarning} severity="warning" message={error} />
         </Container>
       </Drawer>
+      <AlertMessage open={openWarning} handleClose={handleCloseWarning} severity="warning" message={error} />
     </React.Fragment>
   )
 }