design-comuni-plone-theme 8.3.2 → 8.4.1

package/src/components/ItaliaTheme/Search/Search.jsx

@@ -186,7 +186,11 @@ const Search = () => {
   const [customPath] = useState(qs.parse(location.search)?.custom_path ?? '');
 
   const [sortOn, setSortOn] = useState('relevance');
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(
+    qs.parse(location.search)?.b_start
+      ? qs.parse(location.search).b_start / config.settings.defaultPageSize + 1
+      : 1,
+  );
   const [collapseFilters, _setCollapseFilters] = useState(true);
   const [advFiltersOpen, setAdvFiltersOpen] = useState(false);
 
@@ -313,7 +317,7 @@ const Search = () => {
       options,
       portalTypes,
       searchOrderDict[sortOn] ?? {},
-      (currentPage - 1) * config.settings.defaultPageSize,
+      currentPage,
       customPath,
       subsite,
       intl.locale,
@@ -329,7 +333,7 @@ const Search = () => {
           options,
           {},
           searchOrderDict[sortOn] ?? {},
-          (currentPage - 1) * config.settings.defaultPageSize,
+          currentPage,
           customPath,
           subsite,
           intl.locale,

package/src/components/ItaliaTheme/Search/utils.js

@@ -179,7 +179,9 @@ const getSearchParamsURL = (
     : config.settings.isMultilingual
     ? '/' + currentLang
     : '';
-
+  const b_start = currentPage
+    ? (currentPage - 1) * config.settings.defaultPageSize
+    : 0;
   const activeSections = Object.keys(sections).reduce((secAcc, secKey) => {
     const sec =
       sections[secKey].items &&
@@ -247,7 +249,7 @@ const getSearchParamsURL = (
       ...sortOn,
       ...portal_type,
       skipNull: true,
-      b_start: currentPage ?? 0,
+      b_start: b_start,
       use_site_search_settings: true,
     };
 
@@ -268,7 +270,7 @@ const getSearchParamsURL = (
       },
       { skipNull: true },
     ) +
-    (currentPage && currentPage > 0 ? `&b_start=${currentPage}` : '')
+    (b_start > 0 ? `&b_start=${b_start}` : '')
   );
 };
 

package/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx

@@ -132,6 +132,8 @@ const Unauthorized = (props) => {
         )}
         <Row>
           <Col xs={12} lg={{ size: 10, offset: 1 }}>
+            {/*
+            Rimosso perchè la form di contatto è stata disabilitata
             <p>
               <FormattedMessage
                 id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
@@ -147,7 +149,7 @@ const Unauthorized = (props) => {
                   ),
                 }}
               />
-            </p>
+            </p> */}
             <p>
               <FormattedMessage id="Thank you." defaultMessage="Thank you." />
             </p>

package/src/components/ItaliaTheme/View/PersonaView/PersonaRuolo.jsx

@@ -5,6 +5,7 @@ import {
   RichTextSection,
   OfficeCard,
   Gallery,
+  Attachment,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import {
   contentFolderHasItems,
@@ -20,9 +21,9 @@ const messages = defineMessages({
     id: 'atto_nomina',
     defaultMessage: 'Atto di nomina',
   },
-  organizzazione_riferimento: {
-    id: 'organizzazione_riferimento',
-    defaultMessage: 'Organizzazione',
+  strutture_correlate: {
+    id: 'persona_strutture_correlate',
+    defaultMessage: 'Fa parte di',
   },
   responsabile_di: {
     id: 'responsabile_di',
@@ -40,6 +41,10 @@ const messages = defineMessages({
     id: 'compensi',
     defaultMessage: 'Compensi',
   },
+  importi_di_viaggio_e_o_servizi: {
+    id: 'importi_di_viaggio_e_o_servizi',
+    default: 'Importi di viaggio e/o servizi',
+  },
   deleghe: {
     id: 'deleghe',
     defaultMessage: 'Deleghe',
@@ -103,12 +108,83 @@ const PersonaRuolo = ({ content }) => {
               </div>
             </RichTextSection>
           )}
+
           {richTextHasContent(content.incarichi_persona[0].compensi) && (
             <RichTextSection
               tag_id="compensi"
               title={intl.formatMessage(messages.compensi)}
               data={content.incarichi_persona[0].compensi}
-            />
+            >
+              {content.incarichi_persona[0]?.compensi_file?.length > 0 && (
+                <div className="compensi-item mb-2">
+                  <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+                    {content.incarichi_persona[0]?.compensi_file.map((file) => {
+                      let itemURL = '#';
+                      if (file['@type'] === 'File') {
+                        itemURL = `${file['@id']}/@@download/file`;
+                      } else if (file['@type'] === 'Link') {
+                        itemURL =
+                          file.remoteUrl?.length > 0
+                            ? file.remoteUrl
+                            : file['@id'];
+                      } else {
+                        itemURL = file['@id'];
+                      }
+                      return (
+                        <Attachment
+                          key={file['@id']}
+                          title={file.title}
+                          description={file.description}
+                          download_url={itemURL}
+                          item={file}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </RichTextSection>
+          )}
+          {content.incarichi_persona[0]?.importi_di_viaggio_e_o_servizi
+            ?.length > 0 && (
+            <RichTextSection
+              tag_id="importi-di-viaggio"
+              title={intl.formatMessage(
+                messages.importi_di_viaggio_e_o_servizi,
+              )}
+              data={content.incarichi_persona[0].importi_di_viaggio_e_o_servizi}
+            >
+              {content.incarichi_persona[0]?.compensi_file?.length > 0 && (
+                <div className="compensi-item mb-2">
+                  <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+                    {content.incarichi_persona[0]?.importi_di_viaggio_e_o_servizi.map(
+                      (file) => {
+                        let itemURL = '#';
+                        if (file['@type'] === 'File') {
+                          itemURL = `${file['@id']}/@@download/file`;
+                        } else if (file['@type'] === 'Link') {
+                          itemURL =
+                            file.remoteUrl?.length > 0
+                              ? file.remoteUrl
+                              : file['@id'];
+                        } else {
+                          itemURL = file['@id'];
+                        }
+                        return (
+                          <Attachment
+                            key={file['@id']}
+                            title={file.title}
+                            description={file.description}
+                            download_url={itemURL}
+                            item={file}
+                          />
+                        );
+                      },
+                    )}
+                  </div>
+                </div>
+              )}
+            </RichTextSection>
           )}
           <RichTextSection
             tag_id="data_insediamento"
@@ -124,13 +200,37 @@ const PersonaRuolo = ({ content }) => {
           </RichTextSection>
         </>
       )}
-      {content.organizzazione_riferimento.length > 0 && (
+      {content.assessore_di?.length > 0 && (
+        <RichTextSection
+          tag_id="assessore_di"
+          title={intl.formatMessage(messages.assessore_di)}
+        >
+          <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+            {content.assessore_di.map((item, i) => (
+              <OfficeCard key={item['@id']} office={item} size="big" />
+            ))}
+          </div>
+        </RichTextSection>
+      )}
+      {content.responsabile_di?.length > 0 && (
+        <RichTextSection
+          tag_id="responsabile_di"
+          title={intl.formatMessage(messages.responsabile_di)}
+        >
+          <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+            {content.responsabile_di.map((item, i) => (
+              <OfficeCard key={item['@id']} office={item} size="big" />
+            ))}
+          </div>
+        </RichTextSection>
+      )}
+      {content.strutture_correlate?.length > 0 && (
         <RichTextSection
-          tag_id="organization"
-          title={intl.formatMessage(messages.organizzazione_riferimento)}
+          tag_id="strutture_correlate"
+          title={intl.formatMessage(messages.strutture_correlate)}
         >
           <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
-            {content.organizzazione_riferimento.map((item, i) => (
+            {content.strutture_correlate.map((item, i) => (
               <OfficeCard key={item['@id']} office={item} size="big" />
             ))}
           </div>

package/src/components/ItaliaTheme/manage/Widgets/SubFooterConfigurationForm.jsx

@@ -120,6 +120,7 @@ const SubFooterConfigurationForm = ({
           ['privacy-policy-link', 'privacy-policy-link'],
           ['report-inefficiency', 'report-inefficiency'],
           ['faq', 'faq'],
+          ['legal-notes', 'legal-notes'],
         ]}
         value={menuItem.id_lighthouse}
         onChange={(id, value) => onChangeFormData('id_lighthouse', value)}

package/src/customizations/volto/components/manage/Blocks/ToC/View.jsx

@@ -66,6 +66,8 @@ const View = (props) => {
           title: title || block.plaintext,
           items,
           id: draftJSKey,
+          override_toc: block.override_toc,
+          plaintext: block.plaintext,
         };
         if (level < rootLevel) {
           rootLevel = level;

package/src/customizations/volto/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -0,0 +1,99 @@
+/**
+ * CUSTOMIZATIONS: Fix slug variable to work with 'id' if overrride_toc is not set
+ * View toc block.
+ * @module components/manage/Blocks/ToC/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { map } from 'lodash';
+import { List } from 'semantic-ui-react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import Slugger from 'github-slugger';
+
+const RenderListItems = ({ items, data, history }) => {
+  return map(items, (item) => {
+    const { id, level, title, override_toc, plaintext } = item;
+    /*
+    //volto version:
+    const slug = override_toc
+      ? Slugger.slug(plaintext)
+      : Slugger.slug(title) || id;
+      */
+    const slug = override_toc
+      ? Slugger.slug(plaintext)
+      : id || Slugger.slug(title);
+    return (
+      item && (
+        <List.Item key={id} className={`item headline-${level}`} as="li">
+          <AnchorLink
+            href={`#${slug}`}
+            onClick={(e) => {
+              history.push({ hash: slug });
+            }}
+          >
+            {title}
+          </AnchorLink>
+          {item.items?.length > 0 && (
+            <List
+              ordered={data.ordered}
+              bulleted={!data.ordered}
+              as={data.ordered ? 'ol' : 'ul'}
+            >
+              <RenderListItems
+                items={item.items}
+                data={data}
+                history={history}
+              />
+            </List>
+          )}
+        </List.Item>
+      )
+    );
+  });
+};
+
+/**
+ * View toc block class.
+ * @class View
+ * @extends Component
+ */
+const View = ({ data, tocEntries }) => {
+  const history = useHistory();
+  return (
+    <>
+      {data.title && !data.hide_title ? (
+        <h2>
+          {data.title || (
+            <FormattedMessage
+              id="Table of Contents"
+              defaultMessage="Table of Contents"
+            />
+          )}
+        </h2>
+      ) : (
+        ''
+      )}
+      <List
+        ordered={data.ordered}
+        bulleted={!data.ordered}
+        as={data.ordered ? 'ol' : 'ul'}
+      >
+        <RenderListItems items={tocEntries} data={data} history={history} />
+      </List>
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default injectIntl(View);

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

@@ -16,15 +16,15 @@ const Breadcrumbs = ({ pathname }) => {
 
   const CT_CustomBreadcrumbs = ['Pagina Argomento']; //don't display breadcrumbs for this content-types. They will be displayed by content-type view if needed.
   if (CT_CustomBreadcrumbs?.indexOf(content?.['@type']) >= 0) {
-    brdc = null;
+    return null;
   }
-  return brdc ? (
+  return (
     <div className="public-ui">
       <section id="briciole" className="container px-4 mt-4">
         <div className="">{brdc}</div>
       </section>
     </div>
-  ) : null;
+  );
 };
 
 Breadcrumbs.propTypes = {

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

@@ -0,0 +1,308 @@
+/**
+ * backport https://github.com/plone/volto/pull/4854
+ *
+ * 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;
+    const status = __SERVER__
+      ? this.props.error?.status
+      : this.props.error?.code;
+    // Checking to see if it's a 3XX HTTP status code. error.status only works on the server
+    if (['301', '302', '307', '308'].includes(status?.toString())) {
+      const redirectUrl = __SERVER__
+        ? this.props.error.response.headers.location
+        : this.props.error.url;
+      let redirect = flattenToAppURL(redirectUrl);
+      // We can hit situations where we end up being redirected to an api route. We don't want that so lets remove ++api++.
+      redirect = redirect.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);