Ft/board/queuing (#103)

* fix: remove unused details

* ft: queue board

Signed-off-by: Isaac Obella <wizlif@users.noreply.github.com>

* ft: ticket announcer

---------

Signed-off-by: Isaac Obella <wizlif@users.noreply.github.com>

Author: wizlif

package.json

@@ -25,6 +25,7 @@
     "base-64": "^1.0.0",
     "buffer": "^6.0.3",
     "dayjs": "^1.11.6",
+    "react-full-screen": "^1.1.1",
     "react-grid-layout": "^1.3.4",
     "react-to-print": "^2.14.13",
     "recharts": "^2.7.2",

packages/esm-patient-queues-app/src/active-visits-print/active-visits-print.scss

@@ -34,6 +34,7 @@
 
   tr td:first-child {
     font-weight: bold;
+    padding-right: spacing.$spacing-03;
   }
 
   tr td:nth-child(2) {

packages/esm-patient-queues-app/src/active-visits-print/patient-queue-details-table.component.tsx

@@ -12,28 +12,16 @@ const PatientQueueDetailsTable: React.FC<PrintTableProps> = ({ queueEntry }) =>
     <table>
       <tbody>
         <tr className={styles.name}>
-          <td align="right">Check In Date:&nbsp;</td>
-          <td>{queueEntry.dateCreated}</td>
-        </tr>
-        <tr className={styles.name}>
-          <td align="right">Patient Name:&nbsp;</td>
-          <td>{queueEntry.name}</td>
-        </tr>
-        <tr className={styles.name}>
-          <td align="right">Visit No:&nbsp;</td>
+          <td align="right">Visit No:</td>
           <td>{trimVisitNumber(queueEntry.visitNumber)}</td>
         </tr>
         <tr className={styles.name}>
-          <td align="right">Gender:&nbsp;</td>
-          <td>{queueEntry.patientSex}</td>
-        </tr>
-        <tr className={styles.name}>
-          <td align="right">Entry Point:&nbsp;</td>
+          <td align="right">Entry Point:</td>
           <td>{queueEntry.creatorDisplay}</td>
         </tr>
 
         <tr className={styles.name}>
-          <td align="right">Attendant:&nbsp;</td>
+          <td align="right">Attendant:</td>
           <td>{queueEntry.creatorUsername}</td>
         </tr>
       </tbody>

packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx

@@ -7,22 +7,22 @@ import {
   Layer,
   Pagination,
   Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
   Table,
   TableBody,
   TableCell,
   TableContainer,
+  TableExpandedRow,
   TableExpandHeader,
   TableExpandRow,
-  TableExpandedRow,
   TableHead,
   TableHeader,
   TableRow,
   TableToolbar,
   TableToolbarContent,
   TableToolbarSearch,
+  TabList,
+  TabPanel,
+  TabPanels,
   Tabs,
   Tag,
   Tile,
@@ -31,30 +31,22 @@ import { Add, Dashboard } from '@carbon/react/icons';
 
 import {
   ConfigObject,
-  ConfigurableLink,
   ExtensionSlot,
-  UserHasAccess,
   interpolateUrl,
   isDesktop,
   navigate,
   useConfig,
   useLayoutType,
   usePagination,
+  UserHasAccess,
   useSession,
 } from '@openmrs/esm-framework';
 import React, { AnchorHTMLAttributes, MouseEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PRIVILEGE_CHECKIN } from '../constants';
 import { buildStatusString, formatWaitTime, getTagColor, getTagType, trimVisitNumber } from '../helpers/functions';
-import {
-  useSelectedQueueLocationUuid,
-  useSelectedQueueRoomLocationName,
-  useSelectedQueueRoomLocationUuid,
-} from '../helpers/helpers';
 import PastVisit from '../past-visit/past-visit.component';
-import { useQueueRoomLocations } from '../patient-search/hooks/useQueueRooms';
 import PatientSearch from '../patient-search/patient-search.component';
-import ActionsMenu from '../queue-entry-table-components/actions-menu.component';
 import StatusIcon from '../queue-entry-table-components/status-icon.component';
 import { SearchTypes } from '../types';
 import { getOriginFromPathName } from './active-visits-table.resource';

packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts

@@ -16,6 +16,7 @@ export interface MappedPatientQueueEntry {
   status: string;
   waitTime: string;
   locationFrom?: string;
+  locationToName?: string;
   visitNumber: string;
   identifiers: Array<UuidDisplay>;
   dateCreated: string;
@@ -24,8 +25,12 @@ export interface MappedPatientQueueEntry {
   creatorDisplay: string;
 }
 
-export function usePatientQueuesList(currentQueueLocationUuid: string, status: string) {
-  const apiUrl = `/ws/rest/v1/patientqueue?v=full&location=${currentQueueLocationUuid}&status=${status}`;
+export function usePatientQueuesList(currentQueueRoomLocationUuid: string, status: string) {
+  const apiUrl = `/ws/rest/v1/patientqueue?v=full&room=${currentQueueRoomLocationUuid}&status=${status}`;
+  return usePatientQueueRequest(apiUrl);
+}
+
+export function usePatientQueueRequest(apiUrl: string) {
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientQueue> } }, Error>(
     apiUrl,
     openmrsFetch,
@@ -50,6 +55,7 @@ export function usePatientQueuesList(currentQueueLocationUuid: string, status: s
       identifiers: queue.patient?.identifiers,
       locationFrom: queue.locationFrom?.uuid,
       locationTo: queue.locationTo?.uuid,
+      locationToName: queue.locationTo?.name,
       queueRoom: queue.locationTo?.display,
       visitNumber: queue.visitNumber,
       dateCreated: queue.dateCreated ? formatDate(parseDate(queue.dateCreated), { time: false }) : '--',

packages/esm-patient-queues-app/src/home.component.tsx

@@ -9,13 +9,17 @@ import {
 } from './constants';
 import PatientQueueHeader from './patient-queue-header/patient-queue-header.component';
 import ClinicMetrics from './patient-queue-metrics/clinic-metrics.component';
+import QueueLauncher from './queue-launcher/queue-launcher.component';
 
 interface HomeProps {}
 
 const Home: React.FC<HomeProps> = (props) => {
   return (
     <div>
       <PatientQueueHeader />
+      <UserHasAccess privilege={PRIVILEGE_RECEPTION_QUEUE_LIST}>
+        <QueueLauncher />
+      </UserHasAccess>
       <ClinicMetrics />
       <UserHasAccess privilege={PRIVILEGE_RECEPTION_QUEUE_LIST}>
         <ActiveVisitsReceptionTable />

packages/esm-patient-queues-app/src/index.ts

@@ -10,6 +10,7 @@ const options = {
   featureName: 'patient queues',
   moduleName,
 };
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
@@ -119,3 +120,5 @@ export const queuePatientsWorkspace = getAsyncLifecycle(
     moduleName,
   },
 );
+
+export const queueScreen = getAsyncLifecycle(() => import('./queue-board/queue-board.component'), options);

packages/esm-patient-queues-app/src/queue-board/base-board/base-board.component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { usePatientQueuesByParentLocation } from '../queue-board.resource';
+import { SkeletonPlaceholder, SkeletonText } from '@carbon/react';
+import styles from './base-board.scss';
+import { TicketCard } from './ticket-card.component';
+
+interface BaseBoardProps {
+  title: string;
+  status: string;
+  hasBorder?: boolean;
+  isFullScreen: boolean;
+}
+
+const BaseBoardComponent: React.FC<BaseBoardProps> = ({ title, status, hasBorder, isFullScreen }) => {
+  const { patientQueues, isLoading, isError } = usePatientQueuesByParentLocation(status);
+
+  if (isLoading || isError || !patientQueues)
+    return (
+      <div>
+        <SkeletonText />
+        <div className={styles.gridFlow}>
+          {[...Array(hasBorder ? 5 : 1).keys()].map(() => (
+            <SkeletonPlaceholder
+              style={{
+                width: '30%',
+                margin: '1.5rem',
+                padding: '1.3rem',
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+
+  return (
+    <div
+      style={{
+        borderRight: hasBorder ? '1px solid grey' : '',
+        height: isFullScreen ? '100vh' : 'calc(100vh - 50px)',
+        overflow: 'scroll',
+        paddingRight: hasBorder ? '20px' : '',
+      }}
+    >
+      <h1 className={styles.heading}>{title}</h1>
+      <div className={styles.gridFlow}>
+        {patientQueues
+          .sort((a, b) => (a.dateCreated < b.dateCreated ? 0 : 1))
+          .map((queueEntry) => {
+            return <TicketCard queue={queueEntry} />;
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default BaseBoardComponent;

packages/esm-patient-queues-app/src/queue-board/base-board/base-board.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/colors';
+@use "@carbon/styles/scss/spacing";
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tile-text {
+  font-size: 3rem;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $brand-primary-50;
+}
+
+.heading {
+  padding-bottom: spacing.$spacing-08;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.tile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: spacing.$spacing-03;
+  padding: 1.5rem;
+}
+
+.gridFlow {
+  display: flex;
+  flex-direction: row;
+  padding: 2rem;
+  flex-wrap: wrap;
+}

packages/esm-patient-queues-app/src/queue-board/base-board/ticket-card.component.tsx

@@ -0,0 +1,24 @@
+import styles from '../../queue-screen/queue-screen.scss';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PatientQueue } from '../../types/patient-queues';
+import { trimVisitNumber } from '../../helpers/functions';
+
+interface TicketCardProp {
+  queue: PatientQueue;
+}
+
+export const TicketCard: React.FC<TicketCardProp> = ({ queue }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.card}>
+      <p className={styles.subHeader}>{t('ticketNumber', 'Ticket number')}</p>
+      <p className={queue.status === 'picked' ? styles.headerBlinking : styles.header}>
+        {trimVisitNumber(queue.visitNumber)}
+      </p>
+      <p className={styles.subHeader}>
+        {t('room', 'Room')} &nbsp; : &nbsp; {queue.locationTo?.name}
+      </p>
+    </div>
+  );
+};