(feat) O3-2618: Attachments not hooked up in Visit Note

packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SkeletonPlaceholder } from '@carbon/react';
-import { type Attachment } from '../attachments-types';
+import { type Attachment } from '@openmrs/esm-framework';
 import AttachmentThumbnail from './attachment-thumbnail.component';
 import styles from './attachments-grid-overview.scss';
 

packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx

@@ -1,11 +1,19 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ContentSwitcher, Loading, Switch } from '@carbon/react';
-import { showModal, showSnackbar, useLayoutType, UserHasAccess } from '@openmrs/esm-framework';
+import {
+  type UploadedFile,
+  type Attachment,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  UserHasAccess,
+  createAttachment,
+  deleteAttachmentPermanently,
+  useAttachments,
+} from '@openmrs/esm-framework';
 import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
-import { createAttachment, deleteAttachmentPermanently, useAttachments } from '../attachments.resource';
 import { createGalleryEntry } from '../utils';
-import { type UploadedFile, type Attachment } from '../attachments-types';
 import AttachmentsGridOverview from './attachments-grid-overview.component';
 import AttachmentsTableOverview from './attachments-table-overview.component';
 import AttachmentPreview from './image-preview.component';

packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx

@@ -11,10 +11,9 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { useLayoutType } from '@openmrs/esm-framework';
+import { type Attachment, useLayoutType } from '@openmrs/esm-framework';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { type Attachment } from '../attachments-types';
 import styles from './attachments-table-overview.scss';
 
 interface AttachmentsTableOverviewProps {

packages/esm-patient-attachments-app/src/attachments/delete-attachment-confirmation-modal.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
-import { type Attachment } from '../attachments-types';
+import { type Attachment } from '@openmrs/esm-framework';
 import styles from './delete-attachment-confirmation-modal.scss';
 
 interface DeleteAttachmentConfirmationProps {

packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { Close } from '@carbon/react/icons';
-import { useLayoutType } from '@openmrs/esm-framework';
-import { type Attachment } from '../attachments-types';
+import { type Attachment, useLayoutType } from '@openmrs/esm-framework';
 import styles from './image-preview.scss';
 
 interface AttachmentPreviewProps {

packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader-types.tsx

@@ -1,5 +1,4 @@
-import { type UploadedFile } from '../attachments-types';
-import { type FetchResponse } from '@openmrs/esm-framework';
+import { type UploadedFile, type FetchResponse } from '@openmrs/esm-framework';
 
 export interface CameraMediaUploaderContextType {
   multipleFiles?: boolean;

packages/esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef, useContext } from 'react';
-import { type UploadedFile } from '../attachments-types';
-import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
+import { type UploadedFile, type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
 import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
 import { useTranslation } from 'react-i18next';
 import CameraComponent from './camera.component';

packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx

@@ -1,9 +1,8 @@
 import React, { type SyntheticEvent, useCallback, useEffect, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, TextArea, TextInput, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
-import { UserHasAccess } from '@openmrs/esm-framework';
+import { type UploadedFile, UserHasAccess } from '@openmrs/esm-framework';
 import styles from './file-review.scss';
-import { type UploadedFile } from '../attachments-types';
 import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
 import { DocumentPdf, DocumentUnknown } from '@carbon/react/icons';
 

packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.component.tsx

@@ -1,10 +1,11 @@
 import React, { useContext, useCallback } from 'react';
 import { FileUploaderDropContainer } from '@carbon/react';
-import styles from './media-uploader.scss';
-import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
-import { readFileAsString } from '../utils';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { readFileAsString } from '../utils';
+import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
+import styles from './media-uploader.scss';
+
 const MediaUploaderComponent = () => {
   const { setFilesToUpload, allowedExtensions, multipleFiles } = useContext(CameraMediaUploaderContext);
   const { t } = useTranslation();

packages/esm-patient-attachments-app/src/camera-media-uploader/uploading-status.component.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
-import styles from './uploading-status.scss';
 import { FileUploaderItem, Button, ButtonSet, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
 import CameraMediaUploaderContext from './camera-media-uploader-context.resources';
+import styles from './uploading-status.scss';
 
 interface UploadingStatusComponentProps {}
 

packages/esm-patient-attachments-app/src/utils.ts

@@ -1,6 +1,4 @@
-import { type AttachmentResponse, type Attachment } from './attachments-types';
-import { attachmentUrl } from './attachments.resource';
-import { formatDate } from '@openmrs/esm-framework';
+import { type AttachmentResponse, type Attachment, attachmentUrl, formatDate } from '@openmrs/esm-framework';
 
 export function readFileAsString(file: File) {
   return new Promise<string>((resolve) => {

packages/esm-patient-notes-app/src/notes/visit-notes-form.component.tsx

@@ -22,14 +22,17 @@ import {
   TextArea,
   Tile,
 } from '@carbon/react';
-import { Add, WarningFilled } from '@carbon/react/icons';
+import { Add, Edit, WarningFilled } from '@carbon/react/icons';
 import {
+  type UploadedFile,
   createErrorHandler,
   ExtensionSlot,
+  showModal,
   showSnackbar,
   useConfig,
   useLayoutType,
   useSession,
+  createAttachment,
 } from '@openmrs/esm-framework';
 import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../config-schema';
@@ -41,6 +44,9 @@ import {
   useVisitNotes,
 } from './visit-notes.resource';
 import styles from './visit-notes-form.scss';
+import { mutate } from 'swr';
+
+const allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp'];
 
 const visitNoteFormSchema = z.object({
   noteDate: z.date(),
@@ -49,8 +55,11 @@ const visitNoteFormSchema = z.object({
   }),
   secondaryDiagnosisSearch: z.string().optional(),
   clinicalNote: z.string().optional(),
+  image: z.any(),
 });
 
+type VisitNotesFormData = z.infer<typeof visitNoteFormSchema>;
+
 interface DiagnosisSearchProps {
   name: 'noteDate' | 'primaryDiagnosisSearch' | 'secondaryDiagnosisSearch' | 'clinicalNote';
   labelText: string;
@@ -60,8 +69,6 @@ interface DiagnosisSearchProps {
   error?: Object;
 }
 
-type VisitNotesFormData = z.infer<typeof visitNoteFormSchema>;
-
 const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
   const searchTimeoutInMs = 500;
   const { t } = useTranslation();
@@ -89,7 +96,9 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patie
     },
   });
 
+  const currentImage = watch('image');
   const { mutateVisitNotes } = useVisitNotes(patientUuid);
+  const mutateAttachments = () => mutate((key) => typeof key === 'string' && key.startsWith(`/ws/rest/v1/attachment`));
   const locationUuid = session?.sessionLocation?.uuid;
   const providerUuid = session?.currentProvider?.uuid;
 
@@ -173,6 +182,22 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patie
     };
   };
 
+  const showImageCaptureModal = useCallback(() => {
+    const close = showModal('capture-photo-modal', {
+      saveFile: (file: UploadedFile) => {
+        setValue('image', file);
+        close();
+        return Promise.resolve();
+      },
+      closeModal: () => {
+        close();
+      },
+      allowedExtensions: allowedImageTypes,
+      multipleFiles: false,
+      collectDescription: false,
+    });
+  }, [patientUuid]);
+
   const onSubmit = useCallback(
     (data: VisitNotesFormData, event: SyntheticEvent) => {
       const { noteDate, clinicalNote } = data;
@@ -221,8 +246,16 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patie
             );
           }
         })
+        .then(() => {
+          if (data.image) {
+            return createAttachment(patientUuid, data.image);
+          }
+        })
         .then(() => {
           mutateVisitNotes();
+          if (data.image) {
+            mutateAttachments();
+          }
           closeWorkspace();
 
           showSnackbar({
@@ -503,18 +536,34 @@ const VisitNotesForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patie
             <span className={styles.columnLabel}>{t('image', 'Image')}</span>
           </Column>
           <Column sm={3}>
-            <FormGroup legendText={t('addImageToVisit', 'Add an image to this visit')}>
+            <FormGroup>
               <p className={styles.imgUploadHelperText}>
                 {t('imageUploadHelperText', "Upload an image or use this device's camera to capture an image")}
               </p>
-              <Button
-                style={{ marginTop: '1rem' }}
-                kind={isTablet ? 'ghost' : 'tertiary'}
-                onClick={() => {}}
-                renderIcon={(props) => <Add size={16} {...props} />}
-              >
-                {t('addImage', 'Add image')}
-              </Button>
+              {currentImage?.base64Content ? (
+                <Button
+                  style={{ marginTop: '1rem' }}
+                  kind={isTablet ? 'ghost' : 'tertiary'}
+                  onClick={() => showImageCaptureModal()}
+                  renderIcon={(props) => <Edit size={16} {...props} />}
+                >
+                  {t('changeImage', 'Change image')}
+                </Button>
+              ) : (
+                <Button
+                  style={{ marginTop: '1rem' }}
+                  kind={isTablet ? 'ghost' : 'tertiary'}
+                  onClick={() => showImageCaptureModal()}
+                  renderIcon={(props) => <Add size={16} {...props} />}
+                >
+                  {t('addImage', 'Add image')}
+                </Button>
+              )}
+              {currentImage?.base64Content && currentImage?.fileType == 'image' ? (
+                <div className={styles.imgThumbnailContainer}>
+                  <img src={currentImage.base64Content} className={styles.imgThumbnail} />
+                </div>
+              ) : null}
             </FormGroup>
           </Column>
         </Row>

packages/esm-patient-notes-app/src/notes/visit-notes-form.scss

@@ -45,6 +45,18 @@
   color: $text-02;
 }
 
+.imgThumbnailContainer {
+  height: 5rem;
+  width: 6rem;
+  margin-top: spacing.$spacing-04;
+}
+
+.imgThumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .button {
   height: 4rem;
   display: flex;

packages/esm-patient-notes-app/translations/am.json

@@ -1,8 +1,8 @@
 {
   "add": "Add",
   "addImage": "Add image",
-  "addImageToVisit": "Add an image to this visit",
   "addVisitNote": "Add a visit note",
+  "changeImage": "Change image",
   "clinicalNoteLabel": "Write your notes",
   "clinicalNotePlaceholder": "Write any notes here",
   "date": "Date",

packages/esm-patient-notes-app/translations/ar.json

@@ -1,8 +1,8 @@
 {
   "add": "أضف",
   "addImage": "أضف صورة",
-  "addImageToVisit": "أضف صورة لهذه الزيارة",
   "addVisitNote": "أضف ملاحظة للزيارة",
+  "changeImage": "Change image",
   "clinicalNoteLabel": "اكتب ملاحظاتك",
   "clinicalNotePlaceholder": "اكتب أي ملاحظات هنا",
   "date": "تاريخ",