O3-1592: Support adding visit attributes when saving a visit

packages/esm-patient-chart-app/src/config-schema.ts

@@ -42,6 +42,21 @@ export const esmPatientChartSchema = {
     _description: 'Custom label to use on the start visit actions',
     _default: '',
   },
+  visitAttributeTypes: {
+    _type: Type.Array,
+    _description: 'List of visit attribute types to be shown when filling visit form',
+    _default: [],
+    _elements: {
+      uuid: {
+        _type: Type.UUID,
+        _description: 'UUID of the visit attribute type',
+      },
+      required: {
+        _type: Type.Boolean,
+        _description: 'Either the attribute type field is required or not',
+      },
+    },
+  },
   showServiceQueueFields: {
     _type: Type.Boolean,
     _description: 'Whether start visit form should display service queue fields`',
@@ -78,6 +93,10 @@ export interface ChartConfig {
   offlineVisitTypeUuid: string;
   visitTypeResourceUrl: string;
   showRecommendedVisitTypeTab: boolean;
+  visitAttributeTypes: Array<{
+    uuid: string;
+    required: boolean;
+  }>;
   showServiceQueueFields: boolean;
   priorityConceptSetUuid: string;
   defaultPriorityConceptUuid: string;

packages/esm-patient-chart-app/src/root.scss

@@ -58,3 +58,7 @@
 .text02 {
   color: $text-02;
 }
+
+.label01 {
+  @include type.type-style("label-01")
+}

packages/esm-patient-chart-app/src/visit/hooks/useVisitAttributeType.tsx

@@ -0,0 +1,90 @@
+import { FetchResponse, openmrsFetch, showNotification } from '@openmrs/esm-framework';
+import { useEffect, useMemo } from 'react';
+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 useVisitAttributeType(uuid) {
+  const { data, error } = useSWRImmutable<FetchResponse<VisitAttributeType>, Error>(
+    `/ws/rest/v1/visitattributetype/${uuid}?v=${visitAttributeTypeCustomRepresentation}`,
+    openmrsFetch,
+  );
+
+  useEffect(() => {
+    if (error) {
+      showNotification({
+        title: error?.name,
+        description: error?.message,
+        kind: 'error',
+      });
+    }
+  }, [error]);
+
+  const results = useMemo(() => {
+    return {
+      isLoading: !data && !error,
+      error: error,
+      data: data?.data,
+    };
+  }, [data, error]);
+
+  return results;
+}
+
+export function useConceptAnswersForVisitAttributeType(conceptUuid) {
+  const { data, error } = useSWRImmutable<FetchResponse<Concept>, Error>(
+    conceptUuid ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+
+  useEffect(() => {
+    if (error) {
+      showNotification({
+        title: error?.name,
+        description: error?.message,
+        kind: 'error',
+      });
+    }
+  }, [error]);
+
+  const results = useMemo(() => {
+    return {
+      isLoading: !data && !error,
+      error: error,
+      data: data?.data,
+      answers: data?.data?.answers,
+    };
+  }, [data, error]);
+
+  return results;
+}

packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx

@@ -0,0 +1,199 @@
+import { useConfig } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo } from 'react';
+import { ChartConfig } from '../../config-schema';
+import { useConceptAnswersForVisitAttributeType, useVisitAttributeType } from '../hooks/useVisitAttributeType';
+import {
+  TextInput,
+  TextInputSkeleton,
+  TextArea,
+  NumberInput,
+  SelectSkeleton,
+  Select,
+  SelectItem,
+  Checkbox,
+  DatePicker,
+  DatePickerInput,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './visit-attribute-type.scss';
+import dayjs from 'dayjs';
+
+interface VisitAttributes {
+  [uuid: string]: string;
+}
+
+interface VisitAttributeTypeFieldsProps {
+  setVisitAttributes: React.Dispatch<React.SetStateAction<VisitAttributes>>;
+  isMissingRequiredAttributes: boolean;
+  visitAttributes: VisitAttributes;
+}
+
+const VisitAttributeTypeFields: React.FC<VisitAttributeTypeFieldsProps> = ({
+  setVisitAttributes,
+  isMissingRequiredAttributes,
+  visitAttributes,
+}) => {
+  const { visitAttributeTypes } = useConfig() as ChartConfig;
+
+  const setAttributeValue = useCallback(
+    (uuid: string, value: string) => {
+      setVisitAttributes((prevState) => ({
+        ...prevState,
+        [uuid]: value,
+      }));
+    },
+    [setVisitAttributes],
+  );
+
+  if (visitAttributeTypes?.length) {
+    return (
+      <>
+        {visitAttributeTypes.map((attributeType, indx) => (
+          <AttributeTypeField
+            key={indx}
+            attributeType={attributeType}
+            setVisitAttribute={(val: string) => setAttributeValue(attributeType.uuid, val)}
+            isMissingRequiredAttributes={isMissingRequiredAttributes}
+            visitAttributes={visitAttributes}
+          />
+        ))}
+      </>
+    );
+  }
+
+  return null;
+};
+
+interface AttributeTypeFieldProps {
+  attributeType: {
+    uuid: string;
+    required: boolean;
+  };
+  setVisitAttribute: (val: string) => void;
+  isMissingRequiredAttributes: boolean;
+  visitAttributes: VisitAttributes;
+}
+
+const AttributeTypeField: React.FC<AttributeTypeFieldProps> = ({
+  attributeType,
+  setVisitAttribute,
+  isMissingRequiredAttributes,
+  visitAttributes,
+}) => {
+  const { uuid, required } = attributeType;
+  const { data, isLoading } = useVisitAttributeType(uuid);
+  const { answers, isLoading: isLoadingAnswers } = useConceptAnswersForVisitAttributeType(data?.datatypeConfig);
+  const { t } = useTranslation();
+  const labelText = !required ? `${data?.name} (${t('optional', 'optional')})` : data?.name;
+
+  const field = useMemo(() => {
+    if (isLoading) {
+      return <></>;
+    }
+    switch (data.datatypeClassname) {
+      case 'org.openmrs.customdatatype.datatype.ConceptDatatype':
+        return !isLoadingAnswers ? (
+          <Select
+            labelText={labelText}
+            onChange={(e) => setVisitAttribute(e.target.value)}
+            required={required}
+            invalid={required && isMissingRequiredAttributes && !visitAttributes[uuid]}
+            invalidText={t('fieldRequired', 'This field is required')}
+          >
+            <SelectItem text={t('selectAnOption', 'Select an option')} value={null} />
+            {answers.map((ans, indx) => (
+              <SelectItem key={indx} text={ans.display} value={ans.uuid} />
+            ))}
+          </Select>
+        ) : (
+          <SelectSkeleton />
+        );
+      case 'org.openmrs.customdatatype.datatype.FloatDatatype':
+        return (
+          <NumberInput
+            label={labelText}
+            required={required}
+            hideSteppers
+            onChange={(e) => setVisitAttribute(e.target.value?.toString())}
+            invalid={required && isMissingRequiredAttributes && !visitAttributes[uuid]}
+            invalidText={t('fieldRequired', 'This field is required')}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.FreeTextDatatype':
+        return (
+          <TextInput
+            labelText={labelText}
+            required={required}
+            onChange={(e) => setVisitAttribute(e.target.value)}
+            invalid={required && isMissingRequiredAttributes && !visitAttributes[uuid]}
+            invalidText={t('fieldRequired', 'This field is required')}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.LongFreeTextDatatype':
+        return (
+          <TextArea
+            labelText={labelText}
+            required={required}
+            onChange={(e) => setVisitAttribute(e.target.value)}
+            invalid={required && isMissingRequiredAttributes && !visitAttributes[uuid]}
+            invalidText={t('fieldRequired', 'This field is required')}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.BooleanDatatype':
+        return (
+          <Checkbox
+            labelText={labelText}
+            required={required}
+            onChange={(e, { checked }) => setVisitAttribute(checked.toString())}
+            invalid={required && isMissingRequiredAttributes && !visitAttributes[uuid]}
+            invalidText={t('fieldRequired', 'This field is required')}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.DateDatatype':
+        return (
+          <DatePicker
+            dateFormat="d/m/Y"
+            datePickerType="single"
+            onChange={([date]) => setVisitAttribute(dayjs(date).format('YYYY-MM-DD'))}
+            required={required}
+          >
+            <DatePickerInput
+              id="date-picker-default-id"
+              placeholder="dd/mm/yyyy"
+              labelText={labelText}
+              type="text"
+              invalid={required && isMissingRequiredAttributes && !visitAttributes[uuid]}
+              invalidText={t('fieldRequired', 'This field is required')}
+            />
+          </DatePicker>
+        );
+      default:
+        return (
+          <TextInput labelText={labelText} required={required} onChange={(e) => setVisitAttribute(e.target.value)} />
+        );
+    }
+  }, [
+    answers,
+    data,
+    isLoading,
+    isLoadingAnswers,
+    isMissingRequiredAttributes,
+    labelText,
+    required,
+    setVisitAttribute,
+    t,
+    uuid,
+    visitAttributes,
+  ]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.visitAttributeField}>
+        <TextInputSkeleton />
+      </div>
+    );
+  }
+
+  return <div className={styles.visitAttributeField}>{field}</div>;
+};
+export default VisitAttributeTypeFields;

packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.scss

@@ -0,0 +1,7 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../root.scss';
+
+.visitAttributeField {
+  margin-bottom: spacing.$spacing-05;
+}