Fixup

openmrs · Sep 16, 2024 · 29f8641 · 29f8641
1 parent 673bf5b
commit 29f8641
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 61 deletions.
diff --git a/...esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx b/...esm-patient-attachments-app/src/camera-media-uploader/camera-media-uploader.component.tsx
@@ -8,6 +8,7 @@ import FileReviewContainer from './file-review.component';
 import MediaUploaderComponent from './media-uploader.component';
 import UploadStatusComponent from './upload-status.component';
 import styles from './camera-media-uploader.scss';
+import { useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 
 interface CameraMediaUploaderModalProps {
   allowedExtensions: Array<string> | null;
@@ -37,6 +38,7 @@ const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
   const [error, setError] = useState<Error>(null);
   const [filesToUpload, setFilesToUpload] = useState<Array<UploadedFile>>([]);
   const [uploadFilesToServer, setUploadFilesToServer] = useState(false);
+  const { allowedFileExtensions } = useAllowedFileExtensions();
 
   const handleTakePhoto = useCallback((file: string) => {
     setFilesToUpload([
@@ -76,7 +78,7 @@ const CameraMediaUploaderModal: React.FC<CameraMediaUploaderModalProps> = ({
   return (
     <CameraMediaUploaderContext.Provider
       value={{
-        allowedExtensions,
+        allowedExtensions: allowedFileExtensions,
         cameraOnly,
         clearData,
         closeModal,

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.component.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IconButton } from '@carbon/react';
+import classNames from 'classnames';
+import { Button } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import { showModal, toOmrsIsoString, type UploadedFile } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { showModal, toOmrsIsoString, useLayoutType, type UploadedFile } from '@openmrs/esm-framework';
 import styles from './capture-photo.scss';
 
 export interface CapturePhotoProps {
@@ -12,6 +13,8 @@ export interface CapturePhotoProps {
 
 const CapturePhoto: React.FC<CapturePhotoProps> = ({ initialState, onCapturePhoto }) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
   const [dataUri, setDataUri] = useState(null);
 
   const showCam = useCallback(() => {
@@ -23,39 +26,45 @@ const CapturePhoto: React.FC<CapturePhotoProps> = ({ initialState, onCapturePhot
           close();
         });
       },
+      cameraOnly: false,
       collectDescription: false,
       closeModal: () => {
         close();
       },
-      title: t('addPhoto', 'Add Image'),
-      cameraOnly: false,
+      title: t('addAnImage', 'Add image'),
     });
   }, [onCapturePhoto, t]);
 
-  const showPlaceholderText = !dataUri && !initialState;
+  const showEmptyState = !dataUri && !initialState;
 
   return (
-    <div className={styles.imageContainer}>
-      {showPlaceholderText ? (
-        <div className={styles.placeholderText}>{t('noImageToDisplay', 'No image to display')}</div>
-      ) : (
-        <div className={styles.preview}>
-          <img src={dataUri || initialState} alt="Preview" className={styles.previewImage} />
-        </div>
-      )}
-      <div className={styles.editImage}>
-        <span className={styles.editText}>{t('edit', 'Edit')}</span>
-        <IconButton
+    <>
+      <div className={styles.imageContainer}>
+        {showEmptyState ? (
+          <span className={styles.emptyState}>{t('noImageToDisplay', 'No image to display')}</span>
+        ) : (
+          <img
+            alt={t('imagePreview', 'Image preview')}
+            className={classNames({
+              [styles.imagePreview]: !showEmptyState,
+              [styles.altImagePreview]: !dataUri || !initialState,
+            })}
+            src={dataUri || initialState}
+          />
+        )}
+      </div>
+      <div className={styles.editButtonContainer}>
+        <Button
           className={styles.editButton}
-          label={showPlaceholderText ? t('addPatientImage', 'Add image') : t('changeImage', 'Change Image')}
           kind="ghost"
           onClick={showCam}
-          size="md"
+          renderIcon={(props) => <Edit {...props} />}
+          size={responsiveSize}
         >
-          <Edit style={{ fill: '#ffffff' }} />
-        </IconButton>
+          <span>{t('edit', 'Edit')}</span>
+        </Button>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.scss b/packages/esm-patient-attachments-app/src/camera-media-uploader/capture-photo.scss
@@ -1,56 +1,50 @@
-@use '@carbon/layout';
 @use '@carbon/colors';
+@use '@carbon/layout';
 
 .imageContainer {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-}
-
-.placeholderText {
-  height: layout.$spacing-07;
+  text-align: center;
   font-size: layout.$spacing-04;
   color: colors.$cool-gray-70;
   width: 7.5rem;
   height: 7.5rem;
-  padding: layout.$spacing-08 layout.$spacing-07;
-  border: solid 1px colors.$cool-gray-80;
+  border: 1px solid colors.$cool-gray-80;
 }
 
-.editImage {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 7.5rem;
-  height: layout.$spacing-09;
-  padding: 0 layout.$spacing-04 0 0;
-  background-color: colors.$cool-gray-80;
+.imagePreview {
+  object-fit: contain;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.editText {
-  height: layout.$spacing-05;
-  margin-left: layout.$spacing-03;
-  padding-left: layout.$spacing-05;
-  color: colors.$white-0;
+.altImagePreview {
+  @extend .imagePreview;
+  padding: layout.$spacing-07;
+  height: auto;
 }
 
-.editButton {
-  display: flex;
-  width: layout.$spacing-05;
-  height: layout.$spacing-05;
-  justify-self: flex-end;
-  margin-right: layout.$spacing-03;
+.emptyState {
+  padding: layout.$spacing-07;
 }
 
-.preview {
+.editButtonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 7.5rem;
-  border: solid 1px colors.$cool-gray-80;
+  background-color: colors.$cool-gray-80;
 }
 
-.previewImage {
-  object-fit: contain;
-  display: block;
+.editButton {
+  color: colors.$white-0;
+  display: flex;
+  justify-content: space-between;
   width: 100%;
-  height: auto;
+
+  &:hover {
+    color: colors.$white-0;
+  }
 }
diff --git a/packages/esm-patient-attachments-app/translations/en.json b/packages/esm-patient-attachments-app/translations/en.json
@@ -1,8 +1,8 @@
 {
   "add": "Add",
+  "addAnImage": "Add image",
   "addAttachment": "Add Attachment",
   "addAttachment_title": "Add Attachment",
-  "addImage": "Add image +",
   "addMoreAttachments": "Add more attachments",
   "attachmentCaptionInstruction": "Enter caption",
   "attachments": "Attachments",
@@ -12,7 +12,6 @@
   "cameraAccessErrorMessage": "Please enable camera access in your browser settings and try again.",
   "cameraError": "Camera Error",
   "cancel": "Cancel",
-  "changeImage": "Change image",
   "chooseAnAllowedFileType": "The file \"{{fileName}}\" cannot be uploaded. Please upload a file with one of the following extensions: {{supportedExtensions}}, or {{ lastExtension }}.",
   "closeModal": "Close",
   "closePreview": "Close preview",
@@ -21,6 +20,7 @@
   "deleteAttachmentConfirmationText": "Are you sure you want to delete this {{attachmentType}}? This action can't be undone.",
   "deleteImage": "Delete image",
   "deletePdf": "Delete PDF",
+  "edit": "Edit",
   "error": "Error",
   "failed": "failed",
   "failedDeleting": "couldn't be deleted",
@@ -35,7 +35,9 @@
   "gridView": "Grid view",
   "image": "Image",
   "imageDescription": "Image description",
+  "imagePreview": "Image preview",
   "name": "name",
+  "noImageToDisplay": "No image to display",
   "options": "Options",
   "successfullyDeleted": "successfully deleted",
   "tableView": "Table view",

diff --git a/packages/esm-patient-common-lib/src/useAllowedFileExtensions.ts b/packages/esm-patient-common-lib/src/useAllowedFileExtensions.ts
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import useSWRImmutable from 'swr/immutable';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 
@@ -14,8 +15,11 @@ export function useAllowedFileExtensions() {
 
   const { data, error, isLoading } = useSWRImmutable<{ data: { results: Array<GlobalProperty> } }>(url, openmrsFetch);
 
-  const allowedFileExtensions =
-    data?.data?.results?.length > 0 ? data?.data?.results[0].value?.toLowerCase().split(',') || undefined : undefined;
+  const allowedFileExtensions = useMemo(() => {
+    return data?.data?.results?.length > 0
+      ? data?.data?.results[0].value?.toLowerCase().split(',') || undefined
+      : undefined;
+  }, [data]);
 
   return {
     allowedFileExtensions,