@eeacms/volto-clms-theme 1.0.40 → 1.0.44

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingEdit.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { useSelector, useDispatch } from 'react-redux';
+import { searchContent } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+// import { getBaseUrl } from '@plone/volto/helpers';
+
+const CclReatedListingEdit = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    selected,
+    id,
+    properties,
+    metadata,
+  } = props;
+  const dispatch = useDispatch();
+  const schema = config.blocks.blocksConfig['relatedListing'].schema;
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  const types = useSelector((state) => state.types.types);
+  const types_schema = types.map((type) => [type.title, type.title]);
+  // const path = getBaseUrl(metadata ? metadata['@id'] : properties['@id']);
+  const uid = metadata ? metadata['UID'] : properties['UID'];
+  let libraries = searchSubrequests?.[props.id]?.items || [];
+  const variationsConfig =
+    config.blocks.blocksConfig['relatedListing'].variations;
+  let TemplateView = '';
+  let template_id = '';
+  for (let variation in variationsConfig) {
+    if (!data?.variation && variationsConfig[variation].isDefault) {
+      TemplateView = variationsConfig[variation].template;
+      template_id = variationsConfig[variation].id;
+      data.variation = template_id;
+    }
+    if (variationsConfig[variation].id === data?.variation) {
+      TemplateView = variationsConfig[variation].template;
+      template_id = variationsConfig[variation].id;
+    }
+  }
+  if (template_id === '') {
+    for (let variation in variationsConfig) {
+      if (variationsConfig[variation].isDefault) {
+        TemplateView = variationsConfig[variation].template;
+        template_id = variationsConfig[variation].id;
+        data.variation = template_id;
+      }
+    }
+  }
+  if (!data.content_type) {
+    data.content_type = 'News Item';
+  }
+  React.useEffect(() => {
+    dispatch(
+      searchContent(
+        '',
+        {
+          fullobjects: 1,
+          portal_type: data.content_type,
+          path: '/',
+          associated_products: uid,
+        },
+        id,
+      ),
+    );
+  }, [data, id, uid, dispatch]);
+  return (
+    <>
+      <div className="technical-libraries">
+        <h2>Related Listings</h2>
+        {libraries.length > 0 ? (
+          <TemplateView items={libraries} variation={template_id} />
+        ) : (
+          <p>There are no related {data.content_type} items.</p>
+        )}
+      </div>
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={schema(types_schema)}
+          title="Related Listing block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default CclReatedListingEdit;

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingView.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { searchContent } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+// import { getBaseUrl } from '@plone/volto/helpers';
+
+const CclReatedListingView = (props) => {
+  const { data, id, properties, metadata } = props;
+  const dispatch = useDispatch();
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  // const path = getBaseUrl(metadata ? metadata['@id'] : properties['@id']);
+  const uid = metadata ? metadata['UID'] : properties['UID'];
+  let libraries = searchSubrequests?.[props.id]?.items || [];
+  const variationsConfig =
+    config.blocks.blocksConfig['relatedListing'].variations;
+  let TemplateView = '';
+  let template_id = '';
+  for (let variation in variationsConfig) {
+    if (!data?.variation && variationsConfig[variation].isDefault) {
+      TemplateView = variationsConfig[variation].template;
+      template_id = variationsConfig[variation].id;
+      data.variation = template_id;
+    }
+    if (variationsConfig[variation].id === data?.variation) {
+      TemplateView = variationsConfig[variation].template;
+      template_id = variationsConfig[variation].id;
+    }
+  }
+  if (template_id === '') {
+    for (let variation in variationsConfig) {
+      if (variationsConfig[variation].isDefault) {
+        TemplateView = variationsConfig[variation].template;
+        template_id = variationsConfig[variation].id;
+        data.variation = template_id;
+      }
+    }
+  }
+  if (!data.content_type) {
+    data.content_type = 'News Item';
+  }
+  React.useEffect(() => {
+    dispatch(
+      searchContent(
+        '',
+        {
+          fullobjects: 1,
+          portal_type: data.content_type || 'News Item',
+          path: '/',
+          associated_products: uid,
+        },
+        id,
+      ),
+    );
+  }, [data, id, uid, dispatch]);
+
+  return (
+    <>
+      {libraries.length > 0 ? (
+        <TemplateView items={libraries} variation={template_id} />
+      ) : (
+        <p>There are no related {data.content_type} items.</p>
+      )}
+    </>
+  );
+};
+
+export default CclReatedListingView;

package/src/components/Blocks/CclRelatedListingBlock/schema.js

@@ -0,0 +1,34 @@
+import config from '@plone/volto/registry';
+
+const Schema = (types_schema) => {
+  const variationsConfig =
+    config.blocks.blocksConfig['relatedListing'].variations;
+  const variations = Object.keys(variationsConfig).map((variation) => [
+    variationsConfig[variation].id,
+    variationsConfig[variation].title,
+  ]);
+  return {
+    title: 'Related Items List block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['content_type', 'variation'],
+      },
+    ],
+    properties: {
+      content_type: {
+        title: 'Content Type',
+        choices: [...types_schema],
+      },
+      variation: {
+        title: 'Variation',
+        type: 'array',
+        choices: [...variations],
+      },
+    },
+    required: [],
+  };
+};
+
+export default Schema;

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingWorkOpportunities.jsx

