@kenyaemr/esm-patient-list-management-app 7.0.2-pre.65

package/src/api/hooks.ts

@@ -0,0 +1,150 @@
+import { useEffect } from 'react';
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { openmrsFetch, type FetchResponse, useConfig, useSession } from '@openmrs/esm-framework';
+import { cohortUrl, getAllPatientLists, getPatientListIdsForPatient, getPatientListMembers } from './api-remote';
+import { type ConfigSchema } from '../config-schema';
+import {
+  type CohortResponse,
+  type CohortType,
+  type OpenmrsCohort,
+  type OpenmrsCohortMember,
+  type PatientListFilter,
+  PatientListType,
+} from './types';
+
+interface PatientListResponse {
+  results: CohortResponse<OpenmrsCohort>;
+  links: Array<{ rel: 'prev' | 'next' }>;
+  totalCount: number;
+}
+
+export function useAllPatientLists({ isStarred, type }: PatientListFilter) {
+  const custom = 'custom:(uuid,name,description,display,size,attributes,cohortType)';
+  const query: Array<[string, string]> = [
+    ['v', custom],
+    ['totalCount', 'true'],
+  ];
+  const config: ConfigSchema = useConfig();
+
+  if (type === PatientListType.USER) {
+    query.push(['cohortType', config.myListCohortTypeUUID]);
+  } else if (type === PatientListType.SYSTEM) {
+    query.push(['cohortType', config.systemListCohortTypeUUID]);
+  }
+
+  const params = query.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+
+  const getUrl = (pageIndex, previousPageData: FetchResponse<PatientListResponse>) => {
+    if (pageIndex && !previousPageData?.data?.links?.some((link) => link.rel === 'next')) {
+      return null;
+    }
+
+    let url = `${cohortUrl}/cohort?${params}`;
+
+    if (pageIndex) {
+      url += `&startIndex=${pageIndex * 50}`;
+    }
+
+    return url;
+  };
+
+  const {
+    data,
+    error,
+    mutate,
+    isValidating,
+    isLoading,
+    size: pageNumber,
+    setSize,
+  } = useSWRInfinite<FetchResponse<PatientListResponse>, Error>(getUrl, openmrsFetch);
+
+  useEffect(() => {
+    if (data && data?.[pageNumber - 1]?.data?.links?.some((link) => link.rel === 'next')) {
+      setSize((currentSize) => currentSize + 1);
+    }
+  }, [data, pageNumber, setSize]);
+
+  const patientListsData = (data?.flatMap((res) => res?.data?.results ?? []) ?? []).map((cohort) => ({
+    id: cohort.uuid,
+    display: cohort.name,
+    description: cohort.description,
+    type: cohort.cohortType?.display,
+    size: cohort.size,
+  }));
+  const { user } = useSession();
+
+  return {
+    patientLists: isStarred
+      ? patientListsData.filter(({ id }) => user?.userProperties?.starredPatientLists?.includes(id))
+      : patientListsData,
+    isLoading,
+    isValidating,
+    error,
+    mutate,
+  };
+}
+
+export function useAllPatientListMembers(patientListId: string) {
+  return useSWR(['patientListMembers', patientListId], () => getPatientListMembers(patientListId));
+}
+
+/**
+ * A hook for querying all local and remote patient lists that exist for a given user,
+ * but without those patient lists where a specific patient has already been added as a member.
+ *
+ * This is intended for displaying all lists to which a given patient can still be added.
+ */
+export function useAllPatientListsWhichDoNotIncludeGivenPatient(patientUuid: string) {
+  const config = useConfig() as ConfigSchema;
+  return useSWR(['patientListWithoutPatient', patientUuid], async () => {
+    const [allLists, listsIdsOfThisPatient] = await Promise.all([
+      getAllPatientLists({}, config?.myListCohortTypeUUID, config?.systemListCohortTypeUUID),
+      getPatientListIdsForPatient(patientUuid),
+    ]);
+
+    const listsWithoutPatient = allLists.filter((list) => !listsIdsOfThisPatient.includes(list.id));
+    return listsWithoutPatient;
+  });
+}
+
+export function usePatientListDetails(patientListUuid: string) {
+  const url = `${cohortUrl}/cohort/${patientListUuid}?v=custom:(uuid,name,description,display,size,attributes,startDate,endDate,cohortType)`;
+
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<OpenmrsCohort>, Error>(
+    patientListUuid ? url : null,
+    openmrsFetch,
+  );
+
+  return {
+    listDetails: data?.data,
+    error,
+    isLoading,
+    mutateListDetails: mutate,
+  };
+}
+
+export function usePatientListMembers(
+  patientListUuid: string,
+  searchQuery: string = '',
+  startIndex: number = 0,
+  pageSize: number = 10,
+  v: string = 'full',
+) {
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<CohortResponse<OpenmrsCohortMember>>, Error>(
+    `${cohortUrl}/cohortmember?cohort=${patientListUuid}&startIndex=${startIndex}&limit=${pageSize}&v=${v}&q=${searchQuery}`,
+    openmrsFetch,
+  );
+
+  return {
+    listMembers: data?.data?.results ?? [],
+    isLoadingListMembers: isLoading,
+    error: error,
+    mutateListMembers: mutate,
+  };
+}
+
+export function useCohortTypes() {
+  const swrResult = useSWR<FetchResponse<CohortResponse<CohortType>>, Error>(`${cohortUrl}/cohorttype`, openmrsFetch);
+  return { ...swrResult, data: swrResult?.data?.data?.results };
+}

