diff --git a/ui/package.json b/ui/package.json
index 2979b2efb..fe75c1e19 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -30,7 +30,7 @@
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.0",
"react-scroll": "^1.7.16",
- "react-searchkit": "^0.17.0",
+ "react-searchkit": "^0.18.0",
"react-show-more": "^2.0.0",
"react-tagcloud": "^2.0.0",
"redux": "^4.0.4",
diff --git a/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js b/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js
deleted file mode 100644
index b5edadfcb..000000000
--- a/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { Component } from 'react';
-import { Card } from 'semantic-ui-react';
-import { DatePicker } from '@components';
-import { withState, onQueryChanged } from 'react-searchkit';
-import _fromPairs from 'lodash/fromPairs';
-import _toPairs from 'lodash/toPairs';
-import _cloneDeep from 'lodash/cloneDeep';
-
-class _SearchDateRange extends Component {
- constructor(props) {
- super(props);
- const [fromDate, toDate] = this.parseUrlDates();
- this.state = { fromDate, toDate };
- }
-
- parseUrlDates = () => {
- const { filters } = this.props.currentQueryState;
- const filtersObj = _fromPairs(filters);
- const dateFilter = filtersObj['loan.start_date'];
- if (dateFilter) return dateFilter.split(',');
- return ['', ''];
- };
-
- updateFilters = () => {
- const newQuery = _cloneDeep(this.props.currentQueryState);
- newQuery.filters.push(['loan_from_date', '2020-03-03']);
- // const filtersObj = _fromPairs(newQuery.filters);
- // filtersObj[
- // 'loan.start_date'
- // ] = `${this.state.fromDate},${this.state.toDate}`;
- // newQuery.filters = _toPairs(filtersObj);
-
- // onQueryChanged(newQuery);
- debugger;
- this.props.updateQueryState(newQuery);
- };
-
- render() {
- return (
-
-
- Date
-
- *Loan start date
-
-
-
-
- this.setState({ fromDate: value }, this.updateFilters)
- }
- />
-
-
-
- this.setState({ toDate: value }, this.updateFilters)
- }
- />
-
-
- );
- }
-}
-
-export const SearchDateRange = withState(_SearchDateRange);
diff --git a/ui/src/components/SearchControls/components/SearchDateRange/index.js b/ui/src/components/SearchControls/components/SearchDateRange/index.js
deleted file mode 100644
index 20d0ef835..000000000
--- a/ui/src/components/SearchControls/components/SearchDateRange/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { SearchDateRange } from './SearchDateRange';
diff --git a/ui/src/components/SearchControls/components/index.js b/ui/src/components/SearchControls/components/index.js
index d8c85747c..6059743d0 100644
--- a/ui/src/components/SearchControls/components/index.js
+++ b/ui/src/components/SearchControls/components/index.js
@@ -1,6 +1,5 @@
export { SearchAggregationsCards } from './SearchAggregations';
export { SearchAggregationsMenu } from './SearchAggregations';
-export { SearchDateRange } from './SearchDateRange';
export { SearchFooter } from './SearchFooter';
export { SearchPagination } from './SearchPagination';
export { SearchEmptyResults } from './SearchEmptyResults';
diff --git a/ui/src/pages/backoffice/Loan/LoanSearch/LoanSearch.js b/ui/src/pages/backoffice/Loan/LoanSearch/LoanSearch.js
index b4e80850b..914b008c4 100644
--- a/ui/src/pages/backoffice/Loan/LoanSearch/LoanSearch.js
+++ b/ui/src/pages/backoffice/Loan/LoanSearch/LoanSearch.js
@@ -23,7 +23,7 @@ import {
SearchAggregationsCards,
} from '@components/SearchControls';
-import { SearchDateRange } from '@components/SearchControls/components';
+import { SearchDateRange } from './SearchDateRange';
export class LoanSearch extends Component {
searchApi = new InvenioSearchApi({
@@ -78,11 +78,7 @@ export class LoanSearch extends Component {
<>
-
+
diff --git a/ui/src/pages/backoffice/Loan/LoanSearch/SearchDateRange.js b/ui/src/pages/backoffice/Loan/LoanSearch/SearchDateRange.js
new file mode 100644
index 000000000..3aa501424
--- /dev/null
+++ b/ui/src/pages/backoffice/Loan/LoanSearch/SearchDateRange.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { Card } from 'semantic-ui-react';
+import { DatePicker } from '@components';
+import { withState } from 'react-searchkit';
+import _isEmpty from 'lodash/isEmpty';
+
+class _SearchDateRange extends Component {
+ getCurrentDates() {
+ const { filters } = this.props.currentQueryState;
+ let loans_from_date = '';
+ let loans_to_date = '';
+
+ filters.forEach(([name, value]) => {
+ if (name === 'loans_from_date') loans_from_date = value;
+ if (name === 'loans_to_date') loans_to_date = value;
+ });
+ return [loans_from_date, loans_to_date];
+ }
+
+ onDateChange = newFilter => {
+ const [name, value] = newFilter;
+ let result = newFilter;
+
+ if (_isEmpty(value)) {
+ this.props.updateQueryState({ filters: result });
+ return;
+ }
+
+ const { filters } = this.props.currentQueryState;
+ const existingFilters = filters.filter(filter => filter[0] === name);
+
+ if (!_isEmpty(existingFilters)) {
+ result = existingFilters.push(newFilter);
+ }
+ // NOTE: react-searchkit allows having the same filter multiple times.
+ // For the range dates filters we want each filter one time only so we have
+ // to we have to add also the existing filters we want to remove.
+ this.props.updateQueryState({ filters: result });
+ };
+
+ render() {
+ const [fromDate, toDate] = this.getCurrentDates();
+
+ return (
+
+
+ Date
+
+ *Loan start date
+
+
+
+
+ this.onDateChange(['loans_from_date', value])
+ }
+ />
+
+
+
+ this.onDateChange(['loans_to_date', value])
+ }
+ />
+
+
+ );
+ }
+}
+
+export const SearchDateRange = withState(_SearchDateRange);