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

package/src/config-schema.ts

@@ -0,0 +1,151 @@
+import { Type, restBaseUrl, validators } from '@openmrs/esm-framework';
+import { spaHomePage } from './constants';
+
+export const configSchema = {
+  concepts: {
+    visitQueueNumberAttributeUuid: {
+      _type: Type.String,
+      _description: 'The UUID of the visit attribute that contains the visit queue number.',
+      _default: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    },
+  },
+  appointmentTypes: {
+    _type: Type.Array,
+    _description: 'Configurable appointment types (types of appointments)',
+    _default: ['Scheduled'],
+  },
+  appointmentStatuses: {
+    _type: Type.Array,
+    _description: 'Configurable appointment status (status of appointments)',
+    _default: ['Requested', 'Scheduled', 'CheckedIn', 'Completed', 'Cancelled', 'Missed'],
+  },
+  daysOfTheWeek: {
+    _type: Type.Array,
+    _description: 'Configurable days of the week',
+    _default: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  },
+  useBahmniAppointmentsUI: {
+    _type: Type.Boolean,
+    _description: 'Open links in Bahmni Appointments UI instead of O3 UI',
+    _default: false,
+  },
+
+  useFullViewPrivilege: {
+    _type: Type.Boolean,
+    _description: "If set to 'false', will always display the full view, disregarding any privilege",
+    _default: false,
+  },
+
+  fullViewPrivilege: {
+    _type: Type.String,
+    _description: 'Name of the privilege to display the full view of the Appointments dashboard widget.',
+    _default: "Today's Appointments Widget: Display Full View",
+  },
+  bahmniAppointmentsUiBaseUrl: {
+    _type: Type.String,
+    _description: 'Configurable base URL that points to the Bahmni Appointments UI',
+    _default: '/appointments',
+  },
+  appointmentsBaseUrl: {
+    _type: Type.String,
+    _description: 'Configurable alternative URL for the Appointments UI. Eg, the Bahmni Appointments UI URL',
+    _default: `${spaHomePage}`,
+  },
+  hiddenFormFields: {
+    _type: Type.Array,
+    _description: 'Array of form controls to be hidden on form load',
+    _default: [],
+  },
+  showServiceQueueFields: {
+    _type: Type.Boolean,
+    _description: 'Whether start visit form should display service queue fields`',
+    _default: false,
+  },
+  defaultFacilityUrl: {
+    _type: Type.String,
+    _default: `${restBaseUrl}/kenyaemr/default-facility`,
+    _description: 'Custom URL to load default facility if it is not in the session',
+  },
+  customPatientChartUrl: {
+    _type: Type.String,
+    _description: `Template URL that will be used when clicking on the patient name in the queues table.
+      Available argument: patientUuid, openmrsSpaBase, openBase
+      (openmrsSpaBase and openBase are available to any <ConfigurableLink>)`,
+    _default: '${openmrsSpaBase}/patient/${patientUuid}/chart',
+    _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
+  },
+  patientIdentifierType: {
+    _type: Type.String,
+    _description: 'The name of the patient identifier type to be used for the patient identifier field',
+    _default: '',
+  },
+  showUnscheduledAppointmentsTab: {
+    _type: Type.Boolean,
+    _description:
+      'Whether to show the Unscheduled Appointments tab. Note that configuring this to true requires a custom unscheduledAppointment endpoint not currently available',
+    _default: false,
+  },
+  allowAllDayAppointments: {
+    _type: Type.Boolean,
+    _description: 'Whether to allow scheduling of all-day appointments (vs appointments with start time and end time)',
+    _default: false,
+  },
+  checkInButton: {
+    enabled: {
+      _type: Type.Boolean,
+      _description: 'Whether the check-in button on the "Appointments" list should be enabled',
+      _default: true,
+    },
+    showIfActiveVisit: {
+      _type: Type.Boolean,
+      _description: 'Whether to show the check-in button if the patient currently has an active visit',
+      _default: false,
+    },
+    customUrl: {
+      _type: Type.String,
+      _description: 'Custom URL to open when clicking the check-in button (instead of thes start visit form)',
+      _default: '',
+    },
+  },
+  checkOutButton: {
+    enabled: {
+      _type: Type.Boolean,
+      _description: 'Whether the check-out button on the "Appointments" list should be disabled',
+      _default: true,
+    },
+    customUrl: {
+      _type: Type.String,
+      _description: 'Custom URL to open when clicking the check-out button',
+      _default: '',
+    },
+  },
+};
+
+export interface ConfigObject {
+  concepts: {
+    visitQueueNumberAttributeUuid: string;
+  };
+  appointmentTypes: Array<string>;
+  daysOfTheWeek: Array<string>;
+  appointmentStatuses: Array<string>;
+  useBahmniAppointmentsUI: boolean;
+  useFullViewPrivilege: boolean;
+  fullViewPrivilege: string;
+  appointmentComments: Array<string>;
+  hiddenFormFields: Array<string>;
+  showServiceQueueFields: boolean;
+  defaultFacilityUrl: string;
+  customPatientChartUrl: string;
+  patientIdentifierType: string;
+  showUnscheduledAppointmentsTab: boolean;
+  allowAllDayAppointments: boolean;
+  checkInButton: {
+    enabled: boolean;
+    showIfActiveVisit: boolean;
+    customUrl: string;
+  };
+  checkOutButton: {
+    enabled: boolean;
+    customUrl: string;
+  };
+}