package/src/api/types.ts

@@ -0,0 +1,102 @@
+import type { OpenmrsResource } from '@openmrs/esm-framework';
+
+export enum PatientListType {
+  STARRED = 'Starred',
+  SYSTEM = 'System list',
+  USER = 'My list',
+  ALL = 'All',
+}
+
+export interface PatientList {
+  id: string;
+  display: string;
+  description: string;
+  type: string;
+  size: number;
+  options?: Array<PatientListOption>;
+}
+
+export interface PatientListUpdate {
+  isStarred: boolean;
+}
+
+export interface PatientListFilter {
+  isStarred?: boolean;
+  name?: string;
+  type?: PatientListType;
+  label?: string;
+}
+
+export interface PatientListOption {
+  type: string;
+  name: string;
+  value: any;
+}
+
+export interface PatientListMember {
+  endDate: string | number | Date;
+  id: string;
+}
+
+export interface AddPatientData {
+  patient: string;
+  cohort: string;
+  startDate: string;
+}
+
+export interface OpenmrsCohort {
+  uuid: string;
+  resourceVersion: string;
+  name: string;
+  description: string;
+  attributes: Array<any>;
+  links: Array<any>;
+  location: Location | null;
+  groupCohort: boolean | null;
+  startDate: string | null;
+  endDate: string | null;
+  voidReason: string | null;
+  voided: boolean;
+  isStarred?: boolean;
+  type?: string;
+  size: number;
+  cohortType?: CohortType;
+}
+
+export interface OpenmrsCohortRef {
+  cohort: OpenmrsCohortMember;
+}
+
+export interface OpenmrsCohortMember {
+  attributes: Array<any>;
+  description: string;
+  endDate: string;
+  startDate: string;
+  name: string;
+  uuid: string;
+  patient: OpenmrsResource;
+  voided: boolean;
+}
+
+export interface CohortResponse<T> {
+  results: Array<T>;
+  error: any;
+  totalCount: number;
+}
+
+export interface NewCohortData {
+  name: string;
+  description: string;
+}
+
+export interface NewCohortDataPayload {
+  name: string;
+  description: string;
+  cohortType: string;
+  location: string;
+}
+
+export interface CohortType {
+  display: string;
+  uuid: string;
+}

package/src/config-schema.ts

@@ -0,0 +1,25 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  myListCohortTypeUUID: {
+    _type: Type.UUID,
+    _description: 'UUID of the `My List` cohort type',
+    _default: 'e71857cb-33af-4f2c-86ab-7223bcfa37ad',
+  },
+  systemListCohortTypeUUID: {
+    _type: Type.UUID,
+    _description: 'UUID of the `System List` cohort type',
+    _default: 'eee9970e-7ca0-4e8c-a280-c33e9d5f6a04',
+  },
+  patientListsToShow: {
+    _type: Type.Number,
+    _description: 'The default number of lists to show in the Lists dashboard table',
+    _default: 10,
+  },
+};
+
+export interface ConfigSchema {
+  myListCohortTypeUUID: string;
+  systemListCohortTypeUUID: string;
+  patientListsToShow: number;
+}

