@openmrs/esm-implementer-tools-app 3.2.1-pre.1098 → 3.2.1-pre.1104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-implementer-tools-app",
-  "version": "3.2.1-pre.1098",
+  "version": "3.2.1-pre.1104",
   "license": "MPL-2.0",
   "description": "The admin interface for OpenMRS Frontend",
   "browser": "dist/openmrs-esm-implementer-tools-app.js",
@@ -12,6 +12,7 @@
     "debug": "npm run serve",
     "test": "jest --config jest.config.js --passWithNoTests",
     "build": "webpack --mode=production",
+    "build:development": "webpack --mode=development",
     "analyze": "webpack --mode=production --env analyze=true",
     "typescript": "tsc",
     "lint": "eslint src --ext ts,tsx",
@@ -51,8 +52,8 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-framework": "^3.2.1-pre.1098",
-    "@openmrs/webpack-config": "^3.2.1-pre.1098",
+    "@openmrs/esm-framework": "^3.2.1-pre.1104",
+    "@openmrs/webpack-config": "^3.2.1-pre.1104",
     "@types/carbon-components-react": "^7.24.0",
     "ace-builds": "^1.4.14",
     "jest": "^26.6.3",
@@ -61,5 +62,5 @@
     "react-dom": "^16.13.1",
     "rxjs": "^6.5.3"
   },
-  "gitHead": "d9e828d489c789866fe3381086dbc7afeb9fb9e4"
+  "gitHead": "6c6f028f0195870cd70f0b3550ae5f57c59eb15a"
 }

package/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>
+  );
+}

package/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;
+}

package/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}