Merge pull request #18 from eea/develop

feat: Apply siteName & facilityName filters
eea · Oct 6, 2022 · a140774 · a140774
2 parents 6a51dbd + 2c8a4dc
commit a140774
Show file tree

Hide file tree

Showing 9 changed files with 359 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [2.0.9](https://github.com/eea/volto-industry-theme/compare/2.0.8...2.0.9) - 3 October 2022
+### [2.0.10](https://github.com/eea/volto-industry-theme/compare/2.0.9...2.0.10) - 6 October 2022
+
+#### :rocket: New Features
+
+- feat: Apply siteName & facilityName filters [Miu Razvan - [`ce2a3be`](https://github.com/eea/volto-industry-theme/commit/ce2a3be2f260cf78a01ed22b229a09acdbdd2445)]
 
 #### :hammer_and_wrench: Others
 
-- proper tap size mobile devices [andreiggr - [`7330c31`](https://github.com/eea/volto-industry-theme/commit/7330c31773c5cc2976283db204a5f96cc3bc1579)]
+- Use volto 16 [Miu Razvan - [`15b6739`](https://github.com/eea/volto-industry-theme/commit/15b673915b03a43319a08a708eef89ccf728876b)]
+- Clean up [Miu Razvan - [`bc98766`](https://github.com/eea/volto-industry-theme/commit/bc98766e4f1031cf021d76c47e7b4aa3af5e3a99)]
+- Add FacilityName filter [Miu Razvan - [`2e719ca`](https://github.com/eea/volto-industry-theme/commit/2e719ca1346450d08cd57309cdd49ae434cff55c)]
+### [2.0.9](https://github.com/eea/volto-industry-theme/compare/2.0.8...2.0.9) - 3 October 2022
+
 ### [2.0.8](https://github.com/eea/volto-industry-theme/compare/2.0.7...2.0.8) - 30 September 2022
 
 #### :hammer_and_wrench: Others

diff --git a/Jenkinsfile b/Jenkinsfile
@@ -41,19 +41,19 @@ pipeline {
 
           "ES lint": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci eslint'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO="$VOLTO" plone/volto-addon-ci eslint'''
             }
           },
 
           "Style lint": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci stylelint'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO="$VOLTO" plone/volto-addon-ci stylelint'''
             }
           },
 
           "Prettier": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci prettier'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e VOLTO="$VOLTO" plone/volto-addon-ci prettier'''
             }
           }
         )

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-industry-theme",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "@eeacms/volto-industry-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/manage/Blocks/FiltersBlock/Search.js b/src/components/manage/Blocks/FiltersBlock/Search.js
@@ -24,10 +24,10 @@ const getSites = (value) => {
   const db_version =
     process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest';
   const query = `SELECT siteName
-    FROM [IED].[${db_version}].[SiteMap]
-    WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${value}%'
-    GROUP BY siteName
-    ORDER BY [siteName]`;
+  FROM [IED].[${db_version}].[SiteMap]
+  WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${value}%'
+  GROUP BY siteName
+  ORDER BY [siteName]`;
 
   return axios.get(
     providerUrl + `?${getEncodedQueryString(query)}&p=1&nrOfHits=6`,
@@ -43,11 +43,27 @@ const getLocations = (value, providers_data) => {
   );
 };
 
+const getFacilities = (value) => {
+  const providerUrl = config.settings.providerUrl;
+  const db_version =
+    process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest';
+  const query = `SELECT facilityName
+  FROM [IED].[${db_version}].[ProductionFacility]
+  WHERE [facilityName] COLLATE Latin1_General_CI_AI LIKE '%${value}%'
+  GROUP BY facilityName
+  ORDER BY [facilityName]`;
+
+  return axios.get(
+    providerUrl + `?${getEncodedQueryString(query)}&p=1&nrOfHits=6`,
+  );
+};
+
 const Search = ({ data, providers_data, query, setQuery, ...props }) => {
   const searchContainer = React.useRef();
   const [loading, setLoading] = React.useState(false);
   const [showResults, setShowResults] = React.useState(false);
   const [sites, setSites] = React.useState([]);
+  const [facilities, setFacilities] = React.useState([]);
   const [locations, setLocations] = React.useState([]);
 
   const value = React.useMemo(() => {
@@ -69,18 +85,65 @@ const Search = ({ data, providers_data, query, setQuery, ...props }) => {
 
   const items = React.useMemo(() => {
     if (loading) return [];
-    const half = MAX_RESULTS / 2;
-    let _locations = locations.slice(0, half);
-    let _sites = sites.slice(0, half);
-    if (_locations.length < half) {
-      _sites = sites.slice(0, MAX_RESULTS - _locations.length);
+    const slices = MAX_RESULTS / 3;
+    let total_entities = 1;
+    let empty_slices = 0;
+    let entities = 0;
+    let _locations = locations.slice(0, slices);
+    let _sites = sites.slice(0, slices);
+    let _facilities = facilities.slice(0, slices);
+
+    if (_locations.length < slices) {
+      empty_slices += slices - _locations.length;
+      entities++;
+    } else if (_locations.length <= slices) {
+      total_entities++;
     }
-    if (_sites.length < half) {
-      _locations = locations.slice(0, MAX_RESULTS - _sites.length);
+    if (_sites.length < slices) {
+      empty_slices += slices - _sites.length;
+      entities++;
+    } else if (_sites.length <= slices) {
+      total_entities++;
+    }
+    if (_facilities.length < slices) {
+      empty_slices += slices - _facilities.length;
+      entities++;
+    } else if (_facilities.length <= slices) {
+      total_entities++;
+    }
+
+    if (locations.length > slices && empty_slices > 0) {
+      const used_slices = Math.round(
+        empty_slices / (total_entities - entities),
+      );
+      _locations = locations.slice(0, slices + used_slices);
+      empty_slices -= used_slices;
+    } else {
+      total_entities--;
+    }
+
+    if (sites.length > slices && empty_slices > 0) {
+      const used_slices = Math.round(
+        empty_slices / (total_entities - entities),
+      );
+      _sites = sites.slice(0, slices + used_slices);
+      empty_slices -= used_slices;
+    } else {
+      total_entities--;
     }
 
-    return [..._locations, ..._sites];
-  }, [sites, locations, loading]);
+    if (facilities.length > slices && empty_slices > 0) {
+      const used_slices = Math.round(
+        empty_slices / (total_entities - entities),
+      );
+      _facilities = facilities.slice(0, slices + used_slices);
+      empty_slices -= used_slices;
+    } else {
+      total_entities--;
+    }
+
+    return [..._locations, ..._sites, ..._facilities];
+  }, [sites, facilities, locations, loading]);
 
   const handleClickOutside = React.useCallback((event) => {
     if (!doesNodeContainClick(searchContainer.current, event)) {
@@ -96,6 +159,7 @@ const Search = ({ data, providers_data, query, setQuery, ...props }) => {
       const requests = [];
       if (value.length >= 3) {
         requests.push(getSites(value));
+        requests.push(getFacilities(value));
         requests.push(getLocations(value, providers_data));
 
         Promise.all(requests).then((responses) => {
@@ -105,17 +169,24 @@ const Search = ({ data, providers_data, query, setQuery, ...props }) => {
               type: 'site',
             })) || [],
           );
+          setFacilities(
+            responses[1].data?.results?.map((item) => ({
+              text: item.facilityName,
+              type: 'facility',
+            })) || [],
+          );
           setLocations(
-            responses[1].data?.suggestions?.map((item) => ({
+            responses[2].data?.suggestions?.map((item) => ({
               ...item,
               type: 'location',
             })) || [],
           );
+          setLoading(false);
         });
-        setLoading(false);
       } else {
         setLoading(false);
         setSites([]);
+        setFacilities([]);
         setLocations([]);
       }
     },

diff --git a/src/components/manage/Blocks/IndustryDataTable/View.jsx b/src/components/manage/Blocks/IndustryDataTable/View.jsx
@@ -150,9 +150,6 @@ const getQuery = (query) => {
     ...(isNotEmpty(query.filter_countries)
       ? { 'countryCode[in]': query.filter_countries }
       : {}),
-    ...(query.filter_search?.text && query.filter_search?.type === 'search-site'
-      ? { siteName: query.filter_search.text }
-      : {}),
   };
   return obj;
 };
@@ -173,10 +170,32 @@ const getConditions = (query) => {
           query.filter_pollutant_groups.map((filter) => `%${filter}%`),
         )
       : []),
+    ...(query.filter_search?.text && query.filter_change?.type === 'search-site'
+      ? [
+          {
+            like: [
+              'siteName',
+              { literal: query.filter_search.text.replaceAll("'", "''") },
+            ],
+          },
+        ]
+      : []),
+    ...(query.filter_search?.text &&
+    query.filter_change?.type === 'search-facility'
+      ? [
+          {
+            like: [
+              'facilityNames',
+              { literal: query.filter_search.text.replaceAll("'", "''") },
+            ],
+          },
+        ]
+      : []),
   ];
 };
 
 const View = (props) => {
+  const table = React.useRef();
   const context = React.useContext(ConnectorContext);
   const [openedRow, setOpenedRow] = React.useState(null);
   const {
@@ -218,7 +237,7 @@ const View = (props) => {
   }, [JSON.stringify(query)]);
 
   return (
-    <div className="industry-table">
+    <div ref={table} className="industry-table">
       {row_size && tableData ? (
         <Table
           textAlign="left"
@@ -456,7 +475,9 @@ const View = (props) => {
                     <Menu.Item
                       as="a"
                       icon
-                      disabled={props.isPending || pagination.activePage === 1}
+                      disabled={
+                        props.loadingProviderData || pagination.activePage === 1
+                      }
                       onClick={() => {
                         if (pagination.activePage > 1) {
                           updatePagination({
@@ -469,7 +490,7 @@ const View = (props) => {
                     </Menu.Item>
                     <Menu.Item fitted>
                       <Loader
-                        disabled={!props.isPending}
+                        disabled={!props.loadingProviderData}
                         active
                         inline
                         size="tiny"
@@ -479,7 +500,7 @@ const View = (props) => {
                       as="a"
                       icon
                       disabled={
-                        props.isPending ||
+                        props.loadingProviderData ||
                         pagination.activePage === pagination.lastPage
                       }
                       onClick={() => {

diff --git a/src/components/manage/Blocks/IndustryMap/View.jsx b/src/components/manage/Blocks/IndustryMap/View.jsx
@@ -25,6 +25,7 @@ import {
   getLayerBaseURL,
   getLocationExtent,
   getSiteExtent,
+  getFacilityExtent,
   getCountriesExtent,
   getWhereStatement,
 } from './index';
@@ -197,6 +198,31 @@ class View extends React.PureComponent {
               });
           }
         });
+      } else if (filter_change.type === 'search-facility') {
+        getFacilityExtent(filter_search).then(({ data }) => {
+          const extent = data?.results?.[0] || {};
+          if (
+            extent.MIN_X === null ||
+            extent.MIN_Y === null ||
+            extent.MAX_X === null ||
+            extent.MAX_Y === null
+          ) {
+            toast.warn(
+              <Toast
+                warn
+                title=""
+                content={`No results for ${filter_search.text}`}
+              />,
+            );
+          } else {
+            this.map.current
+              .getView()
+              .fit([extent.MIN_X, extent.MIN_Y, extent.MAX_X, extent.MAX_Y], {
+                maxZoom: 16,
+                duration: 1000,
+              });
+          }
+        });
       } else if (
         (filter_change.type === 'advanced-filter' ||
           filter_change.type === 'simple-filter') &&

diff --git a/src/components/manage/Blocks/IndustryMap/index.js b/src/components/manage/Blocks/IndustryMap/index.js
@@ -192,13 +192,31 @@ export const getSiteExtent = (data) => {
     MAX(shape_wm.STX) AS MAX_X,
     MAX(shape_wm.STY) AS MAX_Y
     FROM [IED].[${db_version}].[SiteMap]
-    WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${data.text.replace(
+    WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${data.text.replaceAll(
       "'",
       "''",
     )}%'`)}`,
   );
 };
 
+export const getFacilityExtent = (data) => {
+  const db_version =
+    process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest';
+
+  let text = data.text.replaceAll('\n', '');
+  text = text.replaceAll("'", "''");
+
+  return axios.get(
+    `${config.settings.providerUrl}?${getEncodedQueryString(`SELECT
+    MIN(shape_wm.STX) AS MIN_X,
+    MIN(shape_wm.STY) AS MIN_Y,
+    MAX(shape_wm.STX) AS MAX_X,
+    MAX(shape_wm.STY) AS MAX_Y
+    FROM [IED].[${db_version}].[SiteMap]
+    WHERE [facilityNames] COLLATE Latin1_General_CI_AI LIKE '%${text}%'`)}`,
+  );
+};
+
 export const getCountriesExtent = (countries) => {
   const requests = [];
   countries.forEach((country) => {
@@ -313,6 +331,10 @@ export const getWhereStatement = (data) => {
     where[filter++] = [`siteName LIKE '${search.text}%'`];
   }
 
+  if (search?.type === 'facility' && search?.text) {
+    where[filter++] = [`facilityNames LIKE '${search.text}%'`];
+  }
+
   return where
     .filter((w) => w.length)
     .map((w) => `(${w.join(' OR ')})`)