From 3572a91e4b50e02a9a1eaf5ff638265335db28e8 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Thu, 13 Aug 2020 11:25:20 +0300 Subject: [PATCH] Added FiltersBlock --- package-lock.json | 71 ------ package.json | 1 + .../manage/Blocks/FiltersBlock/Edit.jsx | 44 ++++ .../manage/Blocks/FiltersBlock/View.jsx | 202 ++++++++++++++++++ .../manage/Blocks/FiltersBlock/style.css | 76 +++++++ .../theme/Navigation/Navigation.jsx | 2 +- src/localconfig.js | 12 ++ 7 files changed, 336 insertions(+), 72 deletions(-) create mode 100644 src/components/manage/Blocks/FiltersBlock/Edit.jsx create mode 100644 src/components/manage/Blocks/FiltersBlock/View.jsx create mode 100644 src/components/manage/Blocks/FiltersBlock/style.css diff --git a/package-lock.json b/package-lock.json index d5b5e718..2d45f69b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23231,10 +23231,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz", "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "micromatch": "^3.1.4", "normalize-path": "^2.1.1" @@ -23244,10 +23240,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "remove-trailing-separator": "^1.0.1" } @@ -23326,12 +23318,7 @@ "async-each": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", -<<<<<<< Updated upstream "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==" -======= - "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==", - "optional": true ->>>>>>> Stashed changes }, "async-limiter": { "version": "1.0.1", @@ -23422,12 +23409,7 @@ "binary-extensions": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz", -<<<<<<< Updated upstream "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==" -======= - "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==", - "optional": true ->>>>>>> Stashed changes }, "bluebird": { "version": "3.7.1", @@ -23647,10 +23629,6 @@ "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "anymatch": "^2.0.0", "async-each": "^1.0.1", @@ -24869,10 +24847,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "is-glob": "^3.1.0", "path-dirname": "^1.0.0" @@ -24882,10 +24856,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "is-extglob": "^2.1.0" } @@ -25068,10 +25038,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz", "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "binary-extensions": "^1.0.0" } @@ -25124,21 +25090,12 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", -<<<<<<< Updated upstream "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" -======= - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "optional": true ->>>>>>> Stashed changes }, "is-glob": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "is-extglob": "^2.1.1" } @@ -25406,11 +25363,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "requires": { -<<<<<<< Updated upstream "minimist": "0.0.8" -======= - "minimist": "^1.2.5" ->>>>>>> Stashed changes }, "dependencies": { "minimist": { @@ -25512,12 +25465,7 @@ "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", -<<<<<<< Updated upstream "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" -======= - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "optional": true ->>>>>>> Stashed changes }, "object-assign": { "version": "4.1.1", @@ -25661,12 +25609,7 @@ "path-dirname": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", -<<<<<<< Updated upstream "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=" -======= - "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=", - "optional": true ->>>>>>> Stashed changes }, "path-exists": { "version": "3.0.0", @@ -25850,10 +25793,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz", "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==", -<<<<<<< Updated upstream -======= - "optional": true, ->>>>>>> Stashed changes "requires": { "graceful-fs": "^4.1.11", "micromatch": "^3.1.10", @@ -25872,12 +25811,7 @@ "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", -<<<<<<< Updated upstream "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=" -======= - "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=", - "optional": true ->>>>>>> Stashed changes }, "repeat-element": { "version": "1.1.3", @@ -26452,12 +26386,7 @@ "upath": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", -<<<<<<< Updated upstream "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==" -======= - "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==", - "optional": true ->>>>>>> Stashed changes }, "uri-js": { "version": "4.2.2", diff --git a/package.json b/package.json index c1cd8045..47a7204a 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@blueprintjs/icons": "^3.10.0", "@datapunt/matomo-tracker-react": "0.0.16", "@plone/volto": "github:eea/volto#5.2-eea", + "axios": "^0.19.2", "http-server": "^0.12.1", "immutable": "^3.8.2", "less-loader": "5.0.0", diff --git a/src/components/manage/Blocks/FiltersBlock/Edit.jsx b/src/components/manage/Blocks/FiltersBlock/Edit.jsx new file mode 100644 index 00000000..36c329aa --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/Edit.jsx @@ -0,0 +1,44 @@ +import React, { useState, useEffect } from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import _uniqueId from 'lodash/uniqueId'; +import RenderFields from 'volto-addons/Widgets/RenderFields'; +import View from './View'; +import { settings } from '~/config'; + +const getSchema = props => { + return { + title: { + type: 'text', + title: 'Title', + }, + }; +}; + +const Edit = props => { + const [state, setState] = useState({ + schema: getSchema({ ...props }), + id: _uniqueId('block_'), + }); + useEffect(() => { + setState({ + ...state, + schema: getSchema({ + ...props, + }), + }); + /* eslint-disable-next-line */ + }, [props.data]) + return ( +
+ + +
+ ); +}; + +export default compose( + connect((state, props) => ({ + discodata_query: state.discodata_query, + })), +)(Edit); diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx new file mode 100644 index 00000000..99680469 --- /dev/null +++ b/src/components/manage/Blocks/FiltersBlock/View.jsx @@ -0,0 +1,202 @@ +/* REACT */ +import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { Button, Header, Image, Modal, Select, Input } from 'semantic-ui-react'; +import { setQueryParam } from 'volto-datablocks/actions'; +import _uniqueId from 'lodash/uniqueId'; +import axios from 'axios'; +import './style.css'; +const View = ({ content, ...props }) => { + const [state, setState] = useState({ + open: false, + filters: {}, + filtersMeta: {}, + }); + const title = props.data.title?.value; + + useEffect(() => { + const requestsMeta = [ + { + key: 'industries', + title: 'Industries', + queryToSet: 'eprtrSectorName', + firstInput: { id: _uniqueId('select_'), type: 'select', position: 0 }, + placeholder: 'Select industry', + optionKey: 'eprtrSectorName', + optionValue: 'eprtrSectorName', + optionText: 'eprtrSectorName', + }, + { + key: 'countries', + title: 'Countries', + queryToSet: 'siteCountry', + firstInput: { id: _uniqueId('select_'), type: 'select', position: 0 }, + placeholder: 'Select country code', + optionKey: 'siteCountry', + optionValue: 'siteCountry', + optionText: 'siteCountryName', + }, + ]; + let promises = []; + promises.push( + axios.get( + 'https://discodata.eea.europa.eu/sql?query=SELECT%20DISTINCT%20eprtrSectorName%20FROM%20%5BIED%5D.%5Blatest%5D.%5BEPRTR_sectors%5D%20ORDER%20BY%20eprtrSectorName&p=1&nrOfHits=100', + ), + axios.get( + 'https://discodata.eea.europa.eu/sql?query=SELECT%20DISTINCT%20siteCountry%2C%20siteCountryName%20FROM%20%5BIED%5D.%5Blatest%5D.%5Bvw_Browse2_MapPOPUP%5D%20ORDER%20BY%20siteCountryName', + ), + ); + Promise.all(promises) + .then(response => { + const filtersMeta = { ...state.filtersMeta }; + response.forEach((res, index) => { + const results = JSON.parse(res.request.response).results; + filtersMeta[(requestsMeta[index]?.key)] = { + filteringInputs: [requestsMeta[index]?.firstInput], + placeholder: requestsMeta[index]?.placeholder, + queryToSet: requestsMeta[index]?.queryToSet, + title: requestsMeta[index]?.title, + options: results.map(item => { + return { + key: item[(requestsMeta[index]?.optionKey)], + value: item[(requestsMeta[index]?.optionValue)], + text: item[(requestsMeta[index]?.optionText)], + }; + }), + }; + }); + setState({ + ...state, + filtersMeta, + }); + }) + .catch(error => {}); + /* eslint-disable-next-line */ + }, []) + + const updateFilters = (data, filter, position = 0) => { + const newFilters = { ...state.filters }; + if (!newFilters[filter.queryToSet]) newFilters[filter.queryToSet] = []; + if (newFilters[filter.queryToSet]?.length - 1 < position) { + for (let i = 0; i < newFilters[filter.queryToSet].length; i++) { + if (typeof newFilters[filter.queryToSet][i] === 'undefined') + newFilters[filter.queryToSet][i] = null; + } + newFilters[filter.queryToSet][position] = data.value; + } else if (newFilters[filter.queryToSet]?.length - 1 >= position) { + newFilters[filter.queryToSet][position] = data.value; + } + setState({ + ...state, + filters: newFilters, + }); + }; + + const addNewInput = (key, type, position = 0) => { + const newFiltersMeta = { ...state.filtersMeta }; + newFiltersMeta[key].filteringInputs.push({ + id: _uniqueId(type + '_'), + type, + position, + }); + setState({ + ...state.filtersMeta, + filtersMeta: newFiltersMeta, + }); + }; + + return ( + setState({ ...state, open: false })} + onOpen={() => setState({ ...state, open: true })} + open={state.open} + trigger={} + > + + {/* eslint-disable-next-line */} + Advanced search and filter setState({ ...state, open: false })}>X + + +
Search terms
+ + + + {state.filtersMeta && + Object.entries(state.filtersMeta).map(([filterKey, filterValue]) => { + return ( + +
{filterValue.title}
+ {filterValue?.filteringInputs?.length && + filterValue.filteringInputs.map((input, index) => { + if (input.type === 'select') { + return ( + <> +