Skip to content

Commit

Permalink
Some scaffolidng of basic table but not side panel; story for table i…
Browse files Browse the repository at this point in the history
…ncluded; some mock data generators until endpoint is created
  • Loading branch information
russchristina committed Apr 10, 2024
1 parent c94e30c commit 9b60362
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 53 deletions.
13 changes: 13 additions & 0 deletions apps/app/src/pages/admin/management.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { ManagementTable } from '@weareinreach/ui/components/data-portal/ManagementTable'
import { userManagement } from '@weareinreach/ui/mockData/userManagement'

export const Management = () => {
return (
<ManagementTable
data={userManagement.forUserManagementTable()}
columns={userManagement.forUserManagementColumns()}
></ManagementTable>
)
}

export default Management
1 change: 1 addition & 0 deletions apps/app/src/types/nextjs-routes.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ declare module "nextjs-routes" {
| StaticRoute<"/account/reviews">
| StaticRoute<"/account/saved">
| StaticRoute<"/admin">
| StaticRoute<"/admin/management">
| StaticRoute<"/admin/quicklink/email">
| StaticRoute<"/admin/quicklink">
| StaticRoute<"/admin/quicklink/phone">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default {
component: ManagementTable,
args: {
data: userManagement.forUserManagementTable(),
columns: userManagement.forUserManagementColumns(),
},
} satisfies Meta<typeof ManagementTable>

Expand Down
58 changes: 17 additions & 41 deletions packages/ui/components/data-portal/ManagementTable.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Button, Group, NativeSelect, Stack } from '@mantine/core'
import { Button, Group, NativeSelect, Stack, Text } from '@mantine/core'
import {
MantineReactTable,
type MRT_ColumnDef,
MRT_GlobalFilterTextInput,
type MRT_Icons,
MRT_TablePagination,
Expand All @@ -10,57 +9,32 @@ import {

import { Icon } from '~ui/icon'

type Person = {
name: string
email: string
appUserType: string
role: string
updatedAt: string
createdAt: string
}

type ManagementTableProps = {
data: Person[]
data: Array<object>
columns: Array<object>
}

const columns: MRT_ColumnDef<Person>[] = [
{
accessorKey: 'name',
header: 'Name',
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'appUserType',
header: 'App User Type',
},
{ accessorKey: 'role', header: 'Back-end user type' },
{
accessorKey: 'updatedAt',
header: 'Last updated',
},
{
accessorKey: 'createdAt',
header: 'Created At',
},
]
const useColumns = (props: ManagementTableProps) => {
return props.columns
}

//I'll eventually want to pass in props as the documentation recommends it. -Christina
const customIcons: Partial<MRT_Icons> = {
//TODO: Fill in icons
IconSortAscending: () => <Icon icon={'carbon:chevron-up'} color='black' />,
IconSortDescending: () => <Icon icon={'carbon:chevron-down'} color='black' />,
}

export const ManagementTable = (props: ManagementTableProps) => {
const table = useMantineReactTable<Person>({
columns,
const table = useMantineReactTable({
columns: useColumns(props),
data: props.data,
icons: customIcons,
enableGlobalFilter: true,
enableFilterMatchHighlighting: false,
positionGlobalFilter: 'left',
enableRowSelection: true,
mantineSearchTextInputProps: {
placeholder: 'Enter Name', //label?
placeholder: 'Enter Name',
sx: { minWidth: '734px', height: '48px' },
},
initialState: {
Expand All @@ -80,6 +54,9 @@ export const ManagementTable = (props: ManagementTableProps) => {

return (
<Stack>
<Text size='16px' fw={500} style={{ marginBottom: '-1rem' }}>
Total: {props.data.length}
</Text>
<Group
noWrap={true}
position='left'
Expand All @@ -92,7 +69,6 @@ export const ManagementTable = (props: ManagementTableProps) => {
<NativeSelect
rightSection={<Icon icon='carbon:chevron-down' />}
data={['Data Entry Teams']}
size='xs'
styles={{
root: {
width: '208px',
Expand All @@ -109,7 +85,7 @@ export const ManagementTable = (props: ManagementTableProps) => {
width: '48px',
height: '48px',
padding: '12px',
marginTop: '28px',
marginTop: '10px',
},
label: { color: 'black' },
}}
Expand Down
43 changes: 31 additions & 12 deletions packages/ui/mockData/userManagement.ts
Original file line number Diff line number Diff line change
@@ -1,31 +1,50 @@
import { faker } from '@faker-js/faker'

type Person = {
name: string
email: string
appUserType: string
role: string
updatedAt: string
createdAt: string
}

export const userManagement = {
forUserManagementColumns: () => {
return [
{
accessorKey: 'name',
header: 'Name',
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'appUserType',
header: 'App User Type',
},
{ accessorKey: 'role', header: 'Back-end user type' },
{
accessorKey: 'updatedAt',
header: 'Last updated',
},
{
accessorKey: 'createdAt',
header: 'Created At',
},
]
},
forUserManagementTable: () => {
const totalRecords = 1000
faker.seed(1024)
const data: Person[] = []
const data = []

for (let index = 0; index < totalRecords; index++) {
const name = faker.person.fullName()
const email = `${name.split(' ')[1]}@gmail.com`.toLowerCase()
const updatedAt = Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(faker.date.past())

data.push({
name: name,
email: email,
appUserType: faker.person.jobTitle(),
role: faker.person.jobType(),
updatedAt: Intl.DateTimeFormat('en-US').format(faker.date.past()),
createdAt: Intl.DateTimeFormat('en-US').format(faker.date.past()), //make this make sense logically
updatedAt: updatedAt,
createdAt: Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(
faker.date.past({ refDate: updatedAt })
),
})
}
return data
Expand Down

0 comments on commit 9b60362

Please sign in to comment.