@kenyaemr/esm-appointments-app 7.0.2-pre.65

package/src/patient-appointments/patient-appointments-overview.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { usePatient, useLayoutType, isDesktop, WorkspaceOverlay } from '@openmrs/esm-framework';
+import PatientAppointmentsBase from './patient-appointments-base.component';
+import { useParams } from 'react-router-dom';
+import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
+import PatientAppointmentsHeader from './patient-appointments-header';
+import { DataTableSkeleton } from '@carbon/react';
+import styles from './patient-appointments-overview.scss';
+
+/**
+ * This component renders the patient appointments view (all appointments for a single patient) outside of the context of the patient chart.
+ * Currently, it is not linked directly within the Appointments app, but can be accessed via the home/appointments/patient/:patientUuid route,
+ * providing a means for other apps (or legacy O2 UIs) to link to the patient appointments overview.
+ * It uses the PatientAppointmentsBase component to render the actual appointments data.
+ * @constructor
+ */
+const PatientAppointmentsOverview: React.FC = () => {
+  let params = useParams();
+  const response = usePatient(params.patientUuid);
+  const layout = useLayoutType();
+
+  return response.isLoading ? (
+    <DataTableSkeleton role="progressbar" compact={isDesktop(layout)} zebra />
+  ) : (
+    <PatientAppointmentContext.Provider value={PatientAppointmentContextTypes.APPOINTMENTS_APP}>
+      <div className={styles.patientAppointmentsOverview}>
+        <PatientAppointmentsHeader patient={response.patient} />
+        <PatientAppointmentsBase patientUuid={response.patient.id} />
+        <WorkspaceOverlay contextKey={`patient/${params.patientUuid}`} />
+      </div>
+    </PatientAppointmentContext.Provider>
+  );
+};
+
+export default PatientAppointmentsOverview;

package/src/patient-appointments/patient-appointments-overview.scss

@@ -0,0 +1,7 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.patientAppointmentsOverview {
+  background-color: colors.$gray-10;
+}

package/src/patient-appointments/patient-appointments-table.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+const utc = require('dayjs/plugin/utc');
+dayjs.extend(utc);
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  type DataTableHeader,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { formatDatetime, parseDate, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { type Appointment } from '../types';
+import { PatientAppointmentsActionMenu } from './patient-appointments-action-menu.component';
+import styles from './patient-appointments-action-menu.scss';
+
+const pageSize = 10;
+
+interface AppointmentTableProps {
+  patientAppointments: Array<Appointment>;
+  switchedView: boolean;
+  setSwitchedView: (value: boolean) => void;
+  patientUuid: string;
+}
+
+const PatientAppointmentsTable: React.FC<AppointmentTableProps> = ({
+  patientAppointments,
+  patientUuid,
+  switchedView,
+  setSwitchedView,
+}) => {
+  const { t } = useTranslation();
+  const { results: paginatedAppointments, currentPage, goTo } = usePagination(patientAppointments, pageSize);
+  const isTablet = useLayoutType() === 'tablet';
+
+  useEffect(() => {
+    if (switchedView && currentPage !== 1) {
+      goTo(1);
+    }
+  }, [switchedView, goTo, currentPage]);
+
+  const tableHeaders: Array<typeof DataTableHeader> = useMemo(
+    () => [
+      { key: 'date', header: t('date', 'Date') },
+      { key: 'location', header: t('location', 'Location') },
+      { key: 'service', header: t('service', 'Service') },
+      { key: 'status', header: t('status', 'Status') },
+      { key: 'type', header: t('type', 'Type') },
+      { key: 'notes', header: t('notes', 'Notes') },
+    ],
+    [t],
+  );
+
+  const tableRows = useMemo(
+    () =>
+      paginatedAppointments?.map((appointment) => {
+        return {
+          id: appointment.uuid,
+          date: formatDatetime(parseDate(appointment.startDateTime), { mode: 'wide' }),
+          location: appointment?.location?.name ? appointment?.location?.name : '——',
+          service: appointment.service.name,
+          status: appointment.status,
+          type: appointment.appointmentKind ? appointment.appointmentKind : '——',
+          notes: appointment.comments ? appointment.comments : '——',
+        };
+      }),
+    [paginatedAppointments],
+  );
+
+  return (
+    <div>
+      <DataTable rows={tableRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      className={classNames(styles.productiveHeading01, styles.text02)}
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                    ))}
+                    <TableCell className="cds--table-column-menu">
+                      <PatientAppointmentsActionMenu appointment={paginatedAppointments[i]} patientUuid={patientUuid} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        currentItems={paginatedAppointments.length}
+        totalItems={patientAppointments.length}
+        onPageNumberChange={({ page }) => {
+          setSwitchedView(false);
+          goTo(page);
+        }}
+        pageNumber={currentPage}
+        pageSize={pageSize}
+      />
+    </div>
+  );
+};
+
+export default PatientAppointmentsTable;

