(feat) Allow privileged users to edit visit details and delete empty visits

packages/esm-patient-chart-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-chart-app/src/index.ts

@@ -217,6 +217,11 @@ export const startVisitDialog = getAsyncLifecycle(() => import('./visit/visit-pr
   moduleName,
 });
 
+export const deleteVisitDialog = getAsyncLifecycle(() => import('./visit/visit-prompt/delete-visit-dialog.component'), {
+  featureName: 'delete visit',
+  moduleName,
+});
+
 export const endVisitDialog = getAsyncLifecycle(() => import('./visit/visit-prompt/end-visit-dialog.component'), {
   featureName: 'end visit',
   moduleName,
@@ -239,3 +244,13 @@ export const deleteEncounterModal = getAsyncLifecycle(
     moduleName,
   },
 );
+
+export const editVisitDetailsActionButton = getAsyncLifecycle(
+  () => import('./visit/visit-action-items/edit-visit-details.component'),
+  { featureName: 'edit-visit-details', moduleName },
+);
+
+export const deleteVisitActionButton = getAsyncLifecycle(
+  () => import('./visit/visit-action-items/delete-visit-action-item.component'),
+  { featureName: 'delete-visit', moduleName },
+);

packages/esm-patient-chart-app/src/routes.json

@@ -160,6 +160,12 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "delete-visit-dialog",
+      "component": "deleteVisitDialog",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "end-visit-dialog",
       "component": "endVisitDialog",
@@ -206,6 +212,22 @@
       },
       "online": true,
       "offline": true
