Fixup

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

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
@@ -12,13 +13,15 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tile,
 } from '@carbon/react';
-import { type Attachment, useLayoutType } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
+import { type Attachment, ResponsiveWrapper, useLayoutType } from '@openmrs/esm-framework';
+import { compare, EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { type AttachmentTableData } from '../utils';
 import styles from './attachments-table-overview.scss';
 
 interface AttachmentsTableOverviewProps {
-  attachments: Array<Attachment>;
+  attachments: Array<AttachmentTableData>;
   isLoading: boolean;
   onDeleteAttachment: (attachment: Attachment) => void;
   onOpenAttachment: (attachment: Attachment) => void;
@@ -51,7 +54,10 @@ const AttachmentsTableOverview: React.FC<AttachmentsTableOverviewProps> = ({
           </Button>
         ),
         type: attachment.bytesContentFamily,
-        dateUploaded: attachment.dateTime,
+        dateUploaded: {
+          content: attachment.dateTime,
+          sortKey: new Date(attachment.dateTimeValue).getTime(),
+        },
       })),
     [attachments, onOpenAttachment, responsiveSize],
   );
@@ -72,11 +78,32 @@ const AttachmentsTableOverview: React.FC<AttachmentsTableOverviewProps> = ({
         key: 'dateUploaded',
         header: t('dateUploaded', 'Date uploaded'),
         colSpan: 2,
+        isSortable: true,
       },
     ],
     [t],
   );
 
+  const sortRow = (cellA, cellB, { sortDirection, sortStates }) => {
+    if (sortDirection === sortStates.DESC) {
+      return compare(cellA?.sortKey, cellB?.sortKey);
+    }
+    return compare(cellB?.sortKey, cellA?.sortKey);
+  };
+
+  if (!rows.length) {
+    return (
+      <ResponsiveWrapper>
+        <Tile className={styles.emptyState}>
+          <EmptyDataIllustration />
+          <p className={styles.emptyStateContent}>
+            {t('noAttachmentsToDisplay', 'There are no attachments to display for this patient')}
+          </p>
+        </Tile>
+      </ResponsiveWrapper>
+    );
+  }
+
   if (isLoading) {
     return (
       <div className={styles.attachmentTable}>
@@ -93,6 +120,7 @@ const AttachmentsTableOverview: React.FC<AttachmentsTableOverviewProps> = ({
         overflowMenuOnHover={isDesktop}
         // `xs` on desktop to account for the overflow menu
         size={isTablet ? 'lg' : 'xs'}
+        sortRow={sortRow}
       >
         {({ rows, headers, getHeaderProps, getTableProps }) => (
           <Table {...getTableProps()} useZebraStyles>

packages/esm-patient-attachments-app/src/attachments/attachments-table-overview.scss

@@ -1,3 +1,7 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 .attachmentTable > .cds--data-table-header {
   display: none;
 }
@@ -10,3 +14,15 @@
 .menuItem {
   max-width: none;
 }
+
+.emptyState {
+  text-align: center;
+  background-color: white;
+}
+
+.emptyStateContent {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}

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

@@ -24,12 +24,17 @@ export function readFileAsString(file: File) {
   });
 }
 
-export function createGalleryEntry(data: AttachmentResponse): Attachment {
+export interface AttachmentTableData extends Attachment {
+  dateTimeValue: string;
+}
+
+export function createGalleryEntry(data: AttachmentResponse): AttachmentTableData {
   return {
     id: data.uuid,
     src: `${window.openmrsBase}${attachmentUrl}/${data.uuid}/bytes`,
     filename: data.filename.replace(/\.[^\\/.]+$/, ''),
     description: data.comment,
+    dateTimeValue: data.dateTime,
     dateTime: formatDate(new Date(data.dateTime), {
       mode: 'wide',
     }),

packages/esm-patient-attachments-app/translations/en.json

@@ -39,6 +39,7 @@
   "imagePreview": "Image preview",
   "name": "name",
   "nameIsRequired": "Name is required",
+  "noAttachmentsToDisplay": "There are no attachments to display for this patient",
   "noImageToDisplay": "No image to display",
   "options": "Options",
   "successfullyDeleted": "successfully deleted",

packages/esm-patient-common-lib/src/compare.ts

@@ -0,0 +1,19 @@
+/**
+ * Enables a comparison of arbitrary values with support for undefined/null.
+ * Requires the `<` and `>` operators to return something reasonable for the provided values.
+ */
+export function compare<T>(x?: T, y?: T) {
+  if (x == undefined && y == undefined) {
+    return 0;
+  } else if (x == undefined) {
+    return -1;
+  } else if (y == undefined) {
+    return 1;
+  } else if (x < y) {
+    return -1;
+  } else if (x > y) {
+    return 1;
+  } else {
+    return 0;
+  }
+}

packages/esm-patient-common-lib/src/index.ts

@@ -1,4 +1,5 @@
 export * from './cards';
+export * from './compare';
 export * from './dashboards/createDashboardLink';
 export * from './dashboards/DashboardExtension';
 export * from './empty-state';
@@ -15,9 +16,9 @@ export * from './orders';
 export * from './pagination';
 export * from './patient-summary/patient-summary-extension-order';
 export * from './programs/usePatientProgramEnrollment';
+export * from './store/patient-chart-store';
 export * from './time-helper';
 export * from './types';
 export * from './useAllowedFileExtensions';
 export * from './useSystemVisitSetting';
 export * from './workspaces';
-export * from './store/patient-chart-store';

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

@@ -20,10 +20,11 @@ import {
 } from '@carbon/react';
 import {
   CardHeader,
+  compare,
+  PatientChartPagination,
   type Order,
-  useOrderBasket,
   useLaunchWorkspaceRequiringVisit,
-  PatientChartPagination,
+  useOrderBasket,
 } from '@openmrs/esm-patient-common-lib';
 import {
   AddIcon,
@@ -553,24 +554,4 @@ function OrderBasketItemActions({
   );
 }
 
-/**
- * Enables a comparison of arbitrary values with support for undefined/null.
- * Requires the `<` and `>` operators to return something reasonable for the provided values.
- */
-function compare<T>(x?: T, y?: T) {
-  if (x == undefined && y == undefined) {
-    return 0;
-  } else if (x == undefined) {
-    return -1;
-  } else if (y == undefined) {
-    return 1;
-  } else if (x < y) {
-    return -1;
-  } else if (x > y) {
-    return 1;
-  } else {
-    return 0;
-  }
-}
-
 export default MedicationsDetailsTable;