Ecbis fixes (#1463)

* Update paginated async to preload options

Should happen when values or default value is not among loaded data

* Add custom request util to fhir service

* Refactor orgs and practitioner selection in careteams add/edit

* Fix lint errors

* Update lint error

* Update snapshot

packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx

@@ -1,20 +1,22 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
-import { Button, Col, Row, Form, Input, Radio, Select } from 'antd';
-import { BodyLayout } from '@opensrp/react-utils';
+import { Button, Col, Row, Form, Input, Radio } from 'antd';
+import { BodyLayout, PaginatedAsyncSelect, SelectOption } from '@opensrp/react-utils';
 import { sendErrorNotification } from '@opensrp/notifications';
 import {
   FormFields,
-  getOrgSelectOptions,
-  getPractitionerSelectOptions,
-  selectFilterFunction,
+  preloadExistingOptionsFactory,
+  processOrganizationOption,
+  processPractitionerOption,
   submitForm,
 } from './utils';
 import {
   id,
   managingOrganizations,
   name,
+  organizationResourceType,
   practitionerParticipants,
+  practitionerResourceType,
   status,
   URL_CARE_TEAM,
   uuid,
@@ -27,8 +29,6 @@ import { IPractitioner } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IPracti
 export interface CareTeamFormProps {
   initialValues: FormFields;
   fhirBaseURL: string;
-  practitioners: IPractitioner[];
-  organizations: IOrganization[];
   disabled?: string[];
 }
 
@@ -38,14 +38,15 @@ export interface CareTeamFormProps {
  * @param {object} props - component props
  */
 const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) => {
-  const { fhirBaseURL, initialValues, practitioners, organizations, disabled } = props;
+  const { fhirBaseURL, initialValues, disabled } = props;
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const history = useHistory();
   const { t } = useTranslation();
   const [form] = Form.useForm();
-
-  const orgOptions = getOrgSelectOptions(organizations);
-  const practOptions = getPractitionerSelectOptions(practitioners);
+  const [selectedOrgs, setSelectedOrgs] = useState<SelectOption<IOrganization>[]>([]);
+  const [selectedPractitioners, setSelectedPractitioners] = useState<SelectOption<IPractitioner>[]>(
+    []
+  );
 
   const statusOptions = [
     { label: t('Active'), value: 'active' },
@@ -62,6 +63,29 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
     },
   };
 
+  const organizationPreloadExistingOptions = preloadExistingOptionsFactory(
+    fhirBaseURL,
+    processOrganizationOption
+  );
+  const practitionerPreloadExistingOptions = preloadExistingOptionsFactory(
+    fhirBaseURL,
+    processPractitionerOption
+  );
+
+  const organizationChangeHandler = (
+    orgs: SelectOption<IOrganization> | SelectOption<IOrganization>[]
+  ) => {
+    const sanitized = Array.isArray(orgs) ? orgs : [orgs];
+    setSelectedOrgs(sanitized);
+  };
+
+  const practitionerChangeHandler = (
+    practitioners: SelectOption<IPractitioner> | SelectOption<IPractitioner>[]
+  ) => {
+    const sanitized = Array.isArray(practitioners) ? practitioners : [practitioners];
+    setSelectedPractitioners(sanitized);
+  };
+
   return (
     <BodyLayout headerProps={headerProps}>
       <Row className="user-group">
@@ -73,7 +97,10 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
             initialValues={initialValues}
             onFinish={(values: FormFields) => {
               setIsSubmitting(true);
-              submitForm(values, initialValues, fhirBaseURL, organizations, practitioners, t)
+              submitForm(values, initialValues, fhirBaseURL, selectedOrgs, selectedPractitioners, t)
+                .then(() => {
+                  history.push(URL_CARE_TEAM);
+                })
                 .catch(() => {
                   if (initialValues.id) {
                     sendErrorNotification(t('There was a problem updating the Care Team'));
@@ -117,14 +144,17 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
               id="practitionerParticipants"
               label={t('Practitioner Participant')}
             >
-              <Select
-                placeholder={t('Select practitioners to assign to this Care Team')}
-                allowClear
-                mode="multiple"
+              <PaginatedAsyncSelect<IPractitioner>
+                baseUrl={fhirBaseURL}
+                resourceType={practitionerResourceType}
+                transformOption={processPractitionerOption}
                 showSearch
-                options={practOptions}
-                filterOption={selectFilterFunction}
+                placeholder={t('Select practitioners to assign to this Care Team')}
                 disabled={disabled?.includes(practitionerParticipants)}
+                mode="multiple"
+                allowClear
+                getFullOptionOnChange={practitionerChangeHandler}
+                discoverUnknownOptions={practitionerPreloadExistingOptions}
               />
             </Form.Item>
 
@@ -134,14 +164,17 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
               label={t('Managing organizations')}
               tooltip={t('Select one or more managing organizations')}
             >
-              <Select
-                options={orgOptions}
+              <PaginatedAsyncSelect<IOrganization>
+                baseUrl={fhirBaseURL}
+                resourceType={organizationResourceType}
+                transformOption={processOrganizationOption}
                 mode="multiple"
                 allowClear
                 showSearch
                 placeholder={t('Select a managing Organization')}
-                filterOption={selectFilterFunction}
                 disabled={disabled?.includes(managingOrganizations)}
+                getFullOptionOnChange={organizationChangeHandler}
+                discoverUnknownOptions={organizationPreloadExistingOptions}
               />
             </Form.Item>
 

packages/fhir-care-team/src/components/CreateEditCareTeam/index.tsx

@@ -4,27 +4,17 @@ import { useQuery } from 'react-query';
 import { Spin } from 'antd';
 import { sendErrorNotification } from '@opensrp/notifications';
 import { RouteComponentProps, useParams } from 'react-router-dom';
-import {
-  BrokenPage,
-  FHIRServiceClass,
-  getResourcesFromBundle,
-  loadAllResources,
-} from '@opensrp/react-utils';
+import { BrokenPage, FHIRServiceClass } from '@opensrp/react-utils';
 import {
   FHIR_CARE_TEAM,
-  FHIR_PRACTITIONERS,
   managingOrganizations,
-  organizationResourceType,
   practitionerParticipants,
-  practitionerResourceType,
   ROUTE_PARAM_CARE_TEAM_ID,
 } from '../../constants';
 import { CareTeamForm } from './Form';
 import { getCareTeamFormFields } from './utils';
 import { useTranslation } from '../../mls';
-import { IPractitioner } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IPractitioner';
 import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam';
-import { IOrganization } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IOrganization';
 import { useUserRole } from '@opensrp/rbac';
 
 // Interface for route params
@@ -63,34 +53,10 @@ const CreateEditCareTeam: React.FC<CreateEditCareTeamProps> = (props: CreateEdit
       staleTime: 0,
     }
   );
-
   const hasReadOrgs = userRole.hasPermissions(['Organization.read']);
-  const organizations = useQuery(
-    organizationResourceType,
-    async () => loadAllResources(fhirBaseURL, organizationResourceType),
-    {
-      onError: () => sendErrorNotification(t('There was a problem fetching organizations')),
-      select: (res) => getResourcesFromBundle<IOrganization>(res),
-      enabled: hasReadOrgs,
-    }
-  );
-
   const hasReadPractitioner = userRole.hasPermissions(['Practitioner.read']);
-  const fhirPractitioners = useQuery(
-    FHIR_PRACTITIONERS,
-    async () => loadAllResources(fhirBaseURL, practitionerResourceType, { active: true }),
-    {
-      onError: () => sendErrorNotification(t('There was a problem fetching practitioners')),
-      select: (res) => getResourcesFromBundle<IPractitioner>(res),
-      enabled: hasReadPractitioner,
-    }
-  );
 
-  if (
-    fhirPractitioners.isLoading ||
-    organizations.isLoading ||
-    (!singleCareTeam.isIdle && singleCareTeam.isLoading)
-  ) {
+  if (!singleCareTeam.isIdle && singleCareTeam.isLoading) {
     return <Spin size="large" className="custom-spinner" />;
   }
 
@@ -110,8 +76,6 @@ const CreateEditCareTeam: React.FC<CreateEditCareTeamProps> = (props: CreateEdit
   const careTeamFormProps = {
     fhirBaseURL,
     initialValues: buildInitialValues,
-    organizations: organizations.data ?? [],
-    practitioners: fhirPractitioners.data ?? [],
     disabled: disabledFields,
   };
 

packages/fhir-care-team/src/components/CreateEditCareTeam/tests/fixtures.ts

@@ -137,15 +137,23 @@ export const careTeam4201Edited = {
     },
   ],
   name: 'Peter Charlmers Care teamWho is Peter Charlmers',
-  subject: { reference: 'Patient/4195' },
+  subject: { reference: 'Patient/4195', display: 'Peter James Chalmers' },
   encounter: { reference: 'Encounter/4197' },
   period: { end: '2013-01-01' },
+  managingOrganization: [],
+  identifier: [{ use: 'official', value: '0b3a3311-6f5a-40dd-95e5-008001acebe1' }],
   participant: [
-    { member: { reference: 'Patient/4195', display: '' } },
-    { member: { reference: '#pr1', display: '' } },
+    {
+      role: [{ text: 'responsiblePerson' }],
+      member: { reference: 'Patient/4195', display: 'Peter James Chalmers' },
+    },
+    {
+      role: [{ text: 'responsiblePerson' }],
+      member: { reference: '#pr1', display: 'Dorothy Dietition' },
+      onBehalfOf: { reference: 'Organization/f001' },
+      period: { end: '2013-01-01' },
+    },
   ],
-  managingOrganization: [{ reference: 'Organization/4190' }],
-  identifier: [{ use: 'official', value: '0b3a3311-6f5a-40dd-95e5-008001acebe1' }],
 };
 
 export const careTeam4201alternative = {