diff --git a/src/dataEntryApp/components/SubjectFormElement.js b/src/dataEntryApp/components/SubjectFormElement.js index 79c85befb..b8228f5b9 100644 --- a/src/dataEntryApp/components/SubjectFormElement.js +++ b/src/dataEntryApp/components/SubjectFormElement.js @@ -4,7 +4,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import SubjectSearchService from "../services/SubjectSearchService"; import { subjectService } from "../services/SubjectService"; -import { find, first, isEmpty, xor } from "lodash"; +import { debounce, find, first, isEmpty, xor } from "lodash"; import { FormHelperText } from "@material-ui/core"; import { Individual } from "avni-models"; import { Concept } from "openchs-models"; @@ -56,34 +56,37 @@ const SubjectFormElement = props => { } }; - const loadSubjects = async inputValue => { - const searchResults = await SubjectSearchService.search({ + const loadSubjects = async (inputValue, callback) => { + SubjectSearchService.search({ name: inputValue, subjectType: subjectTypeUuid - }); - - const filteredSubjects = - isMultiSelect && selectedSubjects - ? searchResults.listOfRecords.filter( - subject => selectedSubjects.map(selectedSubject => selectedSubject.value.uuid).indexOf(subject.uuid) === -1 + }) + .then(searchResults => + searchResults.listOfRecords + .filter(subject => + isMultiSelect && selectedSubjects + ? selectedSubjects.map(selectedSubject => selectedSubject.value.uuid).indexOf(subject.uuid) === -1 + : true ) - : searchResults.listOfRecords; - - return filteredSubjects.map(subject => ({ - label: constructSubjectLabel(subject, true), - value: { - id: subject.id, - uuid: subject.uuid, - firstName: subject.firstName, - middleName: subject.middleName, - lastName: subject.lastName, - fullName: subject.fullName, - profilePicture: subject.profilePicture, - addressLevel: subject.addressLevel - } - })); + .map(subject => ({ + label: constructSubjectLabel(subject, true), + value: { + id: subject.id, + uuid: subject.uuid, + firstName: subject.firstName, + middleName: subject.middleName, + lastName: subject.lastName, + fullName: subject.fullName, + profilePicture: subject.profilePicture, + addressLevel: subject.addressLevel + } + })) + ) + .then(callback); }; + const debouncedLoadSubjects = debounce(loadSubjects, 500); + const placeholder = "Type to search..."; const noResults = "No results"; return ( @@ -96,7 +99,7 @@ const SubjectFormElement = props => {