Merge remote-tracking branch 'origin/main'

openmrs · Feb 2, 2024 · 05b99df · 05b99df
2 parents 265eb89 + de0e983
commit 05b99df
Show file tree

Hide file tree

Showing 12 changed files with 376 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.1",
     "openmrs": "next",
     "prettier": "^3.1.1",
     "react": "^18.1.0",

diff --git a/packages/esm-appointments-app/src/appointments-header/appointments-header.component.tsx b/packages/esm-appointments-app/src/appointments-header/appointments-header.component.tsx
@@ -1,13 +1,13 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { DatePicker, DatePickerInput, Dropdown, Layer } from '@carbon/react';
 import { Location } from '@carbon/react/icons';
 import { useSession } from '@openmrs/esm-framework';
-import AppointmentsIllustration from './appointments-illustration.component';
-import styles from './appointments-header.scss';
-import { DatePicker, DatePickerInput, Dropdown, Layer } from '@carbon/react';
-import dayjs from 'dayjs';
 import { changeStartDate, useAppointmentDate } from '../helpers';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
+import AppointmentsIllustration from './appointments-illustration.component';
+import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
   title: string;
@@ -43,32 +43,31 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, onChange
             datePickerType="single">
             <DatePickerInput
               style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
-              id="date-picker-calendar-id"
+              id="appointment-date-picker"
               placeholder="DD-MMM-YYYY"
               labelText=""
               type="text"
               value={dayjs(currentAppointmentDate).format('DD MMM YYYY')}
             />
           </DatePicker>
         </div>
