@eeacms/volto-bise-policy 1.0.0

package/src/components/manage/Blocks/FactsheetsListing/FactsheetsListingEdit.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import FactsheetsListingView from './FactsheetsListingView';
+import schema from './schema';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
+class Edit extends Component {
+  render() {
+    const { selected, block, data, onChangeBlock } = this.props;
+    return (
+      <>
+        <FactsheetsListingView {...this.props} />
+
+        <SidebarPortal selected={selected}>
+          <InlineForm
+            schema={schema}
+            title={schema.title}
+            onChangeField={(id, value) => {
+              onChangeBlock(block, {
+                ...data,
+                [id]: value,
+              });
+            }}
+            formData={data}
+          />
+        </SidebarPortal>
+      </>
+    );
+  }
+}
+
+export default Edit;

package/src/components/manage/Blocks/FactsheetsListing/FactsheetsListingView.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Container, Accordion } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import { Link } from 'react-router-dom';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+const FactsheetsListingView = (props) => {
+  const { data, properties, id } = props;
+  const sections = [
+    {
+      '@id': id,
+      id,
+      title: data.block_title,
+      items: properties?.items || [],
+      factsheet_group_title: data.block_title,
+    },
+  ];
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  function handleClick(e, titleProps) {
+    const { index } = titleProps;
+    const newIndex = activeIndex === index ? -1 : index;
+
+    setActiveIndex(newIndex);
+  }
+
+  return (
+    <div className="factsheet-view">
+      <Container>
+        <Accordion fluid styled exclusive={false}>
+          {sections.map((section, index) => {
+            return (
+              <React.Fragment key={section['@id']}>
+                <Accordion.Title
+                  active={activeIndex === index}
+                  index={index}
+                  onClick={handleClick}
+                >
+                  <span className="section-title">{section.title}</span>
+                  <div className="accordion-tools">
+                    {activeIndex === index ? (
+                      <Icon name={upSVG} size="40px" color="#f3c715" />
+                    ) : (
+                      <Icon name={downSVG} size="40px" color="#f3c715" />
+                    )}
+                  </div>
+                </Accordion.Title>
+                <Accordion.Content
+                  className={section.id}
+                  active={activeIndex === index}
+                >
+                  <div
+                    className="fdl-listing-section"
+                    key={section['@id']}
+                    style={{ columns: data.cols || 3 }}
+                  >
+                    {section.items?.map((item) => (
+                      <div key={item['@id']}>
+                        <Link to={flattenToAppURL(item['@id'])}>
+                          {item.title}
+                        </Link>
+                        {section.factsheet_group_title && (
+                          <div>{item.factsheet_group}</div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </Accordion.Content>
+              </React.Fragment>
+            );
+          })}
+        </Accordion>
+      </Container>
+    </div>
+  );
+};
+
+export default FactsheetsListingView;

package/src/components/manage/Blocks/FactsheetsListing/index.js

@@ -0,0 +1,24 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import FactsheetsListingView from './FactsheetsListingView';
+import FactsheetsListingEdit from './FactsheetsListingEdit';
+
+export default (config) => {
+  config.blocks.blocksConfig.biseFactsheetListing = {
+    id: 'biseFactsheetListing',
+    title: 'Factsheets Listing',
+    icon: codeSVG,
+    group: 'custom_addons',
+    view: FactsheetsListingView,
+    edit: FactsheetsListingEdit,
+    restricted: false,
+    mostUsed: false,
+    blockHasOwnFocusManagement: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};

package/src/components/manage/Blocks/FactsheetsListing/schema.js

@@ -0,0 +1,20 @@
+const Schema = {
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['block_title', 'cols'],
+    },
+  ],
+  properties: {
+    block_title: {
+      title: 'Title',
+    },
+    cols: {
+      title: 'Number of columns',
+      widget: 'number',
+    },
+  },
+  required: [],
+};
+export default Schema;

package/src/components/manage/Blocks/KeyFacts/KeyFactsEdit.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { SidebarPortal } from '@plone/volto/components'; // EditBlock
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
+import schema from './schema';
+import KeyFactsView from './KeyFactsView';
+
+class Edit extends Component {
+  render() {
+    return (
+      <>
+        <KeyFactsView data={this.props.data} />
+
+        <SidebarPortal selected={this.props.selected}>
+          <InlineForm
+            schema={schema}
+            title={schema.title}
+            onChangeField={(id, value) => {
+              this.props.onChangeBlock(this.props.block, {
+                ...this.props.data,
+                [id]: value,
+              });
+            }}
+            formData={this.props.data}
+          />
+        </SidebarPortal>
+      </>
+    );
+  }
+}
+
+export default connect(null, {})(Edit);

package/src/components/manage/Blocks/KeyFacts/KeyFactsView.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import cx from 'classnames';
+import { Link } from 'react-router-dom';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+
+const View = ({ data }) => {
+  const { message, message_link, message_link_text, lines } = data;
+
+  return (
+    <div
+      className={cx(
+        'block align keyfacts-block',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      <div
+        className={cx({
+          'full-width': data.align === 'full',
+        })}
+      >
+        <div className="ui container block-wrapper">
+          <div className="title-wrapper">
+            <div className="title">
+              {message ? (
+                <>
+                  <div className="headline">{message}</div>
+                  {message_link && (
+                    <Link className="ui primary button" to={message_link}>
+                      {message_link_text}
+                    </Link>
+                  )}
+                </>
+              ) : (
+                ''
+              )}
+            </div>
+          </div>
+
+          <div className="facts-wrapper">
+            {(lines || []).map((line, i) => (
+              <div className="fact" key={i}>
+                {line.upper.data ? (
+                  <>
+                    <div
+                      className="upper"
+                      dangerouslySetInnerHTML={{ __html: line.upper.data }}
+                    />
+                    <div className="lower">{line.lower}</div>
+                  </>
+                ) : (
+                  <>
+                    <div className="upper">{serializeNodes(line.upper)}</div>
+                    <div className="lower">{serializeNodes(line.lower)}</div>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/KeyFacts/index.js

@@ -0,0 +1,22 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import KeyFactsView from './KeyFactsView';
+import KeyFactsEdit from './KeyFactsEdit';
+
+export default (config) => {
+  config.blocks.blocksConfig.keyfacts = {
+    id: 'keyfacts',
+    title: 'Key Facts',
+    icon: codeSVG,
+    group: 'custom_addons',
+    view: KeyFactsView,
+    edit: KeyFactsEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/KeyFacts/schema.jsx

@@ -0,0 +1,74 @@
+// import React from 'react';
+
+const LineSchema = {
+  title: 'Line',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['upper', 'lower'],
+    },
+  ],
+
+  properties: {
+    upper: {
+      title: 'Upper text',
+      widget: 'slate_richtext',
+    },
+    lower: {
+      title: 'Lower',
+      widget: 'slate_richtext',
+    },
+  },
+
+  required: ['upper', 'lower'],
+};
+
+const KeyFactsSchema = {
+  title: 'KeyFacts',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'message',
+        'message_link_text',
+        'message_link',
+        'lines',
+        'align',
+      ],
+    },
+  ],
+
+  properties: {
+    lines: {
+      widget: 'object_list',
+      title: 'Lines',
+      // this is an invention, should confront with dexterity serializer
+      schema: LineSchema,
+    },
+    align: {
+      title: 'Alignment',
+      widget: 'align',
+      type: 'string',
+    },
+    message: {
+      type: 'string',
+      title: 'Key message',
+    },
+    message_link_text: {
+      type: 'string',
+      title: 'Key message link text',
+    },
+    message_link: {
+      widget: 'object_by_path',
+      title: 'Key message link',
+    },
+  },
+
+  required: ['lines'],
+};
+
+export default KeyFactsSchema;

package/src/components/manage/Blocks/MaesViewer/MaesViewerEdit.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import cx from 'classnames';
+import { SidebarPortal } from '@plone/volto/components'; // EditBlock
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
+import MaesViewerSchema from './schema';
+import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
+import MaesViewerView from './MaesViewerView';
+import { defaultHoverTemplate } from './constants';
+
+class Edit extends Component {
+  constructor(props) {
+    super(props);
+    this.schema = MaesViewerSchema();
+  }
+
+  getSchema = () => {
+    if (!this.props.provider_data) return this.schema;
+    const provider_data = this.props.provider_data || {};
+
+    const select_field = 'Ecosystem_level2';
+    const choices = Array.from(
+      new Set(provider_data?.[select_field] || []),
+    ).map((n) => [n, n]);
+
+    const newSchema = this.schema;
+    newSchema.properties.ecosystem.choices = choices;
+
+    if (this.props.data && !this.props.data.hoverTemplate) {
+      this.props.onChangeBlock(this.props.block, {
+        ...this.props.data,
+        hoverTemplate: defaultHoverTemplate,
+      });
+    }
+
+    return newSchema;
+  };
+
+  render() {
+    const schema = this.getSchema();
+    return (
+      <div className={cx('block', { selected: this.props.selected })}>
+        <MaesViewerView data={this.props.data} />
+
+        <SidebarPortal selected={this.props.selected}>
+          <InlineForm
+            schema={schema}
+            title={schema.title}
+            onChangeField={(id, value) => {
+              this.props.onChangeBlock(this.props.block, {
+                ...this.props.data,
+                [id]: value,
+              });
+            }}
+            formData={this.props.data}
+          />
+        </SidebarPortal>
+      </div>
+    );
+  }
+}
+
+export default compose(connectToProviderData)(Edit);

package/src/components/manage/Blocks/MaesViewer/MaesViewerView.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { compose } from 'redux';
+import cx from 'classnames';
+import loadable from '@loadable/component';
+
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  Option,
+  selectTheme,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
+import { makeChartTiles } from './utils';
+
+import './style.css';
+
+const Select = loadable(() => import('react-select'));
+const LoadablePlot = loadable(() => import('react-plotly.js'));
+
+const SelectCountry = (props) => {
+  const { id, onChange, data } = props;
+  const countries = Array.from(new Set(data['Country_name']));
+  const options = countries
+    .map((c) => ({ label: c, value: c }))
+    .concat({ label: 'EU', value: 'EU' });
+  return (
+    <Select
+      id={`field-${id}`}
+      name={id}
+      className="react-select-container"
+      classNamePrefix="react-select"
+      isMulti={id === 'roles' || id === 'groups'}
+      options={options}
+      styles={customSelectStyles}
+      theme={selectTheme}
+      components={{ DropdownIndicator, Option }}
+      defaultValue={null}
+      onChange={onChange}
+      placeholder="Select country..."
+    />
+  );
+};
+
+const View = ({ data, provider_data, id, ...rest }) => {
+  const focusEcosystem = data.ecosystem;
+  const [focusOn, setFocusOn] = React.useState();
+  const [multiCharts, setMultiCharts] = React.useState([]);
+  const [firstRender, setFirstRender] = React.useState(true);
+  React.useEffect(() => {
+    if (provider_data) {
+      const { hoverTemplate } = data;
+      const ct = makeChartTiles(provider_data, focusOn, focusEcosystem, {
+        hoverTemplate,
+      });
+      setMultiCharts(ct);
+
+      // TODO: avoid this hack:
+      // hack to make the first-in-time selected country's label appear above
+      // the blue disc in the View of the MAES Viewer block
+      // (to make sure the hack is not needed anymore, remove this piece of code
+      // and if in the View of the page with the MAES Viewer's block the View of
+      // the MAES Viewer does not show the text above the black disc when first
+      // selecting a country in the CountrySelect, the hack is still needed
+      // because plotly.js or react-plotly.js puts the label of the black disc
+      // asynchronously and I think there is no Promise to depend on it)
+      if (firstRender) {
+        setTimeout(() => {
+          setFirstRender(false);
+        }, 2000);
+      }
+    }
+  }, [provider_data, focusOn, focusEcosystem, data, firstRender]);
+
+  return (
+    <div className={cx('block align', data.align)}>
+      <div
+        className={cx({
+          'full-width': data.align === 'full',
+        })}
+      >
+        <h3>{data.title}</h3>
+        {/* <div className="block-wrapper">{JSON.stringify(data)}</div> */}
+
+        <div className="maes-viewer-grid">
+          <div className="maes-viewer-select">
+            {provider_data && (
+              <>
+                <span className="maes-select-label">
+                  Compare countries across Europe
+                </span>
+                <SelectCountry
+                  data={provider_data}
+                  id={`${id}-select-country`}
+                  onChange={(data) => {
+                    setFocusOn(data.value);
+                  }}
+                  defaultValue={
+                    focusOn ? { value: focusOn, label: focusOn } : null
+                  }
+                />
+              </>
+            )}
+            <div>{serializeNodes(data.description)}</div>
+          </div>
+          <div className="maes-viewer-charts">
+            {provider_data
+              ? multiCharts.map((chart, index) => {
+                  return (
+                    <>
+                      <div>{chart.title}</div>
+                      <LoadablePlot
+                        key={index}
+                        data={chart.data}
+                        layout={chart.layout}
+                        frames={[]}
+                        config={{
+                          displayModeBar: false,
+                          editable: false,
+                          responsive: true,
+                        }}
+                        useResizeHandler={true}
+                      />
+                    </>
+                  );
+                })
+              : ''}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default compose(connectToProviderData)(View);

package/src/components/manage/Blocks/MaesViewer/constants.js

@@ -0,0 +1 @@
+export const defaultHoverTemplate = '%{country}: %{x:,.02s}m²<extra></extra>';

package/src/components/manage/Blocks/MaesViewer/index.js

@@ -0,0 +1,22 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import MaesViewerView from './MaesViewerView';
+import MaesViewerEdit from './MaesViewerEdit';
+
+export default (config) => {
+  config.blocks.blocksConfig.maesviewer = {
+    id: 'maesviewer',
+    title: 'MAES Viewer',
+    icon: codeSVG,
+    group: 'custom_addons',
+    view: MaesViewerView,
+    edit: MaesViewerEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/MaesViewer/schema.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { defaultHoverTemplate } from './constants';
+
+const MaesViewerSchema = () => ({
+  title: 'Edit MAES Viewer',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'description'],
+    },
+    {
+      id: 'source',
+      title: 'Data source',
+      fields: ['provider_url', 'ecosystem', 'hoverTemplate'],
+    },
+  ],
+
+  properties: {
+    title: {
+      title: 'Title',
+      widget: 'string',
+    },
+    description: {
+      title: 'Description',
+      widget: 'slate_richtext',
+    },
+    provider_url: {
+      widget: 'pick_provider',
+      title: 'Data provider',
+    },
+    ecosystem: {
+      title: 'Ecosystem',
+      choices: [],
+    },
+    hoverTemplate: {
+      title: 'Hover template',
+      description: (
+        <div>
+          {'You can use %{country}, %{km2} and %{mm2}.'}
+          <br />
+          See{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format"
+          >
+            D3 format documentation
+          </a>
+        </div>
+      ),
+      defaultValue: defaultHoverTemplate,
+    },
+  },
+
+  required: ['provider_url'],
+});
+
+export default MaesViewerSchema;