Skip to content

Commit

Permalink
Allow sorting appointments table (#843)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vasharma05
vasharma05 authored Oct 16, 2023
1 parent af7f7b6 commit 45bb277
Showing 1 changed file with 103 additions and 65 deletions.
168 changes: 103 additions & 65 deletions packages/esm-appointments-app/src/home-appointments/appointments-list.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,31 +122,37 @@ const AppointmentsBaseTable = () => {
id: 0,
header: t('dateTime', 'Date and time'),
key: 'dateTime',
isSortable: true,
},
{
id: 1,
header: t('name', 'Patient Name'),
key: 'name',
isSortable: true,
},
{
id: 2,
header: t('identifier', 'Identifier'),
key: 'identifier',
isSortable: true,
},
{
id: 3,
header: t('location', 'Location'),
key: 'location',
isSortable: true,
},
{
id: 4,
header: t('service', 'Service'),
key: 'service',
isSortable: true,
},
{
id: 5,
header: t('actions', 'Actions'),
key: 'actionButton',
isSortable: false,
},
],
[t],
Expand All @@ -161,6 +167,7 @@ const AppointmentsBaseTable = () => {
{appointment.duration}
</span>
),
sortKey: appointment.dateTime,
},
name: {
content: (
Expand All @@ -170,16 +177,19 @@ const AppointmentsBaseTable = () => {
</ConfigurableLink>
</div>
),
sortKey: appointment.name,
},
identifier: {
content: (
<div className={styles.nameContainer}>
<span className={styles.identifier}>{appointment.identifier}</span>
</div>
),
sortKey: appointment.identifier,
},
location: {
content: <span className={styles.statusContainer}>{appointment.location}</span>,
sortKey: appointment.location,
},
service: {
content: (
Expand All @@ -188,6 +198,7 @@ const AppointmentsBaseTable = () => {
{appointment.serviceType}
</span>
),
sortKey: appointment.serviceType,
},
actionButton: {
content: (
Expand All @@ -198,6 +209,30 @@ const AppointmentsBaseTable = () => {
},
}));

const handleSorting = (
cellA: { content: JSX.Element; sortKey: string },
cellB: { content: JSX.Element; sortKey: string },
{
sortDirection,
sortStates,
}: {
sortDirection: 'ASC' | 'DESC' | 'NONE';
sortStates: { ASC: 'ASC'; DESC: 'DESC'; NONE: 'NONE' };
},
) => {
if (sortDirection === sortStates.NONE) {
return 0;
}

if (sortDirection === sortStates.ASC) {
return cellA?.sortKey?.localeCompare(cellB?.sortKey) ?? 0;
}

if (sortDirection === sortStates.DESC) {
return cellB?.sortKey?.localeCompare(cellA?.sortKey) ?? 0;
}
};

if (isLoading) {
return (
<div className={styles.loadingContainer}>
Expand Down Expand Up @@ -245,74 +280,77 @@ const AppointmentsBaseTable = () => {
<DataTable
data-floating-menu-container
headers={tableHeaders}
sortRow={handleSorting}
overflowMenuOnHover={isDesktop(layout)}
rows={tableRows}
size={isDesktop(layout) ? 'xs' : 'md'}
size={isDesktop(layout) ? 'md' : 'lg'}
useZebraStyles={true}>
{({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
<TableContainer className={styles.tableContainer}>
<Table {...getTableProps()} className={styles.appointmentsTable}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })} key={header.id}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => {
return (
<React.Fragment key={row.id}>
<TableRow {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
))}
{fullView && (
<TableCell className={`cds--table-column-menu ${styles.overflowMenu}`}>
<ActionsMenu appointment={filteredAppointments?.[index]} useBahmniUI={useBahmniUI} />
</TableCell>
)}
</TableRow>
</React.Fragment>
);
})}
</TableBody>
</Table>
{rows.length === 0 ? (
<div className={styles.tileContainer}>
<Layer>
<Tile className={styles.tile}>
<div className={styles.tileContent}>
<p className={styles.content}>{t('noAppointmentsToDisplay', 'No appointments to display')}</p>
<p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
</div>
<p className={styles.separator}>{t('or', 'or')}</p>
<AddAppointmentLink />
</Tile>
</Layer>
</div>
) : null}
<Pagination
forwardText="Next page"
backwardText="Previous page"
page={currentPage}
pageSize={currentPageSize}
pageSizes={pageSizes}
totalItems={filteredAppointments.length}
className={styles.pagination}
onChange={({ pageSize, page }) => {
if (pageSize !== currentPageSize) {
setPageSize(pageSize);
}
if (page !== currentPage) {
goTo(page);
}
}}
/>
</TableContainer>
)}
{({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => {
return (
<TableContainer className={styles.tableContainer}>
<Table {...getTableProps()} className={styles.appointmentsTable}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header, isSortable: header.isSortable })} key={header.id}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => {
return (
<React.Fragment key={row.id}>
<TableRow {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
))}
{fullView && (
<TableCell className={`cds--table-column-menu ${styles.overflowMenu}`}>
<ActionsMenu appointment={filteredAppointments?.[index]} useBahmniUI={useBahmniUI} />
</TableCell>
)}
</TableRow>
</React.Fragment>
);
})}
</TableBody>
</Table>
{rows.length === 0 ? (
<div className={styles.tileContainer}>
<Layer>
<Tile className={styles.tile}>
<div className={styles.tileContent}>
<p className={styles.content}>{t('noAppointmentsToDisplay', 'No appointments to display')}</p>
<p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
</div>
<p className={styles.separator}>{t('or', 'or')}</p>
<AddAppointmentLink />
</Tile>
</Layer>
</div>
) : null}
<Pagination
forwardText="Next page"
backwardText="Previous page"
page={currentPage}
pageSize={currentPageSize}
pageSizes={pageSizes}
totalItems={filteredAppointments.length}
className={styles.pagination}
onChange={({ pageSize, page }) => {
if (pageSize !== currentPageSize) {
setPageSize(pageSize);
}
if (page !== currentPage) {
goTo(page);
}
}}
/>
</TableContainer>
);
}}
</DataTable>
</div>
<SeeAllAppointmentsLink />
Expand Down

0 comments on commit 45bb277

Please sign in to comment.