@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/queue-patient-linelists/queue-linelist-filter.workspace.tsx

@@ -0,0 +1,185 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DatePicker,
+  DatePickerInput,
+  Form,
+  Layer,
+  Stack,
+  RadioButtonGroup,
+  RadioButton,
+  Dropdown,
+  Column,
+  Button,
+  ButtonSet,
+  NumberInput,
+  Toggle,
+} from '@carbon/react';
+import dayjs from 'dayjs';
+import {
+  type DefaultWorkspaceProps,
+  toDateObjectStrict,
+  toOmrsIsoString,
+  useLayoutType,
+  useVisitTypes,
+} from '@openmrs/esm-framework';
+import styles from './queue-linelist-filter.scss';
+import { datePickerFormat, datePickerPlaceHolder } from '../constants';
+
+const QueueLinelistFilter: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+  const { t } = useTranslation();
+  const [gender, setGender] = useState('');
+  const [startAge, setStartAge] = useState<number>();
+  const [endAge, setEndAge] = useState<number>();
+  const [returnDate, setReturnDate] = useState(new Date());
+  const [visitType, setVisitType] = useState('');
+  const isTablet = useLayoutType() === 'tablet';
+  const allVisitTypes = useVisitTypes();
+
+  const handleFilter = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      const payload = {
+        gender: gender,
+        startAge: startAge,
+        endAge: endAge,
+        returnDate: toDateObjectStrict(
+          toOmrsIsoString(new Date(dayjs(returnDate).year(), dayjs(returnDate).month(), dayjs(returnDate).date())),
+        ),
+        visitType: visitType,
+      };
+    },
+    [gender, startAge, endAge, returnDate, visitType],
+  );
+
+  const handleTodaysDate = () => {
+    setReturnDate(new Date());
+  };
+
+  return (
+    <>
+      <Form onSubmit={handleFilter}>
+        <div className={styles.wrapper}>
+          <Stack gap={4} className={styles.grid}>
+            <Column>
+              <p className={styles.heading}> {t('gender', 'Gender')}</p>
+              <RadioButtonGroup name="gender" orientation="vertical" onChange={(event) => setGender(event.toString())}>
+                <RadioButton
+                  className={styles.radioButton}
+                  id="male"
+                  labelText={t('maleLabelText', 'Male')}
+                  value="Male"
+                />
+                <RadioButton
+                  className={styles.radioButton}
+                  id="female"
+                  labelText={t('femaleLabelText', 'Female')}
+                  value="Female"
+                />
+              </RadioButtonGroup>
+            </Column>
+          </Stack>
+
+          <Stack gap={4} className={styles.grid}>
+            <Column md={2}>
+              <p className={styles.heading}> {t('age', 'Age')}</p>
+              <Layer>
+                <Toggle
+                  size="sm"
+                  aria-label={t('age', 'Age')}
+                  defaultToggled
+                  id="age"
+                  labelA="Off"
+                  labelB="On"
+                  labelText=""
+                />
+              </Layer>
+              <Layer className={styles.numberInputs}>
+                <Layer>
+                  <NumberInput
+                    id="startAge"
+                    invalidText={t('startAgeRangeInvalid', 'Start age range is not valid')}
+                    label={t('between', 'Between')}
+                    max={100}
+                    min={0}
+                    onChange={(event) => setStartAge(event.target.value)}
+                    size="md"
+                    value={startAge}
+                  />
+                </Layer>
+                <Layer>
+                  <NumberInput
+                    id="endAge"
+                    invalidText={t('endAgeRangeInvalid', 'End age range is not valid')}
+                    label={t('and', 'And')}
+                    max={100}
+                    min={0}
+                    onChange={(event) => setEndAge(event.target.value)}
+                    size="md"
+                    value={endAge}
+                  />
+                </Layer>
+              </Layer>
+            </Column>
+          </Stack>
+
+          <Stack gap={4} className={styles.grid}>
+            <Column md={2}>
+              <p className={styles.heading}> {t('returnDate', 'Return Date')}</p>
+              <Layer>
+                <DatePicker
+                  datePickerType="single"
+                  dateFormat={datePickerFormat}
+                  value={returnDate}
+                  onChange={([date]) => setReturnDate(date)}>
+                  <DatePickerInput
+                    id="returnDate"
+                    placeholder={datePickerPlaceHolder}
+                    labelText={t('date', 'Date')}
+                    type="date"
+                  />
+                </DatePicker>
+              </Layer>
+              <Button
+                kind="ghost"
+                onClick={() => {
+                  handleTodaysDate();
+                }}>
+                {t('useTodaysDate', "Use today's date")}
+              </Button>
+            </Column>
+          </Stack>
+
+          <Stack gap={4} className={styles.grid}>
+            <Column>
+              <p className={styles.heading}>{t('visitType', 'Visit Type')}</p>
+              <Layer>
+                <Dropdown
+                  id="visitType"
+                  label={t('selectAVisitType', 'Select visit type')}
+                  titleText={t('selectAVisitType', 'Select visit type')}
+                  items={allVisitTypes}
+                  onChange={(event) => setVisitType(event.selectedItem.toString)}
+                  size="sm"
+                  itemToElement={(item) => (item ? <span>{item.display}</span> : null)}
+                />
+              </Layer>
+            </Column>
+          </Stack>
+        </div>
+
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} kind="primary" type="submit">
+            {t('applyFilters', 'Apply filters')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </>
+  );
+};
+
+export default QueueLinelistFilter;

