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

package/src/appointments.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Appointments from './appointments.component';
+
+describe('Appointments', () => {
+  it('should render correctly', () => {
+    render(<Appointments />);
+
+    expect(screen.getByTitle(/patient queue illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/^appointments$/i)).toBeInTheDocument();
+    expect(screen.getByText(/home/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/DD-MMM-YYYY/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /appointments calendar/i })).toBeInTheDocument();
+  });
+});

package/src/calendar/appointments-calendar-view-view.scss

@@ -0,0 +1,24 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.wrapper {
+  position: relative;
+}
+.monthlyCalendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
+  grid-template-rows: repeat(6, minmax(0px, 1fr));
+}
+
+.calendarViewContainer {
+  margin: spacing.$spacing-05;
+}
+.backgroundColor {
+  margin: 1px 0 0;
+  transition: width 0.24s ease-in-out;
+  position: relative;
+  min-height: calc(100vh - 80px);
+  background-color: colors.$white;
+}

package/src/calendar/appointments-calendar-view.component.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { useAppointmentsCalendar } from '../hooks/useAppointmentsCalendar';
+import AppointmentsHeader from '../header/appointments-header.component';
+import CalendarHeader from './header/calendar-header.component';
+import MonthlyCalendarView from './monthly/monthly-calendar-view.component';
+import SelectedDateContext from '../hooks/selectedDateContext';
+import { useParams } from 'react-router-dom';
+import { omrsDateFormat } from '../constants';
+
+const AppointmentsCalendarView: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedDate, setSelectedDate] = useState<string>(dayjs().startOf('day').format(omrsDateFormat));
+  const { calendarEvents } = useAppointmentsCalendar(dayjs(selectedDate).toISOString(), 'monthly');
+
+  let params = useParams();
+
+  useEffect(() => {
+    if (params.date) {
+      setSelectedDate(dayjs(params.date).startOf('day').format(omrsDateFormat));
+    }
+  }, [params.date]);
+
+  return (
+    <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
+      <div data-testid="appointments-calendar">
+        <AppointmentsHeader title={t('calendar', 'Calendar')} />
+        <CalendarHeader />
+        <MonthlyCalendarView events={calendarEvents} />
+      </div>
+    </SelectedDateContext.Provider>
+  );
+};
+
+export default AppointmentsCalendarView;

package/src/calendar/appointments-calendar-view.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AppointmentsCalendarView from './appointments-calendar-view.component';
+
+describe('Appointment calendar view', () => {
+  it('renders appointments in calendar view from appointments list', async () => {
+    renderAppointmentsCalendarListView();
+
+    const expectedTableRows = [
+      /John Wilson 30-Aug-2021 03:35 03:35 Dr James Cook Outpatient Walk in appointments/,
+      /Neil Amstrong 10-Sept-2021 03:50 03:50 Dr James Cook Outpatient Some additional notes/,
+    ];
+
+    expectedTableRows.forEach((row) => {
+      expect(screen.queryByRole('row', { name: new RegExp(row, 'i') })).not.toBeInTheDocument();
+    });
+  });
+});
+
+function renderAppointmentsCalendarListView() {
+  render(<AppointmentsCalendarView />);
+}

package/src/calendar/header/calendar-header.component.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import { navigate } from '@openmrs/esm-framework';
+import { spaHomePage } from '../../constants';
+import styles from './calendar-header.scss';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import dayjs from 'dayjs';
+
+const CalendarHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { selectedDate } = useContext(SelectedDateContext);
+  const backButtonOnClick = () => {
+    navigate({ to: `${spaHomePage}/appointments/${dayjs(selectedDate).format('YYYY-MM-DD')}` });
+  };
+
+  return (
+    <div className={styles.calendarHeaderContainer}>
+      <div className={styles.titleContainer}>
+        <Button
+          kind="ghost"
+          onClick={backButtonOnClick}
+          renderIcon={ArrowLeft}
+          iconDescription={t('back', 'Back')}
+          size="lg">
+          <span>{t('back', 'Back')}</span>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default CalendarHeader;

package/src/calendar/header/calendar-header.scss

@@ -0,0 +1,32 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+
+.titleContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 1rem;
+
+  & > p {
+    @include type.type-style('heading-02');
+  }
+
+  & > button {
+    color: colors.$blue-60;
+    @include type.type-style('label-02');
+  }
+}
+
+.titleContent {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .titleContent {
+    margin-left: 1rem;
+  }
+}

