Adding file attachment support #128

arodidev · 2023-10-08T11:31:14Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

This PR adds support for file attachment capture and submission to the attachments endpoint, via upload or via camera capture.

Screenshots

screen-recording-2023-10-08-at-135526_uv2wAQ9I.mp4

Related Issue

Other

…rodidev/openmrs-form-engine-lib into RFE-add-file-rendering-support

arodidev · 2023-10-13T07:20:19Z

@kajambiya kindly point out the variable in question

src/api/api.ts

src/components/inputs/file/file.component.tsx

src/api/api.ts

src/components/encounter/ohri-encounter-form.component.tsx

src/components/inputs/camera/camera.component.scss

src/components/inputs/file/file.component.scss

src/api/types.ts

samuelmale · 2023-10-16T10:24:35Z

@arodidev have you tested this out in edit mode? If so, does it initialize the field value as expected?

arodidev · 2023-10-16T12:03:19Z

@arodidev have you tested this out in edit mode? If so, does it initialize the field value as expected?

Not yet, will look into this.

samuelmale · 2023-10-30T09:37:09Z

src/utils/common-expression-helpers.ts

+export function dataURItoFile(dataURI: string) {
+  const byteString = atob(dataURI.split(',')[1]);
+  const mimeString = dataURI
+    .split(',')[0]
+    .split(':')[1]
+    .split(';')[0];
+
+  // write the bytes of the string to a typed array
+  const buffer = new Uint8Array(byteString.length);
+
+  for (let i = 0; i < byteString.length; i++) {
+    buffer[i] = byteString.charCodeAt(i);
+  }
+
+  const blob = new Blob([buffer], { type: mimeString });
+  return { blob, mimeString };
+}
+
+export function fileToBase64(fileObject) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      const base64String = reader.result;
+      resolve(base64String);
+    };
+
+    reader.onerror = error => {
+      reject(error);
+    };
+
+    reader.readAsDataURL(fileObject);
+  });
+}


Do we plan on referencing these functions within business logic?

Will remove, had used them in a prior implementation.

samuelmale · 2023-10-30T09:49:14Z

src/components/inputs/file/file.component.tsx

+  const myInitVal = useMemo(() => {
+    const initialValuesObject = encounterContext.initValues;
+    const attachmentValue = Object.keys(initialValuesObject)
+      .filter((key) => key === question.id)
+      .reduce((cur, key) => {
+        return Object.assign(cur, { [key]: initialValuesObject[key] });
+      }, {});
+    return attachmentValue;
+  }, [encounterContext]);
+
+  const attachmentValue = useMemo(() => {
+    const firstValue = Object?.values(myInitVal)[0];
+    if (firstValue) {
+      const attachment = createGalleryEntry(firstValue?.[0]);
+      return attachment;
+    }
+  }, [myInitVal]);


By design, a typical visual component isn't supposed to know how to pick these values from the encounter context. We delegate these tasks to Field Handlers. This was intended to minimize coupling (UI with business logic) and ensure a separation of concerns. Just for consistency, I think you wanna introduce a FileSubmissionHandler

This makes sense, will implement.

samuelmale · 2023-10-30T09:53:01Z

src/hooks/useInitialValues.ts

