From 00cefbda37e0de323943ec9169748161c90f3bbe Mon Sep 17 00:00:00 2001 From: vijay Date: Tue, 30 Jan 2024 00:08:09 +0530 Subject: [PATCH 1/8] (fix) 03-2658 Attachment description fixed When Viewing Images --- .../src/attachments/attachment-thumbnail.component.tsx | 4 +--- .../src/attachments/attachments-grid-overview.component.tsx | 2 -- .../src/attachments/image-preview.component.tsx | 5 ++--- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx index 6efaf8d5c0..49ffe11dbe 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx @@ -13,7 +13,7 @@ export default function AttachmentThumbnail(props: AttachmentThumbnailProps) { function ImageThumbnail(props: ImageProps) { return (
- {props.title} +
); } @@ -39,7 +39,6 @@ function Thumbnail(props: AttachmentThumbnailProps) { const imageProps = { src: props.imageProps.src, - title: props.imageProps.title, style: props.imageProps.style, onClick: props.imageProps?.onClick, }; @@ -60,7 +59,6 @@ type AttachmentThumbnailProps = { type ImageProps = { src: string; - title: string; style: Object; onClick?: () => void; }; diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx index 681289b640..a14bb94626 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx @@ -33,7 +33,6 @@ const AttachmentsGridOverview: React.FC = ({ {attachments.map((attachment, indx) => { const imageProps = { src: attachment.src, - title: attachment.title, style: {}, onClick: () => { openAttachment(attachment); @@ -48,7 +47,6 @@ const AttachmentsGridOverview: React.FC = ({ return (
-

{attachment.title}

{attachment.dateTime}

); diff --git a/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx index 6298ec07a3..d68c25d28a 100644 --- a/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx @@ -67,9 +67,8 @@ const AttachmentPreview: React.FC = ({
-

{attachmentToPreview.title}

- {attachmentToPreview?.description ? ( -

{attachmentToPreview.description}

+ {attachmentToPreview?.title ? ( +

{attachmentToPreview.title}

) : null}
From 7a94e973a28bb293150ac6dce9c77895ba5ba8d5 Mon Sep 17 00:00:00 2001 From: vijay Date: Tue, 30 Jan 2024 10:58:22 +0530 Subject: [PATCH 2/8] fixed the changes --- .../src/attachments/attachment-thumbnail.component.tsx | 4 +++- .../src/attachments/attachments-grid-overview.component.tsx | 2 ++ packages/esm-patient-attachments-app/src/root.scss | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx index 49ffe11dbe..6efaf8d5c0 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachment-thumbnail.component.tsx @@ -13,7 +13,7 @@ export default function AttachmentThumbnail(props: AttachmentThumbnailProps) { function ImageThumbnail(props: ImageProps) { return (
- + {props.title}
); } @@ -39,6 +39,7 @@ function Thumbnail(props: AttachmentThumbnailProps) { const imageProps = { src: props.imageProps.src, + title: props.imageProps.title, style: props.imageProps.style, onClick: props.imageProps?.onClick, }; @@ -59,6 +60,7 @@ type AttachmentThumbnailProps = { type ImageProps = { src: string; + title: string; style: Object; onClick?: () => void; }; diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx index a14bb94626..681289b640 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx @@ -33,6 +33,7 @@ const AttachmentsGridOverview: React.FC = ({ {attachments.map((attachment, indx) => { const imageProps = { src: attachment.src, + title: attachment.title, style: {}, onClick: () => { openAttachment(attachment); @@ -47,6 +48,7 @@ const AttachmentsGridOverview: React.FC = ({ return (
+

{attachment.title}

{attachment.dateTime}

); diff --git a/packages/esm-patient-attachments-app/src/root.scss b/packages/esm-patient-attachments-app/src/root.scss index c8e6835bda..fa23940123 100644 --- a/packages/esm-patient-attachments-app/src/root.scss +++ b/packages/esm-patient-attachments-app/src/root.scss @@ -15,7 +15,8 @@ } .muted { - color: $text-02; + color: $color-gray-70; + @include type.type-style("label-01"); } .bodyShort01 { From 9e3fb4c1780b6f93f0f291c68c15a22ed1f3ad07 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Tue, 30 Jan 2024 14:27:30 +0300 Subject: [PATCH 3/8] Minor fixup --- .../attachments-grid-overview.component.tsx | 4 ++-- .../src/attachments/attachments-grid-overview.scss | 12 ++++++++++++ packages/esm-patient-attachments-app/src/root.scss | 5 ----- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx index 681289b640..6483ea320c 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx @@ -48,8 +48,8 @@ const AttachmentsGridOverview: React.FC = ({ return (
-

{attachment.title}

-

{attachment.dateTime}

+

{attachment.title}

+

{attachment.dateTime}

); })} diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss index 6b47777a30..7c5fde8ccb 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss @@ -1,5 +1,6 @@ @use '@carbon/styles/scss/spacing'; @use '~@carbon/styles/scss/colors'; +@use '@carbon/styles/scss/type'; @import '../root.scss'; .galleryContainer { @@ -18,3 +19,14 @@ object-fit: cover; } +.muted { + color: $color-gray-70; + @include type.type-style("label-01"); + margin: 0.25rem; +} + +.title { + @extend .bodyLong01; + color: colors.$gray-100; + margin: 0.25rem; +} diff --git a/packages/esm-patient-attachments-app/src/root.scss b/packages/esm-patient-attachments-app/src/root.scss index fa23940123..7d7fdf6a29 100644 --- a/packages/esm-patient-attachments-app/src/root.scss +++ b/packages/esm-patient-attachments-app/src/root.scss @@ -14,11 +14,6 @@ @include type.type-style("body-long-01"); } -.muted { - color: $color-gray-70; - @include type.type-style("label-01"); -} - .bodyShort01 { @include type.type-style("body-compact-01"); } From 7d6fed6fd5d58b6cdfaa5b02fbda8659c1aabd4c Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Fri, 2 Feb 2024 23:35:07 +0300 Subject: [PATCH 4/8] Show attachment description as well as fix up some more things --- .../attachments-grid-overview.component.tsx | 5 +- .../attachments-grid-overview.scss | 7 +- .../attachments-overview.component.tsx | 36 ++-- .../attachments/attachments-overview.test.tsx | 40 ++++ .../attachments-table-overview.component.tsx | 4 +- .../attachments/image-preview.component.tsx | 11 +- .../src/attachments/image-preview.scss | 7 + .../file-review.component.tsx | 92 ++++----- .../media-uploader.component.tsx | 2 +- .../esm-patient-attachments-app/src/utils.ts | 6 +- yarn.lock | 180 +++++++++--------- 11 files changed, 221 insertions(+), 169 deletions(-) create mode 100644 packages/esm-patient-attachments-app/src/attachments/attachments-overview.test.tsx diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx index 6483ea320c..d29f4eb5fe 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.component.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import classNames from 'classnames'; import { SkeletonPlaceholder } from '@carbon/react'; import { type Attachment } from '@openmrs/esm-framework'; import AttachmentThumbnail from './attachment-thumbnail.component'; @@ -33,7 +32,7 @@ const AttachmentsGridOverview: React.FC = ({ {attachments.map((attachment, indx) => { const imageProps = { src: attachment.src, - title: attachment.title, + title: attachment.filename, style: {}, onClick: () => { openAttachment(attachment); @@ -48,7 +47,7 @@ const AttachmentsGridOverview: React.FC = ({ return (
-

{attachment.title}

+

{attachment.filename}

{attachment.dateTime}

); diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss index 7c5fde8ccb..3a9ea1b77f 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-grid-overview.scss @@ -4,11 +4,12 @@ @import '../root.scss'; .galleryContainer { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; + display: grid; + grid-template-columns: + repeat(3, 1fr); grid-gap: spacing.$spacing-05; - padding: 0 spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05; + padding: spacing.$spacing-05; } .attachmentThumbnailSkeleton { diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx index 3896ded276..5660256421 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.component.tsx @@ -1,25 +1,25 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { Button, ContentSwitcher, Loading, Switch } from '@carbon/react'; -import { List, Thumbnail_2, Add } from '@carbon/react/icons'; +import { Button, ContentSwitcher, DataTableSkeleton, Loading, Switch } from '@carbon/react'; +import { Add, List, Thumbnail_2 } from '@carbon/react/icons'; import { - type UploadedFile, - type Attachment, + createAttachment, + deleteAttachmentPermanently, showModal, showSnackbar, + useAttachments, useLayoutType, UserHasAccess, - createAttachment, - deleteAttachmentPermanently, - useAttachments, + type Attachment, + type UploadedFile, } from '@openmrs/esm-framework'; import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib'; import { createGalleryEntry } from '../utils'; +import { useAllowedExtensions } from './use-allowed-extensions'; import AttachmentsGridOverview from './attachments-grid-overview.component'; import AttachmentsTableOverview from './attachments-table-overview.component'; import AttachmentPreview from './image-preview.component'; import styles from './attachments-overview.scss'; -import { useAllowedExtensions } from './use-allowed-extensions'; const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid }) => { const { t } = useTranslation(); @@ -45,7 +45,7 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid }) } }, [error, t]); - const showCam = useCallback(() => { + const showAttachmentModal = useCallback(() => { const close = showModal('capture-photo-modal', { saveFile: (file: UploadedFile) => createAttachment(patientUuid, file), allowedExtensions: allowedExtensions, @@ -67,15 +67,15 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid }) showSnackbar({ title: t('fileDeleted', 'File deleted'), - subtitle: `${attachment.title} ${t('successfullyDeleted', 'successfully deleted')}`, + subtitle: `${attachment.filename} ${t('successfullyDeleted', 'successfully deleted')}`, kind: 'success', isLowContrast: true, }); }) - .catch((error) => { + .catch(() => { showSnackbar({ title: t('error', 'Error'), - subtitle: `${attachment.title} ${t('failedDeleting', "couldn't be deleted")}`, + subtitle: `${attachment.filename} ${t('failedDeleting', "couldn't be deleted")}`, kind: 'error', }); }); @@ -104,26 +104,30 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid }) } else { const anchor = document.createElement('a'); anchor.setAttribute('href', attachment.src); - anchor.setAttribute('download', attachment.title); + anchor.setAttribute('download', attachment.filename); anchor.click(); } }, [setAttachmentToPreview], ); + if (isLoading) { + return ; + } + if (!attachments.length) { return ( ); } return ( -
+
{isValidating && }
@@ -137,7 +141,7 @@ const AttachmentsOverview: React.FC<{ patientUuid: string }> = ({ patientUuid })
-
diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-overview.test.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.test.tsx new file mode 100644 index 0000000000..bad7f90db0 --- /dev/null +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-overview.test.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import AttachmentsOverview from './attachments-overview.component'; +import { useAttachments } from '@openmrs/esm-framework'; + +const mockedUseAttachments = jest.mocked(useAttachments); + +it('renders a loading skeleton when attachments are loading', () => { + mockedUseAttachments.mockReturnValue({ + data: [], + error: null, + isLoading: true, + isValidating: false, + mutate: jest.fn(), + }); + + renderAttachmentsOverview(); + + expect(screen.getByRole('progressbar')).toBeInTheDocument(); + expect(screen.queryByRole('table')).not.toBeInTheDocument(); +}); + +it('renders an empty state if attachments are not available', () => { + mockedUseAttachments.mockReturnValue({ + data: [], + error: null, + isLoading: false, + isValidating: false, + mutate: jest.fn(), + }); + + renderAttachmentsOverview(); + + expect(screen.getByText(/There are no attachments to display for this patient/i)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /record attachments/i })).toBeInTheDocument(); +}); + +function renderAttachmentsOverview() { + render(); +} diff --git a/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx index c6e4d17b36..b700b159b9 100644 --- a/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.component.tsx @@ -17,8 +17,8 @@ import { useTranslation } from 'react-i18next'; import styles from './attachments-table-overview.scss'; interface AttachmentsTableOverviewProps { - isLoading: boolean; attachments: Array; + isLoading: boolean; deleteAttachment: (attachment: Attachment) => void; openAttachment: (attachment: Attachment) => void; } @@ -40,7 +40,7 @@ const AttachmentsTableOverview: React.FC = ({ id: attachment.id, fileName: ( openAttachment(attachment)}> - {attachment.title} + {attachment.filename} ), type: attachment.bytesContentFamily, diff --git a/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx b/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx index d68c25d28a..ea24abbbd2 100644 --- a/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx +++ b/packages/esm-patient-attachments-app/src/attachments/image-preview.component.tsx @@ -7,14 +7,14 @@ import { type Attachment, useLayoutType } from '@openmrs/esm-framework'; import styles from './image-preview.scss'; interface AttachmentPreviewProps { - closePreview: any; attachmentToPreview: Attachment; + closePreview: () => void; deleteAttachment: (attachment: Attachment) => void; } const AttachmentPreview: React.FC = ({ - closePreview, attachmentToPreview, + closePreview, deleteAttachment, }) => { const { t } = useTranslation(); @@ -49,7 +49,7 @@ const AttachmentPreview: React.FC = ({ />
{attachmentToPreview.bytesContentFamily === 'IMAGE' ? ( - {attachmentToPreview.title} + {attachmentToPreview.filename} ) : attachmentToPreview.bytesContentFamily === 'PDF' ? (