Skip to content

Visit Summary added to Active visits widget #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 3, 2021
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ import DataTable, {
TableCell,
TableToolbar,
TableToolbarContent,
TableExpandRow,
TableExpandHeader,
} from 'carbon-components-react/es/components/DataTable';
import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
import Pagination from 'carbon-components-react/es/components/Pagination';
import Search from 'carbon-components-react/es/components/Search';
import { useLayoutType, useConfig, usePagination, ConfigurableLink, ExtensionSlot } from '@openmrs/esm-framework';
import { useTranslation } from 'react-i18next';
import { useLayoutType, useConfig, usePagination, ConfigurableLink } from '@openmrs/esm-framework';
import { ActiveVisitRow, fetchActiveVisits } from './active-visits.resource';
import styles from './active-visits.scss';
import dayjs from 'dayjs';
Expand Down Expand Up @@ -70,13 +72,17 @@ const ActiveVisitsTable = (props) => {
const layout = useLayoutType();
const desktopView = layout === 'desktop';
const config = useConfig();
const [currentPage, setCurrentPage] = useState(1);
const [currentPageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 50];
const [loading, setLoading] = useState(true);
const [activeVisits, setActiveVisits] = useState<ActiveVisitRow[]>([]);
const [searchString, setSearchString] = useState('');

const searchResults = useMemo(() => {
if (currentPage != 1) {
setCurrentPage(1);
}
if (searchString && searchString.trim() !== '') {
const search = searchString.toLowerCase();
return activeVisits.filter((activeVisitRow) =>
Expand All @@ -91,7 +97,11 @@ const ActiveVisitsTable = (props) => {
return activeVisits;
}
}, [searchString, activeVisits]);
const { goTo, currentPage, results } = usePagination(searchResults, currentPageSize);
const { goTo, results } = usePagination(searchResults, currentPageSize);

useEffect(() => {
goTo(currentPage);
}, [currentPage]);

useEffect(() => {
const activeVisits = fetchActiveVisits().subscribe((data) => {
Expand All @@ -102,8 +112,9 @@ const ActiveVisitsTable = (props) => {
name: visit?.patient?.person?.display,
gender: visit?.patient?.person?.gender,
age: visit?.patient?.person?.age,
visitType: visit?.visitType.display,
visitType: visit?.visitType?.display,
patientUuid: visit?.patient?.uuid,
visitUuid: visit?.uuid,
}));
setActiveVisits(rowData);
setLoading(false);
Expand All @@ -119,7 +130,7 @@ const ActiveVisitsTable = (props) => {
<h4 className={styles.productiveHeading02}>{t('activeVisits', 'Active Visits')}</h4>
</div>
<DataTable rows={results} headers={headerData} isSortable>
{({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps }) => (
{({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps, getRowProps }) => (
<TableContainer title="" className={styles.tableContainer}>
<TableToolbar>
<TableToolbarContent>
Expand All @@ -131,29 +142,46 @@ const ActiveVisitsTable = (props) => {
/>
</TableToolbarContent>
</TableToolbar>
<Table {...getTableProps()} useZebraStyles>
<Table className={styles.activeVisitsTable} {...getTableProps()} size={desktopView ? 'short' : 'normal'}>
<TableHead>
<TableRow style={{ height: desktopView ? '2rem' : '3rem' }}>
<TableRow>
<TableExpandHeader />
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, ind) => (
<TableRow key={row.id} style={{ height: desktopView ? '2rem' : '3rem' }}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>
{cell.info.header === 'name' ? (
<ConfigurableLink to={`\${openmrsSpaBase}/patient/${results[ind]?.patientUuid}/chart/`}>
{cell.value}
</ConfigurableLink>
) : (
cell.value
)}
</TableCell>
))}
</TableRow>
<React.Fragment key={row.id}>
<TableExpandRow {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>
{cell.info.header === 'name' ? (
<ConfigurableLink to={`\${openmrsSpaBase}/patient/${results[ind]?.patientUuid}/chart/`}>
{cell.value}
</ConfigurableLink>
) : (
cell.value
)}
</TableCell>
))}
</TableExpandRow>
{row.isExpanded && (
<TableRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 1}>
<th colSpan={headers.length + 2}>
<ExtensionSlot
className={styles.visitSummaryContainer}
extensionSlotName="visit-summary-slot"
state={{
visitUuid: results[ind]?.visitUuid,
patientUuid: results[ind]?.patientUuid,
}}
/>
</th>
</TableRow>
)}
</React.Fragment>
))}
</TableBody>
</Table>
Expand All @@ -177,7 +205,7 @@ const ActiveVisitsTable = (props) => {
setPageSize(pageSize);
}
if (page !== currentPage) {
goTo(page);
setCurrentPage(page);
}
}}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource } from '@openmrs/esm-framework';
import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource, Visit } from '@openmrs/esm-framework';
import { take, map } from 'rxjs/operators';

export interface ActiveVisitRow {
Expand All @@ -10,6 +10,7 @@ export interface ActiveVisitRow {
age: string;
visitType: string;
patientUuid: string;
visitUuid: string;
}

export function fetchActiveVisits() {
Expand All @@ -23,5 +24,5 @@ export function fetchActiveVisits() {
},
})
.pipe(take(1))
.pipe(map((response: FetchResponse<{ results: Array<any> }>) => response.data));
.pipe(map((response: FetchResponse<{ results: Array<Visit> }>) => response.data));
}
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,30 @@
display: flex;
align-items: center;
}

.activeVisitsTable tr[data-parent-row]:nth-child(odd) td {
background-color: #ffffff;
}

.activeVisitsTable tbody tr[data-parent-row]:nth-child(even) td {
background-color: #f4f4f4;
}

.visitSummaryContainer {
width: 100%;
max-width: 768px;
margin: 1rem auto;
}

.expandedActiveVisitRow > td > div {
max-height: max-content !important;
}

.expandedActiveVisitRow td {
padding: 0 2rem;
}

.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
padding: 0 1rem;
}

5 changes: 5 additions & 0 deletions packages/esm-active-visits-app/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ function setupOpenMRS() {
slot: 'homepage-widgets-slot',
load: getAsyncLifecycle(() => import('./active-visits-widget/active-visits.component'), options),
},
{
id: 'visit-summary-widget',
slot: 'visit-summary-slot',
load: getAsyncLifecycle(() => import('./visits-summary/visit-detail.component'), options),
},
],
};
}
Expand Down
Loading