From 73068cd8618dfffc3767daabef6734103f441847 Mon Sep 17 00:00:00 2001 From: Chris Topaloudis Date: Wed, 1 Apr 2020 01:24:33 +0200 Subject: [PATCH] working date filters --- ui/package.json | 2 +- .../SearchDateRange/SearchDateRange.js | 72 ----------------- .../components/SearchDateRange/index.js | 1 - .../SearchControls/components/index.js | 1 - .../backoffice/Loan/LoanSearch/LoanSearch.js | 8 +- .../Loan/LoanSearch/SearchDateRange.js | 77 +++++++++++++++++++ 6 files changed, 80 insertions(+), 81 deletions(-) delete mode 100644 ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js delete mode 100644 ui/src/components/SearchControls/components/SearchDateRange/index.js create mode 100644 ui/src/pages/backoffice/Loan/LoanSearch/SearchDateRange.js 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 { <>
Loans and requests
- + 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);