Added FacilityBlock and RegulatoryInformationBlock

src/components/manage/Blocks/DefaultEdit.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import RenderFields from 'volto-addons/Widgets/RenderFields';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { settings } from '~/config';
+
+import DB from '~/components/manage/DataBase/DB';
+
+const DefaultEdit = props => {
+  useEffect(() => {
+    if (
+      props.data?.sql_select?.value.table &&
+      props.data?.sql_select?.value.columnKey &&
+      props.data?.sql_select?.value.columnValue
+    )
+      DB.table(
+        props.data?.provider_url?.value || settings.providerUrl,
+        props.data?.sql_select?.value.table,
+      )
+        .get()
+        .where(
+          props.data?.sql_select?.value.where,
+          props.data?.sql_select?.value.columnKey,
+        )
+        .where(
+          props.data?.data_query?.value?.i,
+          props.data?.data_query?.value?.v,
+        )
+        .log();
+    /* eslint-disable-next-line */
+  }, [props.data?.data_query?.value, props.data?.sql_select?.value])
+  return (
+    <div>
+      <RenderFields schema={props.schema} {...props} title={props.title} />
+    </div>
+  );
+};
+export default compose(
+  connect((state, props) => ({
+    connected_data_parameters: state.connected_data_parameters,
+    pathname: state.router.location.pathname,
+  })),
+)(DefaultEdit);