package/src/queue-patient-linelists/queue-linelist.resource.ts

@@ -0,0 +1,84 @@
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type Appointment, type AppointmentsFetchResponse } from '../types/index';
+import { type Provider } from '../types';
+import { startOfDay } from '../constants';
+import dayjs from 'dayjs';
+
+export function useAppointments() {
+  const apiUrl = `${restBaseUrl}/appointment/all?forDate=${startOfDay}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: Array<Appointment> }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    appointmentQueueEntries: data ? data?.data : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useCheckedInAppointments() {
+  const apiUrl = `${restBaseUrl}/appointment/appointmentStatus?forDate=${startOfDay}&status=CheckedIn`;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: Array<Appointment> }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    checkedInAppointments: data ? data?.data : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useProviders() {
+  const customRepresentation = 'custom:(uuid,display,person:(age,display,gender,uuid))';
+  const apiUrl = `${restBaseUrl}/provider?q=&v=${customRepresentation}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Provider> } }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  return {
+    providers: data ? data.data?.results : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function usePatientAppointments(patientUuid: string, startDate) {
+  const abortController = new AbortController();
+
+  const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating } = useSWR<AppointmentsFetchResponse, Error>(
+    appointmentsSearchUrl,
+    fetcher,
+  );
+
+  const appointments = data?.data?.length ? data.data : [];
+
+  const upcomingAppointments = appointments
+    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isAfter(new Date()));
+
+  return {
+    upcomingAppointment: upcomingAppointments ? upcomingAppointments?.[0] : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}

package/src/queue-patient-linelists/queue-services-table.component.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import QueuePatientBaseTable from './queue-linelist-base-table.component';
+import { useServiceQueueEntries } from '../active-visits/active-visits-table.resource';
+
+const ServicesTable: React.FC = () => {
+  const { t } = useTranslation();
+
+  const currentPathName: string = window.location.pathname.replace('%20', ' ');
+  let service = currentPathName.split('/')[6];
+  let locationUuid = currentPathName.split('/')[8];
+  const { serviceQueueEntries, isLoading } = useServiceQueueEntries(service, locationUuid);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 1,
+        header: t('returnDate', 'Return Date'),
+        key: 'returnDate',
+      },
+      {
+        id: 2,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 3,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 4,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+      {
+        id: 5,
+        header: t('phoneNumber', 'Phone number'),
+        key: 'phoneNumber',
+      },
+    ],
+    [t],
+  );
+
+  return (
+    <div>
+      <QueuePatientBaseTable
+        title={t('alistOfClients', 'A list of clients waiting for ')}
+        headers={tableHeaders}
+        patientData={serviceQueueEntries}
+        serviceType={service}
+        isLoading={isLoading}
+      />
+    </div>
+  );
+};
+
+export default ServicesTable;

package/src/queue-patient-linelists/scheduled-appointments-table.component.tsx

