diff --git a/data/patients.json b/data/patients.json index 403d9a1b8..a8669148c 100644 --- a/data/patients.json +++ b/data/patients.json @@ -19,7 +19,7 @@ "genderCode": "F", "ssn": null, "birthDate": "1956-02-16T05:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "ABC12345", "payerName": "PAYER 1" @@ -114,7 +114,7 @@ "genderCode": "F", "ssn": null, "birthDate": "1958-01-19T05:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "12380123", "payerName": "PAYER 4" @@ -133,7 +133,7 @@ "genderCode": "F", "ssn": null, "birthDate": "1955-08-25T04:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "NAD12315", "payerName": "PAYER 5" @@ -190,7 +190,7 @@ "genderCode": "F", "ssn": null, "birthDate": "1935-08-28T04:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "ASD13501", "payerName": "PAYER 2" @@ -247,7 +247,7 @@ "genderCode": "M", "ssn": null, "birthDate": "2017-08-20T04:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "ASDF02389", "payerName": "PAYER 2" @@ -323,7 +323,7 @@ "genderCode": "M", "ssn": null, "birthDate": "1991-02-11T05:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "AFN1098", "payerName": "PAYER 5" @@ -380,7 +380,7 @@ "genderCode": "F", "ssn": null, "birthDate": "1945-03-13T04:00:00.000+0000", - "deathDate": null, + "deathDate": "2018-05-31T15:04:05.999-05:00", "address": null, "subscriberMemberId": "SGTEST2", "payerName": "PAYER 5" diff --git a/packages/table/src/lib/Table.stories.tsx b/packages/table/src/lib/Table.stories.tsx index 4626334fa..0558895d4 100644 --- a/packages/table/src/lib/Table.stories.tsx +++ b/packages/table/src/lib/Table.stories.tsx @@ -4,9 +4,9 @@ import type { Meta, StoryObj } from '@storybook/react'; import { useMemo, useState } from 'react'; import Checkbox from '@mui/material/Checkbox'; -import { visuallyHidden } from '@mui/utils'; -import type { AlertColor } from '@mui/material/Alert'; -import { Chip } from '@availity/mui-chip'; +import { StatusChip, StatusChipProps } from '@availity/mui-chip'; +import { Typography } from '@availity/mui-typography'; +import { visuallyHidden } from '@availity/mui-utils'; import Patients from '../../../../data/patients.json'; import { Patient } from '../../../../data/patient'; import { @@ -21,7 +21,6 @@ import { TablePagination, TableFooter, } from '../index'; -import { Typography } from '@availity/mui-typography'; const meta: Meta = { title: 'Components/Table/Table', @@ -31,15 +30,15 @@ const meta: Meta = { export default meta; -const StatusChip = (status: string) => { - const color: Record = { +const Status = (status: string) => { + const color: Record = { Pending: 'warning', 'Needs Info': 'info', Denied: 'error', Approved: 'success', }; - return ; + return ; }; const dataRows = Patients.data.patientPagination.items.slice(0, 7); @@ -56,6 +55,7 @@ export const _Table: StoryObj = { Payer Patient First Name + Patient Middle Initial Patient Last Name Birth Date @@ -66,6 +66,7 @@ export const _Table: StoryObj = { {row.payerName} {row.firstName} + {row.middleName} {row.lastName} {/* TODO: switch to dayjs */} {new Date(row.birthDate).toLocaleDateString('en-us')} @@ -380,6 +381,10 @@ export const _PaginatedTable: StoryObj = { id: 'birthDate', label: 'Birth Date', }, + { + id: 'deathDate', + label: 'Death Date', + }, { id: 'payerName', label: 'Payer', @@ -431,6 +436,7 @@ export const _PaginatedTable: StoryObj = { {row.firstName} {row.lastName} {new Date(row.birthDate).toLocaleDateString('en-us')} + {row.deathDate && new Date(row.deathDate).toLocaleDateString('en-us')} {row.payerName} ))} diff --git a/packages/table/src/lib/TableCell.test.tsx b/packages/table/src/lib/TableCell.test.tsx index 96b6da551..e95b5eae2 100644 --- a/packages/table/src/lib/TableCell.test.tsx +++ b/packages/table/src/lib/TableCell.test.tsx @@ -6,4 +6,14 @@ describe('TableCell', () => { const { getByText } = render(Test); expect(getByText('Test')).toBeTruthy(); }); + test('should add placeholder to empty cell', () => { + const { getByText } = render(); + expect(getByText('-')).toBeTruthy(); + expect(getByText('No Data')).toBeTruthy(); + }); + test('shouldnt add placeholder to empty cell when disableEmptyPlaceholder is true', () => { + const { queryByText } = render(); + expect(queryByText('-')).toBeNull(); + expect(queryByText('No Data')).toBeNull(); + }); }); diff --git a/packages/table/src/lib/TableCell.tsx b/packages/table/src/lib/TableCell.tsx index 1e79efec6..ab1c122a2 100644 --- a/packages/table/src/lib/TableCell.tsx +++ b/packages/table/src/lib/TableCell.tsx @@ -3,6 +3,7 @@ import { TableCellProps as MuiTableCellProps, TableCellBaseProps, } from '@mui/material/TableCell'; +import { visuallyHidden } from '@availity/mui-utils'; import { ElementType } from 'react'; declare module '@mui/material/TableCell' { @@ -13,8 +14,13 @@ declare module '@mui/material/TableCell' { export type TableCellProps = { component?: ElementType; + /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */ + disableEmptyPlaceholder?: boolean; } & MuiTableCellProps; -export const TableCell = (props: TableCellProps): JSX.Element => { - return ; +export const TableCell = ({disableEmptyPlaceholder = false, children, ...props}: TableCellProps): JSX.Element => { + const isPlaceholderActive = !disableEmptyPlaceholder && !children; + const placeholder = <>
-
No Data
; + + return {isPlaceholderActive ? placeholder : children}; };