@eeacms/volto-clms-theme 1.0.21 → 1.0.25

package/CHANGELOG.md

@@ -4,8 +4,52 @@ 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).
 
+#### [1.0.25](https://github.com/eea/volto-clms-theme/compare/1.0.24...1.0.25)
+
+- Fixing feedback problems [`#80`](https://github.com/eea/volto-clms-theme/pull/80)
+- empty libraries message [`134ee68`](https://github.com/eea/volto-clms-theme/commit/134ee687a1de7d31d4a62795324a9738e874e605)
+- class to className [`e3bccef`](https://github.com/eea/volto-clms-theme/commit/e3bccefc307424e6508dd4280bb001b45313e8d4)
+- some fixes [`02eddc4`](https://github.com/eea/volto-clms-theme/commit/02eddc4b359359d07e62a5317aaffa61a7a65555)
+- carrousel and some paginations left [`cd0c86e`](https://github.com/eea/volto-clms-theme/commit/cd0c86e1b40c63fd258d5a54415b41c4dd4c4d40)
+- some frontend fixes after eugenija feedback [`7ca4d30`](https://github.com/eea/volto-clms-theme/commit/7ca4d30a7c203a5aaf52b35f3a624d47327a08aa)
+
+#### [1.0.24](https://github.com/eea/volto-clms-theme/compare/1.0.23...1.0.24)
+
+> 16 September 2021
+
+- Upgrade volto-tabs-block version and CclCard fix [`#79`](https://github.com/eea/volto-clms-theme/pull/79)
+- volto-tabs-block upgrade version 1.2.7 [`4f4fd93`](https://github.com/eea/volto-clms-theme/commit/4f4fd931065bd86b368cc174620f8fcf7095a49c)
+- card file field condition to avoid conflicts with old versions [`957bc0a`](https://github.com/eea/volto-clms-theme/commit/957bc0ae531730fea854c31854004b17b883c9f9)
+
+#### [1.0.23](https://github.com/eea/volto-clms-theme/compare/1.0.22...1.0.23)
+
+> 15 September 2021
+
+- Develop [`#78`](https://github.com/eea/volto-clms-theme/pull/78)
+- move css to less [`f1c3e5c`](https://github.com/eea/volto-clms-theme/commit/f1c3e5c3c976d78b0e9fcc9286d12cb25ba922c0)
+- move customizated components additional less out to theme folder [`07099a6`](https://github.com/eea/volto-clms-theme/commit/07099a63d059b88ca5d0cdedc99e2e8299d6dc48)
+
+#### [1.0.22](https://github.com/eea/volto-clms-theme/compare/1.0.21...1.0.22)
+
+> 15 September 2021
+
+- Develop [`#77`](https://github.com/eea/volto-clms-theme/pull/77)
+- Technical library [`#76`](https://github.com/eea/volto-clms-theme/pull/76)
+- Bugs n improvements [`#75`](https://github.com/eea/volto-clms-theme/pull/75)
+- volto-arcgis-block version [`5a8d7a5`](https://github.com/eea/volto-clms-theme/commit/5a8d7a54193d34e5c2a981853843c848564b5024)
+- mime type package [`de14cc1`](https://github.com/eea/volto-clms-theme/commit/de14cc14ca0fb0f4d2afc104495a8f768e863221)
+- technical libraries new block for product [`6d8acd2`](https://github.com/eea/volto-clms-theme/commit/6d8acd209d275465a7c7a35bd691f8ce1652122e)
+- Home [`65f3f48`](https://github.com/eea/volto-clms-theme/commit/65f3f48a16a856920af05933c94a16b2191e3438)
+- Header and footer [`a7ca309`](https://github.com/eea/volto-clms-theme/commit/a7ca3096766d8a7442c376b5ea43854f58d87073)
+- Improvements [`7c0c5b8`](https://github.com/eea/volto-clms-theme/commit/7c0c5b8ea894fdd92d1c1d95c80e85150577c59b)
+- accordion icon min width [`6fa4f09`](https://github.com/eea/volto-clms-theme/commit/6fa4f09f52af8cdb88dc7147ba2b4fe844d32259)
+- meeting view changes with css and faq tabs custom block [`3ed9565`](https://github.com/eea/volto-clms-theme/commit/3ed95651bd0c3a2f96b76ed7e23c32cb6e37289d)
+
 #### [1.0.21](https://github.com/eea/volto-clms-theme/compare/1.0.20...1.0.21)
 
+> 10 September 2021
+
+- Meeting registration and volto-arcgis-block update [`#74`](https://github.com/eea/volto-clms-theme/pull/74)
 - Eeameeting views [`#73`](https://github.com/eea/volto-clms-theme/pull/73)
 - update volto-arcgis-block version [`228d73f`](https://github.com/eea/volto-clms-theme/commit/228d73f7e35f672333e0ea29312c47fdeef8e323)
 - unify code [`63ae210`](https://github.com/eea/volto-clms-theme/commit/63ae2104b6d489c691cd81789a41ab298f99d618)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.21",
+  "version": "1.0.25",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -29,12 +29,12 @@
   ],
   "dependencies": {
     "volto-dropdownmenu": "2.2.7",
-    "@eeacms/volto-arcgis-block": "0.1.2",
+    "@eeacms/volto-arcgis-block": "0.1.3",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
-    "@eeacms/volto-tabs-block": "1.2.3",
+    "@eeacms/volto-tabs-block": "1.2.7",
     "react-slick": "0.28.1",
     "slick-carousel": "1.8.1",
     "@eeacms/volto-accordion-block": "^3.0.0",
@@ -42,6 +42,7 @@
     "@eeacms/volto-metadata-block": "^2.1.0",
     "volto-slate": "2.6.2",
     "react-svg": "14.0.4",
+    "react-native-mime-types": "2.3.0",
     "@eeacms/volto-resize-helper": "0.2.1"
   },
   "prettier": {

package/src/components/Blocks/CclButtonBlock/CclButtonBlockView.jsx

@@ -7,7 +7,7 @@ const CclButtonBlockView = (props) => {
   return (
     <CclButton
       url={
-        data.download && data?.href?.[0]?.['@type'] === 'File'
+        data?.download && data?.href?.[0]?.['@type'] === 'File'
           ? data?.href?.[0]?.['@id'] + '/@@download/file'
           : data?.href?.[0]?.['@id']
       }
@@ -15,7 +15,7 @@ const CclButtonBlockView = (props) => {
       download={data?.download || data?.href?.[0]?.['@type'] === 'File'}
       target={
         data.target ||
-        (data.download && data.href[0]['@type'] === 'File' && '_blank')
+        (data?.download && data.href[0]['@type'] === 'File' && '_blank')
       }
       mode={data.style}
     >

package/src/components/Blocks/CclCardContainerBlock/CclCardContainerBlockView.jsx

@@ -17,7 +17,7 @@ const CclCardContainerBlockView = (props) => {
   } else if (data.cardOrigin === 'selection') {
     path = data.containerSelection ? data.containerSelection[0]['@id'] : '';
   } else if ((data.cardOrigin = 'custom')) {
-    cards = data.customCards.blocks_layout.items.map(
+    cards = data?.customCards?.blocks_layout?.items.map(
       (uid) => data.customCards.blocks[uid],
     );
   }

package/src/components/Blocks/CclHomeBgImageBlock/CclWhiteBgView.jsx

@@ -7,7 +7,7 @@ const CclWhiteBgView = (props) => {
 
   return (
     <div
-      className="ccl-banner-top-container"
+      className="home-map-container"
       style={{
         backgroundImage:
           `url(${data?.image?.url}/@@images/image)` ||

package/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockEdit.jsx

@@ -70,7 +70,10 @@ const CclHomeProductsBlockEdit = (props) => {
             {panel.productIcon === 'iconless' ? (
               <h3>{panel.title}</h3>
             ) : (
-              <div className="home-product-title">{panel.title}</div>
+              <>
+                <div className="home-product-title">{panel.title}</div>
+                <div class="home-product-description">{panel.description}</div>
+              </>
             )}
           </div>
         ))}

package/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const CclHomeProductsBlockView = (props) => {
   const { data } = props;
-  let products = data.products.blocks_layout.items.map(
+  let products = data?.products?.blocks_layout?.items.map(
     (uid) => data.products.blocks[uid],
   );
   return (
@@ -20,7 +20,12 @@ const CclHomeProductsBlockView = (props) => {
           {product.productIcon === 'iconless' ? (
             <h3>{product.title}</h3>
           ) : (
-            <div className="home-product-title">{product.title}</div>
+            <>
+              <div className="home-product-title">{product.title}</div>
+              <div className="home-product-description">
+                {product.description}
+              </div>
+            </>
           )}
         </div>
       ))}

package/src/components/Blocks/CclHomeProductsBlock/HomeProductsSchema.js

@@ -28,7 +28,7 @@ export const ProductSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'productIcon', 'linkSelector'],
+      fields: ['title', 'description', 'productIcon', 'linkSelector'],
     },
   ],
   properties: {
@@ -36,6 +36,10 @@ export const ProductSchema = () => ({
       title: 'Title',
       type: 'string',
     },
+    description: {
+      title: 'Description',
+      type: 'string',
+    },
     productIcon: {
       title: 'Product icon',
       choices: [

package/src/components/Blocks/CclHomeUsersBlock/CclHomeUsersBlockView.jsx

@@ -37,7 +37,7 @@ const CclHomeUsersBlockView = (props) => {
     ],
   };
   const { data } = props;
-  let cards = data.customCards.blocks_layout.items.map(
+  let cards = data?.customCards?.blocks_layout?.items.map(
     (uid) => data.customCards.blocks[uid],
   );
 
@@ -70,10 +70,10 @@ const CclHomeUsersBlockView = (props) => {
             </div>
           ))}
         </Slider>
+        <a className="ccl-button ccl-button--default" href="./use-cases.html">
+          All use cases
+        </a>
       </div>
-      <a className="ccl-button ccl-button--default" href="./use-cases.html">
-        All use cases
-      </a>
     </div>
   );
 };

package/src/components/Blocks/CclProductLeftMenu/CclProductLeftMenuEdit.jsx

@@ -46,7 +46,10 @@ const CclProductLeftMenuEdit = (props) => {
     <>
       <nav className="left-menu-detail">
         <div className="menu-detail-image">
-          <img src={metadata.image.download} alt={metadata.image.filename} />
+          <img
+            src={metadata?.image?.download}
+            alt={metadata?.image?.filename}
+          />
         </div>
         {panels.map(([uid, panel], index) => (
           <div
@@ -68,7 +71,7 @@ const CclProductLeftMenuEdit = (props) => {
             <CclButton
               url="#"
               disabled={data.buttons?.blocks[uid].disabled}
-              download={data.buttons?.blocks[uid].download}
+              download={data.buttons?.blocks[uid]?.download}
               mode={data.buttons?.blocks[uid].style}
             >
               {data.buttons?.blocks[uid].title || 'Text example...'}

package/src/components/Blocks/CclProductLeftMenu/CclProductLeftMenuView.jsx

@@ -4,20 +4,20 @@ import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 
 const CclProductLeftMenuView = (props) => {
   const { data, metadata } = props;
-  let buttons = data.buttons.blocks_layout.items.map(
+  let buttons = data?.buttons?.blocks_layout?.items.map(
     (uid) => data.buttons.blocks[uid],
   );
 
   return (
     <nav className="left-menu-detail">
       <div className="menu-detail-image">
-        <img src={metadata.image.download} alt={metadata.image.filename} />
+        <img src={metadata?.image?.download} alt={metadata?.image?.filename} />
       </div>
       {buttons.map((button, index) => (
         <div key={index} className={'menu-detail-button'}>
           <CclButton
             url={
-              button.download && button?.href?.[0]?.['@type'] === 'File'
+              button?.download && button?.href?.[0]?.['@type'] === 'File'
                 ? button?.href?.[0]?.['@id'] + '/@@download/file'
                 : button?.href?.[0]?.['@id']
             }
@@ -27,7 +27,7 @@ const CclProductLeftMenuView = (props) => {
             }
             target={
               button.target ||
-              (button.download &&
+              (button?.download &&
                 button.href[0]['@type'] === 'File' &&
                 '_blank')
             }

package/src/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListEdit.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TechnicalLibrariesListSchema } from './TechnicalLibrariesListSchema';
+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 CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
+
+const CclTechnicalLibrariesListEdit = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    selected,
+    id,
+    properties,
+    metadata,
+  } = props;
+  const dispatch = useDispatch();
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  const path = metadata ? metadata['@id'] : properties['@id'];
+  let libraries = searchSubrequests?.[props.id]?.items || [];
+  React.useEffect(() => {
+    dispatch(
+      searchContent(
+        path,
+        {
+          fullobjects: 1,
+          portal_type: 'TechnicalLibrary',
+          path: '/',
+          associated_products: metadata['id'],
+        },
+        id,
+      ),
+    );
+  }, [path, data, id, metadata, dispatch]);
+
+  return (
+    <>
+      <div className="technical-libraries">
+        <h2>Technical Libraries</h2>
+        {libraries.map((item, index) => (
+          <CclCard key={index} type="doc" card={item} />
+        ))}
+      </div>
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={TechnicalLibrariesListSchema()}
+          title="TechnicalLibraries List block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default CclTechnicalLibrariesListEdit;

package/src/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListView.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { searchContent } from '@plone/volto/actions';
+import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
+
+const CclTechnicalLibrariesListView = (props) => {
+  const { data, id, properties, metadata } = props;
+  const dispatch = useDispatch();
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  const path = metadata ? metadata['@id'] : properties['@id'];
+  let libraries = searchSubrequests?.[props.id]?.items || [];
+
+  React.useEffect(() => {
+    dispatch(
+      searchContent(
+        path,
+        {
+          fullobjects: 1,
+          portal_type: 'TechnicalLibrary',
+          path: '/',
+          associated_products: metadata['id'],
+        },
+        id,
+      ),
+    );
+  }, [path, data, id, metadata, dispatch]);
+
+  return (
+    <>
+      <div className="technical-libraries">
+        {libraries.length > 0 ? (
+          libraries.map((item, index) => (
+            <CclCard key={index} type="doc" card={item} />
+          ))
+        ) : (
+          <p>There are no technical libraries for this product.</p>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CclTechnicalLibrariesListView;

package/src/components/Blocks/CclTechnicalLibrariesList/TechnicalLibrariesListSchema.js

@@ -0,0 +1,17 @@
+export const TechnicalLibrariesListSchema = () => ({
+  title: 'TechnicalLibraries List block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      type: 'string',
+    },
+  },
+  required: [],
+});

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

@@ -99,7 +99,8 @@ const CclTabsView = (props) => {
               aria-controls={title || defaultTitle}
               aria-selected={tab === activeTab}
               active={(tab === activeTab).toString()}
-              className={cx('tab', tab === activeTab && 'tab-selected')}
+              /* classname hontan estiloa aldatu behar da aukeratutako tab-a urdin ikusteko */
+              className={cx('tab', tab !== activeTab && 'tab-selected')}
               onClick={() => {
                 if (activeTab !== tab) {
                   setActiveTab(tab);

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

@@ -0,0 +1,141 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import { RenderBlocks } from '@plone/volto/components';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+import './fontawesome';
+import cx from 'classnames';
+
+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 PanelsComponent = () => {
+    const { activeTab = null, tabs = {} } = props;
+    return (
+      <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>
+          );
+        })}
+      </div>
+    );
+  };
+  const TabsComponent = () => {
+    return (
+      <div className="left-content cont-w-25">
+        <nav className="left-menu">
+          {tabsList.map((tab, index) => {
+            const {
+              activeTab = null,
+              tabs = {},
+              setActiveTab = () => {},
+            } = props;
+            const title = tabs[tab].title;
+            const tabIndex = index + 1;
+            const defaultTitle = `Tab ${tabIndex}`;
+            return (
+              <div
+                key={index}
+                id={tabIndex}
+                className={cx('card', tab === activeTab && 'active')}
+              >
+                <a
+                  href={'#' + tabIndex}
+                  className="collapsed"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (activeTab !== tab) {
+                      setActiveTab(tab);
+                    }
+                  }}
+                  onKeyDown={() => {
+                    if (activeTab !== tab) {
+                      setActiveTab(tab);
+                    }
+                  }}
+                >
+                  {title || defaultTitle}
+                </a>
+              </div>
+            );
+          })}
+        </nav>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      id="faq-listing"
+      className="ccl-container ccl-container-flex tab-container"
+    >
+      <TabsComponent />
+      <PanelsComponent />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state) => {
+    return {
+      hashlink: state.hashlink,
+    };
+  }),
+  withScrollToTarget,
+)(withRouter(CclVerticalFaqTabsView));