From aeb0d546cf89598e13486496a110ed8a5bce0367 Mon Sep 17 00:00:00 2001 From: subham kumar Date: Fri, 2 Feb 2024 15:04:07 +0530 Subject: [PATCH 1/2] (fix) O3-2756: Fix inline dropdown rendering in appointments and service queues headers (#950) * (fix) O3-2756: Fix inline dropdown rendering in appointments and service queues headers --------- Co-authored-by: Dennis Kigen --- .../appointments-header.component.tsx | 47 +++++++++---------- .../appointments-header.scss | 13 +++++ .../patient-queue-header.component.tsx | 28 +++++------ .../patient-queue-header.scss | 16 ++++--- 4 files changed, 58 insertions(+), 46 deletions(-) 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 index 6024a1bbf..630889416 100644 --- 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,7 +43,7 @@ const AppointmentsHeader: React.FC = ({ title, onChange datePickerType="single"> = ({ title, onChange /> - {typeof onChange === 'function' && ( -
- - (item ? item.name : '')} - label={t('selectServiceType', 'Select service type')} - titleText={t('view', 'View')} - type="inline" - size="sm" - direction="bottom" - onChange={({ selectedItem }) => onChange(selectedItem?.uuid)} - /> - -
- )} +
+ {typeof onChange === 'function' && ( + (item ? item.name : '')} + label={t('selectServiceType', 'Select service type')} + type="inline" + size="sm" + direction="bottom" + titleText={t('view', 'View')} + onChange={({ selectedItem }) => onChange(selectedItem?.uuid)} + /> + )} +
); diff --git a/packages/esm-appointments-app/src/appointments-header/appointments-header.scss b/packages/esm-appointments-app/src/appointments-header/appointments-header.scss index df091b9f3..687d5f01b 100644 --- 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-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 index 4e6b12912..1a666260f 100644 --- 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 }) => { {formatDate(new Date(), { mode: 'standard' })} -
- - {isLoading ? ( - - ) : ( - (item ? item.name : '')} - type="inline" - onChange={handleQueueLocationChange} - /> - )} +
+ (item ? item.name : '')} + titleText={t('view', 'View')} + type="inline" + onChange={handleQueueLocationChange} + />
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 index f2debbd6b..b14242040 100644 --- 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; } } From de0e9834f0ea215857e0dc5018841d4fb7957432 Mon Sep 17 00:00:00 2001 From: Usama Idriss Kakumba <53287480+usamaidrsk@users.noreply.github.com> Date: Fri, 2 Feb 2024 12:44:29 +0300 Subject: [PATCH 2/2] (fix) O3-2781: Fix various aspects of the appointments summary table UI (#956) * (fix) O3-2781: Fix various aspects of the appointments summary table UI - Fix the OverflowMenu aria label and tooltip alignment position - Fix the patient identifier item display - Fix the table size - Install missing lint-staged dependency (required in pre-commit hook) --------- Co-authored-by: Dennis Kigen --- package.json | 1 + .../src/helpers/functions.ts | 24 +- .../appointment-actions.component.tsx | 3 +- .../appointments-list.component.tsx | 11 +- .../home-appointments/appointments-list.scss | 10 - .../appointments-table.resource.ts | 2 +- .../esm-appointments-app/src/types/index.ts | 5 +- yarn.lock | 295 +++++++++++++++++- 8 files changed, 318 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 3107d5204..53e688d9d 100644 --- 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/helpers/functions.ts b/packages/esm-appointments-app/src/helpers/functions.ts index e80ab7692..5410c0bd2 100644 --- 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 = []) => { @@ -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 index 973b5965b..892c3d58b 100644 --- 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 ( 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 index 572d1e439..7d4d13d01 100644 --- 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 ( - ); @@ -87,7 +87,6 @@ const RenderStatus = ({ status, t, appointmentUuid, mutate }: RenderStatusProps)