@openmrs/esm-patient-vitals-app 9.2.3-pre.7186 → 9.2.3-pre.7198

package/src/components/action-menu/vitals-biometrics-action-menu.scss

@@ -0,0 +1,11 @@
+.layer {
+  height: 100%;
+
+  :global(.cds--overflow-menu) {
+    min-height: unset;
+  }
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/components/delete-vitals-biometrics-modal/delete-vitals-biometrics.modal.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useCallback } from 'react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { deleteEncounter, invalidateCachedVitalsAndBiometrics } from '../../common';
+import { ModalHeader, ModalBody, ModalFooter, Button, InlineLoading } from '@carbon/react';
+
+interface DeleteVitalsAndBiometricsModalProps {
+  patientUuid: string;
+  encounterUuid: string;
+  closeDeleteModal: () => void;
+}
+
+const DeleteVitalsAndBiometricsModal: React.FC<DeleteVitalsAndBiometricsModalProps> = ({
+  encounterUuid,
+  closeDeleteModal,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = useCallback(async () => {
+    if (!encounterUuid) {
+      showSnackbar({
+        isLowContrast: false,
+        kind: 'error',
+        title: t('errorDeleting', 'Error deleting vitals and biometrics'),
+        subtitle: t('encounterUuidRequired', 'Encounter UUID is required to delete vitals and biometrics'),
+      });
+      return;
+    }
+
+    setIsDeleting(true);
+    deleteEncounter(encounterUuid)
+      .then(() => {
+        invalidateCachedVitalsAndBiometrics();
+        closeDeleteModal();
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          title: t('vitalsAndBiometricsDeleted', 'Vitals and biometrics deleted'),
+        });
+      })
+      .catch((error) => {
+        console.error('Error deleting encounter: ', error);
+        showSnackbar({
+          isLowContrast: false,
+          kind: 'error',
+          title: t('errorDeleting', 'Error deleting vitals and biometrics'),
+          subtitle: error?.message,
+        });
+      })
+      .finally(() => setIsDeleting(false));
+  }, [encounterUuid, t, closeDeleteModal]);
+
+  return (
+    <>
+      <ModalHeader
+        closeModal={closeDeleteModal}
+        title={t('deleteVitalsAndBiometrics', 'Delete vitals and biometrics')}
+      />
+      <ModalBody>
+        <p>
+          {t(
+            'deleteConfirmationText',
+            'Note: Deleting these entries will also remove related vitals or biometrics data. Are you sure you want to continue?',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeDeleteModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? (
+            <InlineLoading description={t('deleting', 'Deleting') + '...'} />
+          ) : (
+            <span>{t('delete', 'Delete')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteVitalsAndBiometricsModal;

package/src/{weight-tile → components/weight-tile}/weight-tile.component.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineLoading } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { useVitalsAndBiometrics, useVitalsConceptMetadata } from '../common';
-import { type ConfigObject } from '../config-schema';
+import { useVitalsAndBiometrics, useVitalsConceptMetadata } from '../../common';
+import { type ConfigObject } from '../../config-schema';
 import styles from './weight-tile.scss';
 
 interface WeightTileInterface {

package/src/{weight-tile → components/weight-tile}/weight-tile.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { configSchema, type ConfigObject } from '../config-schema';
+import { configSchema, type ConfigObject } from '../../config-schema';
 import { getByTextWithMarkup, mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { formattedBiometrics, mockBiometricsConfig, mockConceptMetadata, mockVitalsSignsConcepts } from '__mocks__';
-import { useVitalsAndBiometrics } from '../common';
+import { useVitalsAndBiometrics } from '../../common';
 import WeightTile from './weight-tile.component';
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
@@ -13,8 +13,8 @@ const mockConceptUnits = new Map<string, string>(
   mockVitalsSignsConcepts.data.results[0].setMembers.map((concept) => [concept.uuid, concept.units]),
 );
 
-jest.mock('../common', () => {
-  const originalModule = jest.requireActual('../common');
+jest.mock('../../common', () => {
+  const originalModule = jest.requireActual('../../common');
 
   return {
     ...originalModule,

package/src/index.ts

@@ -58,10 +58,15 @@ export const vitalsAndBiometricsDashboardLink =
     options,
   );
 
-export const weightTile = getAsyncLifecycle(() => import('./weight-tile/weight-tile.component'), options);
+export const weightTile = getAsyncLifecycle(() => import('./components/weight-tile/weight-tile.component'), options);
 
 // t('recordVitalsAndBiometrics', 'Record Vitals and Biometrics')
 export const vitalsBiometricsFormWorkspace = getAsyncLifecycle(
   () => import('./vitals-biometrics-form/vitals-biometrics-form.workspace'),
   options,
 );
+
+export const vitalsAndBiometricsDeleteConfirmationModal = getAsyncLifecycle(
+  () => import('./components/delete-vitals-biometrics-modal/delete-vitals-biometrics.modal'),
+  options,
+);

package/src/routes.json

@@ -73,5 +73,11 @@
       "title": "recordVitalsAndBiometrics",
       "component": "vitalsBiometricsFormWorkspace"
     }
+  ],
+  "modals": [
+    {
+      "name": "vitals-biometrics-delete-confirmation-modal",
+      "component": "vitalsAndBiometricsDeleteConfirmationModal"
+    }
   ]
 }

package/src/vitals/paginated-vitals.component.tsx

@@ -13,6 +13,7 @@ import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import type { VitalsTableHeader, VitalsTableRow } from './types';
 import styles from './paginated-vitals.scss';
+import { VitalsAndBiometricsActionMenu } from '../components/action-menu/vitals-biometrics-action-menu.component';
 
 interface PaginatedVitalsProps {
   isPrinting?: boolean;
@@ -108,6 +109,7 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
                       {header.header?.content ?? header.header}
                     </TableHeader>
                   ))}
+                  <TableHeader />
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -123,6 +125,9 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
                         </StyledTableCell>
                       );
                     })}
+                    <TableCell className="cds--table-column-menu" id="actions">
+                      <VitalsAndBiometricsActionMenu encounterUuid={row.id} />
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>

package/src/vitals/vitals-overview.component.tsx

@@ -22,6 +22,7 @@ import PaginatedVitals from './paginated-vitals.component';
 import PrintComponent from './print/print.component';
 import VitalsChart from './vitals-chart.component';
 import styles from './vitals-overview.scss';
+import { useEncounterVitalsAndBiometrics } from '../common/data.resource';
 
 interface VitalsOverviewProps {
   patientUuid: string;
@@ -50,6 +51,7 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
     launchVitalsAndBiometricsForm(currentVisit, config);
   }, [config, currentVisit]);
 