package/src/patient-appointments/patient-appointments.resource.ts

@@ -0,0 +1,72 @@
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AppointmentsFetchResponse } from '../types';
+import isToday from 'dayjs/plugin/isToday';
+dayjs.extend(isToday);
+
+const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
+
+export function usePatientAppointments(patientUuid: string, startDate: string, abortController: AbortController) {
+  /*
+    SWR isn't meant to make POST requests for data fetching. This is a consequence of the API only exposing this resource via POST.
+    This works but likely isn't recommended.
+  */
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<AppointmentsFetchResponse, Error>(
+    appointmentsSearchUrl,
+    fetcher,
+  );
+
+  const appointments = data?.data?.length ? data.data : null;
+
+  const pastAppointments = appointments
+    ?.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) =>
+      dayjs(new Date(startDateTime).toISOString()).isBefore(new Date().setHours(0, 0, 0, 0)),
+    );
+
+  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()));
+
+  const todaysAppointments = appointments
+    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isToday());
+
+  return {
+    data: data ? { pastAppointments, upcomingAppointments, todaysAppointments } : null,
+    isError: error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+}
+
+// TODO: move?
+export const changeAppointmentStatus = async (toStatus: string, appointmentUuid: string) => {
+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const statusChangeTime = dayjs(new Date()).format(omrsDateFormat);
+  const url = `${restBaseUrl}/appointments/${appointmentUuid}/status-change`;
+  return await openmrsFetch(url, {
+    body: { toStatus, onDate: statusChangeTime, timeZone: timeZone },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  });
+};

