@eeacms/volto-cca-policy 0.1.60 → 0.1.61

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.60",
+  "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/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);