Skip to content

Commit

Permalink
Offline Setup for a variety of patient chart widgets (#246)
Browse files Browse the repository at this point in the history
* Added .editorconfig and prettier config.

* Ran prettier.

* Offlineified patient-chart-app and patient-banner-app.

* Render form widget when offline.

* Format webpack configs.

* Offlineified summary extensions of vitals.

* Expose vitals overview in result dashboard when offline.

* Offlineified biometrics.

* formatting

* Offlineified notes.

* Added offline setup to clinical-view.

* Offlineified test-results.

* Added offline setup function to allergies widget.

* Single dev dependency + offline webpack config for all MFs.

* Stats plugin for common-lib.

* Revert common lib changes. Fix medications webpack config.
  • Loading branch information
manuelroemer authored May 6, 2021
1 parent 4c061ab commit 13b6659
Show file tree
Hide file tree
Showing 38 changed files with 844 additions and 593 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@
"webpack": "^4.44.2",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
"webpack-dev-server": "^3.11.0",
"webpack-stats-plugin": "1.0.3"
},
"dependencies": {}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ import { performPatientAllergySearch, Allergy } from './allergy-intolerance.reso

interface AllergiesDetailedSummaryProps {
patient: fhir.Patient;
showAddAllergy: boolean;
}

export default function AllergiesDetailedSummary({ patient }: AllergiesDetailedSummaryProps) {
export default function AllergiesDetailedSummary({ patient, showAddAllergy }: AllergiesDetailedSummaryProps) {
const [patientAllergies, setPatientAllergies] = useState<Array<Allergy>>([]);
const { t } = useTranslation();

Expand All @@ -32,7 +33,7 @@ export default function AllergiesDetailedSummary({ patient }: AllergiesDetailedS
<SummaryCard
name={t('allergies', 'Allergies')}
styles={{ width: '100%' }}
addComponent
addComponent={showAddAllergy}
showComponent={() =>
openWorkspaceTab(AllergyForm, `${t('allergiesForm', 'Allergies Form')}`, {
allergyUuid: null,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ import { performPatientAllergySearch, Allergy } from './allergy-intolerance.reso
interface AllergiesOverviewProps {
basePath: string;
patient: fhir.Patient;
showAddAllergy: boolean;
}

const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient }) => {
const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddAllergy }) => {
const allergiesToShowCount = 5;
const { t } = useTranslation();
const [allergies, setAllergies] = React.useState<Array<Allergy>>(null);
Expand Down Expand Up @@ -77,9 +78,11 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient }) => {
<div>
<div className={styles.allergiesHeader}>
<h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
<Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
{t('add', 'Add')}
</Button>
{showAddAllergy && (
<Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
{t('add', 'Add')}
</Button>
)}
</div>
<TableContainer>
<DataTable rows={rows} headers={headers} isSortable={true} size="short">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,19 @@ interface AllergiesProps {
basePath: string;
patient: fhir.Patient;
patientUuid: string;
showAddAllergy: boolean;
}

export default function Allergies({ basePath, patient, patientUuid }: AllergiesProps) {
export default function Allergies({ basePath, patient, patientUuid, showAddAllergy }: AllergiesProps) {
return (
<AllergiesContext.Provider value={{ patientUuid, patient }}>
<BrowserRouter basename={`${window.spaBase}${basePath}/allergies`}>
<Switch>
<Route exact path="/" component={AllergyDetailedSummary} />
<Route
exact
path="/"
render={() => <AllergyDetailedSummary patient={patient} showAddAllergy={showAddAllergy} />}
/>
<Route exact path="/details/:allergyUuid" component={AllergyRecord} />
</Switch>
</BrowserRouter>
Expand Down
29 changes: 28 additions & 1 deletion packages/esm-patient-allergies-app/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,32 @@
import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
import {
defineConfigSchema,
fhirBaseUrl,
getAsyncLifecycle,
getSyncLifecycle,
messageOmrsServiceWorker,
} from '@openmrs/esm-framework';
import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
import { backendDependencies } from './openmrs-backend-dependencies';
import { dashboardMeta } from './dashboard.meta';

const importTranslation = require.context('../translations', false, /.json$/, 'lazy');

function setupOpenMRS() {
messageOmrsServiceWorker({
type: 'registerDynamicRoute',
pattern: '.+/ws/rest/v1/concept.+',
});

messageOmrsServiceWorker({
type: 'registerDynamicRoute',
pattern: '.+/ws/rest/v1/patient/.+/allergy.+',
});

messageOmrsServiceWorker({
type: 'registerDynamicRoute',
pattern: `.+${fhirBaseUrl}/AllergyIntolerance.+`,
});

const moduleName = '@openmrs/esm-patient-allergies-app';

const options = {
Expand All @@ -24,6 +45,8 @@ function setupOpenMRS() {
meta: {
columnSpan: 2,
},
online: { showAddAllergy: true },
offline: { showAddAllergy: false },
},
{
id: 'allergies-details-widget',
Expand All @@ -32,12 +55,16 @@ function setupOpenMRS() {
meta: {
columnSpan: 1,
},
online: true,
offline: true,
},
{
id: 'allergies-summary-dashboard',
slot: 'patient-chart-dashboard-slot',
load: getSyncLifecycle(createDashboardLink(dashboardMeta), options),
meta: dashboardMeta,
online: { showAddAllergy: true },
offline: { showAddAllergy: false },
},
],
};
Expand Down
79 changes: 42 additions & 37 deletions packages/esm-patient-allergies-app/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,80 +1,85 @@
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const { resolve } = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { StatsWriterPlugin } = require('webpack-stats-plugin');

const { peerDependencies } = require("./package.json");
const { peerDependencies } = require('./package.json');

const filename = 'openmrs-esm-patient-allergies-app.js';
const cssLoader = {
loader: "css-loader",
loader: 'css-loader',
options: {
modules: {
localIdentName:
"esm-patient-allergies__[name]__[local]___[hash:base64:5]"
}
}
localIdentName: 'esm-patient-allergies__[name]__[local]___[hash:base64:5]',
},
},
};

module.exports = (env, argv = {}) => ({
entry: [
resolve(__dirname, "src/set-public-path.ts"),
resolve(__dirname, "src/index.ts")
],
mode: argv.mode || "development",
entry: [resolve(__dirname, 'src/set-public-path.ts'), resolve(__dirname, 'src/index.ts')],
mode: argv.mode || 'development',
output: {
filename: "openmrs-esm-patient-allergies-app.js",
libraryTarget: "system",
path: resolve(__dirname, "dist"),
jsonpFunction: "webpackJsonp_openmrs_esm_patient_allergies_app"
filename,
libraryTarget: 'system',
path: resolve(__dirname, 'dist'),
jsonpFunction: 'webpackJsonp_openmrs_esm_patient_allergies_app',
},
module: {
rules: [
{
parser: {
system: false
}
system: false,
},
},
{
test: /\.m?(js|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ["style-loader", cssLoader]
use: ['style-loader', cssLoader],
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader", cssLoader, "sass-loader"]
use: ['style-loader', cssLoader, 'sass-loader'],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader"
}
]
}
]
loader: 'file-loader',
},
],
},
],
},
devtool: "sourcemap",
devtool: 'sourcemap',
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
'Access-Control-Allow-Origin': '*',
},
disableHostCheck: true
disableHostCheck: true,
},
externals: Object.keys(peerDependencies),
plugins: [
new ForkTsCheckerWebpackPlugin(),
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: env && env.analyze ? "server" : "disabled"
})
analyzerMode: env && env.analyze ? 'server' : 'disabled',
}),
new StatsWriterPlugin({
filename: `${filename}.buildmanifest.json`,
stats: {
all: false,
chunks: true,
},
}),
],
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js"]
}
extensions: ['.tsx', '.ts', '.jsx', '.js'],
},
});
79 changes: 42 additions & 37 deletions packages/esm-patient-appointments-app/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,80 +1,85 @@
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const { resolve } = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { StatsWriterPlugin } = require('webpack-stats-plugin');

