@eeacms/volto-bise-policy 1.2.10 → 1.2.12

package/src/customizations/volto/components/theme/View/View.jsx

@@ -0,0 +1,299 @@
+/**
+ * View container.
+ * @module components/theme/View/View
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Redirect } from 'react-router-dom';
+import { Portal } from 'react-portal';
+import { injectIntl } from 'react-intl';
+import qs from 'query-string';
+
+import {
+  ContentMetadataTags,
+  Comments,
+  Tags,
+  Toolbar,
+} from '@plone/volto/components';
+import { listActions, getContent } from '@plone/volto/actions';
+import {
+  BodyClass,
+  getBaseUrl,
+  flattenToAppURL,
+  getLayoutFieldname,
+  hasApiExpander,
+} from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+/**
+ * View container class.
+ * @class View
+ * @extends Component
+ */
+class View extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    actions: PropTypes.shape({
+      object: PropTypes.arrayOf(PropTypes.object),
+      object_buttons: PropTypes.arrayOf(PropTypes.object),
+      user: PropTypes.arrayOf(PropTypes.object),
+    }),
+    listActions: PropTypes.func.isRequired,
+    /**
+     * Action to get the content
+     */
+    getContent: PropTypes.func.isRequired,
+    /**
+     * Pathname of the object
+     */
+    pathname: PropTypes.string.isRequired,
+    location: PropTypes.shape({
+      search: PropTypes.string,
+      pathname: PropTypes.string,
+    }).isRequired,
+    /**
+     * Version id of the object
+     */
+    versionId: PropTypes.string,
+    /**
+     * Content of the object
+     */
+    content: PropTypes.shape({
+      /**
+       * Layout of the object
+       */
+      layout: PropTypes.string,
+      /**
+       * Allow discussion of the object
+       */
+      allow_discussion: PropTypes.bool,
+      /**
+       * Title of the object
+       */
+      title: PropTypes.string,
+      /**
+       * Description of the object
+       */
+      description: PropTypes.string,
+      /**
+       * Type of the object
+       */
+      '@type': PropTypes.string,
+      /**
+       * Subjects of the object
+       */
+      subjects: PropTypes.arrayOf(PropTypes.string),
+      is_folderish: PropTypes.bool,
+    }),
+    error: PropTypes.shape({
+      /**
+       * Error type
+       */
+      status: PropTypes.number,
+    }),
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    actions: null,
+    content: null,
+    versionId: null,
+    error: null,
+  };
+
+  state = {
+    hasObjectButtons: null,
+    isClient: false,
+  };
+
+  componentDidMount() {
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
+    this.props.getContent(
+      getBaseUrl(this.props.pathname),
+      this.props.versionId,
+    );
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
+      this.props.getContent(
+        getBaseUrl(nextProps.pathname),
+        this.props.versionId,
+      );
+    }
+
+    if (nextProps.actions.object_buttons) {
+      const objectButtons = nextProps.actions.object_buttons;
+      this.setState({
+        hasObjectButtons: !!objectButtons.length,
+      });
+    }
+  }
+
+  /**
+   * Default fallback view
+   * @method getViewDefault
+   * @returns {string} Markup for component.
+   */
+  getViewDefault = () => config.views.defaultView;
+
+  /**
+   * Get view by content type
+   * @method getViewByType
+   * @returns {string} Markup for component.
+   */
+  getViewByType = () =>
+    config.views.contentTypesViews[this.props.content['@type']] || null;
+
+  /**
+   * Get view by content layout property
+   * @method getViewByLayout
+   * @returns {string} Markup for component.
+   */
+  getViewByLayout = () =>
+    config.views.layoutViews[
+      this.props.content[getLayoutFieldname(this.props.content)]
+    ] || null;
+
+  /**
+   * Cleans the component displayName (specially for connected components)
+   * which have the Connect(componentDisplayName)
+   * @method cleanViewName
+   * @param  {string} dirtyDisplayName The displayName
+   * @returns {string} Clean displayName (no Connect(...)).
+   */
+  cleanViewName = (dirtyDisplayName) =>
+    dirtyDisplayName
+      .replace('Connect(', '')
+      .replace('injectIntl(', '')
+      .replace(')', '')
+      .replace('connect(', '')
+      .toLowerCase();
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { views } = config;
+    if ([301, 302].includes(this.props.error?.code)) {
+      const redirect = flattenToAppURL(this.props.error.url)
+        .split('?')[0]
+        .replace('/++api++', '');
+      return <Redirect to={`${redirect}${this.props.location.search}`} />;
+    } else if (this.props.error && !this.props.connectionRefused) {
+      let FoundView;
+      if (this.props.error.status === undefined) {
+        // For some reason, while development and if CORS is in place and the
+        // requested resource is 404, it returns undefined as status, then the
+        // next statement will fail
+        FoundView = views.errorViews.corsError;
+      } else {
+        FoundView = views.errorViews[this.props.error.status.toString()];
+      }
+      if (!FoundView) {
+        FoundView = views.errorViews['404']; // default to 404
+      }
+      return (
+        <div id="view">
+          <FoundView {...this.props} />
+        </div>
+      );
+    }
+    if (!this.props.content) {
+      return <span />;
+    }
+    const RenderedView =
+      this.getViewByLayout() || this.getViewByType() || this.getViewDefault();
+
+    return (
+      <div id="view">
+        <ContentMetadataTags content={this.props.content} />
+        {/* Body class if displayName in component is set */}
+        <BodyClass
+          className={
+            RenderedView.displayName
+              ? `view-${this.cleanViewName(RenderedView.displayName)}`
+              : null
+          }
+        />
+        <RenderedView
+          key={this.props.content['@id']}
+          content={this.props.content}
+          location={this.props.location}
+          token={this.props.token}
+          history={this.props.history}
+        />
+        {config.settings.showTags &&
+          this.props.content.subjects &&
+          this.props.content.subjects.length > 0 && (
+            <Tags tags={this.props.content.subjects} />
+          )}
+        {/* Add opt-in social sharing if required, disabled by default */}
+        {/* In the future this might be parameterized from the app config */}
+        {/* <SocialSharing
+          url={typeof window === 'undefined' ? '' : window.location.href}
+          title={this.props.content.title}
+          description={this.props.content.description || ''}
+        /> */}
+        {this.props.content.allow_discussion && (
+          <Comments pathname={this.props.pathname} />
+        )}
+        {this.state.isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar pathname={this.props.pathname} inner={<span />} />
+          </Portal>
+        )}
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      actions: state.actions.actions,
+      token: state.userSession.token,
+      content: state.content.data,
+      error: state.content.get.error,
+      apiError: state.apierror.error,
+      connectionRefused: state.apierror.connectionRefused,
+      pathname: props.location.pathname,
+      versionId:
+        qs.parse(props.location.search) &&
+        qs.parse(props.location.search).version,
+    }),
+    {
+      listActions,
+      getContent,
+    },
+  ),
+)(View);

