Added PollutantIndex Block; Flags feature

src/actions/index.js

@@ -15,6 +15,7 @@ import {
   GET_PARENT_FOLDER_DATA,
   GET_PAGE,
   GET_SPARQL_DATA,
+  SET_FLAGS,
 } from '~/constants/ActionTypes';
 
 export function setSectionTabs(payload) {
@@ -55,3 +56,12 @@ export function getSparqlData(path) {
     },
   };
 }
+
+export function setFlags(packageKey, id, flags) {
+  return {
+    type: SET_FLAGS,
+    packageKey,
+    id,
+    flags,
+  };
+}

src/components/manage/Blocks/ArticlesSparql/View.jsx

@@ -60,12 +60,12 @@ const View = (props) => {
             isVisible(index) ? (
               <div
                 className={cx(
-                  'row articles-row mb-1 sm-height-fit-content',
+                  'row articles-row mb-1 xs-height-fit-content sm-height-fit-content',
                   index !== activeItem && preview ? 'can-be-half' : '',
                 )}
                 key={`sparql-row-${index}-${item.title}`}
               >
-                <div className="column-4 sm-12 article hero pa-1">
+                <div className="column-4 xs-12 sm-12 article hero pa-1">
                   <Image
                     src={secureRequest(
                       item.image ||
@@ -76,7 +76,7 @@ const View = (props) => {
                     )}
                   />
                 </div>
-                <div className="column-8 sm-12 article pa-1">
+                <div className="column-8 xs-12 sm-12 article pa-1">
                   <div className="article-header">
                     <h3 className="mb-0">{item.title}</h3>
                   </div>

src/components/manage/Blocks/ArticlesSparql/style.css

@@ -97,6 +97,12 @@
   }
 }
 
+@media (max-width: 500px) {
+  .xs-height-fit-content {
+    height: fit-content !important;
+  }
+}
+
 @media (max-width: 768px) {
   .articles .articles-row.can-be-half:last-child  {
     transform: translateY(-10%);

src/components/manage/Blocks/Flags/Edit.jsx

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import _uniqueId from 'lodash/uniqueId';
+import View from './View';
+import './style.css';
+
+const Edit = (props) => {
+  const [state, setState] = useState({
+    id: _uniqueId('block_'),
+  });
+  return (
+    <div>
+      <View {...props} id={state.id} mode="edit" />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    pathname: state.router.location.pathname,
+  })),
+)(Edit);

src/components/manage/Blocks/Flags/View.jsx

@@ -0,0 +1,60 @@
+/* REACT */
+import React, { useState, useEffect } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { setFlags } from '~/actions';
+import './style.css';
+
+const View = (props) => {
+  const flags = props.flags;
+  const siteInspireId = props.discodata_query.search.siteInspireId;
+  const site = props.discodata_resources.data.sites_6?.[siteInspireId];
+  const facilities = site?.results;
+  useEffect(() => {
+    if (site && siteInspireId && !flags.items.sites?.[siteInspireId]) {
+      const facilitiesFlags = {};
+      props.setFlags('sites', siteInspireId, {
+        has_facilities: site.has_facilities,
+        has_fuel_data: site.has_fuel_data,
+        has_installations: site.has_installations,
+        has_lcps: site.has_lcps,
+        has_ophours_data: site.has_ophours_data,
+        has_release_data: site.has_release_data,
+        has_transfer_data: site.has_transfer_data,
+        has_waste_data: site.has_waste_data,
+      });
+      facilities.forEach((facility) => {
+        if (
+          facility &&
+          !flags.items.facilities?.[facility.facilityInspireId] &&
+          !facilitiesFlags[facility.facilityInspireId]
+        ) {
+          facilitiesFlags[facility.facilityInspireId] = {
+            has_fuel_data: facility.facility_has_fuel_data,
+            has_installations: facility.facility_has_installations,
+            has_lcps: facility.facility_has_lcps,
+            has_ophours_data: facility.facility_has_ophours_data,
+            has_release_data: facility.facility_has_release_data,
+            has_transfer_data: facility.facility_has_transfer_data,
+            has_waste_data: facility.facility_has_waste_data,
+          };
+        }
+      });
+      props.setFlags('facilities', null, facilitiesFlags);
+    }
+  }, [siteInspireId, JSON.stringify(site)]);
+
+  return <div>{props.mode === 'edit' ? <p>Flags</p> : ''}</div>;
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      query: state.router.location.search,
+      flags: state.flags,
+      discodata_query: state.discodata_query,
+      discodata_resources: state.discodata_resources,
+    }),
+    { setFlags },
+  ),
+)(View);

src/components/manage/Blocks/Flags/style.css

@@ -0,0 +1,3 @@
+.embeded-iframe {
+    border: none;
+}

src/components/manage/Blocks/NavigationBlock/View.jsx

@@ -47,6 +47,30 @@ const View = ({ content, ...props }) => {
               activeItem: '',
             });
           }
+          if (
+            props.discodata_query.search.siteInspireId &&
+            props.flags.items.sites?.[
+              props.discodata_query.search.siteInspireId
+            ] &&
+            item.title === 'Regulatory information' &&
+            !props.flags.items.sites?.[
+              props.discodata_query.search.siteInspireId
+            ]?.has_installations
+          ) {
+            return '';
+          }
+          if (
+            props.discodata_query.search.siteInspireId &&
+            props.flags.items.sites?.[
+              props.discodata_query.search.siteInspireId
+            ] &&
+            item.title === 'Large-scale fuel combustion' &&
+            !props.flags.items.sites?.[
+              props.discodata_query.search.siteInspireId
+            ]?.has_lcps
+          ) {
+            return '';
+          }
           return (
             <Menu.Item
               className={cx(
@@ -95,6 +119,7 @@ export default compose(
         state.prefetch?.[state.router.location.pathname] || state.content.data,
       pathname: state.router.location.pathname,
       discodata_query: state.discodata_query,
+      flags: state.flags,
       navigation: getNavigationByParent(
         state.navigation.items,
         props.data?.parent?.value,