+  useEncounterVitalsAndBiometrics('771bbc44-8d45-4ac3-af6e-059814dd7cde');
   const patientDetails = useMemo(() => {
     const getGender = (gender: string): string => {
       switch (gender) {
@@ -139,10 +141,9 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
 
   const tableRows: Array<VitalsTableRow> = useMemo(
     () =>
-      vitals?.map((vitalSigns, index) => {
+      vitals?.map((vitalSigns) => {
         return {
           ...vitalSigns,
-          id: `${index}`,
           dateRender: formatDate(parseDate(vitalSigns.date.toString()), { mode: 'wide', time: true }),
           bloodPressureRender: `${vitalSigns.systolic ?? '--'} / ${vitalSigns.diastolic ?? '--'}`,
           pulseRender: vitalSigns.pulse ?? '--',

package/src/vitals-biometrics-form/schema.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+export const VitalsAndBiometricsFormSchema = z
+  .object({
+    systolicBloodPressure: z.number(),
+    diastolicBloodPressure: z.number(),
+    respiratoryRate: z.number(),
+    oxygenSaturation: z.number(),
+    pulse: z.number(),
+    temperature: z.number(),
+    generalPatientNote: z.string(),
+    weight: z.number(),
+    height: z.number(),
+    midUpperArmCircumference: z.number(),
+    computedBodyMassIndex: z.number(),
+  })
+  .partial()
+  .refine(
+    (fields) => {
+      return Object.values(fields).some((value) => Boolean(value));
+    },
+    {
+      message: 'Please fill at least one field',
+      path: ['oneFieldRequired'],
+    },
+  );
+
+export type VitalsBiometricsFormData = z.infer<typeof VitalsAndBiometricsFormSchema>;

package/src/vitals-biometrics-form/vitals-biometrics-form.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { type FetchResponse, showSnackbar, useConfig, getDefaultsFromConfigSchema } from '@openmrs/esm-framework';
-import { saveVitalsAndBiometrics } from '../common';
+import { createOrUpdateVitalsAndBiometrics, useEncounterVitalsAndBiometrics } from '../common';
 import { type ConfigObject, configSchema } from '../config-schema';
 import { mockConceptMetadata, mockConceptRanges, mockConceptUnits, mockVitalsConfig } from '__mocks__';
 import { mockPatient } from 'tools';
@@ -28,8 +28,9 @@ const testProps = {
 };
 
 const mockShowSnackbar = jest.mocked(showSnackbar);
-const mockSavePatientVitals = jest.mocked(saveVitalsAndBiometrics);
+const mockCreateOrUpdateVitalsAndBiometrics = jest.mocked(createOrUpdateVitalsAndBiometrics);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockUseEncounterVitalsAndBiometrics = jest.mocked(useEncounterVitalsAndBiometrics);
 
 jest.mock('../common', () => ({
   assessValue: jest.fn(),
@@ -37,13 +38,18 @@ jest.mock('../common', () => ({
   generatePlaceholder: jest.fn(),
   interpretBloodPressure: jest.fn(),
   invalidateCachedVitalsAndBiometrics: jest.fn(),
-  saveVitalsAndBiometrics: jest.fn(),
+  createOrUpdateVitalsAndBiometrics: jest.fn(),
   useVitalsAndBiometrics: jest.fn(),
   useVitalsConceptMetadata: jest.fn().mockImplementation(() => ({
     data: mockConceptUnits,
     conceptMetadata: mockConceptMetadata,
     conceptRanges: mockConceptRanges,
   })),
+  useEncounterVitalsAndBiometrics: jest.fn().mockImplementation(() => ({
+    isLoading: false,
+    vitalsAndBiometrics: null,
+    mutate: jest.fn(),
+  })),
 }));
 
 mockUseConfig.mockReturnValue({
@@ -51,6 +57,91 @@ mockUseConfig.mockReturnValue({
   ...mockVitalsConfig,
 });
 
+function setupMockUseEncounterVitalsAndBiometrics() {
+  mockUseEncounterVitalsAndBiometrics.mockReturnValue({
+    isLoading: false,
+    vitalsAndBiometrics: new Map([
+      [
+        'systolicBloodPressure',
+        {
+          value: 120,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174001', display: 'Systolic Blood Pressure: 120' },
+        },
+      ],
+      [
+        'diastolicBloodPressure',
+        {
+          value: 80,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174002', display: 'Diastolic Blood Pressure: 80' },
+        },
+      ],
+      [
+        'pulse',
+        {
+          value: 75,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174003', display: 'Pulse Rate: 75' },
+        },
+      ],
+      [
+        'temperature',
+        {
+          value: 36.5,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174004', display: 'Body Temperature: 36.5°C' },
+        },
+      ],
+      [
+        'oxygenSaturation',
+        {
+          value: 98,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174005', display: 'Oxygen Saturation: 98%' },
+        },
+      ],
+      [
+        'height',
+        {
+          value: 170,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174006', display: 'Height: 170 cm' },
+        },
+      ],
+      [
+        'weight',
+        {
+          value: 65,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174007', display: 'Weight: 65 kg' },
+        },
+      ],
+      [
+        'respiratoryRate',
+        {
+          value: 16,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174008', display: 'Respiratory Rate: 16 breaths/min' },
+        },
+      ],
+      [
+        'midUpperArmCircumference',
+        {
+          value: 25,
+          obs: { uuid: '123e4567-e89b-12d3-a456-426614174009', display: 'Mid-Upper Arm Circumference: 25 cm' },
+        },
+      ],
+    ]),
+    encounter: null,
+    error: null,
+    mutate: jest.fn(),
+    getRefinedInitialValues: () => ({
+      height: 170,
+      weight: 65,
+      systolicBloodPressure: 120,
+      diastolicBloodPressure: 80,
+      pulse: 75,
+      oxygenSaturation: 98,
+      respiratoryRate: 16,
+      temperature: 36.5,
+      midUpperArmCircumference: 25,
+    }),
+  });
+}
+
 describe('VitalsBiometricsForm', () => {
   it('renders the vitals and biometrics form', async () => {
     render(<VitalsAndBiometricsForm {...testProps} />);
@@ -107,7 +198,9 @@ describe('VitalsBiometricsForm', () => {
       data: [],
     };
 
-    mockSavePatientVitals.mockResolvedValue(response as ReturnType<typeof saveVitalsAndBiometrics>);
+    mockCreateOrUpdateVitalsAndBiometrics.mockResolvedValue(
+      response as ReturnType<typeof createOrUpdateVitalsAndBiometrics>,
+    );
 
     render(<VitalsAndBiometricsForm {...testProps} />);
 
@@ -141,24 +234,28 @@ describe('VitalsBiometricsForm', () => {
 
     await user.click(saveButton);
 
-    expect(mockSavePatientVitals).toHaveBeenCalledTimes(1);
-    expect(mockSavePatientVitals).toHaveBeenCalledWith(
-      mockVitalsConfig.vitals.encounterTypeUuid,
-      mockVitalsConfig.vitals.formUuid,
-      mockVitalsConfig.concepts,
+    expect(mockCreateOrUpdateVitalsAndBiometrics).toHaveBeenCalledTimes(1);
+    expect(mockCreateOrUpdateVitalsAndBiometrics).toHaveBeenCalledWith(
       mockPatient.id,
+      mockVitalsConfig.vitals.encounterTypeUuid,
+      undefined,
+      undefined,
+      expect.arrayContaining([
+        { concept: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 120 },
+        { concept: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 16 },
+        { concept: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 100 },
+        { concept: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 80 },
+        { concept: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 37 },
+        { concept: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 62 },
+        { concept: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 180 },
+        { concept: '1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 23 },
+      ]),
       expect.objectContaining({
-        height: heightValue,
-        midUpperArmCircumference: muacValue,
-        oxygenSaturation: oxygenSaturationValue,
-        pulse: pulseValue,
-        respiratoryRate: respiratoryRateValue,
-        systolicBloodPressure: systolicBloodPressureValue,
-        temperature: temperatureValue,
-        weight: weightValue,
+        signal: {
+          aborted: false,
+        },
+        abort: expect.any(Function),
       }),
-      new AbortController(),
-      undefined,
     );
 
     expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
@@ -172,6 +269,91 @@ describe('VitalsBiometricsForm', () => {
     );
   });
 
+  it('correctly initializes the form with existing vitals and biometrics data while in edit mode', async () => {
+    setupMockUseEncounterVitalsAndBiometrics();
+    render(<VitalsAndBiometricsForm {...testProps} formContext="editing" editEncounterUuid="encounter-uuid" />);
+
+    expect(screen.getByRole('spinbutton', { name: /height/i })).toHaveValue(170);
+    expect(screen.getByRole('spinbutton', { name: /weight/i })).toHaveValue(65);
+    expect(screen.getByRole('spinbutton', { name: /systolic/i })).toHaveValue(120);
+    expect(screen.getByRole('spinbutton', { name: /diastolic/i })).toHaveValue(80);
+    expect(screen.getByRole('spinbutton', { name: /pulse/i })).toHaveValue(75);
+    expect(screen.getByRole('spinbutton', { name: /oxygen saturation/i })).toHaveValue(98);
+    expect(screen.getByRole('spinbutton', { name: /respiration rate/i })).toHaveValue(16);
+    expect(screen.getByRole('spinbutton', { name: /temperature/i })).toHaveValue(36.5);
+    expect(screen.getByRole('spinbutton', { name: /muac/i })).toHaveValue(25);
+  });
+
+  it('edits patient vitals and biometrics', async () => {
+    const user = userEvent.setup();
+    setupMockUseEncounterVitalsAndBiometrics();
+
+    const response: Partial<FetchResponse> = {
+      statusText: 'created',
+      status: 201,
+      data: [],
+    };
+
+    mockCreateOrUpdateVitalsAndBiometrics.mockResolvedValue(
+      response as ReturnType<typeof createOrUpdateVitalsAndBiometrics>,
+    );
+
+    render(<VitalsAndBiometricsForm {...testProps} formContext="editing" editEncounterUuid="encounter-uuid" />);
+
+    const weightInput = screen.getByRole('spinbutton', { name: /weight/i });
+    const systolicInput = screen.getByRole('spinbutton', { name: /systolic/i });
+    const pulseInput = screen.getByRole('spinbutton', { name: /pulse/i });
+    const temperatureInput = screen.getByRole('spinbutton', { name: /temperature/i });
+    const saveButton = screen.getByRole('button', { name: /Save and close/i });
+
+    // the save button should be disabled until the user makes a change
+    expect(saveButton).toBeDisabled();
+    await user.clear(weightInput);
+    await user.type(weightInput, '70');
+    await user.clear(systolicInput);
+    await user.type(systolicInput, '130');
+    await user.clear(temperatureInput);
+    await user.type(temperatureInput, '37.5');
+    // delete the pulse value
+    await user.clear(pulseInput);
+
+    expect(saveButton).toBeEnabled();
+    await user.click(saveButton);
+
+    expect(mockCreateOrUpdateVitalsAndBiometrics).toHaveBeenCalledTimes(1);
+    expect(mockCreateOrUpdateVitalsAndBiometrics).toHaveBeenCalledWith(
+      mockPatient.id,
+      mockVitalsConfig.vitals.encounterTypeUuid,
+      'encounter-uuid',
+      undefined,
+      expect.arrayContaining([
+        { concept: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 130 },
+        { concept: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 37.5 },
+        { concept: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', value: 70 },
+        { uuid: '123e4567-e89b-12d3-a456-426614174001', voided: true },
+        { uuid: '123e4567-e89b-12d3-a456-426614174003', voided: true },
+        { uuid: '123e4567-e89b-12d3-a456-426614174004', voided: true },
+        { uuid: '123e4567-e89b-12d3-a456-426614174007', voided: true },
+      ]),
+      expect.objectContaining({
+        signal: {
+          aborted: false,
+        },
+        abort: expect.any(Function),
+      }),
+    );
+
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isLowContrast: true,
+        kind: 'success',
+        subtitle: 'They are now visible on the Vitals and Biometrics page',
+        title: 'Vitals and Biometrics updated',
+      }),
+    );
+  });
+
   it('renders an error snackbar if there was a problem saving vitals and biometrics', async () => {
     const user = userEvent.setup();
 
@@ -183,7 +365,7 @@ describe('VitalsBiometricsForm', () => {
       },
     };
 
-    mockSavePatientVitals.mockRejectedValueOnce(error);
+    mockCreateOrUpdateVitalsAndBiometrics.mockRejectedValueOnce(error);
 
     render(<VitalsAndBiometricsForm {...testProps} />);
 
@@ -214,7 +396,7 @@ describe('VitalsBiometricsForm', () => {
       isLowContrast: false,
       kind: 'error',
       subtitle: 'Some of the values entered are invalid',
-      title: 'Error saving vitals and biometrics',
+      title: 'Error saving Vitals and Biometrics',
     });
   });