@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/components/registration/start-visit-form/hooks/useVisitAttributeType.tsx

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+interface VisitAttributeType {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string | null;
+  datatypeClassname:
+    | 'org.openmrs.customdatatype.datatype.ConceptDatatype'
+    | 'org.openmrs.customdatatype.datatype.FloatDatatype'
+    | 'org.openmrs.customdatatype.datatype.BooleanDatatype'
+    | 'org.openmrs.customdatatype.datatype.LongFreeTextDatatype'
+    | 'org.openmrs.customdatatype.datatype.FreeTextDatatype'
+    | 'org.openmrs.customdatatype.datatype.DateDatatype';
+  datatypeConfig: string;
+  preferredHandlerClassname: any;
+  retired: boolean;
+}
+
+interface Concept {
+  uuid: string;
+  name: {
+    display: string;
+  };
+  display: string;
+  answers: Array<{
+    display: string;
+    uuid: string;
+  }>;
+}
+
+const visitAttributeTypeCustomRepresentation =
+  'custom:(uuid,display,name,description,datatypeClassname,datatypeConfig)';
+
+export function useVisitAttributeTypes() {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<{ results: VisitAttributeType[] }>, Error>(
+    `${restBaseUrl}/visitattributetype?v=${visitAttributeTypeCustomRepresentation}`,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error('Failed to fetch visit attribute types: ', error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error,
+      visitAttributeTypes: data?.data?.results ?? [],
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}
+
+export function useVisitAttributeType(uuid: string) {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<VisitAttributeType>, Error>(
+    `${restBaseUrl}/visitattributetype/${uuid}?v=${visitAttributeTypeCustomRepresentation}`,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error(`Failed to fetch visit attribute type ${uuid}: `, error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error: error,
+      data: data?.data,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}
+
+export function useConceptAnswersForVisitAttributeType(conceptUuid: string | null) {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<Concept>, Error>(
+    conceptUuid ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error(`Failed to fetch concept answers for visit attribute type ${conceptUuid}: `, error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error: error,
+      data: data?.data,
+      answers: data?.data?.answers,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}

package/src/components/registration/start-visit-form/overflow-menu-extension/custom-end-active-visit.extension.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showModal, useVisit } from '@openmrs/esm-framework';
+import { OverflowMenuItem } from '@carbon/react';
+import styles from './overflow-menu-item.scss';
+
+interface StopVisitOverflowMenuItemProps {
+  patientUuid: string;
+  closeMenu?: () => void;
+}
+
+let isEndVisitDialogOpen = false;
+
+const StopVisitOverflowMenuItem: React.FC<StopVisitOverflowMenuItemProps> = ({ patientUuid, closeMenu }) => {
+  const { t } = useTranslation();
+  const { activeVisit } = useVisit(patientUuid);
+
+  const handleLaunchModal = useCallback(() => {
+    if (isEndVisitDialogOpen) {
+      return;
+    }
+    isEndVisitDialogOpen = true;
+    const dispose = showModal('custom-end-visit-dialog', {
+      closeModal: () => {
+        isEndVisitDialogOpen = false;
+        dispose();
+      },
+      patientUuid,
+    });
+  }, [patientUuid]);
+
+  return (
+    activeVisit && (
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={`${t('endCustomActiveVisit', 'End Active Visit')}`}
+        onClick={handleLaunchModal}
+        closeMenu={closeMenu}
+      />
+    )
+  );
+};
+
+export default StopVisitOverflowMenuItem;

package/src/components/registration/start-visit-form/overflow-menu-extension/overflow-menu-item.extension.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback, useMemo } from 'react';
+import { OverflowMenuItem } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import styles from './overflow-menu-item.scss';
+import { type VisitFormProps } from '../visit-form-workspace/visit-form.workspace';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib/src';
+
+interface CustomStartVisitOverflowMenuItemProps {
+  patientUuid?: string;
+  patient?: fhir.Patient;
+  closeMenu?: () => void;
+}
+
+const CustomStartVisitOverflowMenuItem: React.FC<CustomStartVisitOverflowMenuItemProps> = ({
+  patient,
+  patientUuid,
+  closeMenu,
+}) => {
+  const { t } = useTranslation();
+  const isDeceased = Boolean(patient?.deceasedDateTime);
+  const { visitContext, mutateVisitContext } = usePatientChartStore(patientUuid);
+  const workspaceGroupsProps = useMemo(
+    () => ({
+      patient,
+      patientUuid,
+      visitContext,
+      mutateVisitContext,
+    }),
+    [patient, patientUuid, visitContext, mutateVisitContext],
+  );
+
+  const handleLaunchModal = useCallback(async () => {
+    launchWorkspace2<VisitFormProps, {}, {}>(
+      'custom-start-visit-workspace-form',
+      {
+        openedFrom: 'patient-chart-start-visit',
+        showPatientHeader: false,
+      },
+      {},
+      workspaceGroupsProps,
+    );
+  }, [workspaceGroupsProps]);
+
+  return (
+    !isDeceased && (
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={t('customCheckin', 'Check in')}
+        onClick={handleLaunchModal}
+        closeMenu={closeMenu}
+      />
+    )
+  );
+};
+
+export default CustomStartVisitOverflowMenuItem;

package/src/components/registration/start-visit-form/overflow-menu-extension/overflow-menu-item.scss

@@ -0,0 +1,3 @@
+.menuitem {
+  max-width: none;
+}

package/src/components/registration/start-visit-form/start-visit-workspace/base-visit-type.component.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useMemo, useCallback, useEffect, useRef, type ChangeEvent } from 'react';
+import classNames from 'classnames';
+import { Layer, RadioButton, RadioButtonGroup, Search, StructuredListSkeleton, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useFormContext, Controller } from 'react-hook-form';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import { useConfig, useDebounce, useLayoutType, usePagination, type VisitType } from '@openmrs/esm-framework';
+import { type VisitFormData } from './visit-form.resource';
+import { type ExpressWorkflowConfig } from '../../../../config-schema';
+import styles from './base-visit-type.scss';
+
+interface BaseVisitTypeProps {
+  visitTypes: Array<VisitType>;
+}
+
+const BaseVisitType: React.FC<BaseVisitTypeProps> = ({ visitTypes }) => {
+  const { t } = useTranslation();
+  const { control, setValue } = useFormContext<VisitFormData>();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const config = useConfig<ExpressWorkflowConfig>();
+
+  const filteredVisitTypes = useMemo(() => {
+    const excluded = config?.excludedVisitTypeUuids;
+    return visitTypes.filter((visitType) => !excluded.includes(visitType.uuid));
+  }, [visitTypes, config?.excludedVisitTypeUuids]);
+
+  const searchResults = useMemo(() => {
+    if (!debouncedSearchTerm.trim()) {
+      return filteredVisitTypes;
+    }
+    const lowercasedTerm = debouncedSearchTerm.toLowerCase();
+    return filteredVisitTypes.filter((visitType) => visitType.display.toLowerCase().includes(lowercasedTerm));
+  }, [debouncedSearchTerm, filteredVisitTypes]);
+
+  const { results, currentPage, goTo } = usePagination(searchResults, 5);
+  const hasNoMatchingSearchResults = debouncedSearchTerm.trim() !== '' && searchResults.length === 0;
+  const prevSearchTermRef = useRef(debouncedSearchTerm);
+
+  const handleSearchTermChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  }, []);
+
+  useEffect(() => {
+    if (searchResults?.length === 1) {
+      setValue('visitType', searchResults[0].uuid);
+    }
+  }, [searchResults, setValue]);
+
+  useEffect(() => {
+    if (prevSearchTermRef.current !== debouncedSearchTerm && currentPage !== 1) {
+      goTo(1);
+    }
+    prevSearchTermRef.current = debouncedSearchTerm;
+  }, [debouncedSearchTerm, currentPage, goTo]);
+
+  const searchComponent = (
+    <Search
+      labelText={t('searchForAVisitType', 'Search for a visit type')}
+      onChange={handleSearchTermChange}
+      placeholder={t('searchForAVisitType', 'Search for a visit type')}
+      value={searchTerm}
+    />
+  );
+
+  return (
+    <div className={classNames(styles.visitTypeOverviewWrapper, isTablet ? styles.tablet : styles.desktop)}>
+      {filteredVisitTypes.length ? (
+        <>
+          {isTablet ? <Layer>{searchComponent}</Layer> : searchComponent}
+
+          {hasNoMatchingSearchResults ? (
+            <div className={styles.tileContainer}>
+              <Tile className={styles.tile}>
+                <div className={styles.tileContent}>
+                  <p className={styles.content}>{t('noVisitTypesToDisplay', 'No visit types to display')}</p>
+                  <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                </div>
+              </Tile>
+            </div>
+          ) : (
+            <Controller
+              name="visitType"
+              control={control}
+              render={({ field: { onChange, value } }) => (
+                <RadioButtonGroup
+                  className={styles.radioButtonGroup}
+                  name="visit-types"
+                  onChange={onChange}
+                  orientation="vertical"
+                  valueSelected={value}>
+                  {results.map(({ display, uuid }) => (
+                    <RadioButton
+                      className={styles.radioButton}
+                      id={`visit-type-${uuid}`}
+                      key={uuid}
+                      labelText={display}
+                      value={uuid}
+                    />
+                  ))}
+                </RadioButtonGroup>
+              )}
+            />
+          )}
+
+          {!hasNoMatchingSearchResults && (
+            <div className={styles.paginationContainer}>
+              <PatientChartPagination
+                currentItems={results.length}
+                onPageNumberChange={({ page }: { page: number }) => goTo(page)}
+                pageNumber={currentPage}
+                pageSize={5}
+                totalItems={searchResults.length}
+              />
+            </div>
+          )}
+        </>
+      ) : (
+        <StructuredListSkeleton className={styles.skeleton} />
+      )}
+    </div>
+  );
+};
+
+export default BaseVisitType;

package/src/components/registration/start-visit-form/start-visit-workspace/base-visit-type.scss

@@ -0,0 +1,75 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tablet {
+  background-color: $ui-02;
+}
+
+.desktop {
+  background-color: $ui-01;
+
+  .paginationContainer div {
+    background-color: $ui-01;
+  }
+}
+
+.visitTypeOverviewWrapper {
+  margin: layout.$spacing-03 0;
+  border: 0.0625rem solid $grey-2;
+
+  &:has(.skeleton) {
+    border-bottom: none !important;
+  }
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) > div:nth-child(2) {
+  position: relative;
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) span * {
+  display: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: layout.$spacing-02 layout.$spacing-05;
+  margin: layout.$spacing-03 0;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}