@openmrs/esm-patient-notes-app 11.3.0 → 11.3.1-patch.9310

package/src/notes/visit-notes-form.workspace.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames';
 import dayjs from 'dayjs';
 import { debounce } from 'lodash-es';
-import { useTranslation, type TFunction } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import { useSWRConfig } from 'swr';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -36,13 +37,14 @@ import {
   useConfig,
   useLayoutType,
   useSession,
+  Workspace2,
   type Encounter,
   type UploadedFile,
 } from '@openmrs/esm-framework';
 import {
   invalidateVisitAndEncounterData,
+  type PatientWorkspace2DefinitionProps,
   useAllowedFileExtensions,
-  type DefaultPatientWorkspaceProps,
 } from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../config-schema';
 import type { Concept, Diagnosis, DiagnosisPayload, VisitNotePayload } from '../types';
@@ -91,18 +93,15 @@ const createSchema = (t: TFunction) => {
   });
 };
 
-interface VisitNotesFormProps extends DefaultPatientWorkspaceProps {
+export interface VisitNotesFormProps {
   encounter?: Encounter;
   formContext: 'creating' | 'editing';
 }
 
-const VisitNotesForm: React.FC<VisitNotesFormProps> = ({
+const VisitNotesForm: React.FC<PatientWorkspace2DefinitionProps<VisitNotesFormProps, {}>> = ({
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  patientUuid,
-  promptBeforeClosing,
-  encounter,
-  formContext = 'creating',
+  workspaceProps: { formContext, encounter },
+  groupProps: { patientUuid },
 }) => {
   const isEditing: boolean = Boolean(formContext === 'editing' && encounter?.id);
   const searchTimeoutInMs = 500;
@@ -167,10 +166,6 @@ const VisitNotesForm: React.FC<VisitNotesFormProps> = ({
     },
   });
 
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
-
   useEffect(() => {
     if (encounter?.diagnoses?.length) {
       try {
@@ -456,7 +451,7 @@ const VisitNotesForm: React.FC<VisitNotesFormProps> = ({
             mutateAttachments();
           }
 
-          closeWorkspaceWithSavedChanges();
+          closeWorkspace({ discardUnsavedChanges: true });
 
           showSnackbar({
             isLowContrast: true,
@@ -478,7 +473,7 @@ const VisitNotesForm: React.FC<VisitNotesFormProps> = ({
     },
     [
       clinicianEncounterRole,
-      closeWorkspaceWithSavedChanges,
+      closeWorkspace,
       combinedDiagnoses,
       encounter?.diagnoses,
       encounter?.id,
@@ -501,240 +496,242 @@ const VisitNotesForm: React.FC<VisitNotesFormProps> = ({
   const onError = (errors) => console.error(errors);
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
-      <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
-
-      {isTablet && (
-        <Row className={styles.headerGridRow}>
-          <ExtensionSlot name="visit-form-header-slot" className={styles.dataGridRow} state={memoizedState} />
-        </Row>
-      )}
+    <Workspace2 title={t('visitNoteWorkspaceTitle', 'Visit note')} hasUnsavedChanges={isDirty}>
+      <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
 
-      <div className={styles.formContainer}>
-        <Stack gap={2}>
-          {isTablet ? <h2 className={styles.heading}>{t('addVisitNote', 'Add a visit note')}</h2> : null}
-          <Row className={styles.row}>
-            <Column sm={1}>
-              <span className={styles.columnLabel}>{t('date', 'Date')}</span>
-            </Column>
-            <Column sm={3}>
-              <Controller
-                name="noteDate"
-                control={control}
-                render={({ field, fieldState }) => (
-                  <ResponsiveWrapper>
-                    <OpenmrsDatePicker
-                      {...field}
-                      data-testid="visitDateTimePicker"
-                      id="visitDateTimePicker"
-                      invalid={Boolean(fieldState?.error?.message)}
-                      invalidText={fieldState?.error?.message}
-                      isDisabled={isEditing}
-                      labelText={t('visitDate', 'Visit date')}
-                      maxDate={new Date()}
-                    />
-                  </ResponsiveWrapper>
-                )}
-              />
-            </Column>
+        {isTablet && (
+          <Row className={styles.headerGridRow}>
+            <ExtensionSlot name="visit-form-header-slot" className={styles.dataGridRow} state={memoizedState} />
           </Row>
-          <div className={styles.diagnosesText}>
-            {selectedPrimaryDiagnoses && selectedPrimaryDiagnoses.length ? (
-              <>
-                {selectedPrimaryDiagnoses.map((diagnosis, index) => (
-                  <Tag
-                    className={styles.tag}
-                    filter
-                    key={index}
-                    onClose={() => handleRemoveDiagnosis(diagnosis, 'primaryInputSearch')}
-                    type="red"
-                  >
-                    {diagnosis.display}
-                  </Tag>
-                ))}
-              </>
-            ) : null}
-            {selectedSecondaryDiagnoses && selectedSecondaryDiagnoses.length ? (
-              <>
-                {selectedSecondaryDiagnoses.map((diagnosis, index) => (
-                  <Tag
-                    className={styles.tag}
-                    filter
-                    key={index}
-                    onClose={() => handleRemoveDiagnosis(diagnosis, 'secondaryInputSearch')}
-                    type="blue"
-                  >
-                    {diagnosis.display}
-                  </Tag>
-                ))}
-              </>
-            ) : null}
-            {selectedPrimaryDiagnoses &&
-              !selectedPrimaryDiagnoses.length &&
-              selectedSecondaryDiagnoses &&
-              !selectedSecondaryDiagnoses.length && (
-                <span>{t('emptyDiagnosisText', 'No diagnosis selected — Enter a diagnosis below')}</span>
-              )}
-          </div>
-          <Row className={styles.row}>
-            <Column sm={1}>
-              <span className={styles.columnLabel}>{t('primaryDiagnosis', 'Primary diagnosis')}</span>
-            </Column>
-            <Column sm={3}>
-              <FormGroup legendText={t('searchForPrimaryDiagnosis', 'Search for a primary diagnosis')}>
-                <DiagnosisSearch
-                  name="primaryDiagnosisSearch"
+        )}
+
+        <div className={styles.formContainer}>
+          <Stack gap={2}>
+            {isTablet ? <h2 className={styles.heading}>{t('addVisitNote', 'Add a visit note')}</h2> : null}
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('date', 'Date')}</span>
+              </Column>
+              <Column sm={3}>
+                <Controller
+                  name="noteDate"
                   control={control}
-                  labelText={t('enterPrimaryDiagnoses', 'Enter Primary diagnoses')}
-                  placeholder={t('primaryDiagnosisInputPlaceholder', 'Choose a primary diagnosis')}
-                  handleSearch={handleSearch}
-                  error={errors?.primaryDiagnosisSearch}
-                  setIsSearching={setIsSearching}
+                  render={({ field, fieldState }) => (
+                    <ResponsiveWrapper>
+                      <OpenmrsDatePicker
+                        {...field}
+                        data-testid="visitDateTimePicker"
+                        id="visitDateTimePicker"
+                        invalid={Boolean(fieldState?.error?.message)}
+                        invalidText={fieldState?.error?.message}
+                        isDisabled={isEditing}
+                        labelText={t('visitDate', 'Visit date')}
+                        maxDate={new Date()}
+                      />
+                    </ResponsiveWrapper>
+                  )}
                 />
-                {error ? (
-                  <InlineNotification
-                    className={styles.errorNotification}
-                    lowContrast
-                    title={t('error', 'Error')}
-                    subtitle={t('errorFetchingConcepts', 'There was a problem fetching concepts') + '.'}
-                    onClose={() => setError(null)}
+              </Column>
+            </Row>
+            <div className={styles.diagnosesText}>
+              {selectedPrimaryDiagnoses && selectedPrimaryDiagnoses.length ? (
+                <>
+                  {selectedPrimaryDiagnoses.map((diagnosis, index) => (
+                    <Tag
+                      className={styles.tag}
+                      filter
+                      key={index}
+                      onClose={() => handleRemoveDiagnosis(diagnosis, 'primaryInputSearch')}
+                      type="red"
+                    >
+                      {diagnosis.display}
+                    </Tag>
+                  ))}
+                </>
+              ) : null}
+              {selectedSecondaryDiagnoses && selectedSecondaryDiagnoses.length ? (
+                <>
+                  {selectedSecondaryDiagnoses.map((diagnosis, index) => (
+                    <Tag
+                      className={styles.tag}
+                      filter
+                      key={index}
+                      onClose={() => handleRemoveDiagnosis(diagnosis, 'secondaryInputSearch')}
+                      type="blue"
+                    >
+                      {diagnosis.display}
+                    </Tag>
+                  ))}
+                </>
+              ) : null}
+              {selectedPrimaryDiagnoses &&
+                !selectedPrimaryDiagnoses.length &&
+                selectedSecondaryDiagnoses &&
+                !selectedSecondaryDiagnoses.length && (
+                  <span>{t('emptyDiagnosisText', 'No diagnosis selected — Enter a diagnosis below')}</span>
+                )}
+            </div>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('primaryDiagnosis', 'Primary diagnosis')}</span>
+              </Column>
+              <Column sm={3}>
+                <FormGroup legendText={t('searchForPrimaryDiagnosis', 'Search for a primary diagnosis')}>
+                  <DiagnosisSearch
+                    name="primaryDiagnosisSearch"
+                    control={control}
+                    labelText={t('enterPrimaryDiagnoses', 'Enter Primary diagnoses')}
+                    placeholder={t('primaryDiagnosisInputPlaceholder', 'Choose a primary diagnosis')}
+                    handleSearch={handleSearch}
+                    error={errors?.primaryDiagnosisSearch}
+                    setIsSearching={setIsSearching}
                   />
-                ) : null}
-                <DiagnosesDisplay
-                  fieldName={'primaryDiagnosisSearch'}
-                  isDiagnosisNotSelected={isDiagnosisNotSelected}
-                  isLoading={isLoadingPrimaryDiagnoses}
-                  isSearching={isSearching}
-                  onAddDiagnosis={handleAddDiagnosis}
-                  searchResults={searchPrimaryResults}
-                  t={t}
-                  value={watch('primaryDiagnosisSearch')}
-                />
-              </FormGroup>
-            </Column>
-          </Row>
-          <Row className={styles.row}>
-            <Column sm={1}>
-              <span className={styles.columnLabel}>{t('secondaryDiagnosis', 'Secondary diagnosis')}</span>
-            </Column>
-            <Column sm={3}>
-              <FormGroup legendText={t('searchForSecondaryDiagnosis', 'Search for a secondary diagnosis')}>
-                <DiagnosisSearch
-                  name="secondaryDiagnosisSearch"
-                  control={control}
-                  labelText={t('enterSecondaryDiagnoses', 'Enter Secondary diagnoses')}
-                  placeholder={t('secondaryDiagnosisInputPlaceholder', 'Choose a secondary diagnosis')}
-                  handleSearch={handleSearch}
-                  setIsSearching={setIsSearching}
-                />
-                {error ? (
-                  <InlineNotification
-                    className={styles.errorNotification}
-                    lowContrast
-                    title={t('error', 'Error')}
-                    subtitle={t('errorFetchingConcepts', 'There was a problem fetching concepts') + '.'}
-                    onClose={() => setError(null)}
+                  {error ? (
+                    <InlineNotification
+                      className={styles.errorNotification}
+                      lowContrast
+                      title={t('error', 'Error')}
+                      subtitle={t('errorFetchingConcepts', 'There was a problem fetching concepts') + '.'}
+                      onClose={() => setError(null)}
+                    />
+                  ) : null}
+                  <DiagnosesDisplay
+                    fieldName={'primaryDiagnosisSearch'}
+                    isDiagnosisNotSelected={isDiagnosisNotSelected}
+                    isLoading={isLoadingPrimaryDiagnoses}
+                    isSearching={isSearching}
+                    onAddDiagnosis={handleAddDiagnosis}
+                    searchResults={searchPrimaryResults}
+                    t={t}
+                    value={watch('primaryDiagnosisSearch')}
                   />
-                ) : null}
-                <DiagnosesDisplay
-                  fieldName={'secondaryDiagnosisSearch'}
-                  isDiagnosisNotSelected={isDiagnosisNotSelected}
-                  isLoading={isLoadingSecondaryDiagnoses}
-                  isSearching={isSearching}
-                  onAddDiagnosis={handleAddDiagnosis}
-                  searchResults={searchSecondaryResults}
-                  t={t}
-                  value={watch('secondaryDiagnosisSearch')}
-                />
-              </FormGroup>
-            </Column>
-          </Row>
-          <Row className={styles.row}>
-            <Column sm={1}>
-              <span className={styles.columnLabel}>{t('note', 'Note')}</span>
-            </Column>
-            <Column sm={3}>
-              <Controller
-                name="clinicalNote"
-                control={control}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <ResponsiveWrapper>
-                    <TextArea
-                      id="additionalNote"
-                      rows={rows}
-                      labelText={t('clinicalNoteLabel', 'Write your notes')}
-                      placeholder={t('clinicalNotePlaceholder', 'Write any notes here')}
-                      value={value}
-                      onBlur={onBlur}
-                      onChange={(event) => {
-                        onChange(event);
-                        const textareaLineHeight = 24; // This is the default line height for Carbon's TextArea component
-                        const newRows = Math.ceil(event.target.scrollHeight / textareaLineHeight);
-                        setRows(newRows);
-                      }}
+                </FormGroup>
+              </Column>
+            </Row>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('secondaryDiagnosis', 'Secondary diagnosis')}</span>
+              </Column>
+              <Column sm={3}>
+                <FormGroup legendText={t('searchForSecondaryDiagnosis', 'Search for a secondary diagnosis')}>
+                  <DiagnosisSearch
+                    name="secondaryDiagnosisSearch"
+                    control={control}
+                    labelText={t('enterSecondaryDiagnoses', 'Enter Secondary diagnoses')}
+                    placeholder={t('secondaryDiagnosisInputPlaceholder', 'Choose a secondary diagnosis')}
+                    handleSearch={handleSearch}
+                    setIsSearching={setIsSearching}
+                  />
+                  {error ? (
+                    <InlineNotification
+                      className={styles.errorNotification}
+                      lowContrast
+                      title={t('error', 'Error')}
+                      subtitle={t('errorFetchingConcepts', 'There was a problem fetching concepts') + '.'}
+                      onClose={() => setError(null)}
                     />
-                  </ResponsiveWrapper>
-                )}
-              />
-            </Column>
-          </Row>
-          <Row className={styles.row}>
-            <Column sm={1}>
-              <span className={styles.columnLabel}>{t('image', 'Image')}</span>
-            </Column>
-            <Column sm={3}>
-              <FormGroup legendText="">
-                <p className={styles.imgUploadHelperText}>
-                  {t('imageUploadHelperText', "Upload images or use this device's camera to capture images")}
-                </p>
-                <Button
-                  className={styles.uploadButton}
-                  kind={isTablet ? 'ghost' : 'tertiary'}
-                  onClick={showImageCaptureModal}
-                  renderIcon={(props) => <Add size={16} {...props} />}
-                >
-                  {t('addImage', 'Add image')}
-                </Button>
-                <div className={styles.imgThumbnailGrid}>
-                  {currentImages?.map((image, index) => (
-                    <div key={index} className={styles.imgThumbnailItem}>
-                      <div className={styles.imgThumbnailContainer}>
-                        <img
-                          className={styles.imgThumbnail}
-                          src={image.base64Content}
-                          alt={image.fileDescription ?? image.fileName}
-                        />
+                  ) : null}
+                  <DiagnosesDisplay
+                    fieldName={'secondaryDiagnosisSearch'}
+                    isDiagnosisNotSelected={isDiagnosisNotSelected}
+                    isLoading={isLoadingSecondaryDiagnoses}
+                    isSearching={isSearching}
+                    onAddDiagnosis={handleAddDiagnosis}
+                    searchResults={searchSecondaryResults}
+                    t={t}
+                    value={watch('secondaryDiagnosisSearch')}
+                  />
+                </FormGroup>
+              </Column>
+            </Row>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('note', 'Note')}</span>
+              </Column>
+              <Column sm={3}>
+                <Controller
+                  name="clinicalNote"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ResponsiveWrapper>
+                      <TextArea
+                        id="additionalNote"
+                        rows={rows}
+                        labelText={t('clinicalNoteLabel', 'Write your notes')}
+                        placeholder={t('clinicalNotePlaceholder', 'Write any notes here')}
+                        value={value}
+                        onBlur={onBlur}
+                        onChange={(event) => {
+                          onChange(event);
+                          const textareaLineHeight = 24; // This is the default line height for Carbon's TextArea component
+                          const newRows = Math.ceil(event.target.scrollHeight / textareaLineHeight);
+                          setRows(newRows);
+                        }}
+                      />
+                    </ResponsiveWrapper>
+                  )}
+                />
+              </Column>
+            </Row>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('image', 'Image')}</span>
+              </Column>
+              <Column sm={3}>
+                <FormGroup legendText="">
+                  <p className={styles.imgUploadHelperText}>
+                    {t('imageUploadHelperText', "Upload images or use this device's camera to capture images")}
+                  </p>
+                  <Button
+                    className={styles.uploadButton}
+                    kind={isTablet ? 'ghost' : 'tertiary'}
+                    onClick={showImageCaptureModal}
+                    renderIcon={(props) => <Add size={16} {...props} />}
+                  >
+                    {t('addImage', 'Add image')}
+                  </Button>
+                  <div className={styles.imgThumbnailGrid}>
+                    {currentImages?.map((image, index) => (
+                      <div key={index} className={styles.imgThumbnailItem}>
+                        <div className={styles.imgThumbnailContainer}>
+                          <img
+                            className={styles.imgThumbnail}
+                            src={image.base64Content}
+                            alt={image.fileDescription ?? image.fileName}
+                          />
+                        </div>
+                        <Button kind="ghost" className={styles.removeButton} onClick={() => handleRemoveImage(index)}>
+                          <CloseFilled size={16} className={styles.closeIcon} />
+                        </Button>
                       </div>
-                      <Button kind="ghost" className={styles.removeButton} onClick={() => handleRemoveImage(index)}>
-                        <CloseFilled size={16} className={styles.closeIcon} />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </FormGroup>
-            </Column>
-          </Row>
-        </Stack>
-      </div>
-      <ButtonSet className={classnames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
-        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('discard', 'Discard')}
-        </Button>
-        <Button
-          className={styles.button}
-          kind="primary"
-          onClick={() => handleSubmit}
-          disabled={isSubmitting}
-          type="submit"
-        >
-          {isSubmitting ? (
-            <InlineLoading description={t('saving', 'Saving') + '...'} />
-          ) : (
-            <span>{t('saveAndClose', 'Save and close')}</span>
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+                    ))}
+                  </div>
+                </FormGroup>
+              </Column>
+            </Row>
+          </Stack>
+        </div>
+        <ButtonSet className={classnames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button
+            className={styles.button}
+            kind="primary"
+            onClick={() => handleSubmit}
+            disabled={isSubmitting}
+            type="submit"
+          >
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} />
+            ) : (
+              <span>{t('saveAndClose', 'Save and close')}</span>
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/src/routes.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": ">=2.2.0"
   },
   "extensions": [
     {
@@ -12,21 +12,21 @@
         "fullWidth": false
       },
       "order": 5
-    },
-    {
-      "name": "visit-note-nav-button",
-      "component": "visitNotesActionButton",
-      "slot": "action-menu-patient-chart-items-slot",
-      "order": 1
     }
   ],
-  "workspaces": [
+  "workspaces2": [
     {
       "name": "visit-notes-form-workspace",
-      "title": "visitNoteWorkspaceTitle",
       "component": "visitNotesFormWorkspace",
-      "type": "visit-note",
-      "canHide": true
+      "window": "visit-note"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "visit-note",
+      "icon": "visitNotesActionButton",
+      "group": "patient-chart",
+      "order": 2
     }
   ]
 }

package/src/visit-note-action-button.extension.tsx

@@ -1,20 +1,26 @@
 import React, { type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionMenuButton, PenIcon } from '@openmrs/esm-framework';
-import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import { ActionMenuButton2, PenIcon } from '@openmrs/esm-framework';
+import { useStartVisitIfNeeded, type PatientChartWorkspaceActionButtonProps } from '@openmrs/esm-patient-common-lib';
 
-const VisitNoteActionButton: React.FC = () => {
+/**
+ * This button uses the patient chart store and MUST only be used
+ * within the patient chart
+ */
+const VisitNoteActionButton: React.FC<PatientChartWorkspaceActionButtonProps> = ({ groupProps: { patientUuid } }) => {
   const { t } = useTranslation();
 
-  const launchVisitNotesWorkspace = useLaunchWorkspaceRequiringVisit('visit-notes-form-workspace');
+  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
 
   return (
-    <ActionMenuButton
-      getIcon={(props: ComponentProps<typeof PenIcon>) => <PenIcon {...props} />}
+    <ActionMenuButton2
+      icon={(props: ComponentProps<typeof PenIcon>) => <PenIcon {...props} />}
       label={t('visitNote', 'Visit note')}
-      iconDescription={t('note', 'Note')}
-      handler={launchVisitNotesWorkspace}
-      type={'visit-note'}
+      workspaceToLaunch={{
+        workspaceName: 'visit-notes-form-workspace',
+        workspaceProps: {},
+      }}
+      onBeforeWorkspaceLaunch={startVisitIfNeeded}
     />
   );
 };