@eeacms/volto-marine-policy 1.0.0

package/src/components/theme/Tableau/TableauFullscreen.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Modal, Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import { useHistory, useLocation } from 'react-router-dom';
+import fullscreenSVG from '@plone/volto/icons/fullscreen.svg';
+
+import config from '@plone/volto/registry';
+
+const TableauFullscreen = (props) => {
+  const tableau_url = props.data.url;
+  const modalHash = props?.item.getId + '_preview';
+  const [open, setOpen] = React.useState(false);
+  const history = useHistory();
+  const location = useLocation();
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TableauBlockView = blocksConfig.tableau_block.view;
+
+  React.useEffect(() => {
+    if (location.hash.includes(modalHash)) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [location, modalHash]);
+
+  const closeModal = () => {
+    history.push({
+      hash: '',
+    });
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <div className="toolbar-button-wrapper">
+        <Button
+          className="toolbar-button"
+          title="Full Screen"
+          onClick={() => {
+            setOpen(true);
+            if (props.item) {
+              history.push({
+                hash: props.item.getId + '_preview',
+              });
+            }
+          }}
+        >
+          <Icon name={fullscreenSVG} size="23px" />
+        </Button>
+        <span className="btn-text">Enlarge</span>
+      </div>
+
+      <Modal
+        className="tableau-fullscreen"
+        onClose={closeModal}
+        onOpen={() => setOpen(true)}
+        open={open}
+      >
+        <Modal.Content>
+          <TableauBlockView
+            {...props}
+            data={{ url: tableau_url, hideToolbar: true }}
+          ></TableauBlockView>
+        </Modal.Content>
+
+        <Modal.Actions>
+          <Button primary onClick={closeModal}>
+            Close
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default TableauFullscreen;

package/src/components/theme/Tableau/TableauShare.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { Popup, Tab, Button, Menu, Input } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import { useCopyToClipboard } from '@eeacms/volto-marine-policy/helpers';
+
+import shareSVG from '@plone/volto/icons/share.svg';
+import codeSVG from '@plone/volto/icons/code.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+
+import cx from 'classnames';
+
+const TableauShare = (props) => {
+  const tableau_url = props.data.url;
+
+  const embedContent = () => {
+    var pathArray = tableau_url.split('/');
+    var t_siteRoot = '/' + pathArray[3] + '/' + pathArray[4];
+    var t_name = pathArray[6] + '/' + pathArray[7].split('?')[0];
+    var t_filter = pathArray[7].split('?')[1];
+    t_filter = t_filter.split('&:')[0];
+
+    var embed =
+      "<script type='text/javascript'" +
+      "src='https://tableau.discomap.eea.europa.eu/javascripts/api/viz_v1.js'></script>" +
+      "<div class='tableauPlaceholder' style='width: 100%; height: 850px;'>" +
+      "<object class='tableauViz' width='100%' height='850' style='display:none;'>" +
+      "<param name='host_url' value='https%3A%2F%2Ftableau.discomap.eea.europa.eu%2F' />" +
+      "<param name='site_root' value='" +
+      t_siteRoot +
+      "' />" +
+      "<param name='name' value='" +
+      t_name +
+      "' />" +
+      "<param name='filter' value='" +
+      t_filter +
+      "'/>" +
+      "<param name='toolbar' value='no' />" +
+      "<param name='isGuestRedirectFromVizportal' value='y' />" +
+      '</object>' +
+      '</div>';
+
+    return embed;
+  };
+
+  const CopyUrlButton = ({ url, buttonText }) => {
+    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
+
+    if (copyUrlStatus === 'copied') {
+      buttonText = 'Copied!';
+    } else if (copyUrlStatus === 'failed') {
+      buttonText = 'Copy failed. Please try again.';
+    }
+
+    return (
+      <Button
+        primary
+        onClick={copyUrl}
+        className={cx('copy-button', {
+          'green-button': copyUrlStatus === 'copied',
+        })}
+      >
+        {buttonText}
+      </Button>
+    );
+  };
+
+  const panes = [
+    {
+      menuItem: (
+        <Menu.Item key="location">
+          <span className="nav-dot">
+            <Icon name={linkSVG} size="24px" />
+          </span>
+          <span className="nav-dot-title">URL</span>
+        </Menu.Item>
+      ),
+      render: () => (
+        <Tab.Pane>
+          <Input defaultValue={tableau_url} />
+          <CopyUrlButton url={tableau_url} buttonText="Copy sharing URL" />
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: (
+        <Menu.Item key="messages">
+          <span className="nav-dot">
+            <Icon name={codeSVG} size="24px" />
+          </span>
+          <span className="nav-dot-title">Embed</span>
+        </Menu.Item>
+      ),
+      render: () => (
+        <Tab.Pane>
+          <textarea defaultValue={embedContent()} />
+          <CopyUrlButton url={embedContent()} buttonText="Copy embed code" />
+        </Tab.Pane>
+      ),
+    },
+  ];
+
+  return (
+    <Popup
+      basic
+      className="tableau-share-dialog"
+      position="top center"
+      on="click"
+      trigger={
+        <div className="toolbar-button-wrapper">
+          <Button className="toolbar-button" title="Share">
+            <Icon name={shareSVG} size="26px" />
+          </Button>
+          <span className="btn-text">Share</span>
+        </div>
+      }
+    >
+      <Popup.Header>Share Dashboard</Popup.Header>
+      <Popup.Content>
+        <Tab
+          menu={{ secondary: true, pointing: true, fluid: true }}
+          panes={panes}
+        />
+      </Popup.Content>
+    </Popup>
+  );
+};
+
+export default TableauShare;

package/src/components/theme/View/FullwidthView.jsx

@@ -0,0 +1,102 @@
+/**
+ * Document view component.
+ * @module components/theme/View/FullwidthView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import { map } from 'lodash';
+import {
+  BodyClass,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+});
+
+/**
+ * Component to display the default view.
+ * @function FullwidthView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const FullwidthView = ({ content, intl, location }) => {
+  const blocksFieldName = getBlocksFieldname(content);
+  const hasContentImage = content.image;
+  const blocksLayoutFieldName = getBlocksLayoutFieldname(content);
+
+  return hasBlocksData(content) ? (
+    <div id="page-document" className="ui container">
+      <BodyClass className="fullwidth-view" />
+
+      {map(content[blocksLayoutFieldName].items, (block) => {
+        const block_data = content[blocksFieldName]?.[block];
+        const block_type = block_data?.['@type'];
+        const Block = config.blocks?.blocksConfig[block_type]?.['view'] || null;
+        return Block !== null ? (
+          <React.Fragment key={block}>
+            {(block_type !== 'title' || !hasContentImage) && (
+              <Block
+                key={block}
+                id={block}
+                properties={content}
+                data={block_data}
+                path={getBaseUrl(location?.pathname || '')}
+              />
+            )}
+          </React.Fragment>
+        ) : (
+          <div key={block}>
+            {intl.formatMessage(messages.unknownBlock, {
+              block: block_type,
+            })}
+          </div>
+        );
+      })}
+    </div>
+  ) : (
+    <Container id="page-document" />
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FullwidthView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default injectIntl(FullwidthView);

package/src/components/theme/View/HeroSectionView.jsx

@@ -0,0 +1,125 @@
+/**
+ * Document view component.
+ * @module components/theme/View/HeroSectionView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { Container } from 'semantic-ui-react';
+import { map } from 'lodash';
+
+import config from '@plone/volto/registry';
+
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+});
+
+/**
+ * Component to display the default view.
+ * @function HeroSectionView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const HeroSectionView = ({ content, intl, location }) => {
+  const blocksFieldName = getBlocksFieldname(content);
+  const hasContentImage = content.image;
+  const blocksLayoutFieldName = getBlocksLayoutFieldname(content);
+
+  return hasBlocksData(content) ? (
+    <div id="page-document" className="ui container">
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: content.text.data,
+          }}
+        />
+      )}
+
+      {map(content[blocksLayoutFieldName].items, (block) => {
+        const block_data = content[blocksFieldName]?.[block];
+        const block_type = block_data?.['@type'];
+        const Block = config.blocks?.blocksConfig[block_type]?.['view'] || null;
+        return Block !== null ? (
+          <React.Fragment key={block}>
+            {(block_type !== 'title' || !hasContentImage) && (
+              <Block
+                key={block}
+                id={block}
+                properties={content}
+                data={block_data}
+                path={getBaseUrl(location?.pathname || '')}
+              />
+            )}
+          </React.Fragment>
+        ) : (
+          <div key={block}>
+            {intl.formatMessage(messages.unknownBlock, {
+              block: block_type,
+            })}
+          </div>
+        );
+      })}
+    </div>
+  ) : (
+    <Container id="page-document">
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: content.text.data,
+          }}
+        />
+      )}
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+HeroSectionView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default injectIntl(HeroSectionView);

package/src/constants/ActionTypes.js

@@ -0,0 +1,12 @@
+/**
+ * Action types.
+ * @module constants/ActionTypes
+ */
+
+export const ADD_TO_BASKET = 'ADD_TO_BASKET';
+export const REMOVE_FROM_BASKET = 'REMOVE_FROM_BASKET';
+export const GET_BOOKMARK = 'GET_BOOKMARK';
+export const ADD_BOOKMARK = 'ADD_BOOKMARK';
+export const PUT_BOOKMARK = 'PUT_BOOKMARK';
+export const DELETE_BOOKMARK = 'DELETE_BOOKMARK';
+export const GET_ALL_BOOKMARKS = 'GET_ALL_BOOKMARKS';

package/src/constants/measureFields.js

@@ -0,0 +1,56 @@
+const fields = [
+  { field: 'sector', title: 'Sector' },
+  { field: 'origin', title: 'Origin of the measure' },
+  { field: 'use', title: 'Use or activity' },
+  { field: 'nature', title: 'Nature of the measure' },
+  { field: 'status', title: 'Status' },
+  { field: 'impacts', title: 'Measure impacts to' },
+  {
+    field: 'impacts_further_details',
+    title: 'Measure Impacts to (further details)',
+  },
+  { field: 'water_body_cat', title: 'Water body category' },
+  { field: 'spatial_scope', title: 'Spatial scope' },
+  { field: 'country_coverage', title: 'Country' },
+  { field: 'descriptors', title: 'Descriptors' },
+  {
+    field: 'nature_of_physical_modification',
+    title: 'Nature of physical modification',
+  },
+  { field: 'effect_on_hydromorphology', title: 'Effect on hydromorphology' },
+  { field: 'ecological_impacts', title: 'Ecological impacts' },
+  { field: 'links_to_existing_policies', title: 'Link to existing policies' },
+  { field: 'ktms_it_links_to', title: 'KTMs it links to' },
+  { field: 'relevant_targets', title: 'Relevant targets' },
+  {
+    field: 'relevant_features_from_msfd_annex_iii',
+    title: 'Relevant features from MSFD Annex III',
+  },
+  { field: 'msfd_spatial_scope', title: 'MSFD Spatial scope' },
+  { field: 'measure_purpose', title: 'Measure purpose' },
+  { field: 'measure_location', title: 'Measure location' },
+  { field: 'measure_response', title: 'Measure response' },
+  { field: 'measure_additional_info', title: 'Measure additional info' },
+  { field: 'pressure_type', title: 'Type of pressure' },
+  { field: 'pressure_name', title: 'Pressure name' },
+  { field: 'ranking', title: 'Ranking' },
+  { field: 'region', title: 'Region' },
+  { field: 'mspd_implementation_status', title: 'MSPD implementation status' },
+  { field: 'shipping_tackled', title: 'Shipping Tackled' },
+  { field: 'traffic_separation_scheme', title: 'Traffic separation scheme' },
+  { field: 'priority_areas', title: 'Priority Areas' },
+  { field: 'approaching_areas', title: 'Approaching Areas' },
+  { field: 'precautionary_areas', title: 'Precautionary areas' },
+  { field: 'areas_to_be_avoided', title: 'Areas to be avoided' },
+  { field: 'future_scenarios', title: 'Future Scenarios' },
+  { field: 'source', title: 'Source' },
+  { field: 'authority', title: 'Authority' },
+  { field: 'general_view', title: 'General View' },
+  { field: 'ports', title: 'Ports' },
+  { field: 'future_expectations', title: 'Future Expectations' },
+  { field: 'safety_manner', title: 'Safety manner' },
+  { field: 'objective', title: 'Objective' },
+  { field: 'categories', title: 'Categories' },
+];
+
+export { fields };