@eeacms/volto-marine-policy 0.1.20

package/src/components/Widgets/MeasureViewWidget.jsx

@@ -0,0 +1,233 @@
+import React, { useState } from 'react';
+import { Portal } from 'react-portal';
+import { fields } from '@eeacms/volto-marine-policy/constants/measureFields';
+import String from './String';
+import { Accordion } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import { BodyClass } from '@plone/volto/helpers';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import './measure.css';
+
+function IsomorphicPortal({ children }) {
+  const [isClient, setIsClient] = React.useState();
+  React.useEffect(() => setIsClient(true), []);
+
+  return isClient ? (
+    <Portal node={document.getElementById('page-header')}>{children}</Portal>
+  ) : (
+    children
+  );
+}
+
+const MeasureView = (props) => {
+  const { origin } = props?.content;
+
+  //conditional fields shown in view based on origin of measure
+  const conditions = {
+    'WFD (Directive 2000/60/EC)': [
+      'nature_of_physical_modification',
+      'effect_on_hydromorphology',
+      'ecological_impacts',
+    ],
+    'MSFD (Directive 2008/56/EC)': [
+      'links_to_existing_policies',
+      'ktms_it_links_to',
+      'relevant_targets',
+      'relevant_features_from_msfd_annex_iii',
+      'msfd_spatial_scope',
+    ],
+    'HD (Directive 92/43/EEC)': [
+      'measure_purpose',
+      'measure_location',
+      'measure_response',
+      'measure_additional_info',
+      'pressure_type',
+      'pressure_name',
+      'ranking',
+      'region',
+    ],
+    'BD (Directive 79/409/EEC)': [
+      'measure_purpose',
+      'measure_location',
+      'measure_response',
+      'measure_additional_info',
+      'pressure_type',
+      'pressure_name',
+      'ranking',
+      'region',
+    ],
+    'MSPD (Directive 2008/56/EC)': [
+      'mspd_implementation_status',
+      'shipping_tackled',
+      'traffic_separation_scheme',
+      'priority_areas',
+      'approaching_areas',
+      'precautionary_areas',
+      'areas_to_be_avoided',
+      'future_scenarios',
+      'source',
+      'authority',
+      'general_view',
+      'ports',
+      'future_expectations',
+      'safety_manner',
+      'objective',
+      'categories',
+    ],
+    Sectorial: ['source'],
+  };
+
+  // Fields that don't need to check the origin condition
+  const unconditionalFields = fields.filter(
+    (field) => !Object.values(conditions).flat().includes(field.field),
+  );
+
+  // Determine which fields to display in the "Further Information" section
+  const getConditionalFields = () => {
+    // If origin has no value, display all available fields
+    if (!origin || origin.length === 0) {
+      const fieldsNames = unconditionalFields.reduce(
+        (acc, field) => [...acc, field.field],
+        [],
+      );
+      return fields.filter((field) => !fieldsNames.includes(field.field));
+    }
+
+    // Filter fields based on origin(s)
+    return fields.filter((field) => {
+      for (let cond of origin) {
+        if (conditions[cond]?.includes(field.field)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  };
+
+  const renderField = (field, fieldLocation) => (
+    <div className="measure-field">
+      <div className="measure-field-label">
+        {field.title}
+        {fieldLocation === 'header' && ':'}
+      </div>
+      <div className="measure-field-value">
+        {props.content[field.field] ? (
+          <String val={props?.content[field.field]} />
+        ) : (
+          'No value'
+        )}
+      </div>
+      <div></div>
+    </div>
+  );
+
+  const renderFieldTable = () => (
+    <Accordion fluid styled>
+      <Accordion.Title
+        active={isActiveAccordion}
+        index={0}
+        onClick={handleAccordionClick}
+      >
+        <div className="further-information-section">
+          <h3>Further information</h3>
+        </div>
+        <Icon size="30px" name={isActiveAccordion ? upSVG : downSVG} />
+      </Accordion.Title>
+      <Accordion.Content active={isActiveAccordion}>
+        <div className="measure__items">
+          <div className="measure__item">
+            <div className="table-responsive">
+              <table>
+                <tbody>
+                  {getConditionalFields().map((field, index) => (
+                    <tr
+                      key={`row-measure-${index}`}
+                      id={`row-measure-${index}`}
+                    >
+                      <td className="measure-field-label">{field.title}</td>
+                      <td className="measure-field-value">
+                        {props.content[field.field] ? (
+                          <String val={props?.content[field.field]} />
+                        ) : (
+                          'No value'
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </Accordion.Content>
+    </Accordion>
+  );
+
+  const truncateTitle = () => {
+    const maxLength = 90;
+    if (props?.content?.title?.length > maxLength) {
+      const trimmedTitle = props?.content?.title?.substr(0, maxLength);
+
+      return (
+        trimmedTitle.substr(
+          0,
+          Math.min(trimmedTitle.length, trimmedTitle.lastIndexOf(' ')),
+        ) + '...'
+      );
+    }
+    return props?.content?.title;
+  };
+
+  const [isActiveAccordion, setIsAccordionActive] = useState(true);
+
+  const handleAccordionClick = () => {
+    setIsAccordionActive(!isActiveAccordion);
+  };
+
+  return (
+    <div id="page-document" className="view-view-spmeasure ui container">
+      <div>
+        <React.Fragment>
+          <BodyClass className="custom-page-header" />
+          <IsomorphicPortal>
+            <div className="measure-header content-box">
+              <div className="measure-header-content">
+                <h1 className="measure-title">
+                  <String val={truncateTitle()} />
+                </h1>
+                <div className="measure-field">
+                  <div className="measure-field-label">Code:</div>
+                  <div className="measure-field-value">
+                    <String val={props?.content?.code} />
+                  </div>
+                </div>
+                {unconditionalFields
+                  .slice(0, 2)
+                  .map((field) => renderField(field, 'header'))}
+              </div>
+            </div>
+          </IsomorphicPortal>
+        </React.Fragment>
+
+        <div className="measure-form">
+          <div className="measure-field measure-name">
+            <div className="measure-field-label">Measure name</div>
+            <div className="measure-field-value">
+              <String val={props?.content?.title} />
+            </div>
+          </div>
+
+          <div className="unconditional-fields">
+            {unconditionalFields.slice(2).map(renderField)}
+          </div>
+
+          {/* Further Information Section */}
+          {renderFieldTable()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MeasureView;

package/src/components/Widgets/String.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const String = ({ val }) => {
+  return typeof val === 'string'
+    ? val
+    : Array.isArray(val)
+    ? val.map((item, i) => (
+        <span key={i} className="array-string-item">
+          <String val={item} key={i} />
+        </span>
+      ))
+    : `${val}`;
+};
+
+export default String;

package/src/components/Widgets/TextAlign.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+
+import alignLeftSVG from '@plone/volto/icons/align-left.svg';
+import alignRightSVG from '@plone/volto/icons/align-right.svg';
+import alignJustifySVG from '@plone/volto/icons/align-justify.svg';
+import alignCenterSVG from '@plone/volto/icons/align-center.svg';
+
+const VALUE_MAP = [
+  ['left', alignLeftSVG],
+  ['right', alignRightSVG],
+  ['center', alignCenterSVG],
+  ['justify', alignJustifySVG],
+];
+
+export default (props) => {
+  const { value, onChange, id } = props;
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="align-tools">
+        {VALUE_MAP.map(([name, icon], index) => (
+          <Button.Group key={`button-group-${name}-${index}`}>
+            <Button
+              icon
+              basic
+              compact
+              active={value === name}
+              aria-label={name}
+              onClick={() => {
+                onChange(id, name);
+              }}
+            >
+              <Icon name={icon} size="24px" />
+            </Button>
+          </Button.Group>
+        ))}
+      </div>
+    </FormFieldWrapper>
+  );
+};

package/src/components/Widgets/measure.css

@@ -0,0 +1,101 @@
+.contenttype-spmeasure .breadcrumbs {
+  /* background-color: #004b7f !important; */
+  margin-bottom: 1rem !important;
+}
+
+/* .contenttype-spmeasure .breadcrumbs .section,
+.contenttype-spmeasure .breadcrumbs .section.active,
+.contenttype-spmeasure .breadcrumbs i {
+  color: white !important;
+} */
+
+.contenttype-spmeasure .content-area {
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+}
+
+.view-view-spmeasure,
+.measure-form .ui.accordion .content {
+  background-color: white;
+}
+
+.measure-header {
+  z-index: 1;
+  background-color: #004b7f !important;
+  color: #fff !important;
+}
+
+.measure-header:before {
+  width: 100vw !important;
+}
+
+.measure-header-content {
+  display: flex;
+  flex-direction: column;
+  padding: 30px 0;
+  gap: 7px;
+}
+
+.measure-title {
+  margin-bottom: 0;
+}
+
+.unconditional-fields .measure-field,
+.measure-name {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+  gap: 5px;
+}
+
+.measure-header .measure-field {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.measure-field-label {
+  font-weight: bold;
+}
+
+.measure-form .ui.accordion .title {
+  width: calc(100% - 15px);
+  border-bottom: 1px solid #e6e7e8 !important;
+  font-weight: bold;
+}
+
+.measure-form .ui.accordion .title svg {
+  margin-right: 10%;
+}
+
+.measure-form .ui.accordion > * {
+  padding-left: 0 !important;
+}
+
+.measure__items table {
+  width: 100%;
+  border: 1px solid #c1c1c1;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.measure__items tr {
+  border: 1px solid #c1c1c1;
+  margin-bottom: -12px;
+}
+
+.measure__items td {
+  padding: 10px 20px;
+  border: 1px solid #c1c1c1;
+  vertical-align: top;
+}
+
+.measure__items .measure-field-label {
+  width: 35%;
+  background-color: #f9f9f9;
+  font-weight: normal;
+}
+
+.measure__items .measure-field-value {
+  width: 65%;
+}

package/src/components/index.js

@@ -0,0 +1,15 @@
+export HeroSection from './theme/Header/HeroSection';
+export StickyHeader from './theme/Header/StickyHeader';
+export HeroSectionView from './theme/View/HeroSectionView';
+export FullwidthView from './theme/View/FullwidthView';
+export MetadataListingView from './theme/MetadataListingView/MetadataListingView';
+export ItemMetadata from './theme/ItemMetadata/ItemMetadata';
+export ItemTitle from './theme/ItemMetadata/ItemTitle';
+export MetadataHeader from './theme/MetadataListingView/MetadataHeader';
+export DatabaseItemView from './theme/DatabaseItemView/DatabaseItemView';
+export SimpleListingView from './theme/SimpleListingView/SimpleListingView';
+export TableauDownload from './theme/Tableau/TableauDownload';
+export TableauShare from './theme/Tableau/TableauShare';
+export TableauFullscreen from './theme/Tableau/TableauFullscreen';
+export ItemMetadataSnippet from './theme/ItemMetadata/ItemMetadataSnippet';
+export MapPreview from './theme/MetadataListingView/MapPreview';

package/src/components/theme/AppExtras/PrintPage/PrintPage.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Portal } from 'react-portal';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button } from 'semantic-ui-react';
+import { BodyClass, isCmsUi } from '@plone/volto/helpers';
+import { Icon } from '@plone/volto/components';
+import printerSVG from '@plone/volto/icons/printer.svg';
+
+import './css/printpage.less';
+
+const messages = defineMessages({
+  printPageTitle: {
+    id: 'Print page',
+    defaultMessage: 'Print page',
+  },
+});
+
+const PrintPage = (props) => {
+  const { pathname } = props;
+  const intl = useIntl();
+  const cmsView = isCmsUi(pathname);
+
+  const printPage = () => {
+    document.getElementById('main').classList.add('print');
+    setTimeout(() => {
+      window.print();
+    }, 1000);
+    window.onafterprint = () =>
+      document.getElementById('main').classList.remove('print');
+  };
+
+  return (
+    <>
+      {!cmsView && (
+        <Portal node={__CLIENT__ && document.querySelector('.content-area')}>
+          <BodyClass className="has-print-button" />
+          <div className="ui container">
+            <div className="print-button">
+              <Button
+                basic
+                icon
+                title={intl.formatMessage(messages.printPageTitle)}
+                onClick={printPage}
+              >
+                <Icon name={printerSVG} size="30px" />
+              </Button>
+            </div>
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    pathname: state.router.location.pathname,
+  })),
+)(PrintPage);

package/src/components/theme/AppExtras/PrintPage/css/printpage.less

@@ -0,0 +1,29 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.has-print-button {
+  .ui.basic.segment.content-area {
+    display: flex;
+    flex: none;
+    flex-direction: column-reverse;
+  }
+}
+
+.print-button {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+
+  .ui.basic.button {
+    color: #888 !important;
+  }
+}
+
+body.view-editview,
+body.homepage-view {
+  .print-button {
+    display: none;
+  }
+}

package/src/components/theme/AppExtras/PrintPage/index.js

@@ -0,0 +1,3 @@
+import PrintPage from './PrintPage';
+
+export default PrintPage;

package/src/components/theme/AppExtras/ScrollToTop/ScrollToTop.jsx

@@ -0,0 +1,61 @@
+/**
+ * ScrollToTop component.
+ * @module components/ScrollToTop/ScrollToTop
+ */
+
+import React, { useState, useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Icon } from 'semantic-ui-react';
+
+import './css/scrolltop.less';
+
+const messages = defineMessages({
+  scrollToTop: {
+    id: 'Scroll to top',
+    defaultMessage: 'Scroll to top',
+  },
+});
+
+const ScrollToTop = () => {
+  const intl = useIntl();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+  return (
+    <>
+      {isVisible && (
+        <div className="scroll-to-top">
+          <Button
+            icon
+            title={intl.formatMessage(messages.scrollToTop)}
+            onClick={scrollToTop}
+          >
+            <Icon name="arrow up" />
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ScrollToTop;

package/src/components/theme/AppExtras/ScrollToTop/css/scrolltop.less

@@ -0,0 +1,19 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.scroll-to-top {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+
+  button {
+    background-color: @secondaryColor !important;
+    color: @primaryColor !important;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}

package/src/components/theme/AppExtras/ScrollToTop/index.js

@@ -0,0 +1,3 @@
+import ScrollToTop from './ScrollToTop';
+
+export default ScrollToTop;

package/src/components/theme/AppExtras/index.js

@@ -0,0 +1,18 @@
+import ScrollToTop from './ScrollToTop';
+// import PrintPage from './PrintPage';
+
+export default (config) => {
+  config.settings.appExtras = [
+    ...(config.settings.appExtras || []),
+    {
+      match: '',
+      component: ScrollToTop,
+    },
+    // {
+    //   match: '',
+    //   component: PrintPage,
+    // },
+  ];
+
+  return config;
+};

package/src/components/theme/DatabaseItemView/DatabaseItemView.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import {
+  ItemMetadataSnippet,
+  ItemMetadata,
+} from '@eeacms/volto-marine-policy/components';
+import { formatItemType } from '@eeacms/volto-marine-policy/utils';
+
+import './style.less';
+
+const DatabaseItemView = (props) => {
+  const { content } = props;
+
+  return (
+    <>
+      <BodyClass className="database-item-view" />
+      <div id="page-document" className="ui container">
+        <div>
+          <div className="metadata-header">
+            {content['@type'] && (
+              <h3 className="item-type">{formatItemType(content['@type'])}</h3>
+            )}
+            <h1>{content.title}</h1>
+
+            <ItemMetadataSnippet {...props} item={content} />
+          </div>
+        </div>
+        <ItemMetadata
+          {...props}
+          item={content}
+          map_preview={true}
+          item_view={true}
+        />
+      </div>
+    </>
+  );
+};
+
+export default DatabaseItemView;