From 3b7edcbd4dc6328ac41b80513aaa37610dcb0e74 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Mon, 17 Aug 2020 22:45:48 +0300 Subject: [PATCH] Hide FiltersBlock sidebar if map not available; --- .../manage/Blocks/FiltersBlock/View.jsx | 571 ++++++++++-------- .../manage/Blocks/FiltersBlock/style.css | 55 +- theme/site/globals/site.overrides | 19 +- 3 files changed, 377 insertions(+), 268 deletions(-) diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx index 2e6ee5f..69479d7 100644 --- a/src/components/manage/Blocks/FiltersBlock/View.jsx +++ b/src/components/manage/Blocks/FiltersBlock/View.jsx @@ -51,19 +51,27 @@ const View = ({ content, ...props }) => { ], mounted: false, firstLoad: false, - searchRadioButtons: [ - { key: 'bySiteName', label: 'By site name' }, - { key: 'byLocation', label: 'By location' }, - ], - searchType: 'bySiteName', - searchResults: [], searchResultsActive: false, }); + const [sitesResults, setSitesResults] = useState([]); + const [locationResults, setLocationResults] = useState([]); const [searchTerm, setSearchTerm] = useState(''); const [sidebar, setSidebar] = useState(false); + const searchContainerModal = useRef(null); const searchContainer = useRef(null); const title = props.data.title?.value; + const searchResults = [ + ...sitesResults.slice( + 0, + locationResults.length < 3 ? 6 - locationResults.length : 3, + ), + ...locationResults.slice( + 0, + sitesResults.length < 3 ? 6 - sitesResults.length : 3, + ), + ]; + useEffect(() => { setState({ ...state, mounted: true }); return () => { @@ -104,9 +112,9 @@ const View = ({ content, ...props }) => { const onMountRequests = { sqls: [ // INDUSTRIES QUERY - `SELECT DISTINCT eprtrSectorName + `SELECT DISTINCT EEASector FROM [IED].[latest].[EPRTR_sectors] - ORDER BY eprtrSectorName`, + ORDER BY EEASector`, // COUNTRIES QUERY `SELECT DISTINCT siteCountry, siteCountryName FROM [IED].[latest].[vw_Browse2_MapPOPUP] @@ -126,16 +134,16 @@ const View = ({ content, ...props }) => { { key: 'industries', title: 'Industries', - queryToSet: 'eprtrSectorName', + queryToSet: 'EEASector', firstInput: { id: _uniqueId('select_'), type: 'select', position: 0, }, placeholder: 'Select industry', - optionKey: 'eprtrSectorName', - optionValue: 'eprtrSectorName', - optionText: 'eprtrSectorName', + optionKey: 'EEASector', + optionValue: 'EEASector', + optionText: 'EEASector', static: true, }, // COUNTRIES META @@ -370,6 +378,7 @@ const View = ({ content, ...props }) => { static: metadata[index]?.static, options: [ { key: null, value: null, text: 'No value' }, + { key: '2020', value: '2020', text: '2020' }, ...(results.map(item => { return { key: item[(metadata[index]?.optionKey)], @@ -392,15 +401,13 @@ const View = ({ content, ...props }) => { /* eslint-disable-next-line */ }, [ state.mounted, - state.filters?.eprtrSectorName && - JSON.stringify(state.filters.eprtrSectorName), + state.filters?.EEASector && JSON.stringify(state.filters.EEASector), state.filters?.siteCountry && JSON.stringify(state.filters.siteCountry), state.filters?.region && JSON.stringify(state.filters.region), state.filters?.townVillage && JSON.stringify(state.filters.townVillage), state.filters?.pollutantGroup && JSON.stringify(state.filters.pollutantGroup), ]); - // console.log('HERE', nrOfRequests); useEffect(() => { updateFilters(); /* eslint-disable-next-line */ @@ -512,281 +519,330 @@ const View = ({ content, ...props }) => { setState({ ...state, filters: newFilters, - searchResults: [], }); + setSitesResults([]); + setLocationResults([]); setSearchTerm(''); }; function handleClickOutside(e) { + let searchResultsActive = true; if ( + state.mounted && + searchContainerModal && + searchContainerModal.current && + !searchContainerModal.current.contains(e.target) + ) { + searchResultsActive = false; + } else if ( state.mounted && searchContainer && searchContainer.current && !searchContainer.current.contains(e.target) ) { - return setState({ ...state, searchResultsActive: false }); - } else if (state.mounted) { - setState({ ...state, searchResultsActive: true }); + searchResultsActive = false; } + return setState({ ...state, searchResultsActive }); } const autoComplete = data => { - let req, reqKey, searchKey; - if (state.searchType === 'bySiteName') { - const sql = `SELECT DISTINCT site FROM [IED].[latest].[Browse3_4_infotable] WHERE [site] LIKE '${ - data.value - }%' ORDER BY [site]`; - req = providerUrl + `?query=${encodeURI(sql)}&p=1&nrOfHits=5`; - reqKey = 'results'; - searchKey = 'site'; - } else if (state.searchType === 'byLocation') { - req = - 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=json&text=' + - data.value + - '&maxSuggestions=5'; - reqKey = 'suggestions'; - searchKey = 'text'; - } + let promises = []; + const sqls = [ + { + query: `SELECT DISTINCT site FROM [IED].[latest].[Browse3_4_infotable] WHERE [site] LIKE '${ + data.value + }%' ORDER BY [site]`, + reqKey: 'results', + searchKey: 'site', + updateState: setSitesResults, + }, + ]; + const reqs = [ + { + url: `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=json&text=${ + data.value + }&maxSuggestions=6`, + reqKey: 'suggestions', + searchKey: 'text', + updateState: setLocationResults, + }, + ]; if (data.value.length > 2) { - axios - .get(req) + sqls.forEach(sql => { + promises.push({ + get: axios.get( + providerUrl + `?query=${encodeURI(sql.query)}&p=1&nrOfHits=6`, + ), + metadata: sql, + }); + }); + reqs.forEach(req => { + promises.push({ + get: axios.get(req.url), + metadata: req, + }); + }); + Promise.all(promises.map(promise => promise.get)) .then(response => { - const searchResults = JSON.parse(response.request.response)[reqKey]; - if (state.mounted) { - setState({ - ...state, - searchResults: searchResults.map(result => result[searchKey]), - }); - } + response.forEach((res, index) => { + const data = res.request.response + ? JSON.parse(res.request.response) || {} + : {}; + promises[index].metadata.updateState( + data[promises[index].metadata.reqKey].map( + result => result[promises[index].metadata.searchKey], + ), + ); + }); }) .catch(error => {}); - } else if (state.searchResults.length) { - setState({ ...state, searchResults: [] }); + } else { + sqls.forEach(sql => sql.updateState([])); + reqs.forEach(req => req.updateState([])); } setSearchTerm(data.value); }; const submit = () => { + const searchTermType = + sitesResults.indexOf(searchTerm) > -1 + ? 'siteTerm' + : locationResults.indexOf(searchTerm) > -1 + ? 'locationTerm' + : sitesResults.length >= locationResults.length + ? 'siteTerm' + : 'locationTerm'; + const emptyTermType = + searchTermType === 'siteTerm' ? 'locationTerm' : 'siteTerm'; props.setQueryParam({ queryParam: { ...state.filters, - searchTerm: searchTerm, - searchType: state.searchType, + [searchTermType]: searchTerm, + [emptyTermType]: null, }, }); setState({ ...state, open: false }); }; - 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 })} - color="red" - name={clear} - size="1em" - /> - - -
Search terms
-
-
- {state.searchRadioButtons - ? state.searchRadioButtons.map(radioButton => { - return ( - { - setState({ - ...state, - searchResults: [], - searchType: radioButton.key, - }); - }} - /> - ); - }) - : ''} -
-
- { - autoComplete(data); - }} - /> - {state.searchResultsActive && state.searchResults.length ? ( -
- - {state.searchResults.map((result, index) => { - return ( - { - setState({ - ...state, - searchResultsActive: false, - }); - setSearchTerm(result); - }} - > - - - ); - })} - -
- ) : ( - '' - )} -
+ const searchView = ref => ( +
+
+ { + autoComplete(data); + }} + /> + {state.searchResultsActive && searchResults.length ? ( +
+ + {searchResults.map((result, index) => { + return ( + { + setState({ + ...state, + searchResultsActive: false, + }); + setSearchTerm(result); + }} + > + + {sitesResults.indexOf(result) > -1 ? ( + site + ) : ( + '' + )} + {sitesResults.indexOf(result) === -1 && + locationResults.indexOf(result) > -1 ? ( + location + ) : ( + '' + )} + + ); + })} +
- {state.filtersMeta && - state.filtersMetaOrder && - state.filtersMetaOrder.map(filterKey => { - return ( -
- {state.filtersMeta[filterKey]?.title ? ( -
{state.filtersMeta[filterKey].title}
- ) : ( - '' - )} - {state.filtersMeta[filterKey]?.filteringInputs?.length && - state.filtersMeta[filterKey].filteringInputs.map( - (input, index) => { - if (input.type === 'select') { - const options = state.filtersMeta[ - filterKey - ].options.filter(option => { - if ( - state.filters[ - state.filtersMeta[filterKey].queryToSet - ] && - !state.filters[ - state.filtersMeta[filterKey].queryToSet - ] - .filter( - (item, itemIndex) => index !== itemIndex, - ) - .includes(option.value) - ) { + ) : ( + '' + )} +
+
+ ); + + return ( +
+ {searchView(searchContainer)} +
+ 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 })} + color="red" + name={clear} + size="1em" + /> + + +
Search terms
+ {searchView(searchContainerModal)} + {state.filtersMeta && + state.filtersMetaOrder && + state.filtersMetaOrder.map(filterKey => { + return ( +
+ {state.filtersMeta[filterKey]?.title ? ( +
{state.filtersMeta[filterKey].title}
+ ) : ( + '' + )} + {state.filtersMeta[filterKey]?.filteringInputs?.length && + state.filtersMeta[filterKey].filteringInputs.map( + (input, index) => { + if (input.type === 'select') { + const options = state.filtersMeta[ + filterKey + ].options.filter(option => { + if ( + state.filters[ + state.filtersMeta[filterKey].queryToSet + ] && + !state.filters[ + state.filtersMeta[filterKey].queryToSet + ] + .filter( + (item, itemIndex) => index !== itemIndex, + ) + .includes(option.value) + ) { + return true; + } else if ( + state.filters[ + state.filtersMeta[filterKey].queryToSet + ] && + state.filters[ + state.filtersMeta[filterKey].queryToSet + ].includes(option.value) + ) { + return false; + } return true; - } else if ( - state.filters[ - state.filtersMeta[filterKey].queryToSet - ] && - state.filters[ + }); + const value = + state.filters?.[ state.filtersMeta[filterKey].queryToSet - ].includes(option.value) - ) { - return false; - } - return true; - }); - const value = - state.filters?.[ - state.filtersMeta[filterKey].queryToSet - ]?.[index]; - return ( -
- + changeFilter( + data, + state.filtersMeta[filterKey], + input.position, + ) + } + placeholder={ + state.filtersMeta[filterKey].placeholder + } + options={options} + value={value} + /> + {state.filtersMeta[filterKey].filteringInputs + .length - + 1 === + index ? ( +
+ {index + 2 < + state.filtersMeta[filterKey].options + .length ? ( + + addNewInput( + filterKey, + 'select', + index + 1, + ) + } + color="red" + name={circlePlus} + size="2em" + /> + ) : ( + '' + )} + {state.filtersMeta[filterKey] + .filteringInputs.length > 1 ? ( + + removeInput( + filterKey, + state.filtersMeta[filterKey], + index, + ) + } + color="red" + name={circleMinus} + size="2em" + /> + ) : ( + '' + )} +
+ ) : ( + '' + )} +
+ ); + } + return ''; + }, + )} +
+ ); + })} + + + + + + + +
Quick facts
+
- +
); }; diff --git a/src/components/manage/Blocks/FiltersBlock/style.css b/src/components/manage/Blocks/FiltersBlock/style.css index e5e1e17..ce2e692 100644 --- a/src/components/manage/Blocks/FiltersBlock/style.css +++ b/src/components/manage/Blocks/FiltersBlock/style.css @@ -1,3 +1,20 @@ +.filters-container { + width: 80%; + margin: 0 auto; +} + +.filters-container > .search-input-container { + padding: 0.5em 1em; +} + +.filters-container .search-input-container .ref { + position: relative; +} + +.filters-container > .buttons-container { + padding: 0.5em; +} + .filters-block.ui.modal>.header:not(.ui) { display: flex; justify-content: space-between; @@ -8,7 +25,7 @@ .filters-block.ui.modal>.header span { cursor: pointer; - color: #E16D5D; + color: #d63d27; font-weight: bold; } @@ -63,15 +80,18 @@ border-bottom: 1px dotted #4296B2; } +.filters-container .ui.search.selection.dropdown > input.search, .filters-block.ui.modal .ui.search.selection.dropdown > input.search, .filters-block .ui.search.selection.dropdown > input.search { padding: .78571429em 2.1em .78571429em 1em; } +.filters-container .search, .filters-block.ui.modal .search { width: 100%; } +.filters-container .search-results, .filters-block.ui.modal .search-results { position: absolute; z-index: 98; @@ -88,10 +108,23 @@ box-shadow: 0px 2px 4px -3px; } +.filters-container .search-results .ui.list .item, .filters-block.ui.modal .search-results .ui.list .item { cursor: pointer; } +.filters-container .search-results .ui.list .item .info, +.filters-block.ui.modal .search-results .ui.list .item .info { + position: absolute; + right: 1em; + color: #B8C6C8; +} + +.filters-container .search-results .ui.list .item:hover .info, +.filters-block.ui.modal .search-results .ui.list .item:hover .info { + color: #000; +} + .filters-block.ui.modal .ui.selection.dropdown>.dropdown.icon, .filters-block .ui.selection.dropdown>.dropdown.icon { cursor: pointer; @@ -106,7 +139,7 @@ padding: .91666667em; opacity: .8; transition: opacity .1s ease; - color: #E16D5D; + color: #d63d27; } .filters-block.ui.modal .input-container, @@ -130,7 +163,7 @@ .filters-block.ui.modal .add-button.icon, .filters-block.ui.modal .remove-button.icon { - fill: #E16D5D !important; + fill: #d63d27 !important; cursor: pointer; } @@ -141,4 +174,20 @@ .filters-block.ui.modal .filter-container { display: block; +} + +.filters-container .flex { + display: flex; +} + +.filters-container .space-between { + justify-content: space-between; +} + +#dynamic-filter-toggle { + display: none; +} + +#dynamic-filter { + display: none; } \ No newline at end of file diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index 439ebc4..d603db8 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -959,19 +959,18 @@ button.solid, border-radius: 2rem; cursor: pointer; margin: 0 0.5em; + max-width: 240px; &:focus { outline: none; } + &:hover { + opacity: 0.9; + } &.dark-blue { border: none; background-color: #32536B; color: #fff; font-weight: bold; - - &:hover { - background-color: #32536B; - color: #fff; - } } &.orange { @@ -979,11 +978,13 @@ button.solid, background-color: #E16D5D; color: #fff; font-weight: bold; + } - &:hover { - background-color: #E16D5D; - color: #fff; - } + &.red { + border: none; + background-color: #d63d27; + color: #fff; + font-weight: bold; } }