From 581288f47374d899ec0001036e6a3f2a677ddaaa Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Wed, 19 Aug 2020 22:43:58 +0300 Subject: [PATCH] Updated FiltersBlock: sidebar + clearFilters --- .../manage/Blocks/FiltersBlock/View.jsx | 193 +++++++++++++++--- .../manage/Blocks/FiltersBlock/style.css | 4 + 2 files changed, 169 insertions(+), 28 deletions(-) diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx index 69479d71..a59e06f6 100644 --- a/src/components/manage/Blocks/FiltersBlock/View.jsx +++ b/src/components/manage/Blocks/FiltersBlock/View.jsx @@ -49,10 +49,13 @@ const View = ({ content, ...props }) => { 'reporting_years', 'bat_conclusions', ], + factsDataOrder: ['Country_quick_facts', 'EU_quick_facts'], mounted: false, firstLoad: false, searchResultsActive: false, }); + const [factsData, setFactsData] = useState({}); + const [alphaFeature, setAlphaFeature] = useState({}); const [sitesResults, setSitesResults] = useState([]); const [locationResults, setLocationResults] = useState([]); const [searchTerm, setSearchTerm] = useState(''); @@ -60,26 +63,114 @@ const View = ({ content, ...props }) => { const searchContainerModal = useRef(null); const searchContainer = useRef(null); const title = props.data.title?.value; - + const locationResultsTexts = locationResults.map(result => result.text); const searchResults = [ ...sitesResults.slice( 0, locationResults.length < 3 ? 6 - locationResults.length : 3, ), - ...locationResults.slice( - 0, - sitesResults.length < 3 ? 6 - sitesResults.length : 3, - ), + ...locationResults + .map(result => result.text) + .slice(0, sitesResults.length < 3 ? 6 - sitesResults.length : 3), ]; - useEffect(() => { + const updateFactsData = (initialization = false) => { + const promises = []; + let reqs; + if (initialization) { + reqs = [ + { + factId: 'EU_quick_facts', + sql: 'SELECT AllSites FROM [IED].[latest].[vw_BrowseMainMap_EUFacts]', + descriptionDiscodataKey: ['AllSites'], + title: 'EU Quick facts', + description: [':descriptionDiscodataKey reporting sites'], + type: 'firstElement', + }, + ]; + } else { + reqs = [ + alphaFeature?.getProperties?.()?.country + ? { + factId: 'Country_quick_facts', + sql: `SELECT DISTINCT MP.siteCountry, MP.siteCountryName, MM.siteCount + FROM [IED].[latest].[vw_Browse2_MapPOPUP] as MP + LEFT JOIN [IED].[latest].[vw_MainMap_totalSitesPerCountry] as MM + ON MP.siteCountry = MM.countryCode + WHERE siteCountry = '${alphaFeature.getProperties().country}'`, + titleDiscodataKey: 'siteCountryName', + descriptionDiscodataKey: ['siteCount'], + title: ':titleDiscodataKey quick facts', + description: [':descriptionDiscodataKey reporting sites'], + type: 'firstElement', + } + : null, + ].filter(req => req); + } + reqs.forEach(req => { + promises.push(axios.get(makeUrl(providerUrl, req.sql))); + }); + + Promise.all(promises) + .then(response => { + const newFactsData = { ...factsData }; + response.forEach((res, index) => { + const results = JSON.parse(res.request.response).results; + if (reqs[index].type === 'firstElement') { + const title = reqs[index].title.includes(':titleDiscodataKey') + ? reqs[index].title.replace( + ':titleDiscodataKey', + results[0]?.[reqs[index].titleDiscodataKey], + ) + : reqs[index].title; + const description = reqs[index].description.map((descr, index) => { + return descr.includes(':descriptionDiscodataKey') && + results[0]?.[reqs[index].descriptionDiscodataKey?.[index]] + ? descr.replace( + ':descriptionDiscodataKey', + results[0]?.[reqs[index].descriptionDiscodataKey?.[index]], + ) + : descr; + }); + newFactsData[reqs[index].factId] = { + title, + description, + }; + } + }); + setFactsData({ + ...factsData, + ...newFactsData, + }); + }) + .catch(error => {}); + }; + + useEffect(function() { setState({ ...state, mounted: true }); + updateFactsData(true); + document + .getElementById(`dynamic-filter`) + .addEventListener('featurechange', e => { + if ( + JSON.stringify(e.detail.features?.[0]?.getProperties?.()?.country) !== + JSON.stringify(alphaFeature?.getProperties?.()?.country) + ) { + setAlphaFeature(e.detail.features?.[0]); + } + }); + return () => { setState({ ...state, mounted: false }); }; /* eslint-disable-next-line */ }, []); + useEffect(() => { + updateFactsData(false); + /* eslint-disable-next-line */ + }, [alphaFeature]) + useEffect(() => { if (state.open && state.searchResultsActive) { setState({ ...state, searchResultsActive: false }); @@ -378,7 +469,6 @@ 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)], @@ -523,24 +613,26 @@ const View = ({ content, ...props }) => { setSitesResults([]); setLocationResults([]); setSearchTerm(''); + props.setQueryParam({ + queryParam: { + ...props.discodata_query.search, + ...newFilters, + }, + }); }; function handleClickOutside(e) { - let searchResultsActive = true; - if ( - state.mounted && + let searchResultsActive = false; + const searchContainerModalActive = searchContainerModal && searchContainerModal.current && - !searchContainerModal.current.contains(e.target) - ) { - searchResultsActive = false; - } else if ( - state.mounted && + searchContainerModal.current.contains(e.target); + const searchContainerActive = searchContainer && searchContainer.current && - !searchContainer.current.contains(e.target) - ) { - searchResultsActive = false; + searchContainer.current.contains(e.target); + if (searchContainerModalActive || searchContainerActive) { + searchResultsActive = true; } return setState({ ...state, searchResultsActive }); } @@ -563,11 +655,11 @@ const View = ({ content, ...props }) => { data.value }&maxSuggestions=6`, reqKey: 'suggestions', - searchKey: 'text', + searchKeys: ['text', 'magicKey'], updateState: setLocationResults, }, ]; - if (data.value.length > 2) { + if (data.value.length > 1) { sqls.forEach(sql => { promises.push({ get: axios.get( @@ -589,9 +681,19 @@ const View = ({ content, ...props }) => { ? JSON.parse(res.request.response) || {} : {}; promises[index].metadata.updateState( - data[promises[index].metadata.reqKey].map( - result => result[promises[index].metadata.searchKey], - ), + data[promises[index].metadata.reqKey].map(result => { + if (promises[index].metadata.searchKey) { + return result[promises[index].metadata.searchKey]; + } else if (promises[index].metadata.searchKeys) { + const obj = {}; + promises[index].metadata.searchKeys.forEach(key => { + if (result[key]) { + obj[key] = result[key]; + } + }); + return obj; + } + }), ); }); }) @@ -607,7 +709,7 @@ const View = ({ content, ...props }) => { const searchTermType = sitesResults.indexOf(searchTerm) > -1 ? 'siteTerm' - : locationResults.indexOf(searchTerm) > -1 + : locationResultsTexts.indexOf(searchTerm) > -1 ? 'locationTerm' : sitesResults.length >= locationResults.length ? 'siteTerm' @@ -617,7 +719,10 @@ const View = ({ content, ...props }) => { props.setQueryParam({ queryParam: { ...state.filters, - [searchTermType]: searchTerm, + [searchTermType]: + searchTermType === 'locationTerm' + ? locationResults[locationResultsTexts.indexOf(searchTerm)] + : searchTerm, [emptyTermType]: null, }, }); @@ -664,7 +769,7 @@ const View = ({ content, ...props }) => { '' )} {sitesResults.indexOf(result) === -1 && - locationResults.indexOf(result) > -1 ? ( + locationResultsTexts.indexOf(result) > -1 ? ( location ) : ( '' @@ -878,12 +983,44 @@ const View = ({ content, ...props }) => { value={state.filters['reportingYear']?.[0]} /> +
Industry
+
+