diff --git a/src/components/inputs/UserServiceUnitSelectInput.js b/src/components/inputs/UserServiceUnitSelectInput.js index 006bd08b4..a1497ed93 100644 --- a/src/components/inputs/UserServiceUnitSelectInput.js +++ b/src/components/inputs/UserServiceUnitSelectInput.js @@ -57,7 +57,7 @@ class UserServiceUnitSelectInput extends Component { - Palvelukokonaisuus + Oma palvelukokonaisuus
diff --git a/src/components/table/TableFilters.js b/src/components/table/TableFilters.js index 5a606d138..9feb5175a 100644 --- a/src/components/table/TableFilters.js +++ b/src/components/table/TableFilters.js @@ -10,6 +10,7 @@ type Props = { filterOptions: Array, filterValue: Array, onFilterChange?: Function, + componentToRenderUnderTitle?: React$Node, } const TableFilters = ({ alignFiltersRight, @@ -17,6 +18,7 @@ const TableFilters = ({ filterOptions, filterValue, onFilterChange, + componentToRenderUnderTitle = null }: Props): React$Node => { const handleFilterChange = (values: Array) => { if(onFilterChange) { @@ -33,6 +35,7 @@ const TableFilters = ({ {!!filterOptions.length &&

Suodatus

} + {!!componentToRenderUnderTitle && componentToRenderUnderTitle} { ) : (
-
Palvelukokonaisuus
+
Oma palvelukokonaisuus
{userActiveServiceUnit.name}
)} diff --git a/src/leases/components/LeaseListPage.js b/src/leases/components/LeaseListPage.js index 168f66029..ad9405fac 100644 --- a/src/leases/components/LeaseListPage.js +++ b/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, + selectedServiceUnitOptionValue: mixed // empty string if no value, otherwise number } class LeaseListPage extends PureComponent { @@ -142,6 +152,8 @@ class LeaseListPage extends PureComponent { sortKey: DEFAULT_SORT_KEY, sortOrder: DEFAULT_SORT_ORDER, visualizationType: VisualizationTypes.TABLE, + serviceUnitOptions: [], + selectedServiceUnitOptionValue: '' } static contextTypes = { @@ -157,6 +169,7 @@ class LeaseListPage extends PureComponent { lessors, receiveTopNavigationSettings, serviceUnits, + leaseAttributes } = this.props; setPageTitle('Vuokraukset'); @@ -179,12 +192,14 @@ class LeaseListPage extends PureComponent { 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 { 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 { } 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 { ? 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 { } 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 { 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 { } 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 { 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 { }); } + 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 { sortKey, sortOrder, visualizationType, + serviceUnitOptions, + selectedServiceUnitOptionValue } = this.state; const { createLease, @@ -600,6 +633,23 @@ class LeaseListPage extends PureComponent { if(!isMethodAllowed(leaseMethods, Methods.GET)) return ; + const serviceUnitFilter = + + {LeaseFieldTitles.SERVICE_UNIT} + + + {}, value: selectedServiceUnitOptionValue}} + isDirty={false} + options={serviceUnitOptions} + placeholder="" + setRefForField={() => {}} /> + + + return ( @@ -635,6 +685,7 @@ class LeaseListPage extends PureComponent { filterOptions={leaseStateFilterOptions} filterValue={leaseStates} onFilterChange={this.handleLeaseStatesChange} + componentToRenderUnderTitle={serviceUnitFilter} /> } visualizationComponent={ diff --git a/src/leases/components/search/Search.js b/src/leases/components/search/Search.js index 146ec4a7b..a0b5e9855 100644 --- a/src/leases/components/search/Search.js +++ b/src/leases/components/search/Search.js @@ -105,7 +105,6 @@ class Search extends PureComponent { 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 { 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 { /> - - - - Palvelukokonaisuus - - - - -