@@ -0,0 +1,305 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  type DataTableHeader,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Tile,
+  DataTableSkeleton,
+  Dropdown,
+  Pagination,
+} from '@carbon/react';
+import { Filter, OverflowMenuVertical } from '@carbon/react/icons';
+import {
+  ExtensionSlot,
+  formatDatetime,
+  useConfig,
+  usePagination,
+  ConfigurableLink,
+  formatDate,
+  launchWorkspace,
+} from '@openmrs/esm-framework';
+import styles from './queue-linelist-base-table.scss';
+import { updateSelectedAppointmentStatus, useSelectedAppointmentStatus } from '../helpers/helpers';
+import { useAppointments } from './queue-linelist.resource';
+import { getGender } from '../helpers/functions';
+import { type ConfigObject } from '../config-schema';
+
+/**
+ * FIXME Temporarily moved here
+ */
+interface DataTableHeader {
+  key: string;
+  header: React.ReactNode;
+}
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: Array<DataTableHeader>;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+const AppointmentsTable: React.FC = () => {
+  const { t } = useTranslation();
+  const { appointmentStatuses } = useConfig<ConfigObject>();
+  const currentAppointmentStatus = useSelectedAppointmentStatus();
+  const { appointmentQueueEntries, isLoading } = useAppointments();
+  const [filteredRows, setFilteredRows] = useState(appointmentQueueEntries);
+  const { results, currentPage, goTo } = usePagination(filteredRows ?? [], 20);
+
+  const handleFilter = ({ rowIds, headers, cellsById, inputValue, getCellId }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        if (typeof filterableValue === 'boolean') {
+          return false;
+        }
+        if (filterableValue.hasOwnProperty('content')) {
+          if (Array.isArray(filterableValue.content.props.children)) {
+            return ('' + filterableValue.content.props.children[1].props.children).toLowerCase().includes(filterTerm);
+          }
+          if (typeof filterableValue.content.props.children === 'object') {
+            return ('' + filterableValue.content.props.children.props.children.props.children)
+              .toLowerCase()
+              .includes(filterTerm);
+          }
+          return ('' + filterableValue.content.props.children).toLowerCase().includes(filterTerm);
+        }
+        return ('' + filterableValue).toLowerCase().includes(filterTerm);
+      }),
+    );
+  };
+
+  useEffect(() => {
+    if (currentAppointmentStatus != t('all', 'All') && currentAppointmentStatus !== '') {
+      setFilteredRows(
+        appointmentQueueEntries?.filter((appointment) => appointment.status === currentAppointmentStatus),
+      );
+    } else {
+      setFilteredRows(appointmentQueueEntries);
+    }
+  }, [t, currentAppointmentStatus, results, appointmentQueueEntries]);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 1,
+        header: t('returnDate', 'Return Date'),
+        key: 'returnDate',
+      },
+      {
+        id: 2,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 3,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 4,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+      {
+        id: 5,
+        header: t('status', 'Status'),
+        key: 'status',
+      },
+      {
+        id: 6,
+        header: t('phoneNumber', 'Phone number'),
+        key: 'phoneNumber',
+      },
+    ],
+    [t],
+  );
+
+  const tableRows = useMemo(() => {
+    return results?.map((appointment) => ({
+      id: appointment.uuid,
+      name: {
+        content: (
+          <ConfigurableLink to={`\${openmrsSpaBase}/patient/${appointment.patient.uuid}/chart`}>
+            {appointment.patient.name}
+          </ConfigurableLink>
+        ),
+      },
+      returnDate: formatDate(new Date(appointment.startDateTime), {
+        mode: 'wide',
+      }),
+      gender: getGender(appointment.patient?.gender, t),
+      age: appointment.patient.age,
+      visitType: appointment.appointmentKind,
+      status: appointment.status,
+      phoneNumber: appointment.patient?.phoneNumber,
+    }));
+  }, [results, t]);
+
+  const handleStatusChange = ({ selectedItem }) => {
+    updateSelectedAppointmentStatus(selectedItem);
+  };
+
+  const pageSizes = useMemo(() => {
+    const numberOfPages = Math.ceil(appointmentQueueEntries?.length / 100);
+    return [...Array(numberOfPages).keys()].map((x) => {
+      return (x + 1) * 100;
+    });
+  }, [appointmentQueueEntries]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <ExtensionSlot name="breadcrumbs-slot" />
+
+      <div className={styles.headerContainer}>
+        <div>
+          <p className={styles.title}>{t('scheduledAppointmentsList', 'Scheduled appointments patient list')}</p>
+          <p className={styles.subTitle}>
+            {appointmentQueueEntries?.length} · Last Updated: {formatDatetime(new Date(), { mode: 'standard' })}
+          </p>
+        </div>
+
+        <Button kind="ghost" size="sm" renderIcon={(props) => <OverflowMenuVertical size={16} {...props} />}>
+          {t('actions', 'Actions')}
+        </Button>
+      </div>
+
+      <Layer>
+        <Tile className={styles.filterTile}>
+          <Tag size="md" title="Clear Filter" type="blue">
+            {t('today', 'Today')}
+          </Tag>
+
+          <div className={styles.actionsBtn}>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Filter size={16} {...props} />}
+              iconDescription={t('filter', 'Filter')}
+              onClick={() => launchWorkspace('service-queues-linelist-filter')}
+              size="sm">
+              {t('filter', 'Filter')}
+            </Button>
+          </div>
+        </Tile>
+      </Layer>
+
+      <DataTable
+        data-floating-menu-container
+        filterRows={handleFilter}
+        headers={tableHeaders}
+        overflowMenuOnHover={false}
+        rows={tableRows}
+        size="md"
+        useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+          <TableContainer className={styles.tableContainer}>
+            <TableToolbar
+              style={{
+                position: 'static',
+                height: '3rem',
+                overflow: 'visible',
+                backgroundColor: 'color',
+              }}>
+              <TableToolbarContent className={styles.toolbarContent}>
+                <div className={styles.filterContainer}>
+                  <Dropdown
+                    id="serviceFilter"
+                    initialSelectedItem={'All'}
+                    label={currentAppointmentStatus}
+                    titleText={t('status', 'Status') + ':'}
+                    type="inline"
+                    items={['All', ...appointmentStatuses]}
+                    onChange={handleStatusChange}
+                    size="sm"
+                  />
+                </div>
+
+                <TableToolbarSearch
+                  className={styles.search}
+                  expanded
+                  onChange={onInputChange}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size="sm"
+                />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()} className={styles.queueTable}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Layer>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noPatientsToDisplay', 'No patients to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </Layer>
+              </div>
+            ) : null}
+          </TableContainer>
+        )}
+      </DataTable>
+
+      <Pagination
+        backwardText="Previous page"
+        forwardText="Next page"
+        page={currentPage}
+        pageNumberText="Page Number"
+        pageSize={100}
+        onChange={({ page }) => goTo(page)}
+        pageSizes={pageSizes?.length > 0 ? pageSizes : [100]}
+        totalItems={appointmentQueueEntries?.length ?? 0}
+      />
+    </div>
+  );
+};
+
+export default AppointmentsTable;

package/src/queue-patient-linelists/scheduled-appointments-table.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { mockAppointmentsData } from '__mocks__';
+import AppointmentsTable from './scheduled-appointments-table.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: () => ({
+    appointmentStatuses: ['All', 'Scheduled', 'Completed'],
+  }),
+}));
+
+jest.mock('./queue-linelist.resource', () => ({
+  useAppointments: () => ({
+    appointmentQueueEntries: mockAppointmentsData.data,
+    isLoading: false,
+  }),
+}));
+
+describe('AppointmentsTable', () => {
+  it('renders appointments when loading is complete', () => {
+    render(<AppointmentsTable />);
+
+    const appointmentName = screen.getByText(/charles babbage/i);
+    expect(appointmentName).toBeInTheDocument();
+  });
+
+  it('filters appointments based on status selection', async () => {
+    const user = userEvent.setup();
+
+    render(<AppointmentsTable />);
+
+    const statusDropdown = screen.getAllByLabelText('Status:');
+
+    await user.type(statusDropdown[0], 'Completed');
+
+    const filteredAppointmentName = screen.getByText(/charles babbage/i);
+    expect(filteredAppointmentName).toBeInTheDocument();
+  });
+});