src/components/manage/Blocks/DefaultView.jsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import _uniqueId from 'lodash/uniqueId';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import {
+  setConnectedDataParameters,
+  deleteConnectedDataParameters,
+} from 'volto-datablocks/actions';
+
+import { getSchemaWithDataQuery, objectHasData, getBasePath } from '~/helpers';
+
+const DefaultView = props => {
+  const [state, setState] = useState({
+    id: _uniqueId('block_'),
+    schemaWithDataQuery: null,
+    dataQueryKeys: [],
+    ids: [],
+  });
+  const id = props.id || state.id;
+  const path = getBasePath(props.pathname);
+  useEffect(() => {
+    //  Set schema adding data_query if needed
+    const schemaWithDataQuery = getSchemaWithDataQuery({ ...props, path });
+    setState({ ...state, schemaWithDataQuery });
+    /* eslint-disable-next-line */
+  }, [props.connected_data_parameters?.byContextPath, props.connected_data_parameters?.byProviderPath]);
+
+  useEffect(() => {
+    //  Set data_query keys and ids
+    if (state.schemaWithDataQuery) {
+      const dataQueryKeys = [];
+      const ids = [];
+      Object.keys(state.schemaWithDataQuery).forEach(element => {
+        if (state.schemaWithDataQuery[element].type === 'data-query') {
+          dataQueryKeys.push(element);
+          ids.push(`${id}_${element}`);
+        }
+      });
+      setState({ ...state, dataQueryKeys, ids });
+    }
+    /* eslint-disable-next-line */
+  }, [state.schemaWithDataQuery]);
+  //  Update connected_data_parameters if data_query available in data.columns
+  __CLIENT__ &&
+    state.dataQueryKeys.forEach((key, index) => {
+      if (
+        !objectHasData(
+          props.connected_data_parameters?.byProviderPath?.[path],
+        ) &&
+        !objectHasData(
+          props.connected_data_parameters?.byContextPath?.[path],
+        ) &&
+        !props.connected_data_parameters?.byPath?.[path]?.override?.[
+          state.ids[index]
+        ] &&
+        props.data?.columns?.[key]?.value?.i &&
+        props.data?.columns?.[key]?.value?.v
+      ) {
+        props.dispatch(
+          setConnectedDataParameters(
+            path,
+            props.data.columns[key].value,
+            state.ids[index],
+          ),
+        );
+      }
+    });
+  useEffect(() => {
+    props.onChange && props.onChange(state);
+    return () => {
+      //  Delete connected data parrameters on Unmount
+      __CLIENT__ &&
+        state.dataQueryKeys &&
+        state.dataQueryKeys.forEach((key, index) => {
+          props.dispatch(deleteConnectedDataParameters(path, state.ids[index]));
+        });
+    };
+    /* eslint-disable-next-line */
+  }, [state]);
+  return props.view;
+};
+
+export default compose(
+  connect((state, props) => ({
+    connected_data_parameters: state.connected_data_parameters,
+    pathname: state.router.location.pathname,
+  })),
+)(DefaultView);

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

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import _uniqueId from 'lodash/uniqueId';
+import DefaultEdit from '../DefaultEdit';
+import View from './View';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { settings } from '~/config';
+
+const schema = {
+  provider_url: {
+    title: 'Provider url',
+    type: 'text',
+    default: '',
+  },
+  sql_select: {
+    type: 'sql',
+  },
+  data_query: {
+    iTitle: 'Where column',
+    vTitle: 'Is equal to',
+    type: 'data-query',
+  },
+};
+
+const Edit = props => {
+  const [state] = useState({
+    id: _uniqueId('block_'),
+  });
+  useEffect(() => {
+    schema.provider_url.default = settings.providerUrl;
+  }, []);
+  return (
+    <div>
+      <DefaultEdit schema={schema} {...props} title="Facility block" />
+      <View {...props} id={state.id} />
+    </div>
+  );
+};
+export default compose(
+  connect((state, props) => ({
+    connected_data_parameters: state.connected_data_parameters,
+    pathname: state.router.location.pathname,
+  })),
+)(Edit);

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

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import DB from '~/components/manage/DataBase/DB';
+
+import DefaultView from '../DefaultView';
+
+import moment from 'moment';
+import './style.css';
+
+//  STATIC DATA
+//  ==================
+const facility = {
+  siteName: ' "ASM BRESCIA" - BOSCO SELLA',
+  countryCode: 'IT',
+  'Site Inspire ID': '2',
+  mainActivity:
+    '1(c) Thermal power stations and other combustion installations',
+  Regulation: 'regulatoryType',
+  shape_wm_as_text: 'POINT (1122835 5710975)',
+  NUTS: 'Nord-Ovest, Lombardia, Brescia',
+  riverBasin: 'RBD PADANO',
+  'Facility Main Activity':
+    'Thermal power stations and other combustion installations',
+  nationalId: '250452007.SITE',
+  OrganizationName: 'ISPRA',
+  ContactMail: 'protocollo.ispra@ispra.legalmail.it',
+  'Auth Address': 'ISPRA Via Vitaliano Brancati 48 Roma 00144',
+  ContactPerson: 'ISPRA',
+  authLastUpdated: '2018-05-15T06:37:00',
+  eprtrReportingDate: '2020-05-15T06:37:00',
+  eprtrReportingYear: 2020,
+  'Facility inspire ID': '2007000854',
+};
+const metadata = [
+  { label: 'Name', id: 'siteName' },
+  { label: 'Contact Person', id: 'ContactPerson' },
+  { label: 'Phone', id: 'ContactPhone', default: '++421-2-59415291' },
+  { label: 'Address', id: 'Auth Address' },
+  { label: 'E-mail', id: 'ContactMail' },
+];
+//  ==================
+
+const View = props => {
+  const [state, setState] = useState({
+    onChange: newState => {
+      setState({ ...state, ...newState });
+    },
+  });
+  const view = (
+    <div className="facility-block-wrapper">
+      <div className="flex flex-row align-center space-between responsive">
+        <div className="flex flex-column">
+          <h1 className="mb-0 bold light-blue">[facilityName1]</h1>
+          <p>Industrial activity</p>
+          <p>{facility.mainActivity}</p>
+        </div>
+        <div className="banner flex">
+          <div className="flex-item">
+            <p className="lighter">Last report was submitted on:</p>
+            <p className="bold">
+              {moment(facility.eprtrReportingDate).format('DD MMM YYYY')}
+            </p>
+          </div>
+          <div className="flex-item">
+            <p className="bold">Reporting year</p>
+            <p className="lighter">{facility.eprtrReportingYear}</p>
+          </div>
+          <div className="flex-item">
+            <p className="bold">Publish date</p>
+            <p className="lighter">
+              {moment(facility.eprtrReportingDate).format('DD MMM YYYY')}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="mt-2">
+        <h1 className="mb-0 bold light-blue">Competent Authority</h1>
+        <p className="info">
+          Last updated: {moment(facility.authLastUpdated).format('DD MMM YYYY')}
+        </p>
+      </div>
+      <div className="mt-2 grid grid-cl-3 responsive metadata">
+        {metadata.map(meta =>
+          facility[meta.id] ? (
+            <div>
+              <p className="bold mb-0">{meta.label}</p>
+              <p className="info dark">{facility[meta.id]}</p>
+            </div>
+          ) : meta.default ? (
+            <div>
+              <p className="bold mb-0">{meta.label}</p>
+              <p className="info dark">{meta.default}</p>
+            </div>
+          ) : (
+            ''
+          ),
+        )}
+      </div>
+    </div>
+  );
+  return view;
+  // return (
+  //   <DefaultView
+  //     {...props}
+  //     schema={schema}
+  //     view={view}
+  //     onChange={state.onChange}
+  //   />
+  // );
+};
+
+export default View;