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

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',
     });
   });
 

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,
@@ -23,6 +22,7 @@ import {
   useSession,
   ExtensionSlot,
   useVisit,
+  useAbortController,
 } from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../config-schema';
@@ -37,42 +37,25 @@ import {
   getReferenceRangesForConcept,
   interpretBloodPressure,
   invalidateCachedVitalsAndBiometrics,
-  saveVitalsAndBiometrics as savePatientVitals,
   useVitalsConceptMetadata,
+  createOrUpdateVitalsAndBiometrics,
+  useEncounterVitalsAndBiometrics,
 } from '../common';
 import VitalsAndBiometricsInput from './vitals-biometrics-input.component';
 import styles from './vitals-biometrics-form.scss';
+import { VitalsAndBiometricsFormSchema, type VitalsBiometricsFormData } from './schema';
+import { prepareObsForSubmission } from '../common/helpers';
 
-const VitalsAndBiometricFormSchema = 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'],
-    },
-  );
+interface VitalsAndBiometricsFormProps extends DefaultPatientWorkspaceProps {
+  formContext: 'creating' | 'editing';
+  editEncounterUuid?: string;
+}
 
-export type VitalsBiometricsFormData = z.infer<typeof VitalsAndBiometricFormSchema>;
-
-const VitalsAndBiometricsForm: React.FC<DefaultPatientWorkspaceProps> = ({
+const VitalsAndBiometricsForm: React.FC<VitalsAndBiometricsFormProps> = ({
   patientUuid,
   patient,
+  editEncounterUuid,
+  formContext = 'creating',
   closeWorkspace,
   closeWorkspaceWithSavedChanges,
   promptBeforeClosing,
@@ -85,23 +68,47 @@ const VitalsAndBiometricsForm: React.FC<DefaultPatientWorkspaceProps> = ({
 
   const session = useSession();
   const { currentVisit } = useVisit(patientUuid);
-  const { data: conceptUnits, conceptMetadata, conceptRanges, isLoading } = useVitalsConceptMetadata();
+  const {
+    data: conceptUnits,
+    conceptMetadata,
+    conceptRanges,
+    isLoading: isLoadingConceptMetadata,
+  } = useVitalsConceptMetadata();
+  const {
+    isLoading: isLoadingEncounter,
+    vitalsAndBiometrics: initialFieldValuesMap,
+    getRefinedInitialValues,
+    mutate: mutateEncounter,
+  } = useEncounterVitalsAndBiometrics(formContext === 'editing' ? editEncounterUuid : null);
   const [hasInvalidVitals, setHasInvalidVitals] = useState(false);
   const [muacColorCode, setMuacColorCode] = useState('');
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const [showErrorMessage, setShowErrorMessage] = useState(false);
+  const abortController = useAbortController();
+
+  const isLoadingInitialValues = useMemo(
+    () => (formContext === 'creating' ? false : isLoadingEncounter),
+    [formContext, isLoadingEncounter],
+  );
 
   const {
     control,
     handleSubmit,
     watch,
     setValue,
-    formState: { isDirty, isSubmitting },
+    formState: { isDirty, isSubmitting, dirtyFields },
+    reset,
   } = useForm<VitalsBiometricsFormData>({
     mode: 'all',
-    resolver: zodResolver(VitalsAndBiometricFormSchema),
+    resolver: zodResolver(VitalsAndBiometricsFormSchema),
   });
 
+  useEffect(() => {
+    if (formContext === 'editing' && !isLoadingInitialValues && initialFieldValuesMap) {
+      reset(getRefinedInitialValues());
+    }
+  }, [formContext, isLoadingInitialValues, initialFieldValuesMap, getRefinedInitialValues, reset]);
+
   useEffect(() => {
     promptBeforeClosing(() => isDirty);
   }, [isDirty, promptBeforeClosing]);
@@ -181,56 +188,67 @@ const VitalsAndBiometricsForm: React.FC<DefaultPatientWorkspaceProps> = ({
 
       if (allFieldsAreValid) {
         setShowErrorMessage(false);
-        const abortController = new AbortController();
-
-        savePatientVitals(
-          config.vitals.encounterTypeUuid,
-          config.vitals.formUuid,
+        const { newObs, toBeVoided } = prepareObsForSubmission(
+          formData,
+          dirtyFields,
+          formContext,
+          initialFieldValuesMap,
           config.concepts,
+        );
+
+        createOrUpdateVitalsAndBiometrics(
           patientUuid,
-          formData,
-          abortController,
+          config.vitals.encounterTypeUuid,
+          editEncounterUuid,
           session?.sessionLocation?.uuid,
+          [...newObs, ...toBeVoided],
+          abortController,
         )
-          .then((response) => {
-            if (response.status === 201) {
-              invalidateCachedVitalsAndBiometrics();
-              closeWorkspaceWithSavedChanges();
-              showSnackbar({
-                isLowContrast: true,
-                kind: 'success',
-                title: t('vitalsAndBiometricsRecorded', 'Vitals and Biometrics saved'),
-                subtitle: t(
-                  'vitalsAndBiometricsNowAvailable',
-                  'They are now visible on the Vitals and Biometrics page',
-                ),
-              });
+          .then(() => {
+            if (mutateEncounter) {
+              mutateEncounter();
             }
+            invalidateCachedVitalsAndBiometrics();
+            closeWorkspaceWithSavedChanges();
+            showSnackbar({
+              isLowContrast: true,
+              kind: 'success',
+              title:
+                formContext === 'creating'
+                  ? t('vitalsAndBiometricsSaved', 'Vitals and Biometrics saved')
+                  : t('vitalsAndBiometricsUpdated', 'Vitals and Biometrics updated'),
+              subtitle: t('vitalsAndBiometricsNowAvailable', 'They are now visible on the Vitals and Biometrics page'),
+            });
           })
           .catch(() => {
             createErrorHandler();
             showSnackbar({
-              title: t('vitalsAndBiometricsSaveError', 'Error saving vitals and biometrics'),
+              title:
+                formContext === 'creating'
+                  ? t('vitalsAndBiometricsSaveError', 'Error saving Vitals and Biometrics')
+                  : t('vitalsAndBiometricsUpdateError', 'Error updating Vitals and Biometrics'),
               kind: 'error',
               isLowContrast: false,
               subtitle: t('checkForValidity', 'Some of the values entered are invalid'),
             });
-          })
-          .finally(() => {
-            abortController.abort();
           });
       } else {
         setHasInvalidVitals(true);
       }
     },
     [
-      closeWorkspaceWithSavedChanges,
+      abortController,
       conceptMetadata,
       config.concepts,
       config.vitals.encounterTypeUuid,
-      config.vitals.formUuid,
+      dirtyFields,
+      editEncounterUuid,
+      formContext,
+      initialFieldValuesMap,
       patientUuid,
       session?.sessionLocation?.uuid,
+      closeWorkspaceWithSavedChanges,
+      mutateEncounter,
       t,
     ],
   );
@@ -253,7 +271,7 @@ const VitalsAndBiometricsForm: React.FC<DefaultPatientWorkspaceProps> = ({
     );
   }
 
-  if (isLoading) {
+  if (isLoadingConceptMetadata || isLoadingInitialValues) {
     return (
       <Form className={styles.form}>
         <div className={styles.grid}>
@@ -605,7 +623,7 @@ const VitalsAndBiometricsForm: React.FC<DefaultPatientWorkspaceProps> = ({
           className={styles.button}
           kind="primary"
           onClick={handleSubmit(savePatientVitalsAndBiometrics, onError)}
-          disabled={isSubmitting}
+          disabled={!isDirty || isSubmitting}
           type="submit"
         >
           {t('saveAndClose', 'Save and close')}

package/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx

@@ -6,8 +6,8 @@ import { Warning } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { generatePlaceholder } from '../common';
-import { type VitalsBiometricsFormData } from './vitals-biometrics-form.workspace';
 import styles from './vitals-biometrics-input.scss';
+import { type VitalsBiometricsFormData } from './schema';
 
 type fieldId =
   | 'computedBodyMassIndex'

package/translations/en.json

@@ -10,14 +10,24 @@
   "bmi": "BMI",
   "bp": "BP",
   "calculatedBmi": "BMI (calc.)",
+  "cancel": "Cancel",
   "checkForValidity": "Some of the values entered are invalid",
   "date": "Date",
   "dateAndTime": "Date and time",
   "daysOldVitals_one": "<0>These vitals are <1>{{count}} day old</1></0>",
   "daysOldVitals_other": "<0>These vitals are <1>{{count}} days old</1></0>",
+  "delete": "Delete",
+  "deleteConfirmationText": "Note: Deleting these entries will also remove related vitals or biometrics data. Are you sure you want to continue?",
+  "deleteVitalsAndBiometrics": "Delete vitals and biometrics",
+  "deleting": "Deleting",
   "diastolic": "diastolic",
   "discard": "Discard",
+  "edit": "Edit",
+  "editOrDeleteVitalsAndBiometrics": "Edit or delete Vitals and Biometrics",
+  "editVitalsAndBiometrics": "Edit Vitals and Biometrics",
+  "encounterUuidRequired": "Encounter UUID is required to delete vitals or biometrics",
   "error": "Error",
+  "errorDeleting": "Error deleting vitals and biometrics",
   "female": "Female",
   "goToSummary": "Go to Summary",
   "heartRate": "Heart rate",
@@ -54,9 +64,12 @@
   "vitals": "Vitals",
   "Vitals & Biometrics": "Vitals & Biometrics",
   "vitalsAndBiometrics": "Vitals and biometrics",
+  "vitalsAndBiometricsDeleted": "Vitals and biometrics deleted",
   "vitalsAndBiometricsNowAvailable": "They are now visible on the Vitals and Biometrics page",
-  "vitalsAndBiometricsRecorded": "Vitals and Biometrics saved",
+  "vitalsAndBiometricsSaved": "Vitals and Biometrics saved",
   "vitalsAndBiometricsSaveError": "Error saving vitals and biometrics",
+  "vitalsAndBiometricsUpdated": "Vitals and Biometrics updated",
+  "vitalsAndBiometricsUpdateError": "Error updating Vitals and Biometrics",
   "vitalsHistory": "Vitals history",
   "vitalSignDisplayed": "Vital sign displayed",
   "vitalSigns": "Vital signs",