package/src/calendar/monthly/days-of-week.component.tsx

@@ -0,0 +1,16 @@
+import dayjs from 'dayjs';
+import React from 'react';
+import styles from './days-of-week.scss';
+
+interface DaysOfWeekProp {
+  dayOfWeek: string;
+}
+const DaysOfWeekCard: React.FC<DaysOfWeekProp> = ({ dayOfWeek }) => {
+  const isToday = dayjs(new Date()).format('ddd').toUpperCase() === dayOfWeek;
+  return (
+    <div tabIndex={0} role="button" className={styles.tileContainer}>
+      <span className={isToday ? styles.bold : ''}>{dayOfWeek}</span>
+    </div>
+  );
+};
+export default DaysOfWeekCard;

package/src/calendar/monthly/days-of-week.scss

@@ -0,0 +1,33 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tileContainer {
+  height: layout.$spacing-10;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  align-items: center;
+  border: 1px solid colors.$gray-20;
+
+  & > span {
+    font-size: layout.$spacing-05;
+    color: colors.$gray-70;
+  }
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: layout.$spacing-05;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}

package/src/calendar/monthly/monthly-calendar-view.component.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import { type DailyAppointmentsCountByService } from '../../types';
+import { monthDays } from '../../helpers';
+import MonthlyViewWorkload from './monthly-workload-view.component';
+import MonthlyHeader from './monthly-header.module';
+import styles from '../appointments-calendar-view-view.scss';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+
+dayjs.extend(isBetween);
+
+interface MonthlyCalendarViewProps {
+  events: Array<DailyAppointmentsCountByService>;
+}
+
+const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({ events }) => {
+  const { selectedDate } = useContext(SelectedDateContext);
+
+  return (
+    <div className={styles.calendarViewContainer}>
+      <MonthlyHeader />
+      <div className={styles.wrapper}>
+        <div className={styles.monthlyCalendar}>
+          {monthDays(dayjs(selectedDate)).map((dateTime, i) => (
+            <MonthlyViewWorkload key={i} dateTime={dateTime} events={events} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MonthlyCalendarView;

package/src/calendar/monthly/monthly-header.module.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: layout.$spacing-10;
+}
+.workLoadCard {
+  display: flex;
+  color: colors.$black;
+}

package/src/calendar/monthly/monthly-header.module.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import styles from './monthly-header.module.scss';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import DaysOfWeekCard from './days-of-week.component';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import { omrsDateFormat } from '../../constants';
+
+const monthFormat = 'MMMM, YYYY';
+const daysInWeek = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
+function MonthlyHeader() {
+  const { t } = useTranslation();
+  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Button
+          size="sm"
+          onClick={() => setSelectedDate(dayjs(selectedDate).subtract(1, 'month').format(omrsDateFormat))}
+          kind="tertiary">
+          {t('prev', 'Prev')}
+        </Button>
+        <span>{dayjs(selectedDate).format(monthFormat)}</span>
+
+        <Button
+          size="sm"
+          onClick={() => setSelectedDate(dayjs(selectedDate).add(1, 'month').format(omrsDateFormat))}
+          kind="tertiary">
+          {t('next', 'Next')}
+        </Button>
+      </div>
+      <div className={styles.workLoadCard}>
+        {daysInWeek?.map((day, i) => <DaysOfWeekCard key={`${day}-${i}`} dayOfWeek={day} />)}
+      </div>
+    </>
+  );
+}
+export default MonthlyHeader;

package/src/calendar/monthly/monthly-view-workload.scss

@@ -0,0 +1,188 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.monthly-cell {
+  border-left: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  background: colors.$white;
+  color: colors.$black;
+  cursor: pointer;
+  padding: layout.$spacing-01;
+  text-align: right;
+  @include type.type-style('body-compact-02');
+
+  &:nth-child(-n + 7) {
+    border-top: 1px solid colors.$gray-20;
+  }
+
+  &:nth-child(7n) {
+    border-right: 1px solid colors.$gray-20;
+  }
+
+  &-disabled {
+    border-left: 1px solid colors.$gray-20;
+    border-bottom: 1px solid colors.$gray-20;
+  }
+
+  &-disabled:last-child {
+    border-right: 1px solid colors.$gray-20;
+  }
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+  display: list-item;
+
+  span:not(:first-child) {
+    margin: 0rem 0.75rem;
+  }
+}
+
+.identifierTag {
+  display: flex;
+  align-items: center;
+}
+
+.weekly-cell {
+  position: relative;
+  border-right: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  min-height: 120px;
+  color: colors.$white;
+
+  .week-time {
+    display: none;
+  }
+
+  &:nth-child(-n + 8) {
+    border-top: 1px solid colors.$gray-20;
+  }
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &:nth-child(8n + 1) {
+    border-bottom: none;
+
+    .week-time {
+      white-space: nowrap;
+      display: inline;
+      color: colors.$white;
+      position: absolute;
+      top: -11px;
+      height: layout.$spacing-06;
+      width: layout.$spacing-07;
+    }
+  }
+}
+
+.currentData {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  margin: 0.1rem 0.1rem 0.5rem 0.1rem;
+
+  & > span {
+    @include type.type-style('label-02');
+  }
+}
+
+.serviceArea {
+  width: 100%;
+  padding: 0.125rem;
+  margin-right: 0.5rem;
+  display: grid;
+  grid-template-columns: 4fr 1fr;
+  justify-content: flex-start;
+  color: #020f1b;
+  cursor: pointer;
+  @include type.type-style('label-01');
+
+  & > span:first-child {
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  & > span:nth-child(2) {
+    text-align: right;
+  }
+}
+
+.serviceArea:hover {
+  background-color: colors.$gray-10;
+}
+
+.totals {
+  padding: 0.125rem;
+  display: grid;
+  grid-template-columns: 4fr 1fr;
+  justify-content: flex-start;
+  background-color: colors.$gray-10;
+
+  & > div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    cursor: pointer;
+    font-weight: lighter;
+  }
+
+  & > span:nth-child(2) {
+    color: #020f1b;
+    font-weight: bold;
+    text-align: right;
+    @include type.type-style('heading-compact-01');
+  }
+}
+
+.smallDesktop {
+  height: 100px;
+}
+
+.largeDesktop {
+  height: 150px;
+}
+
+.red {
+  background-color: colors.$red-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.purple {
+  background-color: colors.$yellow-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.blue {
+  background-color: colors.$blue-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.green {
+  background-color: colors.$green-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.showMoreItems {
+  margin-top: 0.1rem;
+  padding: 0;
+  @include type.type-style('heading-compact-01');
+  text-decoration: underline;
+  color: colors.$blue-50;
+  background-color: colors.$white;
+  font-weight: lighter;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}

package/src/calendar/monthly/monthly-workload-view-expanded.component.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import { Popover, PopoverContent } from '@carbon/react';
+import styles from './monthly-view-workload.scss';
+import MonthlyWorkloadView, { type MonthlyWorkloadViewProps } from './monthly-workload-view.component';
+import { useTranslation } from 'react-i18next';
+
+interface MonthlyWorkloadViewExpandedProps extends MonthlyWorkloadViewProps {
+  count: number;
+}
+
+const MonthlyWorkloadViewExpanded: React.FC<MonthlyWorkloadViewExpandedProps> = ({ count, events, dateTime }) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const popoverRef = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <Popover open={isOpen} align="top" ref={popoverRef}>
+      <button className={styles.showMoreItems} onClick={() => setIsOpen((prev) => !prev)}>
+        {t('countMore', '{{count}} more', { count })}
+      </button>
+      <PopoverContent>
+        <MonthlyWorkloadView events={events} dateTime={dateTime} showAllServices={true} />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default MonthlyWorkloadViewExpanded;

package/src/calendar/monthly/monthly-workload-view.component.tsx

@@ -0,0 +1,109 @@
+import React, { useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import dayjs, { type Dayjs } from 'dayjs';
+import { navigate, useLayoutType } from '@openmrs/esm-framework';
+import { isSameMonth } from '../../helpers';
+import { spaHomePage } from '../../constants';
+import styles from './monthly-view-workload.scss';
+import { type DailyAppointmentsCountByService } from '../../types';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import { User } from '@carbon/react/icons';
+import MonthlyWorkloadViewExpanded from './monthly-workload-view-expanded.component';
+
+export interface MonthlyWorkloadViewProps {
+  events: Array<DailyAppointmentsCountByService>;
+  dateTime: Dayjs;
+  showAllServices?: boolean;
+}
+
+const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, events, showAllServices = false }) => {
+  const layout = useLayoutType();
+  const { selectedDate } = useContext(SelectedDateContext);
+
+  const currentData = useMemo(
+    () =>
+      events?.find(
+        (event) => dayjs(event.appointmentDate)?.format('YYYY-MM-DD') === dayjs(dateTime)?.format('YYYY-MM-DD'),
+      ),
+    [events],
+  );
+
+  const visibleServices = useMemo(() => {
+    if (currentData?.services) {
+      if (showAllServices) return currentData.services;
+      return currentData.services.slice(0, layout === 'small-desktop' ? 2 : 4);
+    }
+    return [];
+  }, [currentData, showAllServices, layout, currentData]);
+
+  const hasHiddenServices = useMemo(() => {
+    if (currentData?.services) {
+      if (showAllServices) return false;
+      return layout === 'small-desktop' ? currentData.services.length > 2 : currentData.services.length > 4;
+    }
+    return false;
+  }, [layout, currentData, currentData]);
+
+  const navigateToAppointmentsByDate = (serviceUuid: string) => {
+    navigate({ to: `${spaHomePage}/appointments/${dayjs(dateTime).format('YYYY-MM-DD')}/${serviceUuid}` });
+  };
+
+  return (
+    <div
+      onClick={() => navigateToAppointmentsByDate('')}
+      className={classNames(
+        styles[isSameMonth(dateTime, dayjs(selectedDate)) ? 'monthly-cell' : 'monthly-cell-disabled'],
+        showAllServices
+          ? {}
+          : {
+              [styles.smallDesktop]: layout === 'small-desktop',
+              [styles.largeDesktop]: layout !== 'small-desktop',
+            },
+      )}>
+      {isSameMonth(dateTime, dayjs(selectedDate)) && (
+        <p>
+          <div className={classNames(styles.totals)}>
+            {currentData?.services ? (
+              <div role="button" tabIndex={0}>
+                <User size={16} />
+                <span>{currentData?.services.reduce((sum, { count = 0 }) => sum + count, 0)}</span>
+              </div>
+            ) : (
+              <div />
+            )}
+            <b className={styles.calendarDate}>{dateTime.format('D')}</b>
+          </div>
+          {currentData?.services && (
+            <div className={styles.currentData}>
+              {visibleServices.map(({ serviceName, serviceUuid, count }, i) => (
+                <div
+                  key={`${serviceUuid}-${count}-${i}`}
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    navigateToAppointmentsByDate(serviceUuid);
+                  }}
+                  className={styles.serviceArea}>
+                  <span>{serviceName}</span>
+                  <span>{count}</span>
+                </div>
+              ))}
+              {hasHiddenServices ? (
+                <MonthlyWorkloadViewExpanded
+                  count={currentData.services.length - (layout === 'small-desktop' ? 2 : 4)}
+                  events={events}
+                  dateTime={dateTime}
+                />
+              ) : (
+                ''
+              )}
+            </div>
+          )}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default MonthlyWorkloadView;