-        {typeof onChange === 'function' && (
-          <div className={styles.dropdownContainer}>
-            <Layer>
-              <Dropdown
-                aria-label="Select service type"
-                id="selectServicesDropDown"
-                items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
-                itemToString={(item) => (item ? item.name : '')}
-                label={t('selectServiceType', 'Select service type')}
-                titleText={t('view', 'View')}
-                type="inline"
-                size="sm"
-                direction="bottom"
-                onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
-              />
-            </Layer>
-          </div>
-        )}
+        <div className={styles.dropdownContainer}>
+          {typeof onChange === 'function' && (
+            <Dropdown
+              className={styles.dropdown}
+              aria-label="Select service type"
+              id="serviceDropdown"
+              items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
+              itemToString={(item) => (item ? item.name : '')}
+              label={t('selectServiceType', 'Select service type')}
+              type="inline"
+              size="sm"
+              direction="bottom"
+              titleText={t('view', 'View')}
+              onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
+            />
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/packages/esm-appointments-app/src/appointments-header/appointments-header.scss b/packages/esm-appointments-app/src/appointments-header/appointments-header.scss
@@ -46,7 +46,9 @@
 
 .dropdownContainer {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  margin-top: 0.25rem;
 }
 
 .value {
@@ -70,6 +72,17 @@
   }
 }
 
+.dropdown {
+  :global(.cds--list-box__field) {
+    width: 14rem;
+    overflow: hidden;
+  }
+
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    left: -4rem;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .date-and-location {

diff --git a/packages/esm-appointments-app/src/helpers/functions.ts b/packages/esm-appointments-app/src/helpers/functions.ts
@@ -1,6 +1,6 @@
-import { AppointmentSummary, Appointment } from '../types';
-import { formatDate, parseDate, formatDatetime } from '@openmrs/esm-framework';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { type Dayjs } from 'dayjs';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type AppointmentSummary, type Appointment } from '../types';
 import { configSchema } from '../config-schema';
 
 export const getHighestAppointmentServiceLoad = (appointmentSummary: Array<any> = []) => {
@@ -29,18 +29,18 @@ export const getServiceCountByAppointmentType = (
 
 function getAppointmentDuration(startTime = 0, endTime = 0) {
   const diff = endTime - startTime;
-  var minutes = Math.floor(diff / 60000);
+  const minutes = Math.floor(diff / 60000);
   return minutes + 'min';
 }
 
 function formatAMPM(date) {
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
-  var ampm = hours >= 12 ? 'PM' : 'AM';
+  let hours = date.getHours();
+  let minutes = date.getMinutes();
+  let ampm = hours >= 12 ? 'PM' : 'AM';
   hours = hours % 12;
   hours = hours ? hours : 12; // the hour '0' should be '12'
   minutes = minutes < 10 ? '0' + minutes : minutes;
-  var strTime = hours + ':' + minutes + ' ' + ampm;
+  const strTime = hours + ':' + minutes + ' ' + ampm;
   return strTime;
 }
 
@@ -64,9 +64,11 @@ export const mapAppointmentProperties = (appointment: Appointment, t?: Function)
     comments: appointment.comments ? appointment.comments : '--',
     appointmentNumber: appointment.appointmentNumber,
     color: appointment?.service?.color ?? '',
-    identifier: appointment?.patient?.identifiers?.find(
-      (identifier) => identifier.identifierName === configSchema.patientIdentifierType._default,
-    ).identifier,
+    identifier: appointment?.patient?.identifiers?.length
+      ? appointment.patient.identifiers.find(
+          (identifier) => identifier.identifierName === configSchema.patientIdentifierType._default,
+        ).identifier
+      : appointment.patient?.identifier,
     duration: appointment.service?.durationMins
       ? appointment?.service?.durationMins + t('minutes', 'min')
       : getAppointmentDuration(appointment.startDateTime, appointment.endDateTime),

diff --git a/packages/esm-appointments-app/src/home-appointments/appointment-actions.component.tsx b/packages/esm-appointments-app/src/home-appointments/appointment-actions.component.tsx
@@ -96,7 +96,8 @@ export const ActionsMenu = ({ appointment, useBahmniUI }: ActionMenuProps) => {
   return (
     <Layer>
       <OverflowMenu
-        aria-label="Edit appointment"
+        align="left"
+        aria-label="Options"
         selectorPrimaryFocus={'#editPatientDetails'}
         size={isDesktop ? 'sm' : 'lg'}
         flipped>

diff --git a/packages/esm-appointments-app/src/home-appointments/appointments-list.component.tsx b/packages/esm-appointments-app/src/home-appointments/appointments-list.component.tsx
@@ -32,9 +32,9 @@ import { EmptyDataIllustration } from './empty-data-illustration.component';
 import { launchCheckInAppointmentModal, handleComplete } from './common';
 import { SeeAllAppointmentsLink, AddAppointmentLink, ViewCalendarLink } from './links.component';
 import { type Appointment, type MappedHomeAppointment } from '../types';
+import { type ConfigObject } from '../config-schema';
 import { useTodaysAppointments } from './appointments-table.resource';
 import styles from './appointments-list.scss';
-import { type ConfigObject } from '../config-schema';
 
 interface PaginationData {
   goTo: (page: number) => void;
@@ -78,7 +78,7 @@ const RenderStatus = ({ status, t, appointmentUuid, mutate }: RenderStatusProps)
       );
     case 'CheckedIn':
       return (
-        <Button kind="ghost" className={styles.actionButton} onClick={() => handleComplete(appointmentUuid, mutate, t)}>
+        <Button kind="ghost" onClick={() => handleComplete(appointmentUuid, mutate, t)}>
           {t('complete', 'Complete')}
         </Button>
       );
@@ -87,7 +87,6 @@ const RenderStatus = ({ status, t, appointmentUuid, mutate }: RenderStatusProps)
         <Button
           size="sm"
           kind="ghost"
-          className={styles.actionButton}
           disabled={status === 'CheckedIn'}
           onClick={() => launchCheckInAppointmentModal(appointmentUuid)}>
           {t('checkIn', 'Check In')}
@@ -185,7 +184,7 @@ const AppointmentsBaseTable = () => {
     identifier: {
       content: (
         <div className={styles.nameContainer}>
-          <span className={styles.identifier}>{appointment.identifier}</span>
+          <span>{appointment.identifier}</span>
         </div>
       ),
       sortKey: appointment.identifier,
@@ -205,7 +204,7 @@ const AppointmentsBaseTable = () => {
     },
     actionButton: {
       content: (
-        <span className={styles.serviceContainer}>
+        <span>
           <RenderStatus status={appointment.status} appointmentUuid={appointment.id} t={t} mutate={mutate} />
         </span>
       ),
@@ -286,7 +285,7 @@ const AppointmentsBaseTable = () => {
           sortRow={handleSorting}
           overflowMenuOnHover={isDesktop(layout)}
           rows={tableRows}
-          size={isDesktop(layout) ? 'md' : 'lg'}
+          size={isDesktop(layout) ? 'lg' : 'sm'}
           useZebraStyles={true}>
           {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => {
             return (

diff --git a/packages/esm-appointments-app/src/home-appointments/appointments-list.scss b/packages/esm-appointments-app/src/home-appointments/appointments-list.scss
@@ -84,15 +84,6 @@
   width: max-content;
 }
 
-.identifier {
-  font-weight: 700;
-}
-
-.actionButton {
-  position: static;
-  padding: layout.$spacing-03 layout.$spacing-05 layout.$spacing-03 0;
-}
-
 .serviceColor {
   border-radius: 50%;
   margin-right: layout.$spacing-03;
@@ -135,7 +126,6 @@
 .missedIcon,
 .cancelIcon {
   width: 8rem;
-  padding: layout.$spacing-03 layout.$spacing-05 layout.$spacing-03 0;
   display: flex;
   align-items: center;
   height: layout.$spacing-09;

diff --git a/packages/esm-appointments-app/src/home-appointments/appointments-table.resource.ts b/packages/esm-appointments-app/src/home-appointments/appointments-table.resource.ts
@@ -3,9 +3,9 @@ import useSWR from 'swr';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { openmrsFetch } from '@openmrs/esm-framework';
-import { AppointmentService, Appointment } from '../types';
 import { useAppointmentDate, mapAppointmentProperties } from '../helpers';
 import { omrsDateFormat } from '../constants';
+import type { AppointmentService, Appointment } from '../types';
 
 export function useTodaysAppointments() {
   const { t } = useTranslation();

diff --git a/packages/esm-appointments-app/src/types/index.ts b/packages/esm-appointments-app/src/types/index.ts
@@ -1,5 +1,5 @@
-import { OpenmrsResource } from '@openmrs/esm-framework';
-import { amPm } from '../helpers';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type amPm } from '../helpers';
 
 export enum SearchTypes {
   BASIC = 'basic',
@@ -15,6 +15,7 @@ export interface Appointment {
   endDateTime: Date | number | any;
   location: OpenmrsResource;
   patient: {
+    identifier: string;
     identifiers: Array<Identifier>;
     name: string;
     uuid: string;

diff --git a/packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.component.tsx b/packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.component.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
-import { Dropdown, DropdownSkeleton } from '@carbon/react';
+import { Dropdown } from '@carbon/react';
 import { formatDate, useSession } from '@openmrs/esm-framework';
 import PatientQueueIllustration from './patient-queue-illustration.component';
 import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
@@ -45,20 +45,18 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
             <Calendar size={16} />
             <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
           </div>
-          <div className={styles.dropdown}>
-            <label className={styles.view}>{t('view', 'View')}:</label>
-            {isLoading ? (
-              <DropdownSkeleton />
-            ) : (
-              <Dropdown
-                id="typeOfCare"
-                label={currentQueueLocationName ?? t('all', 'All')}
-                items={[{ id: 'all', name: t('all', 'All') }, ...queueLocations]}
-                itemToString={(item) => (item ? item.name : '')}
-                type="inline"
-                onChange={handleQueueLocationChange}
-              />
-            )}
+          <div className={styles.dropdownContainer}>
+            <Dropdown
+              aria-label="Select queue location"
+              className={styles.dropdown}
+              id="queueLocationDropdown"
+              label={currentQueueLocationName ?? t('all', 'All')}
+              items={[{ id: 'all', name: t('all', 'All') }, ...queueLocations]}
+              itemToString={(item) => (item ? item.name : '')}
+              titleText={t('view', 'View')}
+              type="inline"
+              onChange={handleQueueLocationChange}
+            />
           </div>
         </div>
       </div>

diff --git a/packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.scss b/packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.scss
@@ -54,19 +54,21 @@
   @include type.type-style('label-01');
 }
 
-.dropdown {
+.dropdownContainer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
+}
 
-  :global(.cds--dropdown__wrapper--inline) {
-    align-items: center;
-    display: flex;
+.dropdown {
+  :global(.cds--list-box__field) {
+    width: 14rem;
+    overflow: hidden;
   }
 
-  :global(.cds--list-box__menu) {
-    left: -10.15rem;
+  :global(.cds--dropdown--inline .cds--list-box__menu) {
+    left: -4rem;
   }
 }