@eeacms/volto-cca-policy 0.1.60 → 0.1.62

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.62](https://github.com/eea/volto-cca-policy/compare/0.1.61...0.1.62) - 19 January 2024
+
+#### :bug: Bug Fixes
+
+- fix: preview image in search listing [kreafox - [`e164430`](https://github.com/eea/volto-cca-policy/commit/e1644300d19fa58fa69fdd0e5b23041809ca69a6)]
+- fix: stories search listing + show images [kreafox - [`081ff11`](https://github.com/eea/volto-cca-policy/commit/081ff115adfcab58dfe8e7f9fce09cc71e9281f5)]
+
+#### :nail_care: Enhancements
+
+- change: separate mission styling [kreafox - [`a3d972c`](https://github.com/eea/volto-cca-policy/commit/a3d972ce871649af92f2c9b7ba8abcdfff969852)]
+
+### [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.62",
   "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?.properties || {};
+    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/search/mission_stories/config-stories.js

@@ -1,5 +1,5 @@
 import { mergeConfig } from '@eeacms/search';
-import { getClientProxyAddress } from './../utils';
+import { getClientProxyAddress, getSearchThumbUrl } from './../utils';
 import facets from './facets-stories';
 
 const missionStoriesConfig = {
@@ -25,12 +25,6 @@ export default function installMissionStoriesSearch(config) {
 
   const { missionStoriesSearch } = config.searchui;
 
-  missionStoriesSearch.permanentFilters.push({
-    terms: {
-      objectProvides: ['mission_storyy'],
-    },
-  });
-
   missionStoriesSearch.facets = facets;
 
   if (typeof window !== 'undefined') {
@@ -38,5 +32,21 @@ export default function installMissionStoriesSearch(config) {
       process.env.RAZZLE_ES_PROXY_ADDR || getClientProxyAddress();
   }
 
+  missionStoriesSearch.resultItemModel = {
+    factory: 'ResultModel',
+    urlField: 'about',
+    titleField: 'title',
+    metatypeField: 'objectProvides',
+    descriptionField: 'description',
+    tagsField: 'topic',
+    issuedField: 'issued',
+    getThumbnailUrl: 'getSearchThumbUrl',
+    getIconUrl: 'getGlobalsearchIconUrl',
+    fallbackThumbUrl:
+      'https://react.semantic-ui.com/images/wireframe/white-image.png',
+  };
+
+  config.resolve.getSearchThumbUrl = getSearchThumbUrl();
+
   return config;
 }

package/src/search/utils.js

@@ -34,3 +34,19 @@ export function getClientProxyAddress() {
   url.search = '';
   return url.toString();
 }
+
+export const getSearchThumbUrl = () => (result, config, fallback) => {
+  let image = fallback;
+
+  if (
+    result.about?.raw?.indexOf('://cca-p6.devel5cph.eionet.europa.eu') !== -1 ||
+    result.about?.raw?.indexOf('://cca.devel5cph.eionet.europa.eu') !== -1 ||
+    result.about?.raw?.indexOf('://climate-adapt.eea.europa.eu') !== -1
+  ) {
+    if (result.cca_preview_image) {
+      image = result?.about?.raw + '/@@images/preview_image/preview';
+    }
+  }
+
+  return image;
+};

package/theme/globals/mission.less

@@ -0,0 +1,129 @@
+/* Mission subsite */
+
+body.subsite-mkh {
+  .top.bar .ui.container {
+    z-index: 3;
+  }
+
+  &.subsite-root {
+    .segment.content-area {
+      padding-top: 0;
+      margin-top: 0;
+    }
+
+    #page-document {
+      > div.styled-group:nth-child(2) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .subfooter .footer-description {
+    margin-top: 3em;
+    margin-bottom: 1em;
+
+    p {
+      font-size: 1.125rem;
+      font-weight: 600;
+    }
+  }
+
+  .ui.menu .green.active.item,
+  .ui.green.menu .active.item {
+    border-color: @green-1 !important;
+    color: @green-1 !important;
+  }
+
+  .main-menu {
+    .item a {
+      color: @blue-1;
+    }
+
+    .item a:hover {
+      border-color: @green-1;
+    }
+
+    .item.active a {
+      border-color: @green-1;
+      color: @green-1;
+    }
+  }
+
+  .search-action {
+    background-color: @green-1;
+  }
+
+  .eea.banner {
+    background: @green-1;
+  }
+
+  #mega-menu {
+    .ui.accordion .title i,
+    .ui.accordion button.title i {
+      color: @white;
+    }
+  }
+
+  footer,
+  .burger-action,
+  #search-box,
+  #mega-menu,
+  #mega-menu .ui.accordion .content {
+    background: @subsiteBackgroundGradient;
+  }
+}
+
+/* Latest news updates, Latest events */
+body.subsite-root.section-mission {
+  div.columns-view {
+    div.block.listing.default {
+      div.items {
+        div.listing-item {
+          border: none;
+          margin: 0;
+        }
+
+        .listing-body {
+          position: relative;
+          padding-left: 2em;
+
+          &:before {
+            position: absolute;
+            top: -5px;
+            left: 0;
+            color: inherit;
+            content: '\ea6c';
+            font-family: remixicon !important;
+            font-size: 1.5em;
+          }
+        }
+      }
+    }
+
+    div.block.listing.summary {
+      .u-item {
+        padding-top: 0;
+        padding-bottom: 20px;
+        border: none;
+      }
+
+      .listing-header {
+        font-size: @h4;
+      }
+
+      .listing-body.has-icon i.icon {
+        margin-top: 1px;
+      }
+    }
+
+    div.block.listing.default {
+      div.listing-item {
+        padding-bottom: 0.5em;
+
+        h4 {
+          margin-bottom: 0.5em;
+        }
+      }
+    }
+  }
+}

package/theme/globals/site.overrides

@@ -1,6 +1,7 @@
 /*******************************
         Global Overrides
 *******************************/
+@import './mission.less';
 
 // [class~='view-defaultview'] [id='page-document'] > *,
 // [class~='view-viewview'] [id='page-document'] > * {
@@ -141,80 +142,6 @@ div.content-metadata {
   }
 }
 
-// Mission subsites
-body.subsite-mkh {
-  .top.bar .ui.container {
-    z-index: 3;
-  }
-
-  &.subsite-root {
-    .segment.content-area {
-      padding-top: 0;
-      margin-top: 0;
-    }
-
-    #page-document {
-      > div.styled-group:nth-child(2) {
-        margin-top: 0;
-      }
-    }
-  }
-
-  .subfooter .footer-description {
-    margin-top: 3em;
-    margin-bottom: 1em;
-
-    p {
-      font-size: 1.125rem;
-      font-weight: 600;
-    }
-  }
-
-  .ui.menu .green.active.item,
-  .ui.green.menu .active.item {
-    border-color: @green-1 !important;
-    color: @green-1 !important;
-  }
-
-  .main-menu {
-    .item a {
-      color: @blue-1;
-    }
-
-    .item a:hover {
-      border-color: @green-1;
-    }
-
-    .item.active a {
-      border-color: @green-1;
-      color: @green-1;
-    }
-  }
-
-  .search-action {
-    background-color: @green-1;
-  }
-
-  .eea.banner {
-    background: @green-1;
-  }
-
-  #mega-menu {
-    .ui.accordion .title i,
-    .ui.accordion button.title i {
-      color: @white;
-    }
-  }
-
-  footer,
-  .burger-action,
-  #search-box,
-  #mega-menu,
-  #mega-menu .ui.accordion .content {
-    background: @subsiteBackgroundGradient;
-  }
-}
-
 body.view-viewview .full {
   position: relative !important;
   right: 50%;
@@ -291,61 +218,6 @@ body.view-viewview.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed) {
   }
 }
 
-/* Mission: Latest news updates, Latest events */
-body.subsite-root.section-mission {
-  div.columns-view {
-    div.block.listing.default {
-      div.items {
-        div.listing-item {
-          border: none;
-          margin: 0;
-        }
-
-        .listing-body {
-          position: relative;
-          padding-left: 2em;
-
-          &:before {
-            position: absolute;
-            top: -5px;
-            left: 0;
-            color: inherit;
-            content: '\ea6c';
-            font-family: remixicon !important;
-            font-size: 1.5em;
-          }
-        }
-      }
-    }
-
-    div.block.listing.summary {
-      .u-item {
-        padding-top: 0;
-        padding-bottom: 20px;
-        border: none;
-      }
-
-      .listing-header {
-        font-size: @h4;
-      }
-
-      .listing-body.has-icon i.icon {
-        margin-top: 1px;
-      }
-    }
-
-    div.block.listing.default {
-      div.listing-item {
-        padding-bottom: 0.5em;
-
-        h4 {
-          margin-bottom: 0.5em;
-        }
-      }
-    }
-  }
-}
-
 .listing-body-dates:empty {
   margin-bottom: 0;
 }