package/src/index.js

@@ -4,6 +4,7 @@ import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-bise-policy/comp
 
 import installBlocks from './components/manage/Blocks';
 import installStyles from './styles-config';
+import installDataTable from './customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable';
 
 import biseLogo from '@eeacms/volto-bise-policy/../theme/assets/images/Header/bise-logo.svg';
 import biseWhiteLogo from '@eeacms/volto-bise-policy/../theme/assets/images/Header/bise-logo-white.svg';
@@ -145,13 +146,15 @@ const applyConfig = (config) => {
   // Customizations
   // Group
   if (config.blocks.blocksConfig.group) {
-    config.blocks.blocksConfig.group.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.group.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
   }
 
   // Columns
   if (config.blocks.blocksConfig.columnsBlock) {
     config.blocks.blocksConfig.columnsBlock.mostUsed = true;
-    config.blocks.blocksConfig.columnsBlock.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.columnsBlock.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
     config.blocks.blocksConfig.columnsBlock.tocEntry = undefined;
     config.blocks.blocksConfig.columnsBlock.tocEntries = (
       block = {},
@@ -178,15 +181,17 @@ const applyConfig = (config) => {
   // Listing
   if (config.blocks.blocksConfig.listing) {
     config.blocks.blocksConfig.listing.title = 'Listing (Content)';
-    config.blocks.blocksConfig.listing.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.listing.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
   }
 
   // Hero image left
   if (config.blocks.blocksConfig.hero_image_left) {
-    config.blocks.blocksConfig.hero_image_left.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.hero_image_left.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
   }
 
-  config = [installBlocks, installStyles].reduce(
+  config = [installBlocks, installStyles, installDataTable].reduce(
     (acc, apply) => apply(acc),
     config,
   );

package/src/styles-config.js

@@ -1,7 +1,7 @@
 import { Icon } from '@plone/volto/components';
 import contentBoxSVG from '@eeacms/volto-bise-policy/icons/content-box.svg';
 
-export default (config) => {
+const config = (config) => {
   config.settings.available_colors = [
     '#005248', // primary color
     '#00A390', // secondary color
@@ -184,3 +184,5 @@ export default (config) => {
 
   return config;
 };
+
+export default config;

package/theme/extras/header.overrides

@@ -10,9 +10,8 @@
   .main.bar {
     .ui.container {
       .ui.text.menu {
-        flex-wrap: wrap;
         justify-content: end;
-  
+
         .item:first-child {
           display: flex;
         }
@@ -39,6 +38,30 @@
   margin-top: 0;
 }
 
+@media only screen and (min-width: @computerBreakpoint) {
+  .main.bar {
+    .ui.container {
+      height: @computerMainSectionHeight;
+
+      nav {
+        width: 88%;
+      }
+      .ui.text.menu {
+        display: flex;
+        width: 100%;
+        max-height: 100%;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        margin: 0;
+
+        .item {
+          padding: @mainMenuItemPadding;
+        }
+      }
+    }
+  }
+}
+
 /************************
         MEGA MENU
 ************************/
@@ -57,67 +80,51 @@
 .subsite.subsite-natura2000 {
   .eea.header .main.bar {
     backdrop-filter: blur(2px);
-    background-color: hsla(0,0%,100%,.8);;
+    background-color: hsla(0, 0%, 100%, 0.8);
   }
-
   .eea.header .main.bar > .ui.container {
-    height: 92px;
+    height: 160px;
+    width: 100%;
   }
-
   .eea.header .main-menu {
     align-items: center;
   }
-
   @media only screen and (min-width: @mobileBreakpoint) {
     .eea.header .main.bar > .ui.container {
-      height: 92px;
+      height: 69px;
     }
-
     .eea.header .eea-logo {
-      max-width: fit-content;
-      max-height: 60px;
+      max-width: 142px;
       height: auto;
     }
-
     .burger-action.mobile,
     .search-action {
-      width: 58px;
-      height: 92px;
+      width: 44px;
+      height: 69px;
     }
   }
-
   @media only screen and (min-width: @tabletBreakpoint) {
     .eea.header .main.bar > .ui.container {
-      height: 92px;
+      height: 117px;
     }
-
     .eea.header .eea-logo {
-      max-width: fit-content;
-      max-height: 60px;
+      max-width: 252px;
       height: auto;
     }
-
     .burger-action.mobile,
     .search-action {
-      width: 58px;
-      height: 92px;
+      width: 66px;
+      height: 117px;
     }
   }
-
   @media only screen and (min-width: @computerBreakpoint) {
+    .eea.header .main.bar > .ui.container {
+      height: 160px;
+    }
     .eea.header .eea-logo {
-      max-width: fit-content;
-      max-height: 60px;
+      max-width: 300px;
+      width: 100%;
       height: auto;
     }
   }
 }
-
-
-// #search-box {
-//   min-height: 100%;
-// }
-
-// .has-toolbar.homepage .eea.header {
-//   width: 100%;
-// }

package/theme/globals/natura2000.less

@@ -54,7 +54,10 @@
 
 .is-n2k-site {
   .eea.header .main.bar {
-    .ui.grid, .main-menu, .main-menu > ul, .main-menu > ul > li {
+    .ui.grid,
+    .main-menu,
+    .main-menu > ul,
+    .main-menu > ul > li {
       height: 100%;
     }
   }
@@ -71,7 +74,6 @@
     display: grid !important;
     align-content: center;
 
-
     .ui.container {
       width: 100%;
       padding-bottom: 0;
@@ -83,28 +85,28 @@
   }
 }
 
+// .at-glance {
+//   height: 100%;
+//   padding: 0 2rem;
+//   background: @secondaryColor 0% 0% no-repeat padding-box;
+//   border-bottom: 4px solid @secondaryColor !important;
+//   margin-bottom: -16px;
+//   padding-bottom: 16px;
+//   height: calc(100% + 16px);
+//   border-bottom-left-radius: 10px;
+//   border-bottom-right-radius: 10px;
+//   color: #fff !important;
+//   cursor: pointer;
+//   display: flex;
+//   align-items: center;
+
+//   &:hover {
+//     color: #fff !important;
+//     border-bottom: 4px solid @secondaryColor !important;
+//   }
+// }
 
-.at-glance {
-  height: 100%;
-  padding: 0 2rem;
-  background: @secondaryColor 0% 0% no-repeat padding-box;
-  border-bottom: 4px solid @secondaryColor !important;
-  margin-bottom: -16px;
-  padding-bottom: 16px;
-  height: calc(100% + 16px);
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  color: #fff !important;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    color: #fff !important;
-    border-bottom: 4px solid @secondaryColor !important;
-  }
-}
-
+.at-glance,
 .deep-dive {
   color: @secondaryColor !important;
   border-bottom: 4px solid transparent !important;
@@ -122,34 +124,33 @@
 .with-n2k-navigation {
   .eea.header {
     .main.bar .ui.grid {
-      > :first-child:not(:last-child) {
-        width: 200px !important;
-
-        img {
-          object-fit: fill;
+      @media only screen and (min-width: 992px) {
+        > :first-child:not(:last-child) {
+          flex: 1;
+          img {
+            object-fit: fill;
+          }
         }
-      }
 
-      > :last-child:not(:first-child) {
-        width: calc(100% - 200px) !important;
+        > :last-child:not(:first-child) {
+          width: var(--menu-width, 800px) !important;
+        }
       }
 
       @media @smallMonitorUp {
         .main-menu {
           justify-content: center;
-  
+
           ul {
             padding-inline-start: 0;
             justify-content: center !important;
           }
         }
       }
-
     }
   }
 }
 
-
 .tabs-block {
   .columns-header {
     display: none;
@@ -173,4 +174,4 @@
       }
     }
   }
-}
+}