From 0d130f24448e864385651ef3356c1e37d48073fa Mon Sep 17 00:00:00 2001 From: jabahum Date: Thu, 24 Apr 2025 20:08:13 +0300 Subject: [PATCH 1/4] remove limit and fix pagination --- .../active-visits/patient-queues.resource.ts | 23 +++------- .../queue-clinical-table.component.tsx | 42 +++++++++-------- .../queue-triage-table.component.tsx | 45 ++++++++++--------- .../src/queue-reception-home.component.tsx | 12 +++-- 4 files changed, 62 insertions(+), 60 deletions(-) diff --git a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts index 76366865..6498826c 100644 --- a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts +++ b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts @@ -242,50 +242,41 @@ export function usePatientQueuePages( isToggled?: boolean, isClinical?: boolean, ) { - const pageSizes = [10, 20, 30, 40, 50]; - const [currentPage, setCurrentPage] = useState(1); - const [currentPageSize, setPageSize] = useState(10); - const [searchString, setSearchString] = useState(null); const [patientQueueFilter, setPatientQueueFilter] = useState({ - startIndex: currentPage - 1, v: ResourceRepresentation.Full, - limit: currentPageSize, - q: null, totalCount: true, parentLocation: isToggled && !isClinical ? currentLocation : '', status: isToggled ? currentStatus : '', room: !isToggled ? currentLocation : '', }); + const pageSizes = [10, 20, 30, 40, 50]; + const [currentPageSize, setPageSize] = useState(10); + const { items, isLoading, error } = usePatientQueues(patientQueueFilter); - const pagination = usePagination(items.results, currentPageSize); + const { goTo, results: paginatedItems, currentPage } = usePagination(items.results, currentPageSize); useEffect(() => { setPatientQueueFilter({ - startIndex: (currentPage - 1) * currentPageSize, v: ResourceRepresentation.Full, - limit: currentPageSize, - q: searchString, totalCount: true, parentLocation: isToggled && !isClinical ? currentLocation : '', status: isToggled ? currentStatus : '', room: !isToggled ? currentLocation : '', }); - }, [searchString, currentPage, currentPageSize, currentLocation, currentStatus, isToggled, isClinical]); + }, [ currentPage, currentPageSize, currentLocation, currentStatus, isToggled, isClinical]); return { - items: pagination.results, - pagination, + items: paginatedItems, totalCount: items.totalCount, currentPageSize, currentPage, - setCurrentPage, setPageSize, + goTo, pageSizes, isLoading, error, - setSearchString, }; } diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx index 410a156e..1866cefb 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx @@ -56,7 +56,7 @@ const ActiveClinicalVisitsTable: React.FC = ({ status }) const { t } = useTranslation(); const session = useSession(); const layout = useLayoutType(); - const [searchTerm, setSearchTerm] = useState(''); + // const [searchTerm, setSearchTerm] = useState(''); const { clinicalRoomTag } = useConfig(); @@ -77,11 +77,11 @@ const ActiveClinicalVisitsTable: React.FC = ({ status }) const currentPathName = useMemo(() => window.location.pathname, []); const fromPage = useMemo(() => getOriginFromPathName(currentPathName), [currentPathName]); - const handleSearchInputChange = useCallback((event) => { - setSearchTerm(event?.target?.value?.trim().toLowerCase()); - }, []); + // const handleSearchInputChange = useCallback((event) => { + // setSearchTerm(event?.target?.value?.trim().toLowerCase()); + // }, []); - const { isLoading, items, totalCount, currentPageSize, setPageSize, pageSizes, currentPage, setCurrentPage } = + const { items, currentPage, pageSizes, goTo, currentPageSize, setPageSize, isLoading, totalCount } = usePatientQueuePages(activeLocationUuid, status, isToggled, true); const tableHeaders = useMemo( @@ -141,10 +141,10 @@ const ActiveClinicalVisitsTable: React.FC = ({ status }) } // Filter by `searchTerm` if provided - if (searchTerm) { - const lowercasedTerm = searchTerm.toLowerCase(); - entries = entries.filter((entry) => entry?.patient?.person?.display?.toLowerCase()?.includes(lowercasedTerm)); - } + // if (searchTerm) { + // const lowercasedTerm = searchTerm.toLowerCase(); + // entries = entries.filter((entry) => entry?.patient?.person?.display?.toLowerCase()?.includes(lowercasedTerm)); + // } // Correct filtering for queueRoom tags entries = entries.filter((entry) => entry?.queueRoom?.tags?.some((item) => item.uuid === clinicalRoomTag)); @@ -160,10 +160,10 @@ const ActiveClinicalVisitsTable: React.FC = ({ status }) }); return entries; - }, [items, searchTerm, status, clinicalRoomTag]); + }, [items, status, clinicalRoomTag]); const tableRows = useMemo(() => { - return filteredPatientQueueEntries.map((patientqueue, entry) => ({ + return filteredPatientQueueEntries.map((patientqueue) => ({ ...patientqueue, id: patientqueue.uuid, visitNumber: { @@ -229,7 +229,7 @@ const ActiveClinicalVisitsTable: React.FC = ({ status }) } return ( - <> +
= ({ status }) rows={tableRows} useZebraStyles > - {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => ( + {({ rows, headers, getHeaderProps, getTableProps }) => ( = ({ status }) alignItems: 'center', }} > - + /> */} = ({ status }) pageSize={currentPageSize} pageSizes={pageSizes} totalItems={totalCount} - onChange={({ page, pageSize }) => { - setCurrentPage(page); - setPageSize(pageSize); + onChange={({ pageSize, page }) => { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + } + if (page !== currentPage) { + goTo(page); + } }} className={styles.paginationOverride} /> - +
); }; export default ActiveClinicalVisitsTable; diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx index 553a3f0a..6c8d336d 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx @@ -16,13 +16,11 @@ import { Tag, Tile, Toggle, - TableToolbarSearch, } from '@carbon/react'; import { useTranslation } from 'react-i18next'; import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework'; import { - getLocationByUuid, getOriginFromPathName, useParentLocation, usePatientQueuePages, @@ -61,7 +59,8 @@ const ActiveTriageVisitsTable: React.FC = ({ status }) = const { triageRoomTag } = useConfig(); const [isToggled, setIsToggled] = useState(false); - const [searchTerm, setSearchTerm] = useState(''); + // const [searchTerm, setSearchTerm] = useState(''); + const handleToggleChange = () => { setIsToggled(!isToggled); }; @@ -73,13 +72,13 @@ const ActiveTriageVisitsTable: React.FC = ({ status }) = const fromPage: string = getOriginFromPathName(currentPathName); - const handleSearchInputChange = useCallback((event) => { - const searchText = event?.target?.value?.trim().toLowerCase(); - setSearchTerm(searchText); - }, []); + // const handleSearchInputChange = useCallback((event) => { + // const searchText = event?.target?.value?.trim().toLowerCase(); + // setSearchTerm(searchText); + // }, []); - const { isLoading, items, totalCount, currentPageSize, setPageSize, pageSizes, currentPage, setCurrentPage } = - usePatientQueuePages(activeLocationUuid, status, isToggled, false); + const { items, currentPage, pageSizes, goTo, currentPageSize, setPageSize, isLoading, totalCount } = + usePatientQueuePages(activeLocationUuid, status, isToggled, true); const tableHeaders = useMemo( () => [ @@ -134,10 +133,10 @@ const ActiveTriageVisitsTable: React.FC = ({ status }) = break; } - if (searchTerm) { - const lowercasedTerm = searchTerm.toLowerCase(); - entries = entries.filter((entry) => entry.patient?.person?.display?.toLowerCase().includes(lowercasedTerm)); - } + // if (searchTerm) { + // const lowercasedTerm = searchTerm.toLowerCase(); + // entries = entries.filter((entry) => entry.patient?.person?.display?.toLowerCase().includes(lowercasedTerm)); + // } // Correct filtering for queueRoom tags entries = entries.filter((entry) => entry?.queueRoom?.tags?.some((item) => item.uuid === triageRoomTag)); @@ -149,10 +148,10 @@ const ActiveTriageVisitsTable: React.FC = ({ status }) = }); return entries; - }, [items, status, searchTerm, triageRoomTag]); + }, [items, status, triageRoomTag]); const tableRows = useMemo(() => { - return filteredPatientQueueEntries.map((patientqueue, index) => ({ + return filteredPatientQueueEntries.map((patientqueue) => ({ ...patientqueue, id: patientqueue.uuid, visitNumber: { @@ -232,7 +231,7 @@ const ActiveTriageVisitsTable: React.FC = ({ status }) = rows={tableRows} useZebraStyles > - {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => ( + {({ rows, headers, getHeaderProps, getTableProps }) => ( = ({ status }) = alignItems: 'center', }} > - + /> */} = ({ status }) = pageSize={currentPageSize} pageSizes={pageSizes} totalItems={totalCount} - onChange={({ page, pageSize }) => { - setCurrentPage(page); - setPageSize(pageSize); + onChange={({ pageSize, page }) => { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + } + if (page !== currentPage) { + goTo(page); + } }} className={styles.paginationOverride} /> diff --git a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx index ae42e761..8100498b 100644 --- a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx @@ -55,7 +55,7 @@ const ReceptionHome: React.FC = () => { const fromPage: string = getOriginFromPathName(currentPathName); - const { isLoading, items, totalCount, currentPageSize, setPageSize, pageSizes, currentPage, setCurrentPage } = + const { items, currentPage, pageSizes, goTo, currentPageSize, setPageSize, isLoading, totalCount } = usePatientQueuePages('', ''); const handleSearchInputChange = useCallback((event) => { @@ -246,9 +246,13 @@ const ReceptionHome: React.FC = () => { pageSize={currentPageSize} pageSizes={pageSizes} totalItems={totalCount} - onChange={({ page, pageSize }) => { - setCurrentPage(page); - setPageSize(pageSize); + onChange={({ pageSize, page }) => { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + } + if (page !== currentPage) { + goTo(page); + } }} className={styles.paginationOverride} /> From 04751a299aaa7d0f611539b643209be79c912c87 Mon Sep 17 00:00:00 2001 From: jabahum Date: Thu, 24 Apr 2025 21:13:37 +0300 Subject: [PATCH 2/4] chore --- .../change-status-dialog.component.tsx | 2 +- ...e-status-move-to-next-dialog.component.tsx | 2 +- .../active-visits/patient-queues.resource.ts | 3 +- .../pick-patient-dialog.component.tsx | 3 +- .../queue-clinical-table.component.tsx | 9 +- .../queue-triage-table.component.tsx | 7 +- ...ue-table-move-to-next-dialog.component.tsx | 2 +- .../clinic-metrics.component.tsx | 2 +- .../queue-board/queue-board.component.tsx | 2 +- .../visit-form/visit-form.component.tsx | 2 +- .../src/helpers/functions.ts | 57 ---- .../src/helpers/functions.tsx | 193 ++++++++++++ .../src/helpers/helpers.tsx | 282 ------------------ .../src/helpers/time-helpers.tsx | 15 - .../src/pageable-result.ts | 15 - .../queue-clinical-room-home.component.tsx | 2 +- ...ick-patient-queue-entry-menu.component.tsx | 2 +- .../status-icon.component.tsx | 17 -- .../src/queue-reception-home.component.tsx | 3 +- .../queue-completed-tile.component.tsx | 2 +- .../queue-in-queue-tile.component.tsx | 4 +- .../queue-waiting-tile.component.tsx | 4 +- .../src/queue-triage-home.component.tsx | 3 +- .../src/resource-filter-criteria.ts | 32 -- .../queue-summary-tiles.resource.ts | 0 .../empty-state/empty-state.component.tsx | 54 ---- .../src/utils/empty-state/empty-state.scss | 62 ---- .../esm-patient-queues-app/src/utils/utils.ts | 34 --- 28 files changed, 216 insertions(+), 599 deletions(-) delete mode 100644 packages/esm-patient-queues-app/src/helpers/functions.ts create mode 100644 packages/esm-patient-queues-app/src/helpers/functions.tsx delete mode 100644 packages/esm-patient-queues-app/src/helpers/helpers.tsx delete mode 100644 packages/esm-patient-queues-app/src/helpers/time-helpers.tsx delete mode 100644 packages/esm-patient-queues-app/src/pageable-result.ts delete mode 100644 packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx delete mode 100644 packages/esm-patient-queues-app/src/resource-filter-criteria.ts delete mode 100644 packages/esm-patient-queues-app/src/summary-tiles/queue-summary-tiles.resource.ts delete mode 100644 packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx delete mode 100644 packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss delete mode 100644 packages/esm-patient-queues-app/src/utils/utils.ts diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx index f574945d..ac86debb 100644 --- a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx @@ -30,7 +30,6 @@ import { useTranslation } from 'react-i18next'; import { useQueueRoomLocations } from '../hooks/useQueueRooms'; import { ArrowUp, ArrowDown } from '@carbon/react/icons'; import styles from './change-status-dialog.scss'; -import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils'; import { NewQueuePayload, addQueueEntry, @@ -43,6 +42,7 @@ import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource'; import { PatientQueue } from '../types/patient-queues'; +import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../helpers/functions'; interface ChangeStatusDialogProps { queueEntry: PatientQueue; diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx index 189b7a80..5cbffcbf 100644 --- a/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx @@ -28,7 +28,6 @@ import { } from '@openmrs/esm-framework'; import { useQueueRoomLocations } from '../hooks/useQueueRooms'; import styles from './change-status-dialog.scss'; -import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils'; import { NewQueuePayload, addQueueEntry, @@ -41,6 +40,7 @@ import { import { zodResolver } from '@hookform/resolvers/zod'; import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource'; import { Controller, useForm } from 'react-hook-form'; +import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../helpers/functions'; interface ChangeStatusDialogProps { patientUuid: string; diff --git a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts index 6498826c..4d814afd 100644 --- a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts +++ b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts @@ -3,10 +3,9 @@ import useSWR from 'swr'; import { openmrsFetch, restBaseUrl, usePagination } from '@openmrs/esm-framework'; import { PatientQueue } from '../types/patient-queues'; import { NewVisitPayload, ProviderResponse } from '../types'; -import { ResourceFilterCriteria, ResourceRepresentation, toQueryParams } from '../resource-filter-criteria'; -import { PageableResult } from '../pageable-result'; import { useEffect, useState } from 'react'; import last from 'lodash-es/last'; +import { PageableResult, ResourceFilterCriteria, ResourceRepresentation, toQueryParams } from '../helpers/functions'; export interface PatientQueueFilter extends ResourceFilterCriteria { status?: string; diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx index d0b98f0f..a98ff3b6 100644 --- a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx @@ -11,8 +11,7 @@ import { } from '@openmrs/esm-framework'; import { useTranslation } from 'react-i18next'; -import { trimVisitNumber } from '../helpers/functions'; -import { extractErrorMessagesFromResponse, handleMutate } from '../utils/utils'; +import { extractErrorMessagesFromResponse, handleMutate, trimVisitNumber } from '../helpers/functions'; import { PatientQueue } from '../types/patient-queues'; import { getCareProvider, updateQueueEntry } from './patient-queues.resource'; diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx index 1866cefb..b0c1c882 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx @@ -1,4 +1,4 @@ -import React, { AnchorHTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { AnchorHTMLAttributes, useCallback, useMemo, useState } from 'react'; import { DataTable, @@ -16,31 +16,28 @@ import { Tag, Tile, Toggle, - TableToolbarSearch, } from '@carbon/react'; import { useTranslation } from 'react-i18next'; import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework'; import { - getLocationByUuid, getOriginFromPathName, useParentLocation, usePatientQueuePages, } from '../patient-queues.resource'; -import { +import StatusIcon, { + QueueStatus, buildStatusString, formatWaitTime, getProviderTagColor, getTagColor, trimVisitNumber, } from '../../helpers/functions'; -import StatusIcon from '../../queue-entry-table-components/status-icon.component'; import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component'; import ViewActionsMenu from '../view-action-menu.components'; import NotesActionsMenu from '../notes-action-menu.components'; import styles from '../active-visits-table.scss'; import dayjs from 'dayjs'; -import { QueueStatus } from '../../utils/utils'; import { PatientQueueConfig } from '../../config-schema'; interface ActiveVisitsTableProps { diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx index 6c8d336d..7ddbf33b 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx @@ -1,4 +1,4 @@ -import React, { AnchorHTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { AnchorHTMLAttributes, useMemo, useState } from 'react'; import { DataTable, @@ -25,21 +25,20 @@ import { useParentLocation, usePatientQueuePages, } from '../patient-queues.resource'; -import { +import StatusIcon, { + QueueStatus, buildStatusString, formatWaitTime, getProviderTagColor, getTagColor, trimVisitNumber, } from '../../helpers/functions'; -import StatusIcon from '../../queue-entry-table-components/status-icon.component'; import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component'; import ViewActionsMenu from '../view-action-menu.components'; import NotesActionsMenu from '../notes-action-menu.components'; import MovetoNextPointAction from '../move-patient-to-next-action-menu.components'; import styles from '../active-visits-table.scss'; import dayjs from 'dayjs'; -import { QueueStatus } from '../../utils/utils'; import { PatientQueueConfig } from '../../config-schema'; interface ActiveVisitsTableProps { diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx index 0f919404..ae14f590 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx @@ -26,7 +26,6 @@ import { } from '@openmrs/esm-framework'; import { useQueueRoomLocations } from '../hooks/useQueueRooms'; import styles from './change-status-dialog.scss'; -import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils'; import { PatientQueue } from '../types/patient-queues'; import { NewQueuePayload, @@ -39,6 +38,7 @@ import { import { zodResolver } from '@hookform/resolvers/zod'; import { Controller, useForm } from 'react-hook-form'; import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource'; +import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../helpers/functions'; interface ChangeStatusDialogProps { patientUuid: string; diff --git a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx index e2d93808..eb7faa90 100644 --- a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx +++ b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx @@ -6,7 +6,7 @@ import { PRIVILEGE_RECEPTION_METRIC, PRIVILIGE_TRIAGE_METRIC } from '../../const import { useServicePointCount } from './clinic-metrics.resource'; import styles from './clinic-metrics.scss'; import MetricsCard from './metrics-card.component'; -import { useParentLocation, usePatientQueuePages } from '../../active-visits/patient-queues.resource'; +import { useParentLocation } from '../../active-visits/patient-queues.resource'; import { CheckmarkOutline, Pending, ProgressBarRound } from '@carbon/react/icons'; import { Tooltip as ReactTooltip } from 'react-tooltip'; import dayjs from 'dayjs'; diff --git a/packages/esm-patient-queues-app/src/components/queue-board/queue-board.component.tsx b/packages/esm-patient-queues-app/src/components/queue-board/queue-board.component.tsx index 683c2455..a0ddf5d4 100644 --- a/packages/esm-patient-queues-app/src/components/queue-board/queue-board.component.tsx +++ b/packages/esm-patient-queues-app/src/components/queue-board/queue-board.component.tsx @@ -6,8 +6,8 @@ import BaseBoardComponent from './base-board/base-board.component'; import { FullScreen, useFullScreenHandle } from 'react-full-screen'; import { usePatientQueueBoard } from './queue-board.resource'; import { BoardSkeleton } from './board-skeleton.component'; -import { getPatientQueueWaitingList, updatePatientQueueWaitingList } from '../../helpers/helpers'; import { readTickets } from './voice.utils'; +import { getPatientQueueWaitingList, updatePatientQueueWaitingList } from '../../helpers/functions'; const QueueBoardComponent: React.FC = () => { const handle = useFullScreenHandle(); diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx index 845e1590..6cdf7339 100644 --- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx +++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx @@ -40,7 +40,7 @@ import { CreateQueueEntryFormData, createQueueEntrySchema, } from '../../active-visits/patient-queue-validation-schema.resource'; -import { QueueStatus, handleMutate } from '../../utils/utils'; +import { QueueStatus, handleMutate } from '../../helpers/functions'; interface VisitFormProps { patientUuid: string; diff --git a/packages/esm-patient-queues-app/src/helpers/functions.ts b/packages/esm-patient-queues-app/src/helpers/functions.ts deleted file mode 100644 index bbb93a71..00000000 --- a/packages/esm-patient-queues-app/src/helpers/functions.ts +++ /dev/null @@ -1,57 +0,0 @@ -import dayjs from 'dayjs'; - -export const buildStatusString = (status: string) => { - if (!status) { - return ''; - } - if (status === 'pending') { - return `${status}`; - } else if (status === 'picked') { - return `Attending`; - } else if (status === 'completed') { - return `Finished`; - } -}; - -export const trimVisitNumber = (visitNumber: string) => { - if (!visitNumber) { - return; - } - return visitNumber.substring(15); -}; - -export const formatWaitTime = (dateCreated: string, t) => { - if (!dateCreated) return t('unknown', 'Unknown'); - - const now = dayjs(); - const createdTime = dayjs(dateCreated); - const diffInMinutes = now.diff(createdTime, 'minute'); - - const hours = Math.floor(diffInMinutes / 60); - const minutes = diffInMinutes % 60; // Get the remainder after extracting hours - - if (hours > 0) { - return `${hours} ${t('hoursAnd', 'hours and')} ${minutes} ${t('minutes', 'minutes')}`; - } else { - return `${minutes} ${t('minutes', 'minutes')}`; - } -}; - -export const getTagColor = (waitTime: string) => { - const num = parseInt(waitTime); - if (num <= 30) { - return 'green'; - } else if (num > 30 && num <= 45) { - return 'orange'; - } else { - return 'red'; - } -}; - -export const getProviderTagColor = (entryProvider: string, loggedInProviderName: string) => { - if (entryProvider === loggedInProviderName) { - return '#07a862'; - } else { - return '#942509'; - } -}; diff --git a/packages/esm-patient-queues-app/src/helpers/functions.tsx b/packages/esm-patient-queues-app/src/helpers/functions.tsx new file mode 100644 index 00000000..6dc83bf9 --- /dev/null +++ b/packages/esm-patient-queues-app/src/helpers/functions.tsx @@ -0,0 +1,193 @@ +import React from 'react'; +import dayjs from 'dayjs'; +import { restBaseUrl } from '@openmrs/esm-framework'; +import debounce from 'lodash-es/debounce'; +import { mutate } from 'swr'; +import { Group, InProgress } from '@carbon/react/icons'; +import { PatientQueue } from '../types/patient-queues'; +import { getGlobalStore } from '@openmrs/esm-framework'; + + +export type amPm = 'AM' | 'PM'; + + +export const buildStatusString = (status: string) => { + if (!status) { + return ''; + } + if (status === 'pending') { + return `${status}`; + } else if (status === 'picked') { + return `Attending`; + } else if (status === 'completed') { + return `Finished`; + } +}; + +export const trimVisitNumber = (visitNumber: string) => { + if (!visitNumber) { + return; + } + return visitNumber.substring(15); +}; + +export const formatWaitTime = (dateCreated: string, t) => { + if (!dateCreated) return t('unknown', 'Unknown'); + + const now = dayjs(); + const createdTime = dayjs(dateCreated); + const diffInMinutes = now.diff(createdTime, 'minute'); + + const hours = Math.floor(diffInMinutes / 60); + const minutes = diffInMinutes % 60; // Get the remainder after extracting hours + + if (hours > 0) { + return `${hours} ${t('hoursAnd', 'hours and')} ${minutes} ${t('minutes', 'minutes')}`; + } else { + return `${minutes} ${t('minutes', 'minutes')}`; + } +}; + +export const getTagColor = (waitTime: string) => { + const num = parseInt(waitTime); + if (num <= 30) { + return 'green'; + } else if (num > 30 && num <= 45) { + return 'orange'; + } else { + return 'red'; + } +}; + +export const getProviderTagColor = (entryProvider: string, loggedInProviderName: string) => { + if (entryProvider === loggedInProviderName) { + return '#07a862'; + } else { + return '#942509'; + } +}; + + + +function StatusIcon({ status }) { + switch (status) { + case 'pending': + return ; + case 'picked': + return ; + case 'completed': + return ; + default: + return null; + } +} + +export default StatusIcon; + + +export const convertTime12to24 = (time12h, timeFormat: amPm) => { + let [hours, minutes] = time12h.split(':'); + + if (hours === '12' && timeFormat === 'AM') { + hours = '00'; + } + + if (timeFormat === 'PM') { + hours = hours === '12' ? hours : parseInt(hours, 10) + 12; + } + + return [hours, minutes]; +}; + + +export function extractErrorMessagesFromResponse(errorObject) { + const fieldErrors = errorObject?.responseBody?.error?.fieldErrors; + if (!fieldErrors) { + return [errorObject?.responseBody?.error?.message ?? errorObject?.message]; + } + return Object.values(fieldErrors).flatMap((errors: Array) => errors.map((error) => error.message)); +} + +export const QueueStatus = { Completed: 'completed', Pending: 'pending', Picked: 'picked' }; + +export enum QueueEnumStatus { + COMPLETED = 'COMPLETED', + PICKED = 'PICKED', + PENDING = 'PENDING', +} + +const refreshDashboardMetrics = debounce( + () => + mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/patientqueue`), undefined, { + revalidate: true, + }), + 300, +); + +export const handleMutate = (url: string) => { + mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { + revalidate: true, + }); + refreshDashboardMetrics(); +}; + +export interface PageableResult { + results: ResultType[]; + links: ResultLink[] | null; + totalCount: number | null; +} + +export interface ResultLink { + rel: string; + uri: string; +} + +export interface PagingCriteria { + startIndex?: number | null; + limit?: number | null; +} + + +export enum ResourceRepresentation { + Default = 'default', + Full = 'full', + REF = 'ref', +} + +export interface ResourceFilterCriteria extends PagingCriteria { + v?: ResourceRepresentation | null | string; + q?: string | null; + totalCount?: boolean | null; + limit?: number | null; + sort?: string; +} + +export function toQueryParams( + filterCriteria?: T | null, + skipEmptyString = true, +): string { + if (!filterCriteria) return ''; + const queryParams: string = Object.keys(filterCriteria) + ?.map((key) => { + const value = filterCriteria[key]; + return (skipEmptyString && (value === false || value === true ? true : value)) || + (!skipEmptyString && (value === '' || (value === false || value === true ? true : value))) + ? `${encodeURIComponent(key)}=${encodeURIComponent(value.toString())}` + : null; + }) + .filter((o) => o != null) + .join('&'); + return queryParams.length > 0 ? '?' + queryParams : ''; +} + + + +export function getPatientQueueWaitingList() { + return getGlobalStore<{ queue: PatientQueue[] }>('patientQueueWaitingList', { queue: [] }); +} + +// Patient Queue stores +export const updatePatientQueueWaitingList = (queue: PatientQueue[]) => { + const store = getPatientQueueWaitingList(); + store.setState({ queue }); +}; \ No newline at end of file diff --git a/packages/esm-patient-queues-app/src/helpers/helpers.tsx b/packages/esm-patient-queues-app/src/helpers/helpers.tsx deleted file mode 100644 index 88defd07..00000000 --- a/packages/esm-patient-queues-app/src/helpers/helpers.tsx +++ /dev/null @@ -1,282 +0,0 @@ -import { getGlobalStore } from '@openmrs/esm-framework'; -import { useEffect, useState } from 'react'; -import { PatientQueue } from '../types/patient-queues'; - -const initialServiceNameState = { serviceName: localStorage.getItem('queueServiceName') }; -const initialServiceUuidState = { serviceUuid: localStorage.getItem('queueServiceUuid') }; -const intialStatusNameState = { status: '' }; -const initialQueueLocationNameState = { queueLocationName: localStorage.getItem('queueLocationName') }; -const initialQueueLocationUuidState = { queueLocationUuid: localStorage.getItem('queueLocationUuid') }; -const initialSelectedQueueRoomTimestamp = { providerQueueRoomTimestamp: new Date() }; -const initialPermanentProviderQueueRoomState = { - isPermanentProviderQueueRoom: localStorage.getItem('isPermanentProviderQueueRoom'), -}; - -// queue room -const initialQueueRoomLocationNameState = { queueRoomLocationName: localStorage.getItem('queueRoomLocationName') }; -const initialQueueRoomLocationUuidState = { queueRoomLocationUuid: localStorage.getItem('queueRoomLocationUuid') }; - -export function getSelectedQueueRoomLocationName() { - return getGlobalStore<{ queueRoomLocationName: string }>('queueRoomLocationName', initialQueueRoomLocationNameState); -} - -export function getSelectedQueueRoomLocationUuid() { - return getGlobalStore<{ queueRoomLocationUuid: string }>('queueRoomLocationUuid', initialQueueRoomLocationUuidState); -} - -export const updateSelectedQueueRoomLocationName = (currentQueueRoomLocationName: string) => { - const store = getSelectedQueueRoomLocationName(); - store.setState({ queueRoomLocationName: currentQueueRoomLocationName }); -}; - -export const updateSelectedQueueRoomLocationUuid = (currentQueueRoomLocationUuid: string) => { - const store = getSelectedQueueRoomLocationUuid(); - store.setState({ queueRoomLocationUuid: currentQueueRoomLocationUuid }); -}; - -export const useSelectedQueueRoomLocationName = () => { - const [currentQueueRoomLocationName, setCurrentQueueRoomLocationName] = useState( - initialQueueRoomLocationNameState.queueRoomLocationName, - ); - - useEffect(() => { - getSelectedQueueRoomLocationName().subscribe(({ queueRoomLocationName }) => - setCurrentQueueRoomLocationName(queueRoomLocationName), - ); - }, []); - return currentQueueRoomLocationName; -}; - -export const useSelectedQueueRoomLocationUuid = () => { - const [currentQueueRoomLocationUuid, setCurrentQueueRoomLocationUuid] = useState( - initialQueueRoomLocationUuidState.queueRoomLocationUuid, - ); - - useEffect(() => { - getSelectedQueueRoomLocationUuid().subscribe(({ queueRoomLocationUuid }) => - setCurrentQueueRoomLocationUuid(queueRoomLocationUuid), - ); - }, []); - return currentQueueRoomLocationUuid; -}; - -// - -export function getSelectedServiceName() { - return getGlobalStore<{ serviceName: string }>('queueSelectedServiceName', initialServiceNameState); -} - -export function getSelectedServiceUuid() { - return getGlobalStore<{ serviceUuid: string }>('queueSelectedServiceUuid', initialServiceUuidState); -} - -export function getSelectedAppointmentStatus() { - return getGlobalStore<{ status: string }>('appointmentSelectedStatus', intialStatusNameState); -} - -export function getSelectedQueueLocationName() { - return getGlobalStore<{ queueLocationName: string }>('queueLocationNameSelected', initialQueueLocationNameState); -} - -export function getSelectedQueueLocationUuid() { - return getGlobalStore<{ queueLocationUuid: string }>('queueLocationUuidSelected', initialQueueLocationUuidState); -} - -export function getPatientQueueWaitingList() { - return getGlobalStore<{ queue: PatientQueue[] }>('patientQueueWaitingList', { queue: [] }); -} - -export function getSelectedQueueRoomTimestamp() { - return getGlobalStore<{ providerQueueRoomTimestamp: Date }>( - 'queueProviderRoomTimestamp', - initialSelectedQueueRoomTimestamp, - ); -} - -export function getIsPermanentProviderQueueRoom() { - return getGlobalStore<{ isPermanentProviderQueueRoom: string }>( - 'isPermanentProviderQueueRoom', - initialPermanentProviderQueueRoomState, - ); -} - -export const updateSelectedServiceName = (currentServiceName: string) => { - const store = getSelectedServiceName(); - store.setState({ serviceName: currentServiceName }); -}; - -export const updateSelectedServiceUuid = (currentServiceUuid: string) => { - const store = getSelectedServiceUuid(); - store.setState({ serviceUuid: currentServiceUuid }); -}; - -export const updateSelectedAppointmentStatus = (currentAppointmentStatus: string) => { - const store = getSelectedAppointmentStatus(); - store.setState({ status: currentAppointmentStatus }); -}; - -export const updateSelectedQueueLocationName = (currentLocationName: string) => { - const store = getSelectedQueueLocationName(); - store.setState({ queueLocationName: currentLocationName }); -}; - -export const updateSelectedQueueLocationUuid = (currentLocationUuid: string) => { - const store = getSelectedQueueLocationUuid(); - store.setState({ queueLocationUuid: currentLocationUuid }); -}; - -export const updatedSelectedQueueRoomTimestamp = (currentProviderRoomTimestamp: Date) => { - const store = getSelectedQueueRoomTimestamp(); - store.setState({ providerQueueRoomTimestamp: currentProviderRoomTimestamp }); -}; - -export const updateIsPermanentProviderQueueRoom = (currentIsPermanentProviderQueueRoom) => { - const store = getIsPermanentProviderQueueRoom(); - store.setState({ isPermanentProviderQueueRoom: currentIsPermanentProviderQueueRoom }); -}; - -export const useSelectedServiceName = () => { - const [currentServiceName, setCurrentServiceName] = useState(initialServiceNameState.serviceName); - - useEffect(() => { - getSelectedServiceName().subscribe(({ serviceName }) => setCurrentServiceName(serviceName)); - }, []); - return currentServiceName; -}; - -export const useSelectedServiceUuid = () => { - const [currentServiceUuid, setCurrentServiceUuid] = useState(initialServiceUuidState.serviceUuid); - - useEffect(() => { - getSelectedServiceUuid().subscribe(({ serviceUuid }) => setCurrentServiceUuid(serviceUuid)); - }, []); - return currentServiceUuid; -}; - -export const useSelectedAppointmentStatus = () => { - const [currentAppointmentStatus, setCurrentAppointmentStatus] = useState(intialStatusNameState.status); - - useEffect(() => { - getSelectedAppointmentStatus().subscribe(({ status }) => setCurrentAppointmentStatus(status)); - }, []); - return currentAppointmentStatus; -}; - -export const useSelectedQueueLocationName = () => { - const [currentQueueLocationName, setCurrentQueueLocationName] = useState( - initialQueueLocationNameState.queueLocationName, - ); - - useEffect(() => { - getSelectedQueueLocationName().subscribe(({ queueLocationName }) => setCurrentQueueLocationName(queueLocationName)); - }, []); - return currentQueueLocationName; -}; - -export const useSelectedQueueLocationUuid = () => { - const [currentQueueLocationUuid, setCurrentQueueLocationUuid] = useState( - initialQueueLocationUuidState.queueLocationUuid, - ); - - useEffect(() => { - getSelectedQueueLocationUuid().subscribe(({ queueLocationUuid }) => setCurrentQueueLocationUuid(queueLocationUuid)); - }, []); - return currentQueueLocationUuid; -}; - -export const useSelectedProviderRoomTimestamp = () => { - const [currentProviderRoomTimestamp, setCurrentProviderRoomTimestamp] = useState( - initialSelectedQueueRoomTimestamp.providerQueueRoomTimestamp, - ); - - useEffect(() => { - getSelectedQueueRoomTimestamp().subscribe(({ providerQueueRoomTimestamp }) => - setCurrentProviderRoomTimestamp(providerQueueRoomTimestamp), - ); - }, []); - return currentProviderRoomTimestamp; -}; - -export const useIsPermanentProviderQueueRoom = () => { - const [currentIsPermanentProviderQueueRoom, setCurrentIsPermanentProviderQueueRoom] = useState( - initialPermanentProviderQueueRoomState.isPermanentProviderQueueRoom, - ); - - useEffect(() => { - getIsPermanentProviderQueueRoom().subscribe(({ isPermanentProviderQueueRoom }) => - setCurrentIsPermanentProviderQueueRoom(isPermanentProviderQueueRoom), - ); - }, []); - return currentIsPermanentProviderQueueRoom; -}; - -// facility -const initialFacilityNameState = { facilityName: localStorage.getItem('facilityName') }; -const initialFacilityIdentifierState = { facilityIdentifier: localStorage.getItem('facilityIdentifier') }; - -export function getSelectedFacilityName() { - return getGlobalStore<{ facilityName: string }>('facilityName', initialFacilityNameState); -} - -export function getSelectedFacilityIdentifier() { - return getGlobalStore<{ facilityIdentifier: string }>('facilityIdentifier', initialFacilityIdentifierState); -} - -export const updateSelectedFacilityName = (currentFacilityName: string) => { - const store = getSelectedFacilityName(); - store.setState({ facilityName: currentFacilityName }); -}; - -export const updateSelectedFacilityIdentifier = (currentFacilityIdentifier: string) => { - const store = getSelectedFacilityIdentifier(); - store.setState({ facilityIdentifier: currentFacilityIdentifier }); -}; - -export const useSelectedFacilityName = () => { - const [currentFacilityName, setCurrentFacilityName] = useState(initialFacilityNameState.facilityName); - - useEffect(() => { - getSelectedFacilityName().subscribe(({ facilityName }) => setCurrentFacilityName(facilityName)); - }, []); - return currentFacilityName; -}; - -export const useSelectedFacilityIdentifier = () => { - const [currentFacilityIdentifier, setCurrentFacilityIdentifier] = useState( - initialFacilityIdentifierState.facilityIdentifier, - ); - - useEffect(() => { - getSelectedFacilityIdentifier().subscribe(({ facilityIdentifier }) => - setCurrentFacilityIdentifier(facilityIdentifier), - ); - }, []); - return currentFacilityIdentifier; -}; - -// Patient Queue stores -export const updatePatientQueueWaitingList = (queue: PatientQueue[]) => { - const store = getPatientQueueWaitingList(); - store.setState({ queue }); -}; - -// patient -const initialSelectedPatientUuid = { patientUuid: localStorage.getItem('patientUuid') }; - -export function getSelectedPatientUuid() { - return getGlobalStore<{ patientUuid: string }>('patientUuid', initialSelectedPatientUuid); -} - -export const updateSelectedPatientUuid = (currentPatientUuid: string) => { - const store = getSelectedPatientUuid(); - store.setState({ patientUuid: currentPatientUuid }); -}; - -export const useSelectedPatientUuid = () => { - const [currentPatientUuid, setCurrentPatientUuid] = useState(initialSelectedPatientUuid.patientUuid); - - useEffect(() => { - getSelectedPatientUuid().subscribe(({ patientUuid }) => setCurrentPatientUuid(patientUuid)); - }, []); - return currentPatientUuid; -}; diff --git a/packages/esm-patient-queues-app/src/helpers/time-helpers.tsx b/packages/esm-patient-queues-app/src/helpers/time-helpers.tsx deleted file mode 100644 index d39e7814..00000000 --- a/packages/esm-patient-queues-app/src/helpers/time-helpers.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export type amPm = 'AM' | 'PM'; - -export const convertTime12to24 = (time12h, timeFormat: amPm) => { - let [hours, minutes] = time12h.split(':'); - - if (hours === '12' && timeFormat === 'AM') { - hours = '00'; - } - - if (timeFormat === 'PM') { - hours = hours === '12' ? hours : parseInt(hours, 10) + 12; - } - - return [hours, minutes]; -}; diff --git a/packages/esm-patient-queues-app/src/pageable-result.ts b/packages/esm-patient-queues-app/src/pageable-result.ts deleted file mode 100644 index e126992b..00000000 --- a/packages/esm-patient-queues-app/src/pageable-result.ts +++ /dev/null @@ -1,15 +0,0 @@ -export interface PageableResult { - results: ResultType[]; - links: ResultLink[] | null; - totalCount: number | null; -} - -export interface ResultLink { - rel: string; - uri: string; -} - -export interface PagingCriteria { - startIndex?: number | null; - limit?: number | null; -} diff --git a/packages/esm-patient-queues-app/src/queue-clinical-room-home.component.tsx b/packages/esm-patient-queues-app/src/queue-clinical-room-home.component.tsx index f8b5f211..6573f15b 100644 --- a/packages/esm-patient-queues-app/src/queue-clinical-room-home.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-clinical-room-home.component.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react'; import PatientQueueHeader from './components/patient-queue-header/patient-queue-header.component'; import { useTranslation } from 'react-i18next'; -import { QueueStatus } from './utils/utils'; import ActiveClinicalVisitsTable from './active-visits/queue-patients-clinical/queue-clinical-table.component'; import styles from './active-visits/active-visits-table.scss'; import { Tabs, TabPanel, TabList, Tab, TabPanels } from '@carbon/react'; import QueueSummaryTiles from './summary-tiles/queue-summary-tiles.component'; import { useSession, userHasAccess } from '@openmrs/esm-framework'; import { APP_PATIENTQUEUE_CLINICIAN_DASHBOARD } from './config/privileges'; +import { QueueStatus } from './helpers/functions'; const ClinicalRoomHome: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx b/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx index 2777e1c6..fbd7bf25 100644 --- a/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx @@ -5,7 +5,7 @@ import React, { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { PatientQueue } from '../types/patient-queues'; import { usePatientQueuePages } from '../active-visits/patient-queues.resource'; -import { QueueEnumStatus, QueueStatus } from '../utils/utils'; +import { QueueEnumStatus, QueueStatus } from '../helpers/functions'; interface PickPatientActionMenuProps { queueEntry: PatientQueue; diff --git a/packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx b/packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx deleted file mode 100644 index a89781df..00000000 --- a/packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Group, InProgress } from '@carbon/react/icons'; -import React from 'react'; - -function StatusIcon({ status }) { - switch (status) { - case 'pending': - return ; - case 'picked': - return ; - case 'completed': - return ; - default: - return null; - } -} - -export default StatusIcon; diff --git a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx index 8100498b..da9b53e9 100644 --- a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx @@ -13,8 +13,7 @@ import { } from './active-visits/patient-queues.resource'; import { useServicePointCount } from './components/patient-queue-metrics/clinic-metrics.resource'; import { ExtensionSlot, useSession } from '@openmrs/esm-framework'; -import { buildStatusString, formatWaitTime, getTagColor, trimVisitNumber } from './helpers/functions'; -import StatusIcon from './queue-entry-table-components/status-icon.component'; +import StatusIcon, { buildStatusString, formatWaitTime, getTagColor, trimVisitNumber } from './helpers/functions'; import EditActionsMenu from './active-visits/edit-action-menu.components'; import QueueLauncher from './components/queue-launcher/queue-launcher.component'; diff --git a/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx index bd10fb4b..9a856c26 100644 --- a/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import SummaryTile from '../summary-tiles/summary-tile.component'; import { usePatientQueuePages } from '../active-visits/patient-queues.resource'; import { useSession } from '@openmrs/esm-framework'; -import { QueueEnumStatus, QueueStatus } from '../utils/utils'; +import { QueueEnumStatus } from '../helpers/functions'; const QueueCompletedTile: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx index 6b9b66e3..38468cee 100644 --- a/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import SummaryTile from '../summary-tiles/summary-tile.component'; import { useSession } from '@openmrs/esm-framework'; import { usePatientQueuePages } from '../active-visits/patient-queues.resource'; -import { QueueEnumStatus } from '../utils/utils'; +import { QueueEnumStatus } from '../helpers/functions'; const QueueInQueueTile: React.FC = () => { const { t } = useTranslation(); @@ -14,7 +14,7 @@ const QueueInQueueTile: React.FC = () => { return ( item.status === (QueueEnumStatus.PICKED || QueueEnumStatus.PENDING)).length} + value={items.filter((item) => item?.status === (QueueEnumStatus.PICKED || QueueEnumStatus.PENDING)).length} headerLabel={t('byYou', 'By You')} /> ); diff --git a/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx index c2046e4b..91992333 100644 --- a/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import SummaryTile from '../summary-tiles/summary-tile.component'; import { useSession } from '@openmrs/esm-framework'; import { usePatientQueuePages } from '../active-visits/patient-queues.resource'; -import { QueueEnumStatus } from '../utils/utils'; +import { QueueEnumStatus } from '../helpers/functions'; const QueueWaitingTile: React.FC = () => { const { t } = useTranslation(); @@ -14,7 +14,7 @@ const QueueWaitingTile: React.FC = () => { return ( item.status === QueueEnumStatus.PENDING).length} + value={items.filter((item) => item?.status === QueueEnumStatus.PENDING).length} headerLabel={t('inQueue', 'In Queue')} /> ); diff --git a/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx b/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx index d20d6a2f..8559a082 100644 --- a/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx +++ b/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx @@ -1,14 +1,13 @@ import React, { useEffect, useState } from 'react'; import PatientQueueHeader from './components/patient-queue-header/patient-queue-header.component'; -import MetricsCard from './components/patient-queue-metrics/metrics-card.component'; import { useTranslation } from 'react-i18next'; -import { QueueStatus } from './utils/utils'; import { Tabs, TabPanel, TabList, Tab, TabPanels } from '@carbon/react'; import ActiveTriageVisitsTable from './active-visits/queue-patients-triage/queue-triage-table.component'; import styles from './queue-triage-home.scss'; import QueueSummaryTiles from './summary-tiles/queue-summary-tiles.component'; import { useSession, userHasAccess } from '@openmrs/esm-framework'; import { APP_PATIENTQUEUE_TRIAGE_DASHBOARD } from './config/privileges'; +import { QueueStatus } from './helpers/functions'; const TriageHome: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/esm-patient-queues-app/src/resource-filter-criteria.ts b/packages/esm-patient-queues-app/src/resource-filter-criteria.ts deleted file mode 100644 index 3c45211c..00000000 --- a/packages/esm-patient-queues-app/src/resource-filter-criteria.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { PagingCriteria } from './pageable-result'; -export enum ResourceRepresentation { - Default = 'default', - Full = 'full', - REF = 'ref', -} - -export interface ResourceFilterCriteria extends PagingCriteria { - v?: ResourceRepresentation | null | string; - q?: string | null; - totalCount?: boolean | null; - limit?: number | null; - sort?: string; -} - -export function toQueryParams( - filterCriteria?: T | null, - skipEmptyString = true, -): string { - if (!filterCriteria) return ''; - const queryParams: string = Object.keys(filterCriteria) - ?.map((key) => { - const value = filterCriteria[key]; - return (skipEmptyString && (value === false || value === true ? true : value)) || - (!skipEmptyString && (value === '' || (value === false || value === true ? true : value))) - ? `${encodeURIComponent(key)}=${encodeURIComponent(value.toString())}` - : null; - }) - .filter((o) => o != null) - .join('&'); - return queryParams.length > 0 ? '?' + queryParams : ''; -} diff --git a/packages/esm-patient-queues-app/src/summary-tiles/queue-summary-tiles.resource.ts b/packages/esm-patient-queues-app/src/summary-tiles/queue-summary-tiles.resource.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx b/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx deleted file mode 100644 index 822390a7..00000000 --- a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { Layer, Tile } from '@carbon/react'; -import styles from './empty-state.scss'; - -type EmptyStateProps = { - msg: string; - helper: string; -}; - -const EmptyState: React.FC = ({ msg, helper }: EmptyStateProps) => { - return ( - - - - Empty data illustration - - - - - - - - - - - - - -

{msg}

-

{helper}

- - - ); -}; - -export default EmptyState; diff --git a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss b/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss deleted file mode 100644 index 975b1c52..00000000 --- a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use '@carbon/styles/scss/colors'; -@use "@carbon/styles/scss/spacing"; -@use "@carbon/styles/scss/type"; - -.desktopHeading { - h4 { - @include type.type-style("heading-compact-02"); - color: colors.$gray-70; - } -} - -.tabletHeading { - h4 { - @include type.type-style("heading-03"); - color: colors.$gray-70; - } -} - -.desktopHeading, -.tabletHeading { - text-align: left; - text-transform: capitalize; - margin-bottom: spacing.$spacing-05; - - h4:after { - content: ""; - display: block; - width: 2rem; - padding-top: 0.188rem; - border-bottom: 0.375rem solid var(--brand-03); - } -} - -.heading:after { - content: ""; - display: block; - width: 2rem; - padding-top: 0.188rem; - border-bottom: 0.375rem solid var(--brand-03); -} - -.tile { - padding: 2rem; -} - -.layer { - margin: 1rem 0; - text-align: center; - border: 1px solid colors.$gray-20; -} - -.content { - @include type.type-style("heading-compact-02"); - color: colors.$gray-70; - margin-top: spacing.$spacing-05; - margin-bottom: spacing.$spacing-03; -} - -.explainer { - @include type.type-style('body-compact-01'); - color: colors.$gray-70; -} diff --git a/packages/esm-patient-queues-app/src/utils/utils.ts b/packages/esm-patient-queues-app/src/utils/utils.ts deleted file mode 100644 index af44edbe..00000000 --- a/packages/esm-patient-queues-app/src/utils/utils.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { restBaseUrl } from '@openmrs/esm-framework'; -import debounce from 'lodash-es/debounce'; -import { mutate } from 'swr'; - -export function extractErrorMessagesFromResponse(errorObject) { - const fieldErrors = errorObject?.responseBody?.error?.fieldErrors; - if (!fieldErrors) { - return [errorObject?.responseBody?.error?.message ?? errorObject?.message]; - } - return Object.values(fieldErrors).flatMap((errors: Array) => errors.map((error) => error.message)); -} - -export const QueueStatus = { Completed: 'completed', Pending: 'pending', Picked: 'picked' }; - -export enum QueueEnumStatus { - COMPLETED = 'COMPLETED', - PICKED = 'PICKED', - PENDING = 'PENDING', -} - -const refreshDashboardMetrics = debounce( - () => - mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/patientqueue`), undefined, { - revalidate: true, - }), - 300, -); - -export const handleMutate = (url: string) => { - mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { - revalidate: true, - }); - refreshDashboardMetrics(); -}; From 683360ac37ae01d5c88ae23e4d4e07c64d201f74 Mon Sep 17 00:00:00 2001 From: jabahum Date: Thu, 24 Apr 2025 21:15:27 +0300 Subject: [PATCH 3/4] chore --- packages/esm-patient-queues-app/src/helpers/functions.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/esm-patient-queues-app/src/helpers/functions.tsx b/packages/esm-patient-queues-app/src/helpers/functions.tsx index 6dc83bf9..c60a0b45 100644 --- a/packages/esm-patient-queues-app/src/helpers/functions.tsx +++ b/packages/esm-patient-queues-app/src/helpers/functions.tsx @@ -1,11 +1,10 @@ import React from 'react'; import dayjs from 'dayjs'; -import { restBaseUrl } from '@openmrs/esm-framework'; +import { restBaseUrl ,getGlobalStore} from '@openmrs/esm-framework'; import debounce from 'lodash-es/debounce'; import { mutate } from 'swr'; import { Group, InProgress } from '@carbon/react/icons'; import { PatientQueue } from '../types/patient-queues'; -import { getGlobalStore } from '@openmrs/esm-framework'; export type amPm = 'AM' | 'PM'; From 3fe3a6526d7a9071c5251c0f34001b8a142ed581 Mon Sep 17 00:00:00 2001 From: jabahum Date: Thu, 24 Apr 2025 21:16:42 +0300 Subject: [PATCH 4/4] chore --- .../src/active-visits/patient-queues.resource.ts | 3 +-- .../queue-clinical-table.component.tsx | 6 +----- .../queue-triage-table.component.tsx | 6 +----- .../src/helpers/functions.tsx | 13 ++----------- 4 files changed, 5 insertions(+), 23 deletions(-) diff --git a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts index 4d814afd..49a149b7 100644 --- a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts +++ b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts @@ -241,7 +241,6 @@ export function usePatientQueuePages( isToggled?: boolean, isClinical?: boolean, ) { - const [patientQueueFilter, setPatientQueueFilter] = useState({ v: ResourceRepresentation.Full, totalCount: true, @@ -264,7 +263,7 @@ export function usePatientQueuePages( status: isToggled ? currentStatus : '', room: !isToggled ? currentLocation : '', }); - }, [ currentPage, currentPageSize, currentLocation, currentStatus, isToggled, isClinical]); + }, [currentPage, currentPageSize, currentLocation, currentStatus, isToggled, isClinical]); return { items: paginatedItems, diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx index b0c1c882..317e803a 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx @@ -20,11 +20,7 @@ import { import { useTranslation } from 'react-i18next'; import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework'; -import { - getOriginFromPathName, - useParentLocation, - usePatientQueuePages, -} from '../patient-queues.resource'; +import { getOriginFromPathName, useParentLocation, usePatientQueuePages } from '../patient-queues.resource'; import StatusIcon, { QueueStatus, buildStatusString, diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx index 7ddbf33b..d0bf144d 100644 --- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx +++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx @@ -20,11 +20,7 @@ import { import { useTranslation } from 'react-i18next'; import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework'; -import { - getOriginFromPathName, - useParentLocation, - usePatientQueuePages, -} from '../patient-queues.resource'; +import { getOriginFromPathName, useParentLocation, usePatientQueuePages } from '../patient-queues.resource'; import StatusIcon, { QueueStatus, buildStatusString, diff --git a/packages/esm-patient-queues-app/src/helpers/functions.tsx b/packages/esm-patient-queues-app/src/helpers/functions.tsx index c60a0b45..72aa7946 100644 --- a/packages/esm-patient-queues-app/src/helpers/functions.tsx +++ b/packages/esm-patient-queues-app/src/helpers/functions.tsx @@ -1,15 +1,13 @@ import React from 'react'; import dayjs from 'dayjs'; -import { restBaseUrl ,getGlobalStore} from '@openmrs/esm-framework'; +import { restBaseUrl, getGlobalStore } from '@openmrs/esm-framework'; import debounce from 'lodash-es/debounce'; import { mutate } from 'swr'; import { Group, InProgress } from '@carbon/react/icons'; import { PatientQueue } from '../types/patient-queues'; - export type amPm = 'AM' | 'PM'; - export const buildStatusString = (status: string) => { if (!status) { return ''; @@ -66,8 +64,6 @@ export const getProviderTagColor = (entryProvider: string, loggedInProviderName: } }; - - function StatusIcon({ status }) { switch (status) { case 'pending': @@ -83,7 +79,6 @@ function StatusIcon({ status }) { export default StatusIcon; - export const convertTime12to24 = (time12h, timeFormat: amPm) => { let [hours, minutes] = time12h.split(':'); @@ -98,7 +93,6 @@ export const convertTime12to24 = (time12h, timeFormat: amPm) => { return [hours, minutes]; }; - export function extractErrorMessagesFromResponse(errorObject) { const fieldErrors = errorObject?.responseBody?.error?.fieldErrors; if (!fieldErrors) { @@ -146,7 +140,6 @@ export interface PagingCriteria { limit?: number | null; } - export enum ResourceRepresentation { Default = 'default', Full = 'full', @@ -179,8 +172,6 @@ export function toQueryParams( return queryParams.length > 0 ? '?' + queryParams : ''; } - - export function getPatientQueueWaitingList() { return getGlobalStore<{ queue: PatientQueue[] }>('patientQueueWaitingList', { queue: [] }); } @@ -189,4 +180,4 @@ export function getPatientQueueWaitingList() { export const updatePatientQueueWaitingList = (queue: PatientQueue[]) => { const store = getPatientQueueWaitingList(); store.setState({ queue }); -}; \ No newline at end of file +};