design-comuni-plone-theme 12.0.0-alpha.1 → 12.0.0

package/src/customizations/volto/actions/vocabularies/vocabularies.js

@@ -0,0 +1,102 @@
+/**
+
+ * original from volto 17.18.2
+ * backport https://github.com/plone/volto/pull/6236
+
+ * Vocabularies actions.
+ * @module actions/vocabularies/vocabularies
+ */
+
+import {
+  GET_VOCABULARY,
+  GET_VOCABULARY_TOKEN_TITLE,
+} from '@plone/volto/constants/ActionTypes';
+import config from '@plone/volto/registry';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getVocabName } from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import qs from 'query-string';
+
+/**
+ * Get vocabulary given a URL (coming from a Schema) or from a vocabulary name.
+ * @function getVocabulary
+ * @param {string} vocabNameOrURL Full API URL of vocabulary or vocabulary name
+ * @param {string} query Only include results containing this string.
+ * @param {number} start Start of result batch.
+ * @param {number} b_size The size of the batch.
+ * @param {string} subrequest Name of the subrequest.
+ * @returns {Object} Get vocabulary action.
+ */
+export function getVocabulary({
+  vocabNameOrURL,
+  query = null,
+  start = 0,
+  size,
+  subrequest,
+}) {
+  const vocabulary = getVocabName(vocabNameOrURL);
+  const contextualVocabularies = config.settings.contextualVocabularies;
+  const vocabPath =
+    contextualVocabularies &&
+    contextualVocabularies.includes(vocabulary) &&
+    vocabulary !== vocabNameOrURL
+      ? flattenToAppURL(vocabNameOrURL)
+      : `/@vocabularies/${vocabulary}`;
+  let queryString = `b_start=${start}${size ? '&b_size=' + size : ''}`;
+
+  if (query) {
+    queryString = `${queryString}&title=${query}`;
+  }
+  return {
+    type: GET_VOCABULARY,
+    vocabulary: vocabNameOrURL,
+    start,
+    request: {
+      op: 'get',
+      path: `${vocabPath}?${queryString}`,
+    },
+    subrequest,
+  };
+}
+
+/**
+ * Get the title value given a token from vocabulary given a vocabulary URL
+ * (coming from a Schema) or from a vocabulary name.
+ * @function getVocabularyTokenTitle
+ * @param {string} vocabNameOrURL Full API URL of vocabulary or vocabulary name
+ * @param {string} token Only include results containing this string.
+ * @returns {Object} Get vocabulary action.
+ */
+export function getVocabularyTokenTitle({
+  vocabNameOrURL,
+  token = null,
+  tokens = null,
+  subrequest,
+}) {
+  // In case we have a URL, we have to get the vocabulary name
+  const vocabulary = getVocabName(vocabNameOrURL);
+  const contextualVocabularies = config.settings.contextualVocabularies;
+  const vocabPath =
+    contextualVocabularies &&
+    contextualVocabularies.includes(vocabulary) &&
+    vocabulary !== vocabNameOrURL
+      ? flattenToAppURL(vocabNameOrURL)
+      : `/@vocabularies/${vocabulary}`;
+  const queryString = {
+    ...(token && { token }),
+    ...(tokens && { tokens }),
+  };
+
+  return {
+    type: GET_VOCABULARY_TOKEN_TITLE,
+    vocabulary: vocabNameOrURL,
+    token,
+    tokens,
+    subrequest,
+    request: {
+      op: 'get',
+      path: `${vocabPath}}?b_size=-1&${qs.stringify(queryString, {
+        encode: false,
+      })}`,
+    },
+  };
+}

package/src/customizations/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -89,6 +89,7 @@ class AddLinkForm extends Component {
       ['accessibility-link', 'accessibility-link'],
       ['privacy-policy-link', 'privacy-policy-link'],
       ['legal-notes', 'legal-notes'],
+      ['pager-link', 'pager-link'],
     ];
   }
 

package/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -6,6 +6,7 @@ CUSTOMIZATIONS:
 - 'background class' and 'block class' logic for search block
 - search block integration
 - pass 'block'  prop to listing variation
