@eeacms/volto-cca-policy 0.1.59 → 0.1.61

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.61](https://github.com/eea/volto-cca-policy/compare/0.1.60...0.1.61) - 17 January 2024
+
+#### :bug: Bug Fixes
+
+- fix: Add ContentTypeLayout customization [kreafox - [`06f4419`](https://github.com/eea/volto-cca-policy/commit/06f4419f4ffe29df43cc32f4faf0913a561bab0b)]
+
+### [0.1.60](https://github.com/eea/volto-cca-policy/compare/0.1.59...0.1.60) - 16 January 2024
+
+#### :hammer_and_wrench: Others
+
+- Refs #257070 - Fix mega menu behavior, add configuration for visible folders and children. [GhitaB - [`c4d9108`](https://github.com/eea/volto-cca-policy/commit/c4d9108c50c5bbd10a5f1f913d7547aba71d2e8c)]
+- Refs #260715 - rast map check rast accordiion test [Tripon Eugen - [`ed9805d`](https://github.com/eea/volto-cca-policy/commit/ed9805dbd39b648b2267758dd72510aba9214ab7)]
+- Refs #260715 - rast map check root_path eslint [Tripon Eugen - [`23df223`](https://github.com/eea/volto-cca-policy/commit/23df223f6827e182e6a6a456cf1caae38ecd0bbb)]
+- Refs #260715 - rast map check root_path not set [Tripon Eugen - [`8693b04`](https://github.com/eea/volto-cca-policy/commit/8693b0429985b2419581b2cbcf4993fa994961aa)]
+- Refs #260715 - rast map align center [Tripon Eugen - [`b58c5cb`](https://github.com/eea/volto-cca-policy/commit/b58c5cb3d9ed08e3de2d3bb1dd3d0995f70a3c9e)]
 ### [0.1.59](https://github.com/eea/volto-cca-policy/compare/0.1.58...0.1.59) - 5 January 2024
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/RASTBlock/RASTAccordion.test.jsx

@@ -21,7 +21,7 @@ describe('RASTAccordion', () => {
         },
       ],
       activeMenu: 1,
-      curent_location: '/',
+      curent_location: '/my-item-href',
     };
 
     const store = mockStore({

package/src/components/manage/Blocks/RASTBlock/RASTMap.jsx

@@ -70,7 +70,7 @@ export default function RASTMap(props) {
             height="43"
             rx="21.5"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </LinkWrap>
         <LinkWrap
@@ -98,7 +98,7 @@ export default function RASTMap(props) {
             height="43"
             rx="21.5"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </LinkWrap>
         <LinkWrap
@@ -126,7 +126,7 @@ export default function RASTMap(props) {
             height="43"
             rx="21.5"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </LinkWrap>
         <LinkWrap
@@ -154,7 +154,7 @@ export default function RASTMap(props) {
             height="43"
             rx="21.5"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </LinkWrap>
         <LinkWrap
@@ -182,7 +182,7 @@ export default function RASTMap(props) {
             height="43"
             rx="21.5"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </LinkWrap>
 
@@ -211,7 +211,7 @@ export default function RASTMap(props) {
             height="43"
             rx="21.5"
             stroke="white"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </LinkWrap>
 
@@ -362,7 +362,7 @@ export default function RASTMap(props) {
             gradientUnits="userSpaceOnUse"
           >
             <stop stop-color="#BFDC80" />
-            <stop offset="1" stop-color="#AAD055" stop-opacity="0.1" />
+            <stop offset="1" stop-color="#AAD055" stopOpacity="0.1" />
           </linearGradient>
         </defs>
       </svg>

package/src/components/manage/Blocks/RASTBlock/RASTView.jsx

@@ -23,8 +23,10 @@ export default function RASTView(props) {
   if (typeof root_path === 'undefined') {
     root_path = '/';
   }
-
-  const items = useChildren(root_path);
+  let items = useChildren(root_path);
+  if (root_path === '/') {
+    items = [];
+  }
 
   return (
     <div className="block rast-block">

package/src/components/manage/Blocks/RASTBlock/styles.less

@@ -30,3 +30,9 @@ svg * {
 .rast-block .item.active a {
   font-weight: bold;
 }
+
+.rast-map-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderMenuPopUp.js

@@ -347,9 +347,11 @@ function HeaderMenuPopUp({
   );
 
   const layout =
-    !!menuItemsLayouts &&
-    Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
-    menuItemsLayouts[menuItem.url];
+    (!!menuItemsLayouts &&
+      Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
+      menuItemsLayouts[menuItem.url]) ||
+    (!!menuItemsLayouts && menuItemsLayouts['*']) ||
+    {};
 
   return (
     <Transition visible={visible} animation="slide down" duration={300}>

package/src/customizations/volto/components/manage/Controlpanels/ContentTypeLayout.jsx

@@ -0,0 +1,519 @@
+/**
+ * The render of the ContentTypeLayout component is customized (lines 441, 442)
+ * Handle the cases when the schema is undefined
+ * Content Type component.
+ * @module components/manage/Controlpanels/ContentTypeLayout
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Link } from 'react-router-dom';
+import {
+  getParentUrl,
+  hasBlocksData,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
+import { Portal } from 'react-portal';
+import { Button, Segment } from 'semantic-ui-react';
+import { toast } from 'react-toastify';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { nth, join } from 'lodash';
+import {
+  Error,
+  Form,
+  Icon,
+  Toolbar,
+  Sidebar,
+  Toast,
+} from '@plone/volto/components';
+import {
+  getSchema,
+  updateSchema,
+  getControlpanel,
+  updateControlpanel,
+} from '@plone/volto/actions';
+
+import saveSVG from '@plone/volto/icons/save.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import backSVG from '@plone/volto/icons/back.svg';
+
+const messages = defineMessages({
+  changesSaved: {
+    id: 'Changes saved.',
+    defaultMessage: 'Changes saved.',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  save: {
+    id: 'Save',
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  info: {
+    id: 'Info',
+    defaultMessage: 'Info',
+  },
+  enable: {
+    id: 'Enable editable Blocks',
+    defaultMessage: 'Enable editable Blocks',
+  },
+});
+
+/**
+ * ContentTypeLayout class.
+ * @class ContentTypeLayout
+ * @extends Component
+ */
+class ContentTypeLayout extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    updateControlpanel: PropTypes.func.isRequired,
+    getControlpanel: PropTypes.func.isRequired,
+    getSchema: PropTypes.func.isRequired,
+    updateSchema: PropTypes.func.isRequired,
+    id: PropTypes.string.isRequired,
+    parent: PropTypes.string.isRequired,
+    pathname: PropTypes.string.isRequired,
+    schemaRequest: PropTypes.objectOf(PropTypes.any).isRequired,
+    cpanelRequest: PropTypes.objectOf(PropTypes.any).isRequired,
+    schema: PropTypes.objectOf(PropTypes.any),
+    controlpanel: PropTypes.shape({
+      '@id': PropTypes.string,
+      data: PropTypes.object,
+      schema: PropTypes.object,
+      title: PropTypes.string,
+    }),
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    schema: {},
+    controlpanel: null,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs ContentTypeLayout
+   */
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visual: false,
+      content: null,
+      readOnlyBehavior: null,
+      error: null,
+      isClient: false,
+    };
+
+    this.form = React.createRef();
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getControlpanel(join([this.props.parent, this.props.id], '/'));
+    this.props.getSchema(this.props.id);
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Control Panel GET
+    if (
+      this.props.cpanelRequest.get.loading &&
+      nextProps.cpanelRequest.get.error
+    ) {
+      this.setState({
+        error: nextProps.cpanelRequest.get.error,
+      });
+    }
+
+    // Schema GET
+    if (this.props.schemaRequest.loading && nextProps.schemaRequest.loaded) {
+      const properties = nextProps.schema?.properties || {};
+      const content = {};
+      for (const key in properties) {
+        const value = properties[key].default;
+        if (value) {
+          content[key] = value;
+        }
+      }
+
+      if (hasBlocksData(properties)) {
+        this.setState({
+          visual: true,
+        });
+
+        const blocksFieldName = getBlocksFieldname(properties);
+        const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+        content[blocksFieldName] = properties[blocksFieldName]?.default || {};
+        content[blocksLayoutFieldname] = properties[blocksLayoutFieldname]
+          ?.default || { items: [] };
+
+        const blocksBehavior = properties[blocksFieldName]?.behavior || '';
+        this.setState({
+          readOnlyBehavior: !blocksBehavior.includes('generated')
+            ? blocksBehavior
+            : '',
+        });
+      } else {
+        this.setState({
+          visual: false,
+          readOnlyBehavior: '',
+        });
+      }
+
+      this.setState({
+        content: content,
+      });
+    }
+
+    // Schema updated
+    if (
+      this.props.schemaRequest.update.loading &&
+      nextProps.schemaRequest.update.loaded
+    ) {
+      this.props.getSchema(this.props.id);
+      toast.info(
+        <Toast
+          info
+          title={this.props.intl.formatMessage(messages.info)}
+          content={this.props.intl.formatMessage(messages.changesSaved)}
+        />,
+      );
+    }
+
+    // Blocks behavior disabled
+    if (
+      this.props.cpanelRequest.update.loading &&
+      nextProps.cpanelRequest.update.loaded
+    ) {
+      this.onEnableBlocks();
+    }
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {object} data Form data.
+   * @returns {undefined}
+   */
+  onSubmit = (data) => {
+    const schema = { properties: {} };
+    Object.keys(data)
+      .filter((k) => data[k])
+      .forEach((k) => (schema.properties[k] = { default: data[k] }));
+    this.props.updateSchema(this.props.id, schema);
+  };
+
+  /**
+   * Cancel handler
+   * @method onCancel
+   * @returns {undefined}
+   */
+  onCancel = () => {
+    const url = getParentUrl(this.props.pathname);
+    this.props.history.push(getParentUrl(url));
+  };
+
+  /**
+   * Enable blocks handler
+   * @method onEnableBlocks
+   * @returns {undefined}
+   */
+  onEnableBlocks = () => {
+    const { properties = {} } = this.props.schema;
+    const blocksFieldName = getBlocksFieldname(properties);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+    const schema = {
+      fieldsets: [
+        {
+          id: 'layout',
+          title: 'Layout',
+          fields: ['blocks', 'blocks_layout'],
+        },
+      ],
+      properties: {
+        blocks: {
+          title: 'Blocks',
+          type: 'dict',
+          widget: 'json',
+          factory: 'JSONField',
+          default: properties[blocksFieldName]?.default || {},
+        },
+        blocks_layout: {
+          title: 'Blocks Layout',
+          type: 'dict',
+          widget: 'json',
+          factory: 'JSONField',
+          default: properties[blocksLayoutFieldname]?.default || { items: [] },
+        },
+      },
+    };
+    this.props.updateSchema(this.props.id, schema);
+  };
+
+  /**
+   * Disable Blocks behavior handler
+   * @method onDisableBlocksBehavior
+   * @returns {undefined}
+   */
+  onDisableBlocksBehavior = () => {
+    this.props.updateControlpanel(this.props.controlpanel['@id'], {
+      [this.state.readOnlyBehavior]: false,
+      'volto.blocks.editable.layout': true,
+    });
+  };
+
+  /**
+   * Enable Blocks behavior handler
+   * @method onEnableBlocksBehavior
+   * @returns {undefined}
+   */
+  onEnableBlocksBehavior = () => {
+    this.props.updateControlpanel(this.props.controlpanel['@id'], {
+      'volto.blocks.editable.layout': true,
+    });
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    // Error
+    if (this.state.error) {
+      return <Error error={this.state.error} />;
+    }
+
+    if (!this.state.visual) {
+      // Still loading
+      if (!this.state.content) {
+        return <div />;
+      }
+
+      // Blocks are not enabled
+      return (
+        <>
+          <Segment
+            placeholder
+            id="page-controlpanel-layout"
+            className="ui container center aligned"
+          >
+            <div>
+              <FormattedMessage
+                id="Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled"
+                defaultMessage="Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled"
+                values={{
+                  strong: (...chunks) => <strong>{chunks}</strong>,
+                  type: this.props?.controlpanel?.title || this.props.id,
+                }}
+              />
+            </div>
+            <div className="ui divider"></div>
+            <Button
+              primary
+              onClick={this.onEnableBlocksBehavior}
+              content={this.props.intl.formatMessage(messages.enable)}
+            />
+          </Segment>
+          <Portal
+            node={this.state.isClient && document.getElementById('toolbar')}
+          >
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Link className="item" to="#" onClick={() => this.onCancel()}>
+                    <Icon
+                      name={backSVG}
+                      size="30px"
+                      className="contents circled"
+                      title={this.props.intl.formatMessage(messages.back)}
+                    />
+                  </Link>
+                </>
+              }
+            />
+          </Portal>
+        </>
+      );
+    }
+
+    if (this.state.readOnlyBehavior) {
+      return (
+        <>
+          <Segment
+            placeholder
+            id="page-controlpanel-layout"
+            className="ui container center aligned"
+          >
+            <div>
+              <FormattedMessage
+                id="Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>"
+                defaultMessage="Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>"
+                values={{
+                  strong: (...chunks) => <strong>{chunks}</strong>,
+                  type: this.props?.controlpanel?.title || this.props.id,
+                }}
+              />
+            </div>
+            <div className="ui divider"></div>
+            <Button
+              primary
+              onClick={this.onDisableBlocksBehavior}
+              content={this.props.intl.formatMessage(messages.enable)}
+            />
+          </Segment>
+          <Portal
+            node={this.state.isClient && document.getElementById('toolbar')}
+          >
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Link className="item" to="#" onClick={() => this.onCancel()}>
+                    <Icon
+                      name={backSVG}
+                      size="30px"
+                      className="contents circled"
+                      title={this.props.intl.formatMessage(messages.back)}
+                    />
+                  </Link>
+                </>
+              }
+            />
+          </Portal>
+        </>
+      );
+    }
+
+    // Render layout editor
+    const blocksFieldName = getBlocksFieldname(
+      this.props.schema?.properties || {},
+    );
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(
+      this.props.schema?.properties || {},
+    );
+    return (
+      <div id="page-controlpanel-layout">
+        <Form
+          isAdminForm
+          ref={this.form}
+          schema={{
+            fieldsets: [
+              {
+                id: 'layout',
+                title: 'Layout',
+                fields: [blocksFieldName, blocksLayoutFieldname],
+              },
+            ],
+            properties: {
+              ...(this.props.schema?.properties[blocksFieldName] || {}),
+              ...(this.props.schema?.properties[blocksLayoutFieldname] || {}),
+              // ...this.props.schema.properties[blocksFieldName],
+              // ...this.props.schema.properties[blocksLayoutFieldname],
+            },
+            required: [],
+          }}
+          formData={this.state.content}
+          onSubmit={this.onSubmit}
+          onCancel={this.onCancel}
+          pathname={this.props.pathname}
+          visual={this.state.visual}
+          hideActions
+        />
+        <Portal
+          node={this.state.isClient && document.getElementById('sidebar')}
+        >
+          <Sidebar settingsTab={true} documentTab={false} />
+        </Portal>
+        <Portal
+          node={this.state.isClient && document.getElementById('toolbar')}
+        >
+          <Toolbar
+            pathname={this.props.pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Button
+                  id="toolbar-save"
+                  className="save"
+                  aria-label={this.props.intl.formatMessage(messages.save)}
+                  onClick={() => this.form.current.onSubmit()}
+                  disabled={this.props.schemaRequest.update.loading}
+                  loading={this.props.schemaRequest.update.loading}
+                >
+                  <Icon
+                    name={saveSVG}
+                    className="circled"
+                    size="30px"
+                    title={this.props.intl.formatMessage(messages.save)}
+                  />
+                </Button>
+                <Button
+                  className="cancel"
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={() => this.onCancel()}
+                >
+                  <Icon
+                    name={clearSVG}
+                    className="circled"
+                    size="30px"
+                    title={this.props.intl.formatMessage(messages.cancel)}
+                  />
+                </Button>
+              </>
+            }
+          />
+        </Portal>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      schema: state.schema.schema,
+      schemaRequest: state.schema,
+      cpanelRequest: state.controlpanels,
+      controlpanel: state.controlpanels.controlpanel,
+      pathname: props.location.pathname,
+      id: nth(props.location.pathname.split('/'), -2),
+      parent: nth(props.location.pathname.split('/'), -3),
+    }),
+    { getSchema, updateSchema, getControlpanel, updateControlpanel },
+  ),
+)(ContentTypeLayout);

package/src/index.js

@@ -276,6 +276,19 @@ const applyConfig = (config) => {
     },
   ];
 
+  // mega menu layout settings
+  config.settings.menuItemsLayouts = {
+    // '*': {
+    //   hideChildrenFromNavigation: false,
+    // },
+    '/en/eu-policy': {
+      hideChildrenFromNavigation: false,
+    },
+    '/en/knowledge-1': {
+      hideChildrenFromNavigation: false,
+    },
+  };
+
   // Custom results
   config.settings.searchlib.resolve.HealthHorizontalCardItem = {
     component: HealthHorizontalCardItem,