Patient Summary module

Patient Summary page

This is a root page for information about current Patient. Patient summary page has two view types:

  • patient summary roll
  • patient summary table

Patient Summary Table

Patient Summary roll includes following elements:

  • Breadcrumbs
  • Settings modal window
  • Patient anthropometric information block
  • Block with four latest items of Problems, Medications and Allergies
  • Lab results block
  • Events timeline block
  • Vitals chart block
Patient Summary view
Patient Summary Roll
Patient Summary view
Patient Summary Roll

Patient Summary Table

Patient Summary table includes following elements:

  • Breadcrumbs
  • Settings modal window
  • Synopsis grid
Patient Summary view
Patient Summary Page

Synopsis grid contains panels with synopsis for plugins Allergies, Contacts, Medications, Problems, Top Three Things, Vaccinations and ReSPECT. Synopsis is a list of the last four issues for each plugin. Each synopsis returns by the separate API-request.

Click on any of synopsis items redirects user to details page for it. Click on the panel title redirects user to the list for the selected plugin.

Component structure
import React, { Component } from "react";
import get from "lodash/get";
import { connect } from 'react-redux';

import { withStyles } from "@material-ui/core/styles";
import Grid from '@material-ui/core/Grid';

import DashboardCard from "../../common/DashboardCard";
import {
    synopsisAllergiesAction,
    synopsisContactsAction,
    synopsisMedicationsAction,
    synopsisProblemsAction } from "../../actions/synopsisActions";
import { synopsisData, getSynopsisProps } from "./config";
import SettingsDialog from "./SettingsDialog";
import Breadcrumbs from "../../common/Breadcrumbs";
import { themeCommonElements } from "../../../version/config/theme.config";
import { nonCoreSynopsisActions } from "../../../version/config/nonCoreSynopsis";
import { getSummaryContainerStyles } from "./functions";

const styles = theme => ({
    ...
    ...
    ...
});

class PatientSummaryInfo extends Component {

    componentDidMount() {
        if (localStorage.getItem('userId') && localStorage.getItem('username')) {
            this.props.getPatientSynopsis();
        }
    }

    render() {
        const { classes, loading, showMode, showHeadings, location } = this.props;
        const breadcrumbsResource = [
            { url: location.pathname, title: "Patient Summary", isActive: false }
        ];
        const FeedsPanels = get(themeCommonElements, 'feedsPanels', false);
        const RespectPanel = get(themeCommonElements, 'respectPanel', false);
        return (
            <‍Grid className={classes.container} >
                <‍Breadcrumbs resource={breadcrumbsResource} />
                <‍SettingsDialog className={classes.settingsIcon} />
                <‍Grid className={classes.summaryContainer} spacing={16} container>
                    {
                        synopsisData.map((item, key) => {
                            return (
                                <‍DashboardCard
                                        key={key}
                                        showMode={showMode}
                                        showHeadings={showHeadings}
                                        id={item.id}
                                        title={item.title}
                                        list={item.list}
                                        loading={loading}
                                        items={get(this.props, item.list, [])}
                                        icon={item.icon}
                                        {...this.props}
                                />
                            );
                        })
                    }
                    { FeedsPanels && <‍FeedsPanels /> }
                    { RespectPanel && <‍RespectPanel showMode={showMode} {...this.props} /> }
                <‍/Grid>
            <‍/Grid>
        );
    }
}

const mapStateToProps = state => {

    const patientSummaryProps = {
        loading: state.custom.demographics.loading,
        showMode: state.custom.showMode.data,
        showHeadings: state.custom.showHeadings.data,
    };

    const synopsisProps = getSynopsisProps(state);

    return Object.assign({}, patientSummaryProps, synopsisProps);
};

const mapDispatchToProps = dispatch => {

    const coreSynopsisActions = [
        synopsisAllergiesAction,
        synopsisContactsAction,
        synopsisProblemsAction,
        synopsisMedicationsAction,
    ];

    const synopsisActions = coreSynopsisActions.concat(nonCoreSynopsisActions);

    return {
        getPatientSynopsis() {
            synopsisActions.map(item => {
                return dispatch(item.request());
            });
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PatientSummaryInfo));

Patient Allergies synopsis

API URL
  /api/patients/{patientId}/synopsis/allergies
GET data
  {
    heading: "allergies",
    synopsis: [
      0: {...},
      1: {...},
      2: {
        dateCreated: 1560263418000,
        source: "ethercis",
        sourceId: "ethercis-11d2021c-f1a9-4258-800e-9e141b1521b4",
        text: "Adverse reaction to aspirin",
      },
      3: {...},
    ],
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
  }

Patient Contacts synopsis

API URL
  /api/patients/{patientId}/synopsis/contacts
GET data
  {
    heading: "contacts",
    synopsis: [
      0: {...},
      1: {...},
      2: {
        dateCreated: 1560330131000,
        source: "ethercis",
        sourceId: "ethercis-996d182e-89bb-4a0c-9c0e-41f962cf34e5",
        text: "Jimmy Clansy",
      },
      3: {...},
    ],
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
  }

Patient Medications synopsis

API URL
  /api/patients/{patientId}/synopsis/medications
GET data
  {
    heading: "medications",
    synopsis: [
      0: {...},
      1: {...},
      2: {
        dateCreated: 1560332128000,
        source: "ethercis",
        sourceId: "ethercis-f28f0c62-04f4-434c-8f80-f3e7cdcbd425",
        text: "Amoxicillin 500mg capsules",
      },
      3: {...},
    ],
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
  }

Patient Problems/Issues synopsis

API URL
  /api/patients/{patientId}/synopsis/problems
GET data
  {
    heading: "problems",
    synopsis: [
      0: {...},
      1: {...},
      2: {
        dateCreated: 1560332128000,
        source: "ethercis",
        sourceId: "ethercis-f28f0c62-04f4-434c-8f80-f3e7cdcbd425",
        text: "Amoxicillin 500mg capsules",
      },
      3: {...},
    ],
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
  }

Patient Vaccinations synopsis

API URL
  /api/patients/{patientId}/synopsis/vaccinations
GET data
  {
    heading: "vaccinations",
    synopsis: [
      0: {...},
      1: {...},
      2: {
        dateCreated: 1559650691000,
        source: "ethercis",
        sourceId: "ethercis-e57aaa81-18de-44a8-855a-d8bee1149f32",
        text: "Chinese encephalitis",
      },
      3: {...},
    ],
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
  }

Patient Top Three Things synopsis

API URL
  /api/patients/{patientId}/synopsis/top3Things
GET data
  {
    heading: "top3Things",
    synopsis: [
      0: {...},
      1: {...},
      2: {
        dateCreated: 1559911963000,
        source: "ethercis",
        sourceId: "ethercis-884829e1-ea10-42be-809d-b30afd998bc6",
        text: "Allergy to eggs",
      },
      3: {...},
    ],
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
  }