use custom GET_CONTENT action to expand breadcrumbs,and get metadata …

…fields
eea · Jun 1, 2021 · 94c0bd3 · 94c0bd3
1 parent 25c9d5e
commit 94c0bd3
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 60 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -21,6 +21,8 @@ import {
   GET_INDEX_VALUES,
 } from '../constants/ActionTypes';
 
+import { GET_CONTENT } from '@plone/volto/constants/ActionTypes';
+
 import { compact, concat, isArray, join, map, pickBy, toPairs } from 'lodash';
 
 // export { getChartDataFromVisualization } from 'volto-blocks/actions'
@@ -139,3 +141,28 @@ export function quickResetSearchContent(subrequest = null) {
     subrequest,
   };
 }
+
+export function getContentWithData(
+  url,
+  version = null,
+  subrequest = null,
+  data = {},
+) {
+  let qs = Object.keys(data)
+    .map(function (key) {
+      return key + '=' + data[key];
+    })
+    .join('&');
+
+  return {
+    type: GET_CONTENT,
+    subrequest,
+    request: {
+      op: 'get',
+      path: `${url}${version ? `/@history/${version}` : ''}${
+        qs ? `?${qs}` : ''
+      }`,
+      data,
+    },
+  };
+}
diff --git a/src/components/manage/Blocks/Listing/Filter.jsx b/src/components/manage/Blocks/Listing/Filter.jsx
@@ -23,7 +23,7 @@ class Filter extends Component {
     const results = this.props.results;
     const facetFilter = this.props.facetFilter;
 
-    if (!results) return [];
+    if (!results || results.length === 0) return [];
 
     const res = {};
     filters.forEach((f) => {

diff --git a/src/components/manage/Blocks/Listing/ListTemplate.jsx b/src/components/manage/Blocks/Listing/ListTemplate.jsx
@@ -23,11 +23,14 @@ const ListTemplate = (props) => {
     <div>
       {searchItems &&
         searchItems.map((item, index) => (
-          <Item className="search-item" key={item['@id']}>
+          <Item className="search-item" key={item['@id'] || item.url}>
             <Item.Content>
               <Item.Description>
                 <div className="descriptionBody">
-                  <Link style={{ color: '#444' }} to={item['@id'] || item.url}>
+                  <Link
+                    style={{ color: '#444' }}
+                    to={getPath(item['@id'] || item.url)}
+                  >
                     <h4 className="item-description">
                       {item.description || item.title || item.Title}
                     </h4>
@@ -50,37 +53,42 @@ const ListTemplate = (props) => {
                     />
                   </div>
                   <div>
-                    <span className="searchLabel black">Location:</span>{' '}
-                    {item['@components'] && item['@components']?.breadcrumbs && (
-                      <Breadcrumb style={{ display: 'inline' }}>
-                        {item['@components'].breadcrumbs.items &&
-                          item['@components'].breadcrumbs.items
-                            .slice(0, -1)
-                            .map((item, index, items) => [
-                              index < items.length - 1 ? (
-                                <Breadcrumb.Section>
-                                  <Link
-                                    key={item.url}
-                                    to={getPath(item['@id'])}
-                                  >
-                                    {item.title}
-                                  </Link>
-                                  <Breadcrumb.Divider
-                                    key={`divider-${item.url}`}
-                                  />
-                                </Breadcrumb.Section>
-                              ) : (
-                                <Breadcrumb.Section>
-                                  <Link
-                                    key={item.url}
-                                    to={getPath(item['@id'])}
-                                  >
-                                    {item.title}
-                                  </Link>
-                                </Breadcrumb.Section>
-                              ),
-                            ])}
-                      </Breadcrumb>
+                    {item['@components']?.breadcrumbs?.items && (
+                      <>
+                        <span className="searchLabel black">Location:</span>{' '}
+                        {item['@components'] &&
+                          item['@components']?.breadcrumbs && (
+                            <Breadcrumb style={{ display: 'inline' }}>
+                              {item['@components'].breadcrumbs.items &&
+                                item['@components'].breadcrumbs.items
+                                  .slice(0, -1)
+                                  .map((item, index, items) => [
+                                    index < items.length - 1 ? (
+                                      <Breadcrumb.Section>
+                                        <Link
+                                          key={item.url}
+                                          to={getPath(item['@id'])}
+                                        >
+                                          {item.title}
+                                        </Link>
+                                        <Breadcrumb.Divider
+                                          key={`divider-${item.url}`}
+                                        />
+                                      </Breadcrumb.Section>
+                                    ) : (
+                                      <Breadcrumb.Section>
+                                        <Link
+                                          key={item.url}
+                                          to={getPath(item['@id'])}
+                                        >
+                                          {item.title}
+                                        </Link>
+                                      </Breadcrumb.Section>
+                                    ),
+                                  ])}
+                            </Breadcrumb>
+                          )}
+                      </>
                     )}
                   </div>
                 </div>

diff --git a/src/components/theme/View/CollectionView.jsx b/src/components/theme/View/CollectionView.jsx
@@ -3,9 +3,10 @@
  * @module components/theme/View/CollectionView
  */
 
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Helmet } from '@plone/volto/helpers';
 import { Container, Item } from 'semantic-ui-react';
+import { useSelector, useDispatch } from 'react-redux';
 import Filter from '@eeacms/volto-energy-theme/components/manage/Blocks/Listing/Filter';
 
 import { find } from 'lodash';
@@ -16,7 +17,8 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { getBaseUrl } from '@plone/volto/helpers';
-import { ListingBlockBody } from '@plone/volto/components';
+import ListingBlockTemplate from '@eeacms/volto-energy-theme/components/manage/Blocks/Listing/ListTemplate';
+import { getContentWithData } from '@eeacms/volto-energy-theme/actions';
 import cx from 'classnames';
 
 /**
@@ -35,14 +37,15 @@ import cx from 'classnames';
 // };
 
 const CollectionView = (props) => {
-  const { content, location } = props;
+  const { content } = props;
+  const dispatch = useDispatch();
   const [activeFilter, setActiveFilter] = useState('');
 
   let path = content['@id']
     .replace(config.settings.internalApiPath, '')
     .replace(config.settings.apiPath, '');
-
   path = getBaseUrl(path);
+
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
 
@@ -53,18 +56,28 @@ const CollectionView = (props) => {
     );
   };
 
+  const listingBlockid = getListingBlock();
+
+  const listingBlockItems = useSelector((state) => state.content.subrequests);
+
+  useEffect(() => {
+    //This is only done to get full expanded content along with metadata fields which is,
+    // not possible with listing block's @querystring-search default action
+    // which intern force to use two content items :(, this needs to be refactored
+    const options = {
+      metadata_fields: '_all',
+      is_search: 1,
+      fullobjects: true,
+    };
+    dispatch(getContentWithData(path, null, listingBlockid, options));
+  }, []);
+
   const handleSelectFilter = (ev, { name }) => {
     setActiveFilter(name);
   };
 
-  const listingBlockid = getListingBlock();
-
   const listingBlockProps = content[blocksFieldname]?.[listingBlockid] || {};
 
-  const listingBlockVariation = config.blocks.blocksConfig.listing.variations.find(
-    (template) => template.id === listingBlockProps.variation,
-  );
-
   return (
     <Container>
       <Helmet title={content.title} />
@@ -91,22 +104,26 @@ const CollectionView = (props) => {
               </p>
             )}
             <div className={cx('block listing', listingBlockProps.variation)}>
-              <ListingBlockBody
-                properties={content}
-                path={path ?? location.pathname}
-                data={listingBlockProps}
-                isEditMode={false}
-                variation={listingBlockVariation}
-              />
-              {content.filter ? (
-                <Filter
-                  handleSelectFilter={handleSelectFilter}
-                  facetFilter={content.filter}
-                  selectedValue={activeFilter}
-                  results={content.items}
-                />
+              {listingBlockItems ? (
+                <>
+                  <ListingBlockTemplate
+                    items={listingBlockItems[listingBlockid]?.data?.items}
+                    {...listingBlockProps}
+                    isEditMode={false}
+                  />
+                  {content.filter ? (
+                    <Filter
+                      handleSelectFilter={handleSelectFilter}
+                      facetFilter={content.filter}
+                      selectedValue={activeFilter}
+                      results={listingBlockItems[listingBlockid]?.data?.items}
+                    />
+                  ) : (
+                    ''
+                  )}
+                </>
               ) : (
-                ''
+                <div>No results Found</div>
               )}
             </div>
           </Item.Group>

diff --git a/src/index.js b/src/index.js
@@ -77,10 +77,10 @@ export default function applyConfig(config) {
       {
         match: '/',
         GET_CONTENT: [
+          'breadcrumbs',
           'siblings',
           'navigation',
           'localnavigation',
-          'breadcrumbs',
         ],
       },
       {