-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #116 from Rugute/main
Added patient Care-panel and HIE CR
- Loading branch information
Showing
73 changed files
with
4,964 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
|  | ||
|
|
||
| # ESM Care Panel App | ||
|
|
||
| This repository provides a starting point for creating ampath patient care panels |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| const rootConfig = require('../../jest.config.js'); | ||
|
|
||
| module.exports = rootConfig; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| { | ||
| "name": "@ampath/esm-care-panel-app", | ||
| "version": "5.2.0", | ||
| "description": "Patient care panels microfrontend for the OpenMRS SPA", | ||
| "browser": "dist/ampath-esm-care-panel-app.js", | ||
| "main": "src/index.ts", | ||
| "source": true, | ||
| "license": "MPL-2.0", | ||
| "homepage": "https://github.com/palladiumkenya/ampath-esm-core#readme", | ||
| "scripts": { | ||
| "start": "openmrs develop", | ||
| "serve": "webpack serve --mode=development", | ||
| "debug": "npm run serve", | ||
| "build": "webpack --mode production", | ||
| "analyze": "webpack --mode=production --env.analyze=true", | ||
| "lint": "eslint src --ext ts,tsx", | ||
| "typescript": "tsc", | ||
| "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js", | ||
| "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests", | ||
| "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js", | ||
| "coverage": "yarn test --coverage" | ||
| }, | ||
| "browserslist": [ | ||
| "extends browserslist-config-openmrs" | ||
| ], | ||
| "keywords": [ | ||
| "openmrs" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/palladiumkenya/ampath-esm-core#readme" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/palladiumkenya/ampath-esm-core/issues" | ||
| }, | ||
| "dependencies": { | ||
| "@carbon/react": "^1.42.1", | ||
| "lodash-es": "^4.17.15", | ||
| "react-to-print": "^2.14.13" | ||
| }, | ||
| "peerDependencies": { | ||
| "@openmrs/esm-framework": "5.x", | ||
| "react": "^18.1.0", | ||
| "react-i18next": "11.x", | ||
| "react-router-dom": "6.x", | ||
| "swr": "2.x" | ||
| }, | ||
| "devDependencies": { | ||
| "webpack": "^5.74.0" | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react'; | ||
| import { Tabs, TabList, Tab, TabPanel, TabPanels, Layer, Tile } from '@carbon/react'; | ||
| import { Dashboard, CloudMonitoring, Printer } from '@carbon/react/icons'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import CarePanel from '../care-panel/care-panel.component'; | ||
| import CarePrograms from '../care-programs/care-programs.component'; | ||
| import PatientSummary from '../patient-summary/patient-summary.component'; | ||
|
|
||
| import styles from './care-panel-dashboard.scss'; | ||
|
|
||
| type CarePanelDashboardProps = { patientUuid: string; formEntrySub: any; launchPatientWorkspace: Function }; | ||
|
|
||
| const CarePanelDashboard: React.FC<CarePanelDashboardProps> = ({ | ||
| formEntrySub, | ||
| patientUuid, | ||
| launchPatientWorkspace, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
| return ( | ||
| <Layer className={styles.container}> | ||
| <Tile> | ||
| <div className={styles.desktopHeading}> | ||
| <h4>{t('careProgramsEnrollement', 'Care panel')}</h4> | ||
| </div> | ||
| </Tile> | ||
| <div className={styles.tabs}> | ||
| <Tabs> | ||
| <TabList contained activation="manual" aria-label="List of care panels"> | ||
| <Tab renderIcon={Dashboard}>{t('panelSummary', 'Panel summary')}</Tab> | ||
| <Tab renderIcon={CloudMonitoring}>{t('enrollments', 'Program enrollment')}</Tab> | ||
| </TabList> | ||
| <TabPanels> | ||
| <TabPanel> | ||
| <CarePanel | ||
| patientUuid={patientUuid} | ||
| formEntrySub={formEntrySub} | ||
| launchPatientWorkspace={launchPatientWorkspace} | ||
| /> | ||
| </TabPanel> | ||
| <TabPanel> | ||
| <CarePrograms patientUuid={patientUuid} /> | ||
| </TabPanel> | ||
| </TabPanels> | ||
| </Tabs> | ||
| </div> | ||
| </Layer> | ||
| ); | ||
| }; | ||
|
|
||
| export default CarePanelDashboard; |
32 changes: 32 additions & 0 deletions
32
packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| @use '@carbon/layout'; | ||
| @use '@carbon/type'; | ||
| @use '@carbon/colors'; | ||
| @import '~@openmrs/esm-styleguide/src/vars'; | ||
|
|
||
| .container { | ||
| background-color: colors.$white; | ||
| } | ||
|
|
||
| .tabs { | ||
| margin: 0 layout.$spacing-05; | ||
| } | ||
|
|
||
| .desktopHeading, | ||
| .tabletHeading { | ||
| text-align: left; | ||
| text-transform: capitalize; | ||
|
|
||
| h4 { | ||
| @include type.type-style('heading-compact-02'); | ||
| color: $text-02; | ||
|
|
||
| &:after { | ||
| content: ''; | ||
| display: block; | ||
| width: 2rem; | ||
| padding-top: 3px; | ||
| border-bottom: 0.375rem solid; | ||
| @include brand-03(border-bottom-color); | ||
| } | ||
| } | ||
| } |
82 changes: 82 additions & 0 deletions
82
packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React, { useMemo, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { StructuredListSkeleton, ContentSwitcher, Switch } from '@carbon/react'; | ||
| import styles from './care-panel.scss'; | ||
| import { useEnrollmentHistory } from '../hooks/useEnrollmentHistory'; | ||
| import ProgramSummary from '../program-summary/program-summary.component'; | ||
| import ProgramEnrollment from '../program-enrollment/program-enrollment.component'; | ||
| import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib'; | ||
| import RegimenHistory from '../regimen/regimen-history.component'; | ||
| import first from 'lodash/first'; | ||
| import sortBy from 'lodash/sortBy'; | ||
| import { ErrorState } from '@openmrs/esm-framework'; | ||
| import CarePrograms from '../care-programs/care-programs.component'; | ||
|
|
||
| interface CarePanelProps { | ||
| patientUuid: string; | ||
| formEntrySub: any; | ||
| launchPatientWorkspace: Function; | ||
| } | ||
|
|
||
| type SwitcherItem = { | ||
| index: number; | ||
| name?: string; | ||
| text?: string; | ||
| }; | ||
|
|
||
| const CarePanel: React.FC<CarePanelProps> = ({ patientUuid, formEntrySub, launchPatientWorkspace }) => { | ||
| const { t } = useTranslation(); | ||
| const { isLoading, error, enrollments } = useEnrollmentHistory(patientUuid); | ||
| const switcherHeaders = sortBy(Object.keys(enrollments || {})); | ||
| const [switchItem, setSwitcherItem] = useState<SwitcherItem>({ index: 0 }); | ||
| const patientEnrollments = useMemo( | ||
| () => (isLoading ? [] : enrollments[switchItem?.name || first(switcherHeaders)]), | ||
| [enrollments, isLoading, switchItem?.name, switcherHeaders], | ||
| ); | ||
|
|
||
| if (isLoading) { | ||
| return ( | ||
| <div className={styles.widgetCard}> | ||
| <StructuredListSkeleton role="progressbar" /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if (error) { | ||
| return <ErrorState error={error} headerTitle={t('carePanelError', 'Care panel')} />; | ||
| } | ||
|
|
||
| if (Object.keys(enrollments).length === 0) { | ||
| return ( | ||
| <> | ||
| <EmptyState displayText={t('carePanel', 'care panel')} headerTitle={t('carePanel', 'Care panel')} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={styles.widgetCard}> | ||
| <CardHeader title={t('carePanel', 'Care Panel')}> | ||
| <div className={styles.contextSwitcherContainer}> | ||
| <ContentSwitcher selectedIndex={switchItem?.index} onChange={setSwitcherItem}> | ||
| {switcherHeaders?.map((enrollment) => <Switch key={enrollment} name={enrollment} text={enrollment} />)} | ||
| </ContentSwitcher> | ||
| </div> | ||
| </CardHeader> | ||
| <div style={{ width: '100%', minHeight: '20rem' }}> | ||
| <ProgramSummary patientUuid={patientUuid} programName={switcherHeaders[switchItem?.index]} /> | ||
| <RegimenHistory patientUuid={patientUuid} category={switcherHeaders[switchItem?.index]} /> | ||
| <ProgramEnrollment | ||
| patientUuid={patientUuid} | ||
| programName={switcherHeaders[switchItem?.index]} | ||
| enrollments={patientEnrollments} | ||
| formEntrySub={formEntrySub} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CarePanel; |
45 changes: 45 additions & 0 deletions
45
packages/esm-care-panel-app/src/care-panel/care-panel.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| @use '@carbon/styles/scss/type'; | ||
| @use '@carbon/styles/scss/spacing'; | ||
| @import '~@openmrs/esm-styleguide/src/vars'; | ||
|
|
||
| .bodyShort01 { | ||
| @include type.type-style('body-compact-01'); | ||
| } | ||
|
|
||
| .widgetCard { | ||
| background-color: $ui-background; | ||
| border: 1px solid $ui-03; | ||
| position: relative; | ||
| } | ||
|
|
||
| .contextSwitcherContainer { | ||
| width: 20rem; | ||
| min-width: 60%; | ||
| margin-right: 1rem; | ||
| } | ||
|
|
||
| .desktopContentSwitcher { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .tabletContentSwitcher { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .helperContainer { | ||
| color: $color-gray-70; | ||
| @extend .bodyShort01; | ||
| text-align: left; | ||
| padding-left: 1.3rem; | ||
| } | ||
|
|
||
| .labelRed { | ||
| color: $danger; | ||
| } | ||
|
|
||
| .careProgramContainer { | ||
| margin-top: spacing.$spacing-05; | ||
| & > div { | ||
| padding: 0; | ||
| } | ||
| } |
Oops, something went wrong.