package/src/constants.ts

@@ -0,0 +1,5 @@
+import { omrsOfflineCachingStrategyHttpHeaderName, type OmrsOfflineHttpHeaders } from '@openmrs/esm-framework';
+
+export const cacheForOfflineHeaders: OmrsOfflineHttpHeaders = {
+  [omrsOfflineCachingStrategyHttpHeaderName]: 'network-first',
+};

package/src/create-edit-patient-list/create-edit-list.component.tsx

@@ -0,0 +1,170 @@
+import React, { useCallback, type SyntheticEvent, useEffect, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, Layer, TextArea, TextInput } from '@carbon/react';
+import { useLayoutType, showSnackbar, useSession, useConfig } from '@openmrs/esm-framework';
+import type { ConfigSchema } from '../config-schema';
+import type { NewCohortData, OpenmrsCohort } from '../api/types';
+import { createPatientList, editPatientList } from '../api/api-remote';
+import Overlay from '../overlay.component';
+import styles from './create-edit-patient-list.scss';
+
+interface CreateEditPatientListProps {
+  close: () => void;
+  isEditing?: boolean;
+  patientListDetails?: OpenmrsCohort;
+  onSuccess?: () => void;
+}
+
+const CreateEditPatientList: React.FC<CreateEditPatientListProps> = ({
+  close,
+  isEditing = false,
+  patientListDetails = null,
+  onSuccess = () => {},
+}) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const config = useConfig() as ConfigSchema;
+  const isTablet = useLayoutType() === 'tablet';
+  const responsiveLevel = isTablet ? 1 : 0;
+  const session = useSession();
+  const { user } = session;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [cohortDetails, setCohortDetails] = useState<NewCohortData>({
+    name: '',
+    description: '',
+  });
+
+  useEffect(() => {
+    setCohortDetails({
+      name: patientListDetails?.name || '',
+      description: patientListDetails?.description || '',
+    });
+  }, [user, patientListDetails]);
+
+  const handleSubmit = useCallback(() => {
+    setIsSubmitting(true);
+
+    if (isEditing) {
+      editPatientList(patientListDetails.uuid, cohortDetails)
+        .then(() => {
+          showSnackbar({
+            title: t('updated', 'Updated'),
+            subtitle: t('listUpdated', 'List updated successfully'),
+            kind: 'success',
+            isLowContrast: true,
+          });
+
+          onSuccess();
+          setIsSubmitting(false);
+          close();
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t('errorUpdatingList', 'Error updating list'),
+            subtitle: t('problemUpdatingList', 'There was a problem updating the list'),
+            kind: 'error',
+          });
+          setIsSubmitting(false);
+        });
+    }
+
+    if (!isEditing) {
+      createPatientList({
+        ...cohortDetails,
+        cohortType: config?.myListCohortTypeUUID,
+        location: session?.sessionLocation?.uuid,
+      })
+        .then(() => {
+          showSnackbar({
+            title: t('created', 'Created'),
+            subtitle: `${t('listCreated', 'List created successfully')}`,
+            kind: 'success',
+            isLowContrast: true,
+          });
+          onSuccess();
+          setIsSubmitting(false);
+          close();
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t('errorCreatingList', 'Error creating list'),
+            subtitle: t('problemCreatingList', 'There was a problem creating the list'),
+            kind: 'error',
+          });
+          setIsSubmitting(false);
+        });
+    }
+  }, [
+    close,
+    cohortDetails,
+    config?.myListCohortTypeUUID,
+    isEditing,
+    patientListDetails?.uuid,
+    onSuccess,
+    session.sessionLocation?.uuid,
+    t,
+  ]);
+
+  const handleChange = useCallback(
+    ({ currentTarget }: SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setCohortDetails((cohortDetails) => ({
+        ...cohortDetails,
+        [currentTarget?.name]: currentTarget?.value,
+      }));
+    },
+    [setCohortDetails],
+  );
+
+  return (
+    <Overlay
+      buttonsGroup={
+        <ButtonSet className={styles.buttonsGroup}>
+          <Button className={styles.button} onClick={close} kind="secondary" size="xl">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button onClick={handleSubmit} size="xl" disabled={isSubmitting}>
+            {isSubmitting
+              ? t('submitting', 'Submitting')
+              : isEditing
+                ? t('editList', 'Edit list')
+                : t('createList', 'Create list')}
+          </Button>
+        </ButtonSet>
+      }
+      close={close}
+      header={
+        isEditing ? t('editPatientListHeader', 'Edit patient list') : t('newPatientListHeader', 'New patient list')
+      }>
+      <h4 className={styles.header}>{t('configureList', 'Configure your patient list using the fields below')}</h4>
+      <div>
+        <Layer level={responsiveLevel}>
+          <TextInput
+            id={`${id}-input`}
+            labelText={t('newPatientListNameLabel', 'List name')}
+            name="name"
+            onChange={handleChange}
+            placeholder={t('listNamePlaceholder', 'e.g. Potential research participants')}
+            value={cohortDetails?.name}
+          />
+        </Layer>
+      </div>
+      <div className={styles.input}>
+        <Layer level={responsiveLevel}>
+          <TextArea
+            id={`${id}-textarea`}
+            labelText={t('newPatientListDescriptionLabel', 'Describe the purpose of this list in a few words')}
+            name="description"
+            onChange={handleChange}
+            placeholder={t(
+              'listDescriptionPlaceholder',
+              'e.g. Patients with diagnosed asthma who may be willing to be a part of a university research study',
+            )}
+            value={cohortDetails?.description}
+          />
+        </Layer>
+      </div>
+    </Overlay>
+  );
+};
+
+export default CreateEditPatientList;