package/src/constants.ts

@@ -0,0 +1,55 @@
+export const spaRoot = window['getOpenmrsSpaBase'];
+export const basePath = '/appointments';
+export const spaHomePage = ` ${window.getOpenmrsSpaBase()}home`;
+export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+export const appointmentLocationTagName = 'Appointment Location';
+
+export const moduleName = '@openmrs/esm-appointments-app';
+
+export const datePickerPlaceHolder = 'dd/mm/yyyy';
+export const dateFormat = 'DD/MM/YYYY';
+export const datePickerFormat = 'd/m/Y';
+export const weekDays = [
+  {
+    id: 'MONDAY',
+    label: 'Monday',
+    labelCode: 'monday',
+    order: 0,
+  },
+  {
+    id: 'TUESDAY',
+    label: 'Tuesday',
+    labelCode: 'tuesday',
+    order: 1,
+  },
+  {
+    id: 'WEDNESDAY',
+    label: 'Wednesday',
+    labelCode: 'wednesday',
+    order: 2,
+  },
+  {
+    id: 'THURSDAY',
+    label: 'Thursday',
+    labelCode: 'thursday',
+    order: 3,
+  },
+  {
+    id: 'FRIDAY',
+    label: 'Friday',
+    labelCode: 'friday',
+    order: 4,
+  },
+  {
+    id: 'SATURDAY',
+    label: 'Saturday',
+    labelCode: 'saturday',
+    order: 5,
+  },
+  {
+    id: 'SUNDAY',
+    label: 'Sunday',
+    labelCode: 'sunday',
+    order: 6,
+  },
+];

package/src/createDashboardLink.component.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+}
+
+function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  const { t } = useTranslation();
+  const { name } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/home');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      className={classNames('cds--side-nav__link', {
+        'active-left-nav-link': navLink.match(name),
+      })}
+      to={`${spaBasePath}/${name}`}>
+      {t('appointments', 'Appointments')}
+    </ConfigurableLink>
+  );
+}
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
+  <BrowserRouter>
+    <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+  </BrowserRouter>
+);

package/src/dashboard.meta.ts

@@ -0,0 +1,21 @@
+import { Calendar } from '@carbon/react/icons';
+
+export const dashboardMeta = {
+  name: 'appointments',
+  slot: 'clinical-appointments-dashboard-slot',
+  title: 'Appointments',
+};
+
+export const appointmentCalendarDashboardMeta = {
+  name: 'calendar',
+  slot: 'clinical-appointments-dashboard-slot',
+  title: 'Appointments Calendar',
+  renderIcon: Calendar,
+};
+
+export const patientChartDashboardMeta = {
+  slot: 'patient-chart-appointments-dashboard-slot',
+  columns: 1,
+  title: 'Appointments',
+  path: 'Appointments',
+};

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare type SideNavProps = {};

package/src/empty-state/empty-data-illustration.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+      </g>
+    </svg>
+  );
+};

package/src/empty-state/empty-state.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import { Trans } from 'react-i18next';
+import { EmptyDataIllustration } from './empty-data-illustration.component';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './empty-state.scss';
+
+export interface EmptyStateProps {
+  displayText: string;
+  headerTitle: string;
+  launchForm?(): void;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({ headerTitle, displayText, launchForm }) => {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{headerTitle}</h4>
+        </div>
+        <EmptyDataIllustration />
+        <p className={styles.content}>
+          <Trans i18nKey="emptyStateText" displayText={displayText}>
+            There are no <span className={styles.displayText}>{{ displayText } as any}</span> to display
+          </Trans>
+        </p>
+      </Tile>
+    </Layer>
+  );
+};

package/src/empty-state/empty-state.scss

@@ -0,0 +1,69 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.displayText {
+  text-transform: lowercase;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.header4 {
+  @include type.type-style('heading-compact-01');
+  margin-bottom: 1rem;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeading,
+  .tabletHeading {
+    text-align: right;
+  }
+}