-
Notifications
You must be signed in to change notification settings - Fork 188
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(draft) - O3-3096 PoC configuration-driven queue table
- Loading branch information
Showing
21 changed files
with
411 additions
and
201 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
packages/esm-service-queues-app/src/queue-table/cells/columns.resource.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { type TFunction, useTranslation } from 'react-i18next'; | ||
| import { type QueueTableColumn } from '../../types'; | ||
| import { queueTableNameColumn } from './queue-table-name-cell.component'; | ||
| import { queueTablePatientIdColumn } from './queue-table-patient-id-cell.component'; | ||
| import { queueTablePriorityColumn } from './queue-table-priority-cell.component'; | ||
| import { queueTableStatusColumn } from './queue-table-status-cell.component'; | ||
| import { queueTableComingFromColumn } from './queue-table-coming-from-cell.component'; | ||
| import { queueTableQueueColumn } from './queue-table-queue-cell.component'; | ||
| import { queueTableWaitTimeColumn } from './queue-table-wait-time-cell.component'; | ||
| import { useMemo } from 'react'; | ||
| import { type ColumnDefinition, type ConfigObject } from '../../config-schema'; | ||
| import { useConfig } from '@openmrs/esm-framework'; | ||
| import { activeVisitActionsColumn } from '../../active-visits/active-visits-row-actions.component'; | ||
|
|
||
| // returns the columns to display for a queue table of a particular queue + status. | ||
| // For a table displaying all entries of a particular queue, the status param should be null | ||
| // For a table displaying all entries from all queues, both params should be null | ||
| export function useColumns(queue: string, status: string): QueueTableColumn[] { | ||
| const { t } = useTranslation(); | ||
| const config = useConfig<ConfigObject>(); | ||
| const { tablesConfig } = config; | ||
| const { columnDefinitions, tableDefinitions } = tablesConfig; | ||
|
|
||
| const columnsMap = useMemo(() => { | ||
| const map = new Map<string, QueueTableColumn>(); | ||
| for (const columnDef of columnDefinitions) { | ||
| map.set(columnDef.id, getColumnFromDefinition(t, columnDef)); | ||
| } | ||
| return map; | ||
| }, [columnDefinitions, t]); | ||
|
|
||
| const tableDefinition = useMemo( | ||
| () => | ||
| tableDefinitions.find((tableDef) => { | ||
| const appliedTo = tableDef.appliedTo ?? { queue: null, status: null }; | ||
| return ( | ||
| (appliedTo.queue == null || appliedTo.queue == queue) && | ||
| (appliedTo.status == null || appliedTo.status == status) | ||
| ); | ||
| }), | ||
| [tableDefinitions, queue, status], | ||
| ); | ||
|
|
||
| const columns = tableDefinition?.columns?.map((column) => columnsMap.get(column)); | ||
| return columns; | ||
| } | ||
|
|
||
| function getColumnFromDefinition(t: TFunction, columnDef: ColumnDefinition): QueueTableColumn { | ||
| const { id, header, columnType } = columnDef; | ||
|
|
||
| switch (columnType) { | ||
| case 'patient-name-column': { | ||
| return queueTableNameColumn(id, header ?? t('name', 'Name')); | ||
| } | ||
| case 'patient-id-column': { | ||
| return queueTablePatientIdColumn(id, header ?? t('patientId', 'Patient Id'), columnDef.config); | ||
| } | ||
| case 'patient-age-column': { | ||
| return null; // TODO | ||
| } | ||
| case 'priority-column': { | ||
| return queueTablePriorityColumn(id, header ?? t('priority', 'Priority'), columnDef.config); | ||
| } | ||
| case 'status-column': { | ||
| return queueTableStatusColumn(id, header ?? t('status', 'Status'), columnDef.config); | ||
| } | ||
| case 'queue-coming-from-column': { | ||
| return queueTableComingFromColumn(id, header ?? t('comingFrom', 'Coming from')); | ||
| } | ||
| case 'current-queue-column': { | ||
| return queueTableQueueColumn(id, header ?? t('queue', 'Queue')); | ||
| } | ||
| case 'wait-time-column': { | ||
| return queueTableWaitTimeColumn(id, header ?? t('waitTime', 'Wait time')); | ||
| } | ||
| case 'visit-start-time-column': { | ||
| return null; // TODO | ||
| } | ||
| case 'active-visits-actions-column': { | ||
| return activeVisitActionsColumn(id, header ?? t('actions', 'Actions')); | ||
| } | ||
| case 'actions-column': { | ||
| return null; // TODO: a more configurable actions column to define quick actions and actions in overflow menu | ||
| } | ||
| case 'extension-column': { | ||
| return null; // TODO: this is a column that only has an extension slot | ||
| // it can do whatever it needs to based on columnDef.config | ||
| } | ||
| default: { | ||
| throw new Error('Unknown column type from configuration: ' + columnType); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 4 additions & 3 deletions
7
...s/esm-service-queues-app/src/queue-table/cells/queue-table-coming-from-cell.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,13 @@ | ||
| import React from 'react'; | ||
| import { type QueueTableCellComponentProps, type QueueTableColumn } from '../../types'; | ||
| import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types'; | ||
|
|
||
| export const QueueTableComingFromCell = ({ queueEntry }: QueueTableCellComponentProps) => { | ||
| return <>{queueEntry.queueComingFrom?.display}</>; | ||
| }; | ||
|
|
||
| export const queueTableComingFromColumn: QueueTableColumn = (t) => ({ | ||
| header: t('queueComingFrom', 'Coming from'), | ||
| export const queueTableComingFromColumn: QueueTableColumnFunction = (key, header) => ({ | ||
| key, | ||
| header, | ||
| CellComponent: QueueTableComingFromCell, | ||
| getFilterableValue: (queueEntry) => queueEntry.queueComingFrom?.display, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...es/esm-service-queues-app/src/queue-table/cells/queue-table-patient-id-cell.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react'; | ||
| import { type PatientIdColumnConfig } from '../../config-schema'; | ||
| import { type QueueEntry, type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types'; | ||
|
|
||
| export const queueTablePatientIdColumn: QueueTableColumnFunction = (key, header, config: PatientIdColumnConfig) => { | ||
| const { identifierType } = config; | ||
|
|
||
| const getPatientId = (queueEntry: QueueEntry) => { | ||
| for (const identifier of queueEntry.patient.identifiers) { | ||
| if (identifier.identifierType?.uuid == identifierType) { | ||
| return identifier.identifier; | ||
| } | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| const QueueTablePatientIdCell = ({ queueEntry }: QueueTableCellComponentProps) => { | ||
| return <span>{getPatientId(queueEntry)}</span>; | ||
| }; | ||
|
|
||
| return { | ||
| key, | ||
| header, | ||
| CellComponent: QueueTablePatientIdCell, | ||
| getFilterableValue: getPatientId, | ||
| }; | ||
| }; |
7 changes: 4 additions & 3 deletions
7
...ages/esm-service-queues-app/src/queue-table/cells/queue-table-priority-cell.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| import React from 'react'; | ||
| import QueuePriority from '../../queue-entry-table-components/queue-priority.component'; | ||
| import { type QueueTableCellComponentProps, type QueueTableColumn } from '../../types'; | ||
| import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types'; | ||
|
|
||
| export const QueueTablePriorityCell = ({ queueEntry }: QueueTableCellComponentProps) => { | ||
| return <QueuePriority priority={queueEntry.priority} priorityComment={queueEntry.priorityComment} />; | ||
| }; | ||
|
|
||
| export const queueTablePriorityColumn: QueueTableColumn = (t) => ({ | ||
| header: t('priority', 'Priority'), | ||
| export const queueTablePriorityColumn: QueueTableColumnFunction = (key, header) => ({ | ||
| key, | ||
| header, | ||
| CellComponent: QueueTablePriorityCell, | ||
| getFilterableValue: (queueEntry) => queueEntry.priority.display, | ||
| }); |
Oops, something went wrong.