const { peerDependencies } = require("./package.json");
const { peerDependencies } = require('./package.json');

const filename = 'openmrs-esm-patient-appointments-app.js';
const cssLoader = {
loader: "css-loader",
loader: 'css-loader',
options: {
modules: {
localIdentName:
"esm-patient-appointments__[name]__[local]___[hash:base64:5]"
}
}
localIdentName: 'esm-patient-appointments__[name]__[local]___[hash:base64:5]',
},
},
};

module.exports = (env, argv = {}) => ({
entry: [
resolve(__dirname, "src/set-public-path.ts"),
resolve(__dirname, "src/index.ts")
],
mode: argv.mode || "development",
entry: [resolve(__dirname, 'src/set-public-path.ts'), resolve(__dirname, 'src/index.ts')],
mode: argv.mode || 'development',
output: {
filename: "openmrs-esm-patient-appointments-app.js",
libraryTarget: "system",
path: resolve(__dirname, "dist"),
jsonpFunction: "webpackJsonp_openmrs_esm_patient_appointments_app"
filename,
libraryTarget: 'system',
path: resolve(__dirname, 'dist'),
jsonpFunction: 'webpackJsonp_openmrs_esm_patient_appointments_app',
},
module: {
rules: [
{
parser: {
system: false
}
system: false,
},
},
{
test: /\.m?(js|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ["style-loader", cssLoader]
use: ['style-loader', cssLoader],
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader", cssLoader, "sass-loader"]
use: ['style-loader', cssLoader, 'sass-loader'],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader"
}
]
}
]
loader: 'file-loader',
},
],
},
],
},
devtool: "sourcemap",
devtool: 'sourcemap',
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
'Access-Control-Allow-Origin': '*',
},
disableHostCheck: true
disableHostCheck: true,
},
externals: Object.keys(peerDependencies),
plugins: [
new ForkTsCheckerWebpackPlugin(),
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: env && env.analyze ? "server" : "disabled"
})
analyzerMode: env && env.analyze ? 'server' : 'disabled',
}),
new StatsWriterPlugin({
filename: `${filename}.buildmanifest.json`,
stats: {
all: false,
chunks: true,
},
}),
],
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js"]
}
extensions: ['.tsx', '.ts', '.jsx', '.js'],
},
});
Loading

0 comments on commit 13b6659

Please sign in to comment.