package/src/patient-appointments/patient-upcoming-appointments-card.component.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  InlineLoading,
+  InlineNotification,
+  RadioButton,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { usePatientAppointments } from './patient-appointments.resource';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import styles from './patient-upcoming-appointments-card.scss';
+import dayjs from 'dayjs';
+import { type Appointment } from '../types';
+
+interface PatientUpcomingAppointmentsProps {
+  patientUuid: string;
+  setUpcomingAppointment: (value: Appointment) => void;
+}
+
+const PatientUpcomingAppointmentsCard: React.FC<PatientUpcomingAppointmentsProps> = ({
+  patientUuid,
+  setUpcomingAppointment,
+}) => {
+  const { t } = useTranslation();
+  const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
+  const headerTitle = t('upcomingAppointments', 'Upcoming appointments');
+  const [selectedAppointment, setSelectedAppointment] = useState(null);
+
+  const ac = useMemo<AbortController>(() => new AbortController(), []);
+  useEffect(() => () => ac.abort(), [ac]);
+  const { data: appointmentsData, isError, isLoading } = usePatientAppointments(patientUuid, startDate, ac);
+
+  const todaysAppointments = appointmentsData?.todaysAppointments?.length ? appointmentsData?.todaysAppointments : [];
+  const futureAppointments = appointmentsData?.upcomingAppointments?.length
+    ? appointmentsData?.upcomingAppointments
+    : [];
+
+  const appointments = todaysAppointments
+    .concat(futureAppointments)
+    .filter((appointment) => appointment.status !== 'CheckedIn');
+
+  useEffect(() => {
+    if (appointments.length === 1) {
+      setSelectedAppointment(appointments[0]);
+      setUpcomingAppointment(appointments[0]);
+    }
+  }, [appointments]);
+
+  const handleRadioChange = (appointment: Appointment) => {
+    setSelectedAppointment(appointment);
+    setUpcomingAppointment(appointment);
+  };
+
+  if (isError) {
+    return <ErrorState headerTitle={headerTitle} error={isError} />;
+  }
+  if (isLoading) {
+    return (
+      <span>
+        <InlineLoading />
+      </span>
+    );
+  }
+
+  if (appointments.length) {
+    return (
+      <div>
+        <div>
+          <p className={styles.sectionTitle}>{headerTitle}</p>
+          <span className={styles.headerLabel}>{t('appointmentToFulfill', 'Select appointment to fulfill')}</span>
+        </div>
+        <StructuredListWrapper>
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head>{t('date', 'Date')}</StructuredListCell>
+              <StructuredListCell head>{t('appointmentType', 'Appointment type')}</StructuredListCell>
+              <StructuredListCell head>{t('action', 'Action')}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>
+            {appointments.map((appointment, index) => (
+              <StructuredListRow key={index} className={styles.structuredList}>
+                <StructuredListCell>
+                  {formatDate(parseDate(appointment.startDateTime), { mode: 'wide' })}
+                </StructuredListCell>
+                <StructuredListCell>{appointment.service ? appointment.service.name : '——'}</StructuredListCell>
+                <StructuredListCell>
+                  <RadioButton
+                    className={styles.radioButton}
+                    labelText=""
+                    id={`radio-${index}`}
+                    name="appointmentRadio"
+                    value={appointment.uuid}
+                    checked={selectedAppointment === appointment}
+                    onChange={() => handleRadioChange(appointment)}
+                  />
+                </StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    );
+  }
+
+  return (
+    <InlineNotification
+      kind={'info'}
+      lowContrast
+      className={styles.inlineNotification}
+      title={t('upcomingAppointments', 'Upcoming appointments')}
+      subtitle={t('noUpcomingAppointments', 'No upcoming appointments found')}
+    />
+  );
+};
+
+export default PatientUpcomingAppointmentsCard;

package/src/patient-appointments/patient-upcoming-appointments-card.scss

@@ -0,0 +1,46 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: spacing.$spacing-05;
+
+  & section {
+    margin: spacing.$spacing-05 0;
+  }
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin: 0 0 spacing.$spacing-03 0;
+}
+.checkbox {
+  &:not(:first-child) {
+    margin: 0rem 0rem;
+  }
+}
+
+.input {
+  margin: 0rem 1rem 1rem;
+}
+
+.headerLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.checkboxContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.structuredList {
+  padding: 0.5rem 0.5rem 0.5rem;
+}
+
+.inlineNotification {
+  width: 100%;
+  max-width: unset;
+  padding: '0rem';
+}

package/src/patient-search/patient-search.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ExtensionSlot, launchWorkspace } from '@openmrs/esm-framework';
+import styles from './patient-search.scss';
+import { useTranslation } from 'react-i18next';
+
+const PatientSearch: React.FC = () => {
+  const { t } = useTranslation();
+  const launchCreateAppointmentForm = (patient) => {
+    const props = {
+      patientUuid: patient.uuid,
+      context: 'creating',
+      mutate: () => {}, // TODO get this to mutate properly
+    };
+    launchWorkspace('create-appointment', { ...props });
+  };
+
+  return (
+    <div className="omrs-main-content">
+      <span className={styles.searchBarWrapper}>
+        <ExtensionSlot
+          name="patient-search-bar-slot"
+          state={{
+            selectPatientAction: launchCreateAppointmentForm,
+            buttonProps: {
+              kind: 'primary',
+            },
+          }}
+        />
+      </span>
+    </div>
+  );
+};
+
+export default PatientSearch;

package/src/patient-search/patient-search.scss

@@ -0,0 +1,23 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.padded {
+  padding: spacing.$spacing-05;
+}
+
+[data-extension-id='patient-search-bar'] {
+  & > div {
+    width: 100%;
+
+    & input {
+      background-color: $ui-02;
+      border-bottom: none;
+      min-height: spacing.$spacing-09;
+    }
+
+    & button {
+      height: spacing.$spacing-09;
+    }
+  }
+}

package/src/root.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import AppointmentsCalendarView from './calendar/appointments-calendar-view.component';
+import Appointments from './appointments.component';
+import PatientAppointmentsOverview from './patient-appointments/patient-appointments-overview.component';
+
+const RootComponent: React.FC = () => {
+  const appointmentsBasename = window.getOpenmrsSpaBase() + 'home/appointments';
+
+  return (
+    <main>
+      <BrowserRouter basename={appointmentsBasename}>
+        <Routes>
+          <Route path="/" element={<Appointments />} />
+          <Route path="/:date" element={<Appointments />} />
+          <Route path="/:date/:serviceType" element={<Appointments />} />
+          <Route path="/calendar" element={<AppointmentsCalendarView />} />
+          <Route path="/calendar/:date" element={<AppointmentsCalendarView />} />
+          <Route path="/patient/:patientUuid" element={<PatientAppointmentsOverview />} />
+        </Routes>
+      </BrowserRouter>
+    </main>
+  );
+};
+
+export default RootComponent;

package/src/root.scss

@@ -0,0 +1,50 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
+
+.productiveHeading04 {
+  @include type.type-style('heading-04');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.modal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9000;
+  justify-items: center;
+  align-items: center;
+}