package/src/create-edit-patient-list/create-edit-patient-list.scss

@@ -0,0 +1,31 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../style.scss';
+
+.header {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: spacing.$spacing-05;
+}
+
+.input {
+  margin-top: spacing.$spacing-07;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonsGroup {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  button {
+    max-width: unset;
+    width: 50%;
+  }
+}

package/src/createDashboardLink.component.tsx

@@ -0,0 +1,40 @@
+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('patientLists', 'Patient lists')}
+    </ConfigurableLink>
+  );
+}
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
+  <BrowserRouter>
+    <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+  </BrowserRouter>
+);

package/src/dashboard.meta.ts

@@ -0,0 +1,5 @@
+export const dashboardMeta = {
+  name: 'patient-lists',
+  slot: 'patient-lists-dashboard-slot',
+  title: 'Patient lists',
+};

package/src/declarations.d.ts

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+  const { t } = useTranslation();
+
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>{t('emptyStateIllustration', 'Empty state 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,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, Button, Tile } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { EmptyDataIllustration } from './empty-data-illustration.component';
+import styles from './empty-state.scss';
+
+export interface EmptyStateProps {
+  listType: string;
+  launchForm?(): void;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ listType, launchForm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div className={styles.illo}>
+          <EmptyDataIllustration />
+        </div>
+        <p className={styles.content}>
+          {t('emptyStateText', 'There are no {{listType}} patient lists to display', {
+            listType: listType.toLowerCase(),
+          })}
+        </p>
+        <p className={styles.action}>
+          {launchForm && (
+            <span>
+              <Button renderIcon={Add} kind="ghost" onClick={() => launchForm()}>
+                {t('createPatientList', 'Create patient list')}
+              </Button>
+            </span>
+          )}
+        </p>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default EmptyState;

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

@@ -0,0 +1,24 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.illo {
+  margin-top: spacing.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.actionText {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './error-state.scss';
+
+export interface ErrorStateProps {
+  error: any;
+  headerTitle: string;
+}
+
+export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{headerTitle}</h4>
+        </div>
+        <p className={styles.errorMessage}>
+          {t('error', 'Error')} {`${error?.response?.status}: `}
+          {error?.response?.statusText}
+        </p>
+        <p className={styles.errorCopy}>
+          {t(
+            'errorCopy',
+            'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
+          )}
+        </p>
+      </Tile>
+    </Layer>
+  );
+};