From 23838da145ff956b8992220c0e60a1352299d7bc Mon Sep 17 00:00:00 2001 From: Usama Idriss Kakumba Date: Wed, 25 Sep 2024 14:11:11 +0300 Subject: [PATCH 1/2] (feat) extend clinical forms workspace --- .../form-renderer/form-error.component.tsx | 10 +++-- .../form-renderer/form-renderer.component.tsx | 13 ++++-- .../clinical-form-action-button.component.tsx | 11 +++-- .../esm-patient-forms-app/src/constants.ts | 4 -- .../src/forms/form-entry.workspace.tsx | 5 +++ .../src/forms/forms-dashboard.component.tsx | 40 ++++++++++++++----- packages/esm-patient-forms-app/src/index.ts | 4 ++ .../esm-patient-forms-app/src/routes.json | 27 +++++++++++++ 8 files changed, 91 insertions(+), 23 deletions(-) diff --git a/packages/esm-form-engine-app/src/form-renderer/form-error.component.tsx b/packages/esm-form-engine-app/src/form-renderer/form-error.component.tsx index bf8fb2636c..3b17850eb3 100644 --- a/packages/esm-form-engine-app/src/form-renderer/form-error.component.tsx +++ b/packages/esm-form-engine-app/src/form-renderer/form-error.component.tsx @@ -1,19 +1,23 @@ import React from 'react'; import { Button } from '@carbon/react'; import { useTranslation } from 'react-i18next'; -import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib'; +import { clinicalFormsWorkspace, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib'; import styles from './form-error.scss'; interface FormErrorProps { closeWorkspace: () => void; + clinicalFormsWorkspaceName?: string; } -const FormError: React.FC = ({ closeWorkspace }) => { +const FormError: React.FC = ({ + closeWorkspace, + clinicalFormsWorkspaceName = clinicalFormsWorkspace, +}) => { const { t } = useTranslation(); const handleOpenFormList = () => { closeWorkspace(); - launchPatientWorkspace('clinical-forms-workspace'); + launchPatientWorkspace(clinicalFormsWorkspaceName); }; return ( diff --git a/packages/esm-form-engine-app/src/form-renderer/form-renderer.component.tsx b/packages/esm-form-engine-app/src/form-renderer/form-renderer.component.tsx index e1e5419701..47b982d177 100644 --- a/packages/esm-form-engine-app/src/form-renderer/form-renderer.component.tsx +++ b/packages/esm-form-engine-app/src/form-renderer/form-renderer.component.tsx @@ -3,11 +3,14 @@ import { useTranslation } from 'react-i18next'; import { InlineLoading } from '@carbon/react'; import { FormEngine } from '@openmrs/esm-form-engine-lib'; import { showModal, type Visit } from '@openmrs/esm-framework'; -import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib'; +import { + clinicalFormsWorkspace, + type DefaultPatientWorkspaceProps, + launchPatientWorkspace, +} from '@openmrs/esm-patient-common-lib'; import FormError from './form-error.component'; import useFormSchema from '../hooks/useFormSchema'; import styles from './form-renderer.scss'; -import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib'; interface FormRendererProps extends DefaultPatientWorkspaceProps { additionalProps?: Record; @@ -15,6 +18,7 @@ interface FormRendererProps extends DefaultPatientWorkspaceProps { formUuid: string; patientUuid: string; visit?: Visit; + clinicalFormsWorkspaceName?: string; } const FormRenderer: React.FC = ({ @@ -26,6 +30,7 @@ const FormRenderer: React.FC = ({ patientUuid, promptBeforeClosing, visit, + clinicalFormsWorkspaceName = clinicalFormsWorkspace, }) => { const { t } = useTranslation(); const { schema, error, isLoading } = useFormSchema(formUuid); @@ -34,8 +39,8 @@ const FormRenderer: React.FC = ({ const handleCloseForm = useCallback(() => { closeWorkspace(); - !encounterUuid && openClinicalFormsWorkspaceOnFormClose && launchPatientWorkspace('clinical-forms-workspace'); - }, [closeWorkspace, encounterUuid, openClinicalFormsWorkspaceOnFormClose]); + !encounterUuid && openClinicalFormsWorkspaceOnFormClose && launchPatientWorkspace(clinicalFormsWorkspaceName); + }, [closeWorkspace, encounterUuid, openClinicalFormsWorkspaceOnFormClose, clinicalFormsWorkspaceName]); const handleConfirmQuestionDeletion = useCallback(() => { return new Promise((resolve, reject) => { diff --git a/packages/esm-patient-forms-app/src/clinical-form-action-button.component.tsx b/packages/esm-patient-forms-app/src/clinical-form-action-button.component.tsx index 7625eecd31..f3160d4092 100644 --- a/packages/esm-patient-forms-app/src/clinical-form-action-button.component.tsx +++ b/packages/esm-patient-forms-app/src/clinical-form-action-button.component.tsx @@ -1,13 +1,18 @@ import React, { type ComponentProps } from 'react'; import { useTranslation } from 'react-i18next'; import { ActionMenuButton, DocumentIcon, useWorkspaces } from '@openmrs/esm-framework'; -import { launchPatientWorkspace, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib'; -import { formEntryWorkspace, htmlFormEntryWorkspace } from './constants'; +import { + clinicalFormsWorkspace, + formEntryWorkspace, + htmlFormEntryWorkspace, + launchPatientWorkspace, + useLaunchWorkspaceRequiringVisit, +} from '@openmrs/esm-patient-common-lib'; const ClinicalFormActionButton: React.FC = () => { const { t } = useTranslation(); const { workspaces } = useWorkspaces(); - const launchFormsWorkspace = useLaunchWorkspaceRequiringVisit('clinical-forms-workspace'); + const launchFormsWorkspace = useLaunchWorkspaceRequiringVisit(clinicalFormsWorkspace); const formEntryWorkspaces = workspaces.filter((w) => w.name === formEntryWorkspace); const recentlyOpenedForm = formEntryWorkspaces[0]; diff --git a/packages/esm-patient-forms-app/src/constants.ts b/packages/esm-patient-forms-app/src/constants.ts index e860750ce4..18bc7ec43d 100644 --- a/packages/esm-patient-forms-app/src/constants.ts +++ b/packages/esm-patient-forms-app/src/constants.ts @@ -6,7 +6,3 @@ export const customEncounterRepresentation = `custom:(uuid,encounterDatetime,enc export const formEncounterUrl = `${restBaseUrl}/form?v=custom:${customFormRepresentation}`; export const formEncounterUrlPoc = `${restBaseUrl}/form?v=custom:${customFormRepresentation}&q=poc`; - -export const clinicalFormsWorkspace = 'clinical-forms-workspace'; -export const formEntryWorkspace = 'patient-form-entry-workspace'; -export const htmlFormEntryWorkspace = 'patient-html-form-entry-workspace'; diff --git a/packages/esm-patient-forms-app/src/forms/form-entry.workspace.tsx b/packages/esm-patient-forms-app/src/forms/form-entry.workspace.tsx index 89c5b8df61..8cfc527959 100644 --- a/packages/esm-patient-forms-app/src/forms/form-entry.workspace.tsx +++ b/packages/esm-patient-forms-app/src/forms/form-entry.workspace.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { ExtensionSlot, useConnectivity, usePatient } from '@openmrs/esm-framework'; import { + clinicalFormsWorkspace, type DefaultPatientWorkspaceProps, type FormEntryProps, useVisitOrOfflineVisit, @@ -9,10 +10,12 @@ import { interface FormEntryComponentProps extends DefaultPatientWorkspaceProps { mutateForm: () => void; formInfo: FormEntryProps; + clinicalFormsWorkspaceName?: string; } const FormEntry: React.FC = ({ patientUuid, + clinicalFormsWorkspaceName = clinicalFormsWorkspace, closeWorkspace, closeWorkspaceWithSavedChanges, promptBeforeClosing, @@ -47,6 +50,7 @@ const FormEntry: React.FC = ({ }, promptBeforeClosing, additionalProps, + clinicalFormsWorkspaceName, }), [ formUuid, @@ -67,6 +71,7 @@ const FormEntry: React.FC = ({ closeWorkspaceWithSavedChanges, promptBeforeClosing, additionalProps, + clinicalFormsWorkspaceName, ], ); diff --git a/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx b/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx index 048871a8ac..c3d7863c12 100644 --- a/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx +++ b/packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useMemo } from 'react'; import { Tile } from '@carbon/react'; -import { useConfig, useConnectivity, usePatient, ResponsiveWrapper } from '@openmrs/esm-framework'; +import { ResponsiveWrapper, useConfig, useConnectivity, usePatient } from '@openmrs/esm-framework'; import { type DefaultPatientWorkspaceProps, EmptyDataIllustration, @@ -13,12 +13,23 @@ import styles from './forms-dashboard.scss'; import { useForms } from '../hooks/use-forms'; import { useTranslation } from 'react-i18next'; -const FormsDashboard: React.FC = () => { +interface FormsDashboardProps extends DefaultPatientWorkspaceProps { + clinicalFormsWorkspaceName?: string; + formEntryWorkspaceName?: string; + htmlFormEntryWorkspaceName?: string; +} + +const FormsDashboard: React.FC = ({ + patientUuid, + clinicalFormsWorkspaceName, + formEntryWorkspaceName, + htmlFormEntryWorkspaceName, +}) => { const { t } = useTranslation(); const config = useConfig(); const isOnline = useConnectivity(); const htmlFormEntryForms = config.htmlFormEntryForms; - const { patient, patientUuid } = usePatient(); + const { patient, patientUuid: fetchedPatientUuid } = usePatient(patientUuid); const { data: forms, error, mutateForms } = useForms(patientUuid, undefined, undefined, !isOnline, config.orderBy); const { currentVisit } = useVisitOrOfflineVisit(patientUuid); @@ -26,18 +37,29 @@ const FormsDashboard: React.FC = () => { (formUuid: string, encounterUuid: string, formName: string) => { launchFormEntryOrHtmlForms( htmlFormEntryForms, - patientUuid, + fetchedPatientUuid, formUuid, - currentVisit.uuid, + currentVisit?.uuid, encounterUuid, formName, - currentVisit.visitType.uuid, - currentVisit.startDatetime, - currentVisit.stopDatetime, + currentVisit?.visitType.uuid, + currentVisit?.startDatetime, + currentVisit?.stopDatetime, mutateForms, + clinicalFormsWorkspaceName, + formEntryWorkspaceName, + htmlFormEntryWorkspaceName, ); }, - [currentVisit, htmlFormEntryForms, mutateForms, patientUuid], + [ + currentVisit, + htmlFormEntryForms, + mutateForms, + fetchedPatientUuid, + clinicalFormsWorkspaceName, + formEntryWorkspaceName, + htmlFormEntryWorkspaceName, + ], ); const sections = useMemo(() => { diff --git a/packages/esm-patient-forms-app/src/index.ts b/packages/esm-patient-forms-app/src/index.ts index c3ce3231ee..318a928ad2 100644 --- a/packages/esm-patient-forms-app/src/index.ts +++ b/packages/esm-patient-forms-app/src/index.ts @@ -39,6 +39,10 @@ export const patientHtmlFormEntryWorkspace = getAsyncLifecycle( // t('clinicalForms', 'Clinical forms') export const clinicalFormsWorkspace = getAsyncLifecycle(() => import('./forms/forms-dashboard.workspace'), options); +export const clinicalFormsWorkspaceExtension = getAsyncLifecycle( + () => import('./forms/forms-dashboard.workspace'), + options, +); export const clinicalFormActionMenu = getSyncLifecycle(clinicalFormActionMenuComponent, options); diff --git a/packages/esm-patient-forms-app/src/routes.json b/packages/esm-patient-forms-app/src/routes.json index 462af920ab..149deb8675 100644 --- a/packages/esm-patient-forms-app/src/routes.json +++ b/packages/esm-patient-forms-app/src/routes.json @@ -37,6 +37,11 @@ "offline": true, "online": true, "order": 2 + }, + { + "name": "clinical-forms-workspaceExtension", + "component": "clinicalFormsWorkspaceExtension", + "slot": "ward-patient-clinical-forms-workspace-slot" } ], "workspaces": [ @@ -49,6 +54,17 @@ "canHide": true, "width": "wider" }, + { + "name": "ward-patient-form-entry-workspace", + "title": "clinicalForm", + "component": "patientFormEntryWorkspace", + "type": "ward-patient-clinical-form", + "canMaximize": true, + "canHide": false, + "width": "wider", + "hasOwnSidebar": true, + "sidebarFamily": "ward-patient" + }, { "name": "patient-html-form-entry-workspace", "title": "clinicalForm", @@ -58,6 +74,17 @@ "canHide": false, "width": "extra-wide" }, + { + "name": "ward-patient-html-form-entry-workspace", + "title": "clinicalForm", + "component": "patientHtmlFormEntryWorkspace", + "type": "ward-patient-clinical-form", + "canMaximize": true, + "canHide": false, + "width": "extra-wide", + "hasOwnSidebar": true, + "sidebarFamily": "ward-patient" + }, { "name": "clinical-forms-workspace", "title": "clinicalForms", From a1fb8a6c5727462c720f868ac12bf9aa44425342 Mon Sep 17 00:00:00 2001 From: Usama Idriss Kakumba Date: Wed, 25 Sep 2024 14:17:41 +0300 Subject: [PATCH 2/2] (fix) fix failing test --- .../esm-form-engine-app/src/form-renderer/form-error.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/esm-form-engine-app/src/form-renderer/form-error.test.tsx b/packages/esm-form-engine-app/src/form-renderer/form-error.test.tsx index c49a1df181..343ed7e2bc 100644 --- a/packages/esm-form-engine-app/src/form-renderer/form-error.test.tsx +++ b/packages/esm-form-engine-app/src/form-renderer/form-error.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib'; +import { clinicalFormsWorkspace, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib'; import FormError from './form-error.component'; const mocklaunchPatientWorkspace = jest.mocked(launchPatientWorkspace); @@ -46,6 +46,6 @@ describe('FormError', () => { await user.click(link); expect(closeWorkspace).toHaveBeenCalled(); - expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith('clinical-forms-workspace'); + expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith(clinicalFormsWorkspace); }); });