move service unit filter next to basic search in leases view

src/components/inputs/UserServiceUnitSelectInput.js

@@ -57,7 +57,7 @@ class UserServiceUnitSelectInput extends Component<Props, State> {
           <FormFieldLabel
             htmlFor={'userServiceUnitSelect'}
           >
-            Palvelukokonaisuus
+            Oma palvelukokonaisuus
           </FormFieldLabel>
           <div className={'form-field__component'}>
             <div className={'form-field__select'}>

src/components/table/TableFilters.js

@@ -10,13 +10,15 @@ type Props = {
   filterOptions: Array<Object>,
   filterValue: Array<string>,
   onFilterChange?: Function,
+  componentToRenderUnderTitle?: React$Node,
 }
 const TableFilters = ({
   alignFiltersRight,
   amountText,
   filterOptions,
   filterValue,
   onFilterChange,
+  componentToRenderUnderTitle = null
 }: Props): React$Node => {
   const handleFilterChange = (values: Array<Object>) => {
     if(onFilterChange) {
@@ -33,6 +35,7 @@ const TableFilters = ({
           {!!filterOptions.length &&
             <p className='table__filters_filter-wrapper_title'>Suodatus</p>
           }
+          {!!componentToRenderUnderTitle && componentToRenderUnderTitle}
           <CheckboxInput
             checkboxName='lease-type-checkbox'
             legend='Suodata'

src/components/topNavigation/TopNavigation.js

@@ -198,7 +198,7 @@ class TopNavigation extends Component<Props, State> {
                       <UserServiceUnitSelectInput userServiceUnits={userServiceUnits} userActiveServiceUnit={userActiveServiceUnit} />
                     ) : (
                       <div className="user-service-unit-text">
-                        <div className="service-unit-label">Palvelukokonaisuus</div>
+                        <div className="service-unit-label">Oma palvelukokonaisuus</div>
                         <div className="service-unit-name">{userActiveServiceUnit.name}</div>
                       </div>
                     )}

src/leases/components/LeaseListPage.js

@@ -9,6 +9,14 @@ import debounce from 'lodash/debounce';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 
+import {FieldTypes} from '$src/enums';
+import FieldTypeSelect from '$components/form/FieldTypeSelect';
+import SearchContainer from '$components/search/SearchContainer';
+import FormField from '$components/form/FormField';
+import SearchInputColumn from '$components/search/SearchInputColumn';
+import SearchLabel from '$components/search/SearchLabel';
+import SearchLabelColumn from '$components/search/SearchLabelColumn';
+import SearchRow from '$components/search/SearchRow';
 import AddButtonSecondary from '$components/form/AddButtonSecondary';
 import Authorization from '$components/authorization/Authorization';
 import AuthorizationError from '$components/authorization/AuthorizationError';
@@ -126,6 +134,8 @@ type State = {
   sortKey: string,
   sortOrder: string,
   visualizationType: string,
+  serviceUnitOptions: Array<Object>,
+  selectedServiceUnitOptionValue: mixed // empty string if no value, otherwise number
 }
 
 class LeaseListPage extends PureComponent<Props, State> {
@@ -142,6 +152,8 @@ class LeaseListPage extends PureComponent<Props, State> {
     sortKey: DEFAULT_SORT_KEY,
     sortOrder: DEFAULT_SORT_ORDER,
     visualizationType: VisualizationTypes.TABLE,
+    serviceUnitOptions: [],
+    selectedServiceUnitOptionValue: ''
   }
 
   static contextTypes = {
@@ -157,6 +169,7 @@ class LeaseListPage extends PureComponent<Props, State> {
       lessors,
       receiveTopNavigationSettings,
       serviceUnits,
+      leaseAttributes
     } = this.props;
 
     setPageTitle('Vuokraukset');
@@ -179,12 +192,14 @@ class LeaseListPage extends PureComponent<Props, State> {
 
     window.addEventListener('popstate', this.handlePopState);
     this._isMounted = true;
+
+    this.setState({serviceUnitOptions: getFieldOptions(leaseAttributes, 'service_unit', true)});
   }
 
   componentDidUpdate(prevProps) {
-    const {location: {search: currentSearch}, userActiveServiceUnit} = this.props;
+    const {location: {search: currentSearch}, userActiveServiceUnit, leaseAttributes} = this.props;
     const {visualizationType} = this.state;
-    const {location: {search: prevSearch}, userActiveServiceUnit: prevUserActiveServiceUnit} = prevProps;
+    const {location: {search: prevSearch}} = prevProps;
 
     const initializeSearch = () => {
       const searchQuery = getUrlParams(currentSearch);
@@ -218,16 +233,20 @@ class LeaseListPage extends PureComponent<Props, State> {
         initializeSearch();
         this._hasFetchedLeases = true;
 
-      } else if(userActiveServiceUnit !== prevUserActiveServiceUnit 
-          && !currentSearch.includes('service_unit')) {
-        // Search again after changing user active service unit only if not explicitly setting the service unit filter
-        searchByType();
       }
     }
 
     if (currentSearch !== prevSearch) {
       searchByType();
     }
+
+    // Update service unit options if they have changed
+    if (
+      this.props.leaseAttributes?.service_unit &&
+      leaseAttributes?.service_unit?.choices.length !== prevProps.leaseAttributes?.service_unit?.choices.length
+    ) {
+      this.setState({serviceUnitOptions: getFieldOptions(leaseAttributes, 'service_unit', true)});
+    }
   }
 
   componentWillUnmount() {
@@ -256,7 +275,7 @@ class LeaseListPage extends PureComponent<Props, State> {
   }
 
   setSearchFormValues = () => {
-    const {location: {search}, initialize, userActiveServiceUnit} = this.props;
+    const {location: {search}, initialize} = this.props;
     const searchQuery = getUrlParams(search);
     const page = searchQuery.page ? Number(searchQuery.page) : 1;
     const states = this.getLeaseStates(searchQuery);
@@ -272,8 +291,10 @@ class LeaseListPage extends PureComponent<Props, State> {
         ? searchQuery.tenantcontact_type
         : searchQuery.tenantcontact_type ? [searchQuery.tenantcontact_type] : [];
 
-      if(initialValues.service_unit === undefined && userActiveServiceUnit) {
-        initialValues.service_unit = userActiveServiceUnit.id;
+      if (initialValues.service_unit === undefined) {
+        initialValues.service_unit = "";
+      } else {
+        this.setState({selectedServiceUnitOptionValue: initialValues.service_unit});
       }
 
       if(onlyActiveLeases != undefined) {
@@ -319,7 +340,7 @@ class LeaseListPage extends PureComponent<Props, State> {
   }
 
   search = () => {
-    const {fetchLeases, location: {search}, userActiveServiceUnit} = this.props;
+    const {fetchLeases, location: {search}} = this.props;
     const searchQuery = getUrlParams(search);
     const page = searchQuery.page ? Number(searchQuery.page) : 1;
     const leaseStates = this.getLeaseStates(searchQuery);
@@ -340,8 +361,8 @@ class LeaseListPage extends PureComponent<Props, State> {
     searchQuery.sort_key = searchQuery.sort_key || DEFAULT_SORT_KEY;
     searchQuery.sort_order = searchQuery.sort_order || DEFAULT_SORT_ORDER;
 
-    if(searchQuery.service_unit === undefined && userActiveServiceUnit) {
-      searchQuery.service_unit = userActiveServiceUnit.id;
+    if(searchQuery.service_unit === undefined) {
+      searchQuery.service_unit = "";
     }
 
     searchQuery.limit = LIST_TABLE_PAGE_SIZE;
@@ -354,7 +375,7 @@ class LeaseListPage extends PureComponent<Props, State> {
   }
 
   searchByBBox = () => {
-    const {fetchLeasesByBBox, location: {search}, userActiveServiceUnit} = this.props;
+    const {fetchLeasesByBBox, location: {search}} = this.props;
     const searchQuery = getUrlParams(search);
     const leaseStates = this.getLeaseStates(searchQuery);
     const onlyActiveLeases = this.getOnlyActiveLeasesValue(searchQuery);
@@ -371,8 +392,8 @@ class LeaseListPage extends PureComponent<Props, State> {
       searchQuery.lease_state = leaseStates;
     }
 
-    if(searchQuery.service_unit === undefined && userActiveServiceUnit) {
-      searchQuery.service_unit = userActiveServiceUnit.id;
+    if(searchQuery.service_unit === undefined) {
+      searchQuery.service_unit = "";
     }
 
     searchQuery.limit = 10000;
@@ -430,6 +451,16 @@ class LeaseListPage extends PureComponent<Props, State> {
     });
   }
 
+  handleServiceUnitChange = (value : mixed) => {
+    const {location: {search}} = this.props;
+
+    // get other form values from query params
+    const query = getUrlParams(search);
+
+    this.handleSearchChange(Object.assign(query, {service_unit: value}));
+    this.setState({selectedServiceUnitOptionValue: value});
+  }
+
   handleRowClick = (id) => {
     const {history, location: {search}} = this.props;
 
@@ -578,6 +609,8 @@ class LeaseListPage extends PureComponent<Props, State> {
       sortKey,
       sortOrder,
       visualizationType,
+      serviceUnitOptions,
+      selectedServiceUnitOptionValue
     } = this.state;
     const {
       createLease,
@@ -600,6 +633,23 @@ class LeaseListPage extends PureComponent<Props, State> {
 
     if(!isMethodAllowed(leaseMethods, Methods.GET)) return <PageContainer><AuthorizationError text={PermissionMissingTexts.LEASE} /></PageContainer>;
 
+    const serviceUnitFilter = <SearchRow>
+      <SearchLabelColumn>
+        <SearchLabel>{LeaseFieldTitles.SERVICE_UNIT}</SearchLabel>
+      </SearchLabelColumn>
+      <SearchInputColumn>
+        <FieldTypeSelect
+          autoBlur={false}
+          disabled={false}
+          displayError={false}
+          input={{onChange: this.handleServiceUnitChange, onBlur: () => {}, value: selectedServiceUnitOptionValue}}
+          isDirty={false}
+          options={serviceUnitOptions}
+          placeholder=""
+          setRefForField={() => {}} />
+      </SearchInputColumn>
+    </SearchRow>
+
     return (
       <PageContainer>
         <Authorization allow={isMethodAllowed(leaseMethods, Methods.POST)}>
@@ -635,6 +685,7 @@ class LeaseListPage extends PureComponent<Props, State> {
               filterOptions={leaseStateFilterOptions}
               filterValue={leaseStates}
               onFilterChange={this.handleLeaseStatesChange}
+              componentToRenderUnderTitle={serviceUnitFilter}
             />
           }
           visualizationComponent={

src/leases/components/search/Search.js

@@ -105,7 +105,6 @@ class Search extends PureComponent<Props, State> {
       newState.municipalityOptions = getFieldOptions(props.leaseAttributes, LeaseFieldPaths.MUNICIPALITY);
       newState.tenantTypeOptions = getFieldOptions(props.leaseAttributes, LeaseTenantContactSetFieldPaths.TYPE, false);
       newState.typeOptions = getFieldOptions(props.leaseAttributes, LeaseFieldPaths.TYPE);
-      newState.serviceUnitOptions = getFieldOptions(props.leaseAttributes, 'service_unit', true);
     }
 
     if(props.lessors !== state.lessors) {
@@ -156,6 +155,7 @@ class Search extends PureComponent<Props, State> {
     delete searchQuery.in_bbox;
     delete searchQuery.visualization;
     delete searchQuery.zoom;
+    delete searchQuery.service_unit;
 
     const keys = Object.keys(searchQuery);
 
@@ -737,28 +737,6 @@ class Search extends PureComponent<Props, State> {
                     />
                   </SearchInputColumn>
                 </SearchRow>
-
-                <SearchRow>
-                  <SearchLabelColumn>
-                    <SearchLabel>Palvelukokonaisuus</SearchLabel>
-                  </SearchLabelColumn>
-                  <SearchInputColumn>
-                    <FormField
-                      autoBlur
-                      disableDirty
-                      fieldAttributes={{
-                        label: 'Palvelukokonaisuus',
-                        type: FieldTypes.CHOICE,
-                        read_only: false,
-                      }}
-                      invisibleLabel
-                      name='service_unit'
-                      overrideValues={{
-                        options: serviceUnitOptions,
-                      }}
-                    />
-                  </SearchInputColumn>
-                </SearchRow>
               </Column>
             </Row>
           </Fragment>