O3-1157: Added field to search and select patient identifiers from implementer tools

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/patient-identifier-type-search.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useMemo } from "react";
+import uniqueId from "lodash-es/uniqueId";
+import {
+  usePatientIdentifierTypes,
+  PatientIdentifierType,
+} from "./patient-identifier-type.resource";
+import styles from "./uuid-search.scss";
+import { useTranslation } from "react-i18next";
+import {
+  Search,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from "carbon-components-react";
+
+interface PatientIdentifierTypeSearchBoxProps {
+  value: string;
+  setPatientIdentifierTypeUuid: (patientIdentifierTypeUuid) => void;
+}
+
+export function PatientIdentifierTypeSearchBox({
+  setPatientIdentifierTypeUuid,
+  value,
+}: PatientIdentifierTypeSearchBoxProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const { data: patientIdentifierTypes, isLoading } =
+    usePatientIdentifierTypes();
+  const [activePatientIdentifierTypeUuid, setActivePatientIdentifierTypeUuid] =
+    useState<any>(value);
+  const { t } = useTranslation();
+
+  const id = useMemo(() => uniqueId(), []);
+
+  const handleUuidChange = (patientIdentifierType: PatientIdentifierType) => {
+    setActivePatientIdentifierTypeUuid(patientIdentifierType.uuid);
+    setPatientIdentifierTypeUuid(patientIdentifierType.uuid);
+    setSearchTerm("");
+  };
+
+  const handleSearchTermChange = (evt) => setSearchTerm(evt.target.value);
+
+  const filteredResults: Array<PatientIdentifierType> | undefined =
+    useMemo(() => {
+      if (!isLoading && searchTerm && searchTerm !== "") {
+        return patientIdentifierTypes?.filter((type) =>
+          type.display.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+      } else {
+        return undefined;
+      }
+    }, [isLoading, searchTerm, patientIdentifierTypes]);
+
+  return (
+    <div>
+      {activePatientIdentifierTypeUuid && (
+        <p className={styles.activeUuid}>{activePatientIdentifierTypeUuid}</p>
+      )}
+      <div className={styles.autocomplete}>
+        <Search
+          id={`search-input-${id}`}
+          labelText=""
+          type="text"
+          size="sm"
+          placeholder={
+            !isLoading
+              ? t(
+                  "searchPersonAttributeHelperText",
+                  "Person attribute type name"
+                )
+              : t("loading", "Loading")
+          }
+          onChange={handleSearchTermChange}
+          value={searchTerm}
+          disabled={isLoading}
+        />
+        {searchTerm ? (
+          filteredResults?.length ? (
+            <StructuredListWrapper
+              selection
+              className={styles.listbox}
+              id={`searchbox-${id}`}
+            >
+              {filteredResults?.map((patientIdentifierType) => (
+                <StructuredListRow
+                  key={patientIdentifierType.uuid}
+                  role="option"
+                  onClick={() => {
+                    handleUuidChange(patientIdentifierType);
+                  }}
+                  aria-selected="true"
+                >
+                  <StructuredListCell className={styles.smallListCell}>
+                    {patientIdentifierType.display}
+                  </StructuredListCell>
+                </StructuredListRow>
+              ))}
+            </StructuredListWrapper>
+          ) : (
+            <p className={styles.bodyShort01}>
+              {t("noPersonAttributeFoundText", "No matching results found")}
+            </p>
+          )
+        ) : null}
+      </div>
+    </div>
+  );
+}

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/patient-identifier-type.resource.tsx

@@ -0,0 +1,31 @@
+import useSWR from "swr";
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+import { useMemo } from "react";
+
+export interface PatientIdentifierType {
+  uuid: string;
+  display: string;
+}
+
+interface PatientIdentifierTypeResponse {
+  results: Array<PatientIdentifierType>;
+}
+
+export function usePatientIdentifierTypes(): {
+  data: Array<PatientIdentifierType> | undefined;
+  isLoading: boolean;
+} {
+  const { data, error } = useSWR<
+    FetchResponse<PatientIdentifierTypeResponse>,
+    Error
+  >(`/ws/rest/v1/patientidentifiertype`, openmrsFetch);
+  const memoisedPatientIdentifierTypeData = useMemo(
+    () => ({
+      data: data?.data?.results,
+      isLoading: !data && !error,
+    }),
+    [data, error]
+  );
+
+  return memoisedPatientIdentifierTypeData;
+}

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/value-editors/value-editor-field.tsx

@@ -11,6 +11,7 @@ import { ExtensionSlotRemove } from "./extension-slot-remove";
 import { ObjectEditor } from "./object-editor";
 import { ExtensionSlotOrder } from "./extension-slot-order";
 import { PersonAttributeTypeSearchBox } from "./person-attribute-search";
+import { PatientIdentifierTypeSearchBox } from "./patient-identifier-type-search";
 
 export interface ValueEditorFieldProps {
   element: ConfigValueDescriptor;
@@ -57,6 +58,11 @@ export function ValueEditorField({
         onChange(personAttributeTypeUuid)
       }
     />
+  ) : valueType === Type.PatientIdentifierTypeUuid ? (
+    <PatientIdentifierTypeSearchBox
+      value={value}
+      setPatientIdentifierTypeUuid={(uuid) => onChange(uuid)}
+    />
   ) : valueType === Type.Number ? (
     <NumberInput
       id={id}

packages/framework/esm-config/src/module-config/module-config.ts

@@ -680,6 +680,7 @@ function checkType(keyPath: string, _type: Type | undefined, value: any) {
       String: isString,
       UUID: isUuid,
       PersonAttributeTypeUuid: isUuid,
+      PatientIdentifierTypeUuid: isUuid,
     };
     runValidators(keyPath, [validator[_type]], value);
   }

packages/framework/esm-config/src/types.ts

@@ -7,6 +7,7 @@ export enum Type {
   String = "String",
   UUID = "UUID",
   PersonAttributeTypeUuid = "PersonAttributeTypeUuid",
+  PatientIdentifierTypeUuid = "PatientIdentifierTypeUuid",
 }
 
 // Full-powered typing for Config and Schema trees depends on being able to