+- added bg_color = "" if is a search block
 */
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -77,6 +78,10 @@ const ListingBody = React.memo(
           ? `bg-${data.bg_color}`
           : 'bg-light';
 
+        if (isSearchBlockResults) {
+          bg_color = '';
+        }
+
         if (block.template === 'gridGalleryTemplate') {
           return `section section-muted section-inset-shadow py-5 ${bg_color} ${
             isSearchBlockResults ? '' : 'full-width'

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -2,22 +2,26 @@
   - Agid styling
   - Add class .block.listing in listing body container div to use
     existing listing template styles
+  - Inspired from
+    https://github.com/plone/volto/commit/211d9bea13119cc430db9d53a4740a860781ca2e
+    the way to handle search sort. If searchableText is setted, discard default sorting and uses plone's ranking only if is configured from sidebar. (Changed applyDefaults fn passing usePloneRanking)
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
 import { withBlockExtensions } from '@plone/volto/helpers';
 
-import config from '@plone/volto/registry';
-import cx from 'classnames';
 import {
-  withSearch,
   withQueryString,
+  withSearch,
 } from '@plone/volto/components/manage/Blocks/Search/hocs';
-import { compose } from 'redux';
-import { useSelector } from 'react-redux';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
 import { isEqual, isFunction } from 'lodash';
+import { useSelector } from 'react-redux';
+import { compose } from 'redux';
+import { useEffect } from 'react';
 
 const getListingBodyVariation = (data) => {
   const { variations } = config.blocks.blocksConfig.listing;
@@ -49,7 +53,7 @@ const blockPropsAreChanged = (prevProps, nextProps) => {
   return isEqual(prev, next);
 };
 
-const applyDefaults = (data, root) => {
+const applyDefaults = (data, root, usePloneRanking) => {
   const defaultQuery = [
     {
       i: 'path',
@@ -57,12 +61,30 @@ const applyDefaults = (data, root) => {
       v: root || '/',
     },
   ];
-  return {
+
+  const searchBySearchableText = data.query.filter(
+    (item) => item['i'] === 'SearchableText',
+  ).length;
+
+  let sort_on = { sort_on: data?.sort_on ?? 'effective' };
+  let sort_order = { sort_order: data?.sort_order ?? 'descending' };
+
+  if (usePloneRanking && searchBySearchableText > 0) {
+    sort_on = undefined;
+    sort_order = undefined;
+  }
+
+  const result = {
     ...data,
-    sort_on: data?.sort_on || 'effective',
-    sort_order: data?.sort_order || 'descending',
     query: data?.query?.length ? data.query : defaultQuery,
   };
+  if (!sort_on) {
+    delete result.sort_on;
+  }
+  if (!sort_order) {
+    delete result.sort_order;
+  }
+  return result;
 };
 
 const SearchBlockView = (props) => {
@@ -88,10 +110,26 @@ const SearchBlockView = (props) => {
   }, [dataListingBodyVariation, mode]);
 
   const root = useSelector((state) => state.breadcrumbs.root);
-  const listingBodyData = applyDefaults(searchData, root);
+  const [defaultListingBodyData] = React.useState(
+    applyDefaults(searchData, root, data.usePloneRanking),
+  );
+  const listingBodyData = applyDefaults(searchData, root, data.usePloneRanking);
 
   const { variations } = config.blocks.blocksConfig.listing;
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);
+
+  const query = listingBodyData.query;
+  const resultsRef = React.forwardRef(null);
+
+  useEffect(() => {
+    if (
+      JSON.stringify(defaultListingBodyData.query) !== JSON.stringify(query)
+    ) {
+      //fai lo scroll solo quando vengono modificati i filtri dall'utente. Evita lo scroll al primo load
+      resultsRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [query]);
+
   if (!Layout) return null;
   return (
     <div className={cx('block search', { 'public-ui': mode === 'edit' })}>
@@ -100,6 +138,7 @@ const SearchBlockView = (props) => {
         isEditMode={mode === 'edit'}
         selectedView={selectedView}
         setSelectedView={setSelectedView}
+        resultsRef={resultsRef}
       >
         {/* Add class .block.listing to benefit from existing listing template styles */}
         <div className="block listing search-results">

package/src/customizations/volto/components/manage/Blocks/Search/components/DateRangeFacet.jsx

@@ -22,6 +22,10 @@ const messages = defineMessages({
     id: 'End Date',
     defaultMessage: 'End Date',
   },
+  clearDates: {
+    id: 'Clear dates',
+    defaultMessage: 'Pulisci i campi',
+  },
 });
 
 const PrevIcon = () => (
@@ -64,7 +68,17 @@ const customArrowIcon = (props) => {
   );
 };
 
-const CloseIcon = () => <Icon icon="it-close" size="24px" className="close" />;
+const CloseIcon = (props) => {
+  const { intl } = props;
+  return (
+    <Icon
+      icon="it-close"
+      size="24px"
+      className="close"
+      title={intl.formatMessage(messages.clearDates)}
+    />
+  );
+};
 
 const DateRangeFacet = (props) => {
   const { facet, isEditMode, onChange, value, reactDates, intl, lang } = props;
@@ -89,7 +103,7 @@ const DateRangeFacet = (props) => {
             disabled={isEditMode}
             noBorder
             showClearDates
-            customCloseIcon={<CloseIcon />}
+            customCloseIcon={<CloseIcon {...props} />}
             displayFormat={moment.localeData(lang).longDateFormat('L')}
             focusedInput={focused}
             onFocusChange={(focusedInput) => setFocused(focusedInput)}

package/src/customizations/volto/components/manage/Blocks/Search/components/SearchDetails.jsx

@@ -2,9 +2,8 @@
   - Agid styling
 
 */
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 import { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers';
+import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   searchResults: {
@@ -26,7 +25,7 @@ const SearchDetails = ({ total, text, as = 'p', data }) => {
               searchedtext: text,
             })}
           </>
-        )}
+        )}{' '}
         {data.showTotalResults && (
           <>
             {intl.formatMessage(messages.searchResults)}: <b>{total}</b>

package/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -1,10 +1,10 @@
 /* CUSTOMIZATIONS:
   - Read puntual comments in code
 */
+import qs from 'query-string';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import qs from 'query-string';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
@@ -236,7 +236,7 @@ const withSearch = (options) => (WrappedComponent) => {
   const { inputDelay = 1000 } = options || {};
 
   function WithSearch(props) {
-    const { data, id, editable = false } = props;
+    const { data, id, editable = false, properties } = props;
 
     const [locationSearchData, setLocationSearchData] = useSearchBlockState(
       id,
@@ -325,8 +325,10 @@ const withSearch = (options) => (WrappedComponent) => {
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
+    const subrequestID = properties?.UID + '-' + id;
     const totalItems =
-      querystringResults[id]?.total || querystringResults[id]?.items?.length;
+      querystringResults[subrequestID]?.total ||
+      querystringResults[subrequestID]?.items?.length;
 
     return (
       <WrappedComponent

package/src/customizations/volto/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx

@@ -1,5 +1,6 @@
 /* CUSTOMIZATIONS:
   - Agid styling
+  - added resultsRef
 */
 import React from 'react';
 import {
@@ -33,6 +34,7 @@ const LeftColumnFacets = (props) => {
     isEditMode,
     querystring = {},
     searchData,
+    resultsRef,
     // mode = 'view',
     // variation,
   } = props;
@@ -117,24 +119,26 @@ const LeftColumnFacets = (props) => {
               </div>
             )}
 
-            <div className="search-results-count-sort d-flex align-center flex-wrap">
-              <SearchDetails
-                text={searchedText}
-                total={totalItems}
-                data={data}
-              />
-              <FilterList
-                {...props}
-                isEditMode={isEditMode}
-                setFacets={(f) => {
-                  flushSync(() => {
-                    setFacets(f);
-                    onTriggerSearch(searchedText || '', f);
-                  });
-                }}
-              />
+            <div ref={resultsRef} className="results-wrapper">
+              <div className="search-results-count-sort d-flex align-center flex-wrap">
+                <SearchDetails
+                  text={searchedText}
+                  total={totalItems}
+                  data={data}
+                />
+                <FilterList
+                  {...props}
+                  isEditMode={isEditMode}
+                  setFacets={(f) => {
+                    flushSync(() => {
+                      setFacets(f);
+                      onTriggerSearch(searchedText || '', f);
+                    });
+                  }}
+                />
+              </div>
+              {children}
             </div>
-            {children}
           </div>
         </Row>
       </Container>

package/src/customizations/volto/components/manage/Blocks/Search/layout/RightColumnFacets.jsx

@@ -1,5 +1,6 @@
 /* CUSTOMIZATIONS:
   - Agid styling
+  - added resultsRef
 */
 import React from 'react';
 import {
@@ -35,6 +36,7 @@ const RightColumnFacets = (props) => {
     isEditMode,
     querystring = {},
     searchData,
+    resultsRef,
     // mode = 'view',
     // variation,
   } = props;
@@ -72,24 +74,26 @@ const RightColumnFacets = (props) => {
               </div>
             )}
 
-            <div className="search-results-count-sort d-flex align-center flex-wrap">
-              <SearchDetails
-                text={searchedText}
-                total={totalItems}
-                data={data}
-              />
-              <FilterList
-                {...props}
-                isEditMode={isEditMode}
-                setFacets={(f) => {
-                  flushSync(() => {
-                    setFacets(f);
-                    onTriggerSearch(searchedText || '', f);
-                  });
-                }}
-              />
+            <div ref={resultsRef} className="results-wrapper">
+              <div className="search-results-count-sort d-flex align-center flex-wrap">
+                <SearchDetails
+                  text={searchedText}
+                  total={totalItems}
+                  data={data}
+                />
+                <FilterList
+                  {...props}
+                  isEditMode={isEditMode}
+                  setFacets={(f) => {
+                    flushSync(() => {
+                      setFacets(f);
+                      onTriggerSearch(searchedText || '', f);
+                    });
+                  }}
+                />
+              </div>
+              {children}
             </div>
-            {children}
           </div>
 
           {showColumn && (

package/src/customizations/volto/components/manage/Blocks/Search/schema.js

@@ -153,6 +153,15 @@ const messages = defineMessages({
     id: 'Link to',
     defaultMessage: 'Link to',
   },
+  usePloneRanking: {
+    id: "Usa l'ordinamento dei risultati di Plone",
+    defaultMessage: "Usa l'ordinamento dei risultati di Plone",
+  },
+  usePloneRankingDescription: {
+    id: "Usa l'ordinamento dei risultati di Plone - descrizione",
+    defaultMessage:
+      "Se impostato, nel momento in cui un utente effettua una ricerca testuale per parola chiave, non viene usato l'ordinamento di default impostato nella sezione 'Ricerca iniziale', ma l'ordinamento di Plone in base all'ordine di importanza dei risultati da esso stabilito.",
+  },
 });
 
 const enhanceSchema = (originalSchema, formData) => {
@@ -285,6 +294,7 @@ const SearchSchema = ({ data = {}, intl }) => {
           ...(data.showSearchInput ?? true ? ['showSearchButton'] : []),
           // ...(data.showSearchInput ? ['searchInputPrompt'] : []),
           // ...(data.showSearchButton ? ['searchButtonLabel'] : []),
+          'usePloneRanking',
           'showTotalResults',
         ],
       },
@@ -316,6 +326,12 @@ const SearchSchema = ({ data = {}, intl }) => {
         title: intl.formatMessage(messages.showTotalResults),
         default: true,
       },
+      usePloneRanking: {
+        type: 'boolean',
+        title: intl.formatMessage(messages.usePloneRanking),
+        description: intl.formatMessage(messages.usePloneRankingDescription),
+        default: false,
+      },
       searchButtonLabel: {
         title: intl.formatMessage(messages.searchButtonLabel),
         placeholder: intl.formatMessage(messages.searchButtonPlaceholder),

package/src/customizations/volto/components/manage/Blocks/Video/Body.jsx

@@ -34,7 +34,6 @@ const Body = ({ data, isEditMode }) => {
   let placeholder = null;
   let videoID = null;
   let listID = null;
-
   if (data.url) {
     const [computedID, computedPlaceholder] = videoUrlHelper(
       data.url,
@@ -74,6 +73,11 @@ const Body = ({ data, isEditMode }) => {
     ref: ref,
   };
 
+  let apiPath = config.settings.apiPath;
+  if (!apiPath.endsWith('/')) {
+    apiPath += '/';
+  }
+
   return (
     <>
       {data.url && (
@@ -105,10 +109,7 @@ const Body = ({ data, isEditMode }) => {
                       <video
                         src={
                           isInternalURL(
-                            data.url.replace(
-                              getParentUrl(config.settings.apiPath),
-                              '',
-                            ),
+                            data.url.replace(getParentUrl(apiPath), ''),
                           )
                             ? `${data.url}${
                                 data.url.indexOf('@@download/file') < 0