PIMS-307 Geocoder search in property filter

bcgov · Sep 23, 2022 · cd9358e · cd9358e
1 parent f9837fb
commit cd9358e
Show file tree

Hide file tree

Showing 7 changed files with 699 additions and 632 deletions.
diff --git a/frontend/src/components/common/form/InputGroup.tsx b/frontend/src/components/common/form/InputGroup.tsx
@@ -34,7 +34,8 @@ type OptionalAttributes = {
   preText?: string;
   prepend?: React.ReactNode;
   postText?: string;
-  fast?: boolean;
+  /** Whether to use the Formik fast input, a custom input, or the standard input. */
+  fast?: boolean | React.ReactNode;
   outerClassName?: string;
   displayErrorTooltips?: boolean;
   /** style to pass down to the FastInput or Input */
@@ -93,7 +94,9 @@ export const InputGroup: React.FC<InputGroupProps> = ({
         <BootstrapInputGroup.Prepend>{PrependComponent}</BootstrapInputGroup.Prepend>
       )}
       <div className="input-group-content">
-        {fast ? (
+        {React.isValidElement(fast) ? (
+          fast
+        ) : fast ? (
           <FastInput
             formikProps={formikProps}
             disabled={disabled}

diff --git a/frontend/src/features/properties/filter/PropertyFilter.test.tsx b/frontend/src/features/properties/filter/PropertyFilter.test.tsx
@@ -20,6 +20,7 @@ const onFilterChange = jest.fn<void, [IPropertyFilter]>();
 //prevent web calls from being made during tests.
 jest.mock('axios');
 jest.mock('@react-keycloak/web');
+jest.mock('hooks/useApi');
 
 const mockedAxios = axios as jest.Mocked<typeof axios>;
 const mockKeycloak = (claims: string[]) => {

diff --git a/frontend/src/features/properties/filter/PropertyFilter.tsx b/frontend/src/features/properties/filter/PropertyFilter.tsx
@@ -27,6 +27,7 @@ import { Form, Select } from '../../../components/common/form';
 import { PropertyFilterOptions } from './';
 import { IPropertyFilter } from './IPropertyFilter';
 import { PropertyFilterAgencyOptions } from './PropertyFilterAgencyOptions';
+import { PropertyFilterStyled } from './PropertyFilterStyled';
 
 /**
  * PropertyFilter component properties.
@@ -158,102 +159,106 @@ export const PropertyFilter: React.FC<IPropertyFilterProps> = ({
     >
       {({ isSubmitting, setFieldValue, values }) => (
         <Form>
-          <Form.Row className="map-filter-bar">
-            <FindMorePropertiesButton
-              buttonText="Find available surplus properties"
-              onEnter={() => {
-                setFindMoreOpen(true);
-                setFieldValue('surplusFilter', true);
-                setFieldValue('includeAllProperties', true);
-                !keycloak.hasClaim(Claims.ADMIN_PROPERTIES) && setFieldValue('agencies', undefined);
-              }}
-              onExit={() => {
-                setFindMoreOpen(false);
-                setFieldValue('surplusFilter', false);
-              }}
-            />
-            <div className="vl"></div>
+          <PropertyFilterStyled>
+            <Form.Row className="map-filter-bar">
+              <FindMorePropertiesButton
+                buttonText="Find available surplus properties"
+                onEnter={() => {
+                  setFindMoreOpen(true);
+                  setFieldValue('surplusFilter', true);
+                  setFieldValue('includeAllProperties', true);
+                  !keycloak.hasClaim(Claims.ADMIN_PROPERTIES) &&
+                    setFieldValue('agencies', undefined);
+                }}
+                onExit={() => {
+                  setFindMoreOpen(false);
+                  setFieldValue('surplusFilter', false);
+                }}
+              />
+              <div className="vl"></div>
 
-            <AgencyCol>
-              {showAllAgencySelect ? (
-                <PropertyFilterAgencyOptions disabled={findMoreOpen} agencies={agencies} />
-              ) : (
-                <ParentSelect
-                  field="agencies"
-                  options={myAgencies.map(c => mapSelectOptionWithParent(c, myAgencies))}
-                  filterBy={['code', 'label', 'parent']}
-                  placeholder="My Agencies"
+              <AgencyCol>
+                {showAllAgencySelect ? (
+                  <PropertyFilterAgencyOptions disabled={findMoreOpen} agencies={agencies} />
+                ) : (
+                  <ParentSelect
+                    field="agencies"
+                    options={myAgencies.map(c => mapSelectOptionWithParent(c, myAgencies))}
+                    filterBy={['code', 'label', 'parent']}
+                    placeholder="My Agencies"
+                    selectClosest
+                    disabled={findMoreOpen}
+                  />
+                )}
+              </AgencyCol>
+              <Col className="map-filter-typeahead">
+                <AsyncTypeahead
+                  disabled={
+                    (findMoreOpen || values.includeAllProperties === true) &&
+                    !keycloak.hasClaim(Claims.ADMIN_PROPERTIES)
+                  }
+                  isLoading={initialLoad}
+                  id={`name-field`}
+                  inputProps={{ id: `name-field` }}
+                  placeholder="Property name"
+                  onSearch={() => {
+                    setInitialLoad(true);
+                    fetchPropertyNames(keycloak.agencyId!)(dispatch).then(results => {
+                      setOptions(results);
+                      setInitialLoad(false);
+                    });
+                  }}
+                  options={options}
+                  onChange={(newValues: string[]) => {
+                    setFieldValue('name', getIn(newValues[0], 'value') ?? newValues[0]);
+                  }}
+                  ref={ref}
+                  onBlur={(e: any) =>
+                    getIn(values, 'name') !== e.target.value &&
+                    setFieldValue('name', e.target.value)
+                  }
+                />
+              </Col>
+              <Col className="map-filter-typeahead">
+                <TypeaheadField
+                  name="administrativeArea"
+                  placeholder="Location"
                   selectClosest
+                  hideValidation={true}
+                  options={adminAreas.map(x => x.label)}
+                  onChange={(vals: any) => {
+                    setFieldValue('administrativeArea', getIn(vals[0], 'name') ?? vals[0]);
+                  }}
+                  clearSelected={clear}
+                  setClear={setClear}
                   disabled={findMoreOpen}
                 />
-              )}
-            </AgencyCol>
-            <Col className="map-filter-typeahead">
-              <AsyncTypeahead
-                disabled={
-                  (findMoreOpen || values.includeAllProperties === true) &&
-                  !keycloak.hasClaim(Claims.ADMIN_PROPERTIES)
-                }
-                isLoading={initialLoad}
-                id={`name-field`}
-                inputProps={{ id: `name-field` }}
-                placeholder="Property name"
-                onSearch={() => {
-                  setInitialLoad(true);
-                  fetchPropertyNames(keycloak.agencyId!)(dispatch).then(results => {
-                    setOptions(results);
-                    setInitialLoad(false);
-                  });
-                }}
-                options={options}
-                onChange={(newValues: string[]) => {
-                  setFieldValue('name', getIn(newValues[0], 'value') ?? newValues[0]);
-                }}
-                ref={ref}
-                onBlur={(e: any) =>
-                  getIn(values, 'name') !== e.target.value && setFieldValue('name', e.target.value)
-                }
-              />
-            </Col>
-            <Col className="map-filter-typeahead">
-              <TypeaheadField
-                name="administrativeArea"
-                placeholder="Location"
-                selectClosest
-                hideValidation={true}
-                options={adminAreas.map(x => x.label)}
-                onChange={(vals: any) => {
-                  setFieldValue('administrativeArea', getIn(vals[0], 'name') ?? vals[0]);
-                }}
-                clearSelected={clear}
-                setClear={setClear}
-                disabled={findMoreOpen}
-              />
-            </Col>
-            <Col className="bar-item">
-              <PropertyFilterOptions disabled={findMoreOpen} />
-            </Col>
-            <Col className="bar-item">
-              <Select
-                field="classificationId"
-                placeholder="Classification"
-                options={classifications}
-                disabled={findMoreOpen}
-              />
-            </Col>
-            <Col className="bar-item flex-grow-0">
-              <SearchButton
-                disabled={isSubmitting || findMoreOpen}
-                onClick={() => setTriggerFilterChanged && setTriggerFilterChanged(true)}
-              />
-            </Col>
-            <Col className="bar-item flex-grow-0">
-              <ResetButton
-                disabled={isSubmitting || findMoreOpen}
-                onClick={() => resetFilter(setFieldValue)}
-              />
-            </Col>
-          </Form.Row>
+              </Col>
+              <Col className="bar-item">
+                <PropertyFilterOptions disabled={findMoreOpen} />
+              </Col>
+              <Col className="bar-item">
+                <Select
+                  field="classificationId"
+                  placeholder="Classification"
+                  options={classifications}
+                  disabled={findMoreOpen}
+                />
+              </Col>
+              <Col className="bar-item flex-grow-0">
+                <SearchButton
+                  disabled={isSubmitting || findMoreOpen}
+                  onClick={() => setTriggerFilterChanged && setTriggerFilterChanged(true)}
+                />
+              </Col>
+              <Col className="bar-item flex-grow-0">
+                <ResetButton
+                  disabled={isSubmitting || findMoreOpen}
+                  onClick={() => resetFilter(setFieldValue)}
+                />
+              </Col>
+            </Form.Row>
+          </PropertyFilterStyled>
         </Form>
       )}
     </Formik>

diff --git a/frontend/src/features/properties/filter/PropertyFilterOptions.tsx b/frontend/src/features/properties/filter/PropertyFilterOptions.tsx
@@ -1,3 +1,4 @@
+import { GeocoderAutoComplete } from 'features/properties/components/GeocoderAutoComplete';
 import { useFormikContext } from 'formik';
 import React from 'react';
 
@@ -25,7 +26,7 @@ export const PropertyFilterOptions: React.FC<IPropertyFilterOptions> = ({ disabl
 
   // access the form context values, no need to pass props
   const {
-    values: { searchBy },
+    values: { searchBy, address },
     setFieldValue,
   } = useFormikContext<IPropertyFilter>();
   const desc = state.placeholders[searchBy] || '';
@@ -36,7 +37,23 @@ export const PropertyFilterOptions: React.FC<IPropertyFilterOptions> = ({ disabl
 
   return (
     <InputGroup
-      fast={false}
+      fast={
+        searchBy === 'address' ? (
+          <GeocoderAutoComplete
+            field="address"
+            value={address}
+            displayErrorTooltips
+            onSelectionChanged={selection => {
+              setFieldValue('address', selection.fullAddress);
+            }}
+            onTextChange={value => {
+              setFieldValue('address', value);
+            }}
+          />
+        ) : (
+          false
+        )
+      }
       formikProps={null as any}
       prepend={
         <Select field="searchBy" options={state.options} onChange={reset} disabled={disabled} />

diff --git a/frontend/src/features/properties/filter/PropertyFilterStyled.tsx b/frontend/src/features/properties/filter/PropertyFilterStyled.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const PropertyFilterStyled = styled.div`
+  .GeocoderAutoComplete {
+    width: unset;
+  }
+
+  .suggestionList {
+    top: unset;
+  }
+`;