-        .filter(field => isEmpty(field.value))
-        .forEach(field => {
+        .filter((field) => isEmpty(field.value))
+        .filter((field) => field.questionOptions.rendering !== 'file')


If you follow the handler patterns, this change wouldn't be necessary

samuelmale · 2023-10-30T09:53:39Z

src/hooks/useInitialValues.ts

+  useEffect(() => {
+    const emptyValues = {
+      checkbox: [],
+      toggle: false,
+      default: '',
+    };
+    const attachmentFields = formFields.filter((field) => field.questionOptions.rendering === 'file');
+
+    if (attachmentFields.length) {
+      if (encounter) {
+        Promise.all(
+          attachmentFields.map((field) => {
+            return formFieldHandlers[field.type]?.getInitialValue(encounter, field, formFields);
+          }),
+        ).then((responses) => {
+          responses.forEach((responseValue, index) => {
+            const eachField = attachmentFields[index];
+
+            const filteredResponseValue = responseValue['results'].filter(
+              (eachResponse) => eachResponse.comment === eachField.id,
+            );
+
+            initialValues[eachField.id] = isEmpty(responseValue)
+              ? emptyValues[eachField.questionOptions.rendering] ?? emptyValues.default
+              : filteredResponseValue;
+
+            setInitialValues({ ...initialValues });
+          });
+        });
+      }
+    }


Again, let's put this in a handler

samuelmale · 2023-10-30T09:54:51Z

src/utils/common-utils.ts

+export function createGalleryEntry(data: AttachmentResponse): Attachment {
+  const attachmentUrl = '/ws/rest/v1/attachment';
+  return {
+    id: data.uuid,
+    src: `${window.openmrsBase}${attachmentUrl}/${data.uuid}/bytes`,
+    title: data.comment,
+    description: '',
+    dateTime: formatDate(new Date(data.dateTime), {
+      mode: 'wide',
+    }),
+    bytesMimeType: data.bytesMimeType,
+    bytesContentFamily: data.bytesContentFamily,
+  };
+}


What's a gallery entry? Do we have such a domain defined within the library?

Picked this implementation from esm-patient-attachments-app, which converts the attachment response into a usable attachment.

Yes I understand, within the context of that esm, it makes sense to use the term "gallery" because there is an actual gallery but we don't have one here. Can you revise the naming?

samuelmale · 2023-10-30T09:59:16Z

src/components/encounter/ohri-encounter-form.component.tsx

+            .forEach((field) => {
+              return saveAttachment(
+                encounter?.patient.uuid,
+                field,
+                field?.questionOptions.concept,
+                new Date().toISOString(),
+                encounter?.uuid,
+                ac,
+              );


Again as I suggested before, can we resolve these in parallel?

My bad, will implement

samuelmale · 2023-10-30T10:00:00Z

src/components/encounter/ohri-encounter-form.component.tsx

+  useEffect(() => {
+    if (tempInitialValues) {
+      setInitValues(tempInitialValues);
+    }
+  }, [tempInitialValues]);
+


Why do you need this?

Did you mean the useEffect?

Yes, I'm asking because when introducing new rendering types most of the time we don't have reason to touch this level of code as it's already abstracted at a high level, that's assuming the standard patterns are followed.

Once the initial values are loaded from useInitialValues hook, I am passing down the initial values to the field via context, hence this snippet which updates the state variable holding the initial values.

Again, you don't need this change if you properly follow the standard patterns. Kindly consider introducing a handler.

Will do, thank you.

Could we also have a session to discuss this further? There are some areas I need clarity on.

eudson · 2023-11-01T15:25:24Z

@samuelmale this PR needs to be merged. We will work on the handler next sprint (in two weeks), can you please undo your change request ?

Maybe addressed in a followup commit

jona42-ui and others added 12 commits August 13, 2023 21:06

(feat): add file picker to form engine

19828ac

Merge branch 'main' into resolve-conflict

07bdb3c

Merge branch 'openmrs:main' into RFE-add-file-rendering-support

a175f42

Testing some stuff

7e51096

File-component addition

340d5b3

Updated with logs removed

55a15a7

Testing encounter endpoint

7d4a729

Image uploader

7e7fb98

MVP

9c3748d

Merge branch 'RFE-add-file-rendering-support' of https://github.com/a…

18459ae

…rodidev/openmrs-form-engine-lib into RFE-add-file-rendering-support

Added File control to new inBuiltControls.ts

43e23a8

package update

9128df5

arodidev marked this pull request as ready for review October 10, 2023 17:11

pirupius requested review from samuelmale, donaldkibet and pirupius October 10, 2023 20:38

kajambiya reviewed Oct 13, 2023

View reviewed changes

src/api/api.ts Outdated Show resolved Hide resolved

src/components/inputs/file/file.component.tsx Outdated Show resolved Hide resolved

src/api/api.ts Outdated Show resolved Hide resolved

PR comment's resolutions

509015f

arodidev requested a review from kajambiya October 13, 2023 10:32

kajambiya approved these changes Oct 13, 2023

View reviewed changes