@@ -36,19 +36,7 @@ const CclWorkOpportunity = (props) => {
   );
 };
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = '' + (d.getMonth() + 1),
-    day = '' + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = '0' + month;
-  if (day.length < 2) day = '0' + day;
-
-  return [year, month, day].join('-');
-}
-
-var Today = formatDate(Date.now());
+var Today = new Date();
 
 const CclListingWorkOpportunities = (props) => {
   const { items, variation } = props;
@@ -61,7 +49,8 @@ const CclListingWorkOpportunities = (props) => {
       {items
         .filter(
           (item) =>
-            item.submission_deadline < Today && status === 'CloseTenders',
+            new Date(item.submission_deadline) < Today &&
+            status === 'CloseTenders',
         )
         .map((item, index) => (
           <CclWorkOpportunity
@@ -73,7 +62,8 @@ const CclListingWorkOpportunities = (props) => {
       {items
         .filter(
           (item) =>
-            item.submission_deadline > Today && status === 'OpenTenders',
+            new Date(item.submission_deadline) > Today &&
+            status === 'OpenTenders',
         )
         .map((item, index) => (
           <CclWorkOpportunity

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx

@@ -34,7 +34,7 @@ const View = (props) => {
     speed: 2000,
     fade: true,
     cssEase: 'linear',
-    autoplay: true,
+    autoplay: false,
     autoplaySpeed: 5000,
     beforeChange: (oldIndex, index) => {
       setActiveTab(tabsList[index]);
@@ -103,6 +103,7 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [hashlink.counter]);
 
+  const [showInfo, setShowInfo] = React.useState(false);
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -111,7 +112,11 @@ const View = (props) => {
           key={`slide-${tab}`}
           {...props}
           metadata={metadata}
-          content={tabs[tab]}
+          content={{
+            ...tabs[tab],
+            setShowInfo: setShowInfo,
+            showInfo: showInfo,
+          }}
         />
       ),
     };

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclProductTabsView.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import CclVerticalTabsView from './CclVerticalTabsView';
+import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
+
+const CclProductTabsView = (props) => {
+  const locale = useSelector((state) => state.intl.locale);
+  const ExtraComponent = () => (
+    <div className="left-menu-detail">
+      <div className="menu-detail-image">
+        {props.metadata?.image ? (
+          <img
+            src={props.metadata?.image?.scales?.preview?.download}
+            alt={props.metadata?.title || 'Product map preview'}
+          />
+        ) : (
+          <img
+            src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg"
+            alt="Product map preview"
+            style={{ opacity: 0.5 }}
+          />
+        )}
+      </div>
+      <div className="menu-detail-button">
+        <a
+          href={'/' + locale + '/mapviewer?product=' + props.metadata['UID']}
+          className="ccl-button ccl-button--default"
+        >
+          <FormattedMessage
+            id="View in the map viewer"
+            defaultMessage="View in the map viewer"
+          />
+        </a>
+      </div>
+    </div>
+  );
+
+  return <CclVerticalTabsView {...props} ExtraComponent={ExtraComponent} />;
+};
+
+export default CclProductTabsView;

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx

@@ -7,52 +7,10 @@ import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import './fontawesome';
 import cx from 'classnames';
 import './custom.less';
+import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalFaqTabsView = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
-  } = props;
-
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-  }, [
-    activeTabIndex,
-    data.id,
-    hashlink.counter,
-    hashlink.hash,
-    hashlinkOnMount,
-    props,
-    setActiveTab,
-    tabsList,
-  ]);
+  const { metadata = {}, tabsList = [] } = props;
 
   const PanelsComponent = () => {
     const { activeTab = null, tabs = {} } = props;
@@ -60,18 +18,20 @@ const CclVerticalFaqTabsView = (props) => {
       <div className="right-content cont-w-75">
         {tabsList.map((tab, index) => {
           return (
-            <div
-              key={index}
-              className={cx('panel', tab === activeTab && 'panel-selected')}
-              role="tabpanel"
-              aria-hidden="false"
-            >
-              <RenderBlocks
-                {...props}
-                metadata={metadata}
-                content={tabs[tab]}
-              />
-            </div>
+            <Route to={'#' + activeTab}>
+              <div
+                key={index}
+                className={cx('panel', tab === activeTab && 'panel-selected')}
+                role="tabpanel"
+                aria-hidden="false"
+              >
+                <RenderBlocks
+                  {...props}
+                  metadata={metadata}
+                  content={tabs[tab]}
+                />
+              </div>
+            </Route>
           );
         })}
       </div>
@@ -96,11 +56,10 @@ const CclVerticalFaqTabsView = (props) => {
                 id={tabIndex}
                 className={cx('card', tab === activeTab && 'active')}
               >
-                <a
-                  href={'#' + tabIndex}
+                <NavLink
+                  to={'#tab' + tabIndex}
                   className="collapsed"
                   onClick={(e) => {
-                    e.preventDefault();
                     if (activeTab !== tab) {
                       setActiveTab(tab);
                     }
@@ -112,7 +71,7 @@ const CclVerticalFaqTabsView = (props) => {
                   }}
                 >
                   {title || defaultTitle}
-                </a>
+                </NavLink>
               </div>
             );
           })}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -9,51 +9,7 @@ import cx from 'classnames';
 import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalTabsView = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
-  } = props;
-
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-  }, [
-    activeTabIndex,
-    data.id,
-    hashlink.counter,
-    hashlink.hash,
-    hashlinkOnMount,
-    props,
-    setActiveTab,
-    tabsList,
-  ]);
-
+  const { metadata = {}, tabsList = [], ExtraComponent = null } = props;
   const PanelsComponent = () => {
     const { activeTab = null, tabs = {} } = props;
     return (
@@ -82,6 +38,7 @@ const CclVerticalTabsView = (props) => {
   const TabsComponent = () => {
     return (
       <div className="left-content cont-w-25">
+        {ExtraComponent ? <ExtraComponent /> : ''}
         <nav className="left-menu">
           {tabsList.map((tab, index) => {
             const {
@@ -99,10 +56,9 @@ const CclVerticalTabsView = (props) => {
                 className={cx('card', tab === activeTab && 'active')}
               >
                 <NavLink
-                  to={'#' + title}
+                  to={'#tab' + tabIndex}
                   className="collapsed"
                   onClick={(e) => {
-                    e.preventDefault();
                     if (activeTab !== tab) {
                       setActiveTab(tab);
                     }

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/FixTemplates.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+
+const FixTemplates = (TabView) =>
+  function Component(props) {
+    const deprecated_templates =
+      config.blocks.blocksConfig[TABS_BLOCK].deprecated_templates;
+    const { data = {} } = props;
+    const deprecated = deprecated_templates.includes(data.template);
+    const new_props = {
+      ...props,
+      data: { ...data, template: deprecated ? 'default' : data.template },
+    };
+
+    return <TabView {...new_props} />;
+  };
+
+export default FixTemplates;

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/RoutingHOC.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+const RoutingHOC = (TabView) =>
+  function Component(props) {
+    const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+    const {
+      data = {},
+      tabsList = [],
+      activeTabIndex = 0,
+      hashlink = {},
+      setActiveTab = () => {},
+    } = props;
+    React.useEffect(() => {
+      const urlHash = window.location.hash.substring(1) || '';
+      if (
+        hashlink.counter > 0 ||
+        (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
+      ) {
+        const id = hashlink.hash || urlHash || '';
+        const index = tabsList.indexOf(id);
+        const parentId = data.id || props.id;
+        const parent = document.getElementById(parentId);
+        const headerWrapper = document.querySelector('.header-wrapper');
+        const offsetHeight = headerWrapper?.offsetHeight || 0;
+        if (id !== parentId && index > -1 && parent) {
+          if (activeTabIndex !== index) {
+            setActiveTab(id);
+          }
+          props.scrollToTarget(parent, offsetHeight);
+        } else if (id === parentId && parent) {
+          props.scrollToTarget(parent, offsetHeight);
+        }
+      }
+      if (!hashlinkOnMount) {
+        setHashlinkOnMount(true);
+      }
+      if (
+        String(window.performance.getEntriesByType('navigation')[0].type) ===
+          'navigate' ||
+        String(window.performance.getEntriesByType('navigation')[0].type) ===
+          'reload'
+      ) {
+        if (window.location.hash.length === 0) {
+          setActiveTab(tabsList[0]);
+        } else {
+          setActiveTab(tabsList[window.location.hash.substring(4) - 1]);
+        }
+      }
+    }, [
+      activeTabIndex,
+      data.id,
+      hashlink.counter,
+      hashlink.hash,
+      hashlinkOnMount,
+      props,
+      setActiveTab,
+      tabsList,
+    ]);
+
+    return <TabView {...props} />;
+  };
+
+export default RoutingHOC;

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js

@@ -1,13 +1,17 @@
 import CclTabsView from './CclTabsView';
 import CclVerticalTabsView from './CclVerticalTabsView';
-import CclRouteTabsView from './VerticalRouteTabsView';
 import CclVerticalFaqTabsView from './CclVerticalFaqTabsView';
 import CclCarouselView from './CclCarouselView';
+import RoutingHOC from './RoutingHOC';
+import CclProductTabsView from './CclProductTabsView';
+import FixTemplates from './FixTemplates';
 
 export {
   CclTabsView,
   CclVerticalTabsView,
   CclVerticalFaqTabsView,
   CclCarouselView,
-  CclRouteTabsView,
+  RoutingHOC,
+  CclProductTabsView,
+  FixTemplates,
 };