+    },
+    {
+      "name": "edit-visit-action-button",
+      "slot": "visit-detail-overview-actions",
+      "component": "editVisitDetailsActionButton",
+      "online": true,
+      "offline": true,
+      "order": 0
+    },
+    {
+      "name": "delete-visit-action-button",
+      "slot": "visit-detail-overview-actions",
+      "component": "deleteVisitActionButton",
+      "online": true,
+      "offline": true,
+      "order": 1
     }
   ],
   "pages": [

packages/esm-patient-chart-app/src/visit/hooks/useDeleteVisit.hook.tsx

@@ -0,0 +1,81 @@
+import { Visit, showActionableNotification, showNotification, useVisit } from '@openmrs/esm-framework';
+import { deleteVisit, restoreVisit, useVisits } from '../visits-widget/visit.resource';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+
+export function useDeleteVisit(patientUuid: string, visit: Visit, onVisitDelete = () => {}, onVisitRestore = () => {}) {
+  const { mutateVisits } = useVisits(patientUuid);
+  const { mutate: mutateCurrentVisit } = useVisit(patientUuid);
+  const [isDeletingVisit, setIsDeletingVisit] = useState(false);
+  const { t } = useTranslation();
+
+  const restoreDeletedVisit = () => {
+    restoreVisit(visit?.uuid)
+      .then(() => {
+        showNotification({
+          title: t('visitRestored', 'Visit restored'),
+          description: t('visitRestoredSuccessfully', '{{visit}} restored successfully', {
+            visit: visit?.visitType?.display ?? t('visit', 'Visit'),
+          }),
+          kind: 'success',
+        });
+        mutateVisits();
+        mutateCurrentVisit();
+        onVisitRestore?.();
+      })
+      .catch(() => {
+        showNotification({
+          title: t('visitNotRestored', "Visit couldn't be restored"),
+          description: t('errorWhenRestoringVisit', 'Error occured when restoring {{visit}}', {
+            visit: visit?.visitType?.display ?? t('visit', 'Visit'),
+          }),
+          kind: 'error',
+        });
+      });
+  };
+
+  const initiateDeletingVisit = () => {
+    setIsDeletingVisit(true);
+    const isCurrentVisitDeleted = !visit?.stopDatetime;
+
+    deleteVisit(visit?.uuid)
+      .then(() => {
+        mutateVisits();
+        mutateCurrentVisit();
+        // TODO: Needs to be replaced with Actionable Snackbar when Actionable
+        showActionableNotification({
+          title: !isCurrentVisitDeleted
+            ? t('visitDeleted', '{{visit}} deleted', {
+                visit: visit?.visitType?.display ?? t('visit', 'Visit'),
+              })
+            : t('visitCancelled', 'Visit cancelled'),
+          kind: 'success',
+          subtitle: !isCurrentVisitDeleted
+            ? t('visitCancelSuccessMessage', 'Active {{visit}} cancelled successfully', {
+                visit: visit?.visitType?.display ?? t('visit', 'Visit'),
+              })
+            : t('visitCanceled', 'Canceled active visit successfully'),
+          actionButtonLabel: t('undo', 'Undo'),
+          onActionButtonClick: restoreDeletedVisit,
+        });
+        onVisitDelete?.();
+      })
+      .catch(() => {
+        showNotification({
+          title: isCurrentVisitDeleted
+            ? t('errorCancellingVisit', 'Error cancelling active visit')
+            : t('errorDeletingVisit', 'Error deleting visit'),
+          kind: 'error',
+          description: t('errorOccuredDeletingVisit', 'An error occured when deleting visit'),
+        });
+      })
+      .finally(() => {
+        setIsDeletingVisit(false);
+      });
+  };
+
+  return {
+    initiateDeletingVisit,
+    isDeletingVisit,
+  };
+}

packages/esm-patient-chart-app/src/visit/visit-action-items/delete-visit-action-item.component.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { UserHasAccess, Visit, showModal, useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { TrashCan } from '@carbon/react/icons';
+
+interface DeleteVisitActionItemProps {
+  patientUuid: string;
+  visit: Visit;
+}
+
+const DeleteVisitActionItem: React.FC<DeleteVisitActionItemProps> = ({ patientUuid, visit }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const deleteVisit = () => {
+    const dispose = showModal('delete-visit-dialog', {
+      patientUuid,
+      visit,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const cancelVisit = () => {
+    const dispose = showModal('cancel-visit-dialog', {
+      patientUuid,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const isActiveVisit = !visit?.stopDatetime;
+
+  if (visit?.encounters?.length) {
+    return null;
+  }
+
+  return (
+    <UserHasAccess privilege="Delete Visits">
+      <Button
+        onClick={isActiveVisit ? cancelVisit : deleteVisit}
+        kind="danger--ghost"
+        renderIcon={TrashCan}
+        size={isTablet ? 'lg' : 'sm'}
+      >
+        {isActiveVisit ? t('cancelVisit', 'Cancel visit') : t('deleteVisit', 'Delete')}
+      </Button>
+    </UserHasAccess>
+  );
+};
+
+export default DeleteVisitActionItem;

packages/esm-patient-chart-app/src/visit/visit-action-items/edit-visit-details.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { UserHasAccess, Visit, useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { Edit } from '@carbon/react/icons';
+
+interface EditVisitDetailsActionItemProps {
+  patientUuid: string;
+  visit: Visit;
+}
+
+const EditVisitDetailsActionItem: React.FC<EditVisitDetailsActionItemProps> = ({ visit }) => {
+  const { t } = useTranslation();
+
+  const isTablet = useLayoutType() === 'tablet';
+
+  const editVisitDetails = () => {
+    launchPatientWorkspace('start-visit-workspace-form', {
+      workspaceTitle: t('editVisitDetails', 'Edit visit details'),
+      visitToEdit: visit,
+    });
+  };
+
+  return (
+    <UserHasAccess privilege="Edit Visits">
+      <Button onClick={editVisitDetails} kind="ghost" renderIcon={Edit} size={isTablet ? 'lg' : 'sm'}>
+        {t('editVisitDetails', 'Edit visit details')}
+      </Button>
+    </UserHasAccess>
+  );
+};
+
+export default EditVisitDetailsActionItem;

packages/esm-patient-chart-app/src/visit/visit-form/base-visit-type.component.tsx

@@ -7,7 +7,7 @@ import isEmpty from 'lodash-es/isEmpty';
 import { Layer, RadioButtonGroup, RadioButton, Search, StructuredListSkeleton } from '@carbon/react';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { useLayoutType, usePagination, VisitType } from '@openmrs/esm-framework';
-import { VisitFormData } from './visit-form.component';
+import { VisitFormData } from './visit-form.resource';
 import styles from './visit-type-overview.scss';
 
 interface BaseVisitTypeProps {

packages/esm-patient-chart-app/src/visit/visit-form/location-selection.component.tsx

@@ -7,7 +7,7 @@ import { useFormContext, Controller } from 'react-hook-form';
 import { Location, OpenmrsResource, useConfig, useSession } from '@openmrs/esm-framework';
 import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
 import { useLocations } from '../hooks/useLocations';
-import { VisitFormData } from './visit-form.component';
+import { VisitFormData } from './visit-form.resource';
 import { ChartConfig } from '../../config-schema';
 import styles from './visit-form.scss';
 

packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx

@@ -17,8 +17,8 @@ import {
 import { useTranslation } from 'react-i18next';
 import styles from './visit-attribute-type.scss';
 import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form';
-import { VisitFormData } from './visit-form.component';
 import dayjs from 'dayjs';
+import { VisitFormData } from './visit-form.resource';
 
 interface VisitAttributes {
   [uuid: string]: string;

packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import styles from './visit-form.scss';
+import { Controller, useFormContext } from 'react-hook-form';
+import { VisitFormData } from './visit-form.resource';
+import { DatePicker, DatePickerInput, Layer, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { amPm } from '@openmrs/esm-patient-common-lib';
+
+interface VisitDateTimeFieldProps {
+  dateFieldName: 'visitStartDate' | 'visitStopDate';
+  timeFieldName: 'visitStartTime' | 'visitStopTime';
+  timeFormatFieldName: 'visitStartTimeFormat' | 'visitStopTimeFormat';
+  minDate?: number;
+  maxDate?: number;
+}
+
+const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
+  dateFieldName,
+  timeFieldName,
+  timeFormatFieldName,
+  minDate,
+  maxDate,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const {
+    control,
+    formState: { errors },
+    getValues,
+  } = useFormContext<VisitFormData>();
+
+  // Since we have the separate date and time fields, the final validation needs to be done at the form
+  // submission, hence just using the min date with hours/ minutes/ seconds set to 0 and max date set to
+  // last second of the day. We want to just compare dates and not time.
+  minDate = minDate ? new Date(minDate).setHours(0, 0, 0, 0) : null;
+  maxDate = maxDate ? new Date(maxDate).setHours(23, 59, 59, 59) : null;
+
+  return (
+    <section>
+      <div className={styles.sectionTitle}>{t('dateAndTimeOfVisit', 'Date and time of visit')}</div>
+      <div className={classNames(styles.dateTimeSection, styles.sectionField)}>
+        <Controller
+          name={dateFieldName}
+          control={control}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <ResponsiveWrapper isTablet={isTablet}>
+              <DatePicker
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                id={dateFieldName}
+                style={{ paddingBottom: '1rem' }}
+                minDate={minDate}
+                maxDate={maxDate}
+                onChange={([date]) => onChange(date)}
+                value={value}
+              >
+                <DatePickerInput
+                  id={`${dateFieldName}Input`}
+                  labelText={t('date', 'Date')}
+                  placeholder="dd/mm/yyyy"
+                  style={{ width: '100%' }}
+                  invalid={errors[dateFieldName]?.message}
+                  invalidText={errors[dateFieldName]?.message}
+                />
+              </DatePicker>
+            </ResponsiveWrapper>
+          )}
+        />
+        <ResponsiveWrapper isTablet={isTablet}>
+          <Controller
+            name={timeFieldName}
+            control={control}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <TimePicker
+                id={timeFieldName}
+                labelText={t('time', 'Time')}
+                onChange={(event) => onChange(event.target.value as amPm)}
+                pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
+                style={{ marginLeft: '0.125rem', flex: 'none' }}
+                value={value}
+                onBlur={onBlur}
+                invalid={errors[timeFieldName]?.message}
+                invalidText={errors[timeFieldName]?.message}
+              >
+                <Controller
+                  name={timeFormatFieldName}
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <TimePickerSelect
+                      id={`${timeFormatFieldName}Input`}
+                      onChange={(event) => onChange(event.target.value as amPm)}
+                      value={value}
+                      aria-label={t('timeFormat ', 'Time Format')}
+                      invalid={errors[timeFormatFieldName]?.message}
+                      invalidText={errors[timeFormatFieldName]?.message}
+                    >
+                      <SelectItem value="AM" text="AM" />
+                      <SelectItem value="PM" text="PM" />
+                    </TimePickerSelect>
+                  )}
+                />
+              </TimePicker>
+            )}
+          />
+        </ResponsiveWrapper>
+      </div>
+    </section>
+  );
+};
+
+export default VisitDateTimeField;
+
+function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
+  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
+}