diff --git a/src/constants.js b/src/constants.js index e1090f5..2e00542 100644 --- a/src/constants.js +++ b/src/constants.js @@ -87,3 +87,4 @@ export const UPLOAD_STATUS = { WAITING_FOR_VERIFICATION: 'WAITING_FOR_VERIFICATION', FAIL: 'FAIL', }; +export const INDIVIDUALS_QUANTITY_LIMIT = 15; diff --git a/src/index.js b/src/index.js index 9f1a15f..44c4aee 100644 --- a/src/index.js +++ b/src/index.js @@ -52,6 +52,7 @@ import { GroupIndividualHistoryTabPanel, } from './components/GroupIndividualHistoryTab'; import AdvancedCriteriaRowValue from './components/dialogs/AdvancedCriteriaRowValue'; +import IndividualPicker from './pickers/IndividualPicker'; const ROUTE_INDIVIDUALS = 'individuals'; const ROUTE_INDIVIDUAL = 'individuals/individual'; @@ -102,6 +103,7 @@ const DEFAULT_CONFIG = { { key: 'individual.IndividualsUploadDialog', ref: IndividualsUploadDialog }, { key: 'individual.GroupIndividualHistorySearcher', ref: GroupIndividualHistorySearcher }, { key: 'individual.AdvancedCriteriaRowValue', ref: AdvancedCriteriaRowValue }, + { key: 'individual.IndividualPicker', ref: IndividualPicker }, ], 'individual.IndividualsUploadDialog': IndividualsUploadDialog, 'individual.TabPanel.label': [ diff --git a/src/pickers/IndividualPicker.js b/src/pickers/IndividualPicker.js new file mode 100644 index 0000000..0e961e6 --- /dev/null +++ b/src/pickers/IndividualPicker.js @@ -0,0 +1,152 @@ +import React, { useState } from 'react'; +import { TextField, Tooltip } from '@material-ui/core'; + +import { + Autocomplete, useModulesManager, + useTranslations, useGraphqlQuery, + decodeId +} from '@openimis/fe-core'; +import { INDIVIDUALS_QUANTITY_LIMIT } from '../constants'; + +function IndividualPicker(props) { + const { + multiple, + required, + label, + nullLabel, + withLabel = false, + placeholder, + withPlaceholder = false, + readOnly, + value, + onChange, + filter, + filterSelectedOptions, + benefitPlan = null, + } = props; + + const modulesManager = useModulesManager(); + const [filters, setFilters] = useState({ isDeleted: false }); + const [currentString, setCurrentString] = useState(''); + const { formatMessage, formatMessageWithValues } = useTranslations('individual', modulesManager); + + if (benefitPlan) { + const decodedBenefitPlanId = decodeId(benefitPlan.id); + const { isLoading, data, error } = useGraphqlQuery( + ` + query IndividualPicker( + $decodedBenefitPlanId: String, $search: String, $first: Int, $isDeleted: Boolean + ) { + individual( + lastName_Icontains: $search, + first: $first, + isDeleted: $isDeleted, + ${decodedBenefitPlanId ? 'benefitPlanId: $decodedBenefitPlanId' : ''}, + ) { + edges { + node { + id,isDeleted,dateCreated,dateUpdated,firstName,lastName,dob,jsonExt,version,userUpdated {username} + } + } + }} + `, + { decodedBenefitPlanId }, + filters, + { skip: true }, + ); + const individuals = data?.individual?.edges.map((edge) => edge.node) ?? []; + const shouldShowTooltip = individuals?.length >= INDIVIDUALS_QUANTITY_LIMIT && !value && !currentString; + + return ( + `${option.firstName} ${option.lastName} ${option.dob}`} + onChange={(value) => onChange(value, value ? `${value.firstName} ${value.lastName} ${value.dob}` : null)} + setCurrentString={setCurrentString} + filterOptions={filter} + filterSelectedOptions={filterSelectedOptions} + onInputChange={(search) => setFilters({ search, isDeleted: false })} + renderInput={(inputProps) => ( + + + + )} + /> + ); + } + const { isLoading, data, error } = useGraphqlQuery( + ` + query IndividualPicker( + $search: String, $first: Int, $isDeleted: Boolean + ) { + individual( + lastName_Icontains: $search, + first: $first, + isDeleted: $isDeleted + ) { + edges { + node { + id,isDeleted,dateCreated,dateUpdated,firstName,lastName,dob,jsonExt,version,userUpdated {username} + } + } + }} + `, + filters, + { skip: true }, + ); + const individuals = data?.individual?.edges.map((edge) => edge.node) ?? []; + const shouldShowTooltip = individuals?.length >= INDIVIDUALS_QUANTITY_LIMIT && !value && !currentString; + + return ( + `${option.firstName} ${option.lastName} ${option.dob}`} + onChange={(value) => onChange(value, value ? `${value.firstName} ${value.lastName} ${value.dob}` : null)} + setCurrentString={setCurrentString} + filterOptions={filter} + filterSelectedOptions={filterSelectedOptions} + onInputChange={(search) => setFilters({ search, isDeleted: false })} + renderInput={(inputProps) => ( + + + + )} + /> + ); +} + +export default IndividualPicker;