@eeacms/volto-clms-theme 1.1.178 → 1.1.180

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.1.180](https://github.com/eea/volto-clms-theme/compare/1.1.179...1.1.180) - 29 August 2024
+
+#### :rocket: New Features
+
+- feat: modify the tabs block so that it can include a direct link within the tab itself -refs #273221 [ana-oprea - [`6816ec6`](https://github.com/eea/volto-clms-theme/commit/6816ec62f6b260a491ba8ef3f5964beb5917e1a5)]
+
+#### :hammer_and_wrench: Others
+
+- increase size of title column based on the number of selected columns -refs #274031 [ana-oprea - [`6c5cf75`](https://github.com/eea/volto-clms-theme/commit/6c5cf75e89c01b33d44b6d02c9fff86c1f93ee67)]
+- increase size of title column on contents -refs #274031 [ana-oprea - [`5af9200`](https://github.com/eea/volto-clms-theme/commit/5af9200e9109261df92a89ec7fc01e237f611ed0)]
+### [1.1.179](https://github.com/eea/volto-clms-theme/compare/1.1.178...1.1.179) - 28 August 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c668e51`](https://github.com/eea/volto-clms-theme/commit/c668e51c7592ed244b8fa486e785ced43ca5cb5f)]
+
+#### :hammer_and_wrench: Others
+
+- Code cleanup [Tiberiu Ichim - [`4b3d00f`](https://github.com/eea/volto-clms-theme/commit/4b3d00fa7e02a422a7be14e95c2ddc23f07a60cf)]
+- Fix parenting [Tiberiu Ichim - [`bf536b8`](https://github.com/eea/volto-clms-theme/commit/bf536b85715471db0f373315a8bca84cbde2aec1)]
+- Expand context navigation on /en/faq [Tiberiu Ichim - [`37b8eb1`](https://github.com/eea/volto-clms-theme/commit/37b8eb129651e781e0ced8c79237bdf7b0bb55e1)]
+- WIP [Tiberiu Ichim - [`dbf9e58`](https://github.com/eea/volto-clms-theme/commit/dbf9e58a74442005933356e875965ad8f6dd9cd0)]
+- Rewrite for lisibility [Tiberiu Ichim - [`e8c8a20`](https://github.com/eea/volto-clms-theme/commit/e8c8a2037a81832ae901892120e74c11757ebf55)]
+- Rewrite for lisibility [Tiberiu Ichim - [`9fe7896`](https://github.com/eea/volto-clms-theme/commit/9fe78963411c231cbf8271a29209d51c5b7c4345)]
 ### [1.1.178](https://github.com/eea/volto-clms-theme/compare/1.1.177...1.1.178) - 26 August 2024
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.178",
+  "version": "1.1.180",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclFAQBlock/CclFAQBlockEdit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import CclFAQBlockView from './CclFAQBlockView';
 
 const CclFAQBlockEdit = (props) => {
-  return <CclFAQBlockView props={props} isEditMode={true} />;
+  return <CclFAQBlockView {...props} isEditMode={true} />;
 };
 
 export default CclFAQBlockEdit;

package/src/components/Blocks/CclFAQBlock/CclFAQBlockView.jsx

@@ -1,3 +1,4 @@
+import cx from 'classnames';
 import React, { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { useDispatch, useSelector } from 'react-redux';
@@ -6,18 +7,46 @@ import { Accordion, Segment } from 'semantic-ui-react';
 import { getContextNavigation } from '@plone/volto/actions';
 import { Icon, UniversalLink } from '@plone/volto/components';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { hasBlocksData } from '@plone/volto/helpers';
+import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+
+import { CclTabs } from '@eeacms/volto-clms-theme/components/CclTab';
+
 import penSVG from '@plone/volto/icons/pen.svg';
 import config from '@plone/volto/registry';
-import { CclTabs } from '@eeacms/volto-clms-theme/components/CclTab';
-// import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
+
+const flattenCN = (cn_items) =>
+  cn_items.reduce(
+    (acc, curr) => [
+      ...acc,
+      curr,
+      ...curr.items
+        .filter((i) => i.type === 'document')
+        .map((item) => ({ ...item, isSubtab: true })),
+    ],
+    [],
+  );
+
+// this is just to highlight that the way CclTabs is working is misleading
+// It reads random properties from <div> children, which is unexpected
+function Tab(props) {
+  return <div {...props} />;
+}
 
 const CclFAQBlockView = (props) => {
-  const { isEditMode } = props;
+  const { isEditMode, content } = props;
+  const pathname = getBaseUrl(props.pathname || props.path);
+  const cn_key = `${pathname}/@contextnavigation`;
+
+  // this are the accordions that are opened
+  const [activeIndex, setActiveIndex] = useState([]);
+
   const dispatch = useDispatch();
-  const path = useSelector((state) => state.router.location.pathname);
-  const contextNavigation = useSelector((state) => state.contextNavigation);
-  const cn_key = `${path.replace('/edit', '')}/@contextnavigation`;
+  const contextNavigationItems = useSelector(
+    (state) =>
+      state.contextNavigation?.[cn_key]?.data?.items ||
+      content['@components']?.['contextnavigation']?.items,
+  );
+
   const handleClick = ({ index }) => {
     const newIndex =
       activeIndex.indexOf(index) === -1
@@ -27,128 +56,93 @@ const CclFAQBlockView = (props) => {
     setActiveIndex(newIndex);
   };
 
-  const flattenCN = (cn_items) => {
-    return cn_items.reduce((prev, curr) => {
-      prev.push(curr);
-      if (curr.items.filter((i) => i.type === 'document').length > 0) {
-        curr.items
-          .filter((i) => i.type === 'document')
-          .forEach((i_i) => prev.push({ ...i_i, isSubtab: true }));
-      }
-      return prev;
-    }, []);
-  };
   const flatCN = flattenCN(
-    contextNavigation?.[cn_key]?.data?.items
-      ? contextNavigation?.[cn_key]?.data?.items.filter(
-          (i) => i.type === 'document',
-        )
-      : [],
+    contextNavigationItems?.filter((i) => i.type === 'document') || [],
   );
-  const [activeIndex, setActiveIndex] = useState([]);
+
   React.useEffect(() => {
-    dispatch(getContextNavigation(path.replace('/edit', '')));
-  }, [path, dispatch]);
+    isEditMode && dispatch(getContextNavigation(pathname));
+  }, [pathname, dispatch, isEditMode]);
+
   React.useEffect(() => {
-    let indexes = [];
-    // eslint-disable-next-line no-unused-expressions
-    contextNavigation?.[cn_key]?.data?.items &&
-      contextNavigation?.[cn_key]?.data?.items.forEach((i) => {
-        if (i.items.length > 0) {
-          indexes.push(i.items[0].normalized_id);
-        }
-        if (i.type === 'document') {
-          i.items.forEach((i_i) => {
-            if (i_i.items.length > 0) {
-              indexes.push(i_i.items[0].normalized_id);
-            }
-          });
-        }
-      });
+    let indexes = (contextNavigationItems || []).reduce(
+      (acc, cur) => [
+        ...acc,
+        ...(cur.items?.length ? [cur.items[0].normalized_id] : []),
+        ...cur.items
+          ?.map((item) => item.items?.[0]?.normalized_id)
+          .filter((id) => !!id),
+      ],
+      [],
+    );
     setActiveIndex(indexes);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contextNavigation?.[cn_key]?.data?.items]);
+  }, [contextNavigationItems]);
 
   const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
 
   return (
     <div id="faq-listing" className="ccl-container tab-container">
-      {contextNavigation?.[cn_key]?.loaded ? (
-        contextNavigation?.[cn_key]?.data?.items?.length > 0 && (
-          <CclTabs routing={true}>
-            {flatCN
-              .filter((cn) => cn.type === 'document')
-              .map((cn, key) => (
-                <div
-                  key={key}
-                  tabTitle={cn.title}
-                  className={
-                    cn.isSubtab
-                      ? 'subcard'
-                      : cn.items.filter((i) => i.type === 'document').length > 0
-                  }
-                  parent={
-                    cn.items.filter((i) => i.type === 'document').length > 0
-                  }
-                >
-                  <div className="accordion-block">
-                    {cn.items
-                      .filter((item) => item.type === 'faq')
-                      .map((item, item_key) => {
-                        return (
-                          <Accordion fluid styled key={item_key}>
-                            <Accordion.Title
-                              as={'h2'}
-                              onClick={() =>
-                                handleClick({ index: item.normalized_id })
-                              }
-                              className={'accordion-title align-arrow-right'}
-                            >
-                              {activeIndex.includes(item.normalized_id) ? (
-                                <Icon name={titleIcons.opened.rightPosition} />
-                              ) : (
-                                <Icon name={titleIcons.closed.rightPosition} />
-                              )}
-                              {isEditMode && (
-                                <UniversalLink
-                                  openLinkInNewTab={true}
-                                  href={`${item['@id']}/edit`}
-                                >
-                                  <Icon
-                                    name={penSVG}
-                                    className="circled"
-                                    title={'Edit'}
-                                  />
-                                </UniversalLink>
-                              )}
-                              <span>{item.title}</span>
-                            </Accordion.Title>
-                            <Accordion.Content
-                              active={activeIndex.includes(item.normalized_id)}
-                            >
-                              <AnimateHeight
-                                animateOpacity
-                                duration={500}
-                                height={'auto'}
-                              >
-                                {/* <StringToHTML
-                                  string={item.text ? item.text.data : ''}
-                                /> */}
-                                {hasBlocksData(item) && (
-                                  <RenderBlocks content={item} />
-                                )}
-                              </AnimateHeight>
-                            </Accordion.Content>
-                          </Accordion>
-                        );
-                      })}
-                  </div>
-                </div>
-              ))}
-          </CclTabs>
-        )
+      {contextNavigationItems?.length > 0 ? (
+        <CclTabs routing={true}>
+          {flatCN.map((cn, key) => (
+            <Tab
+              key={key}
+              tabTitle={cn.title}
+              className={cx({ subcard: cn.isSubtab })}
+              isParent={!!cn.items.filter((i) => i.type === 'document').length}
+            >
+              <div className="accordion-block">
+                {cn.items
+                  .filter((item) => item.type === 'faq')
+                  .map((item, item_key) => (
+                    <Accordion fluid styled key={item_key}>
+                      <Accordion.Title
+                        as={'h2'}
+                        onClick={() =>
+                          handleClick({ index: item.normalized_id })
+                        }
+                        className={'accordion-title align-arrow-right'}
+                      >
+                        {activeIndex.includes(item.normalized_id) ? (
+                          <Icon name={titleIcons.opened.rightPosition} />
+                        ) : (
+                          <Icon name={titleIcons.closed.rightPosition} />
+                        )}
+                        {isEditMode && (
+                          <UniversalLink
+                            openLinkInNewTab={true}
+                            href={`${item['@id']}/edit`}
+                          >
+                            <Icon
+                              name={penSVG}
+                              className="circled"
+                              title={'Edit'}
+                            />
+                          </UniversalLink>
+                        )}
+                        <span>{item.title}</span>
+                      </Accordion.Title>
+                      <Accordion.Content
+                        active={activeIndex.includes(item.normalized_id)}
+                      >
+                        <AnimateHeight
+                          animateOpacity
+                          duration={500}
+                          height={'auto'}
+                        >
+                          {hasBlocksData(item) && (
+                            <RenderBlocks content={item} />
+                          )}
+                        </AnimateHeight>
+                      </Accordion.Content>
+                    </Accordion>
+                  ))}
+              </div>
+            </Tab>
+          ))}
+        </CclTabs>
       ) : (
-        <Segment loading={contextNavigation?.[cn_key]?.loading}></Segment>
+        <Segment loading={true}></Segment>
       )}
     </div>
   );

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

@@ -7,6 +7,7 @@ import { compose } from 'redux';
 import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import { useLocation } from 'react-router-dom';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 import { slugify } from '../../utils';
 import './fontawesome';
@@ -53,6 +54,7 @@ const TabsComponent = (props) => {
         {tabsList.map((tab, index) => {
           const title = tabs[tab].title;
           const subTab = tabs[tab]?.subTab?.subtab || false;
+          const redirectURL = tabs[tab]?.subTab?.redirectURL || false;
           const tabIndex = index + 1;
           const nextSubTab = tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
           const defaultTitle = `Tab ${tabIndex}`;
@@ -71,7 +73,9 @@ const TabsComponent = (props) => {
                 <span>{title || defaultTitle}</span>
               ) : (
                 <NavLink
-                  to={'?' + tabHash}
+                  to={`${
+                    redirectURL ? flattenToAppURL(redirectURL) : '?' + tabHash
+                  }`}
                   className="collapsed"
                   onClick={(e) => {
                     handleClick(

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

@@ -4,7 +4,7 @@ export const subTabSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['subtab'],
+      fields: ['subtab', 'redirectURL'],
     },
   ],
   properties: {
@@ -14,6 +14,11 @@ export const subTabSchema = () => ({
       type: 'boolean',
       default: false,
     },
+    redirectURL: {
+      title: 'Redirect URL',
+      description: 'Redirect URL',
+      widget: 'url',
+    },
   },
   required: [],
 });

package/src/components/CclTab/CclTabs.jsx

@@ -43,7 +43,7 @@ const CclTabs = (props) => {
         if (possible_hashes.includes(hash)) setActiveTab(hash);
       } else if (
         children.filter((item) => !!item?.props?.tabTitle).length > 1 &&
-        firstTab.props?.parent
+        firstTab.props?.isParent
       ) {
         setActiveTab(
           slugify(
@@ -72,7 +72,7 @@ const CclTabs = (props) => {
               const currentTab = children.filter(
                 (item) => slugify(item?.props?.tabTitle) === tabId,
               )[0];
-              if (currentTab?.props?.parent) {
+              if (currentTab?.props?.isParent) {
                 hasSubtab = true;
               }
               return (

package/src/customizations/volto/components/manage/Contents/Contents.jsx

@@ -92,6 +92,7 @@ import sortUpSVG from '@plone/volto/icons/sort-up.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
 import moreSVG from '@plone/volto/icons/more.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import cx from 'classnames';
 
 const messages = defineMessages({
   back: {
@@ -1187,6 +1188,13 @@ class Contents extends Component {
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
+    const columnCountClass = cx({
+      'many-columns': this.state.index.selectedCount > 4,
+      'three-columns': this.state.index.selectedCount === 4,
+      'two-columns': this.state.index.selectedCount === 3,
+      'one-column': this.state.index.selectedCount === 2,
+    });
+
     return this.props.token && this.props.objectActions?.length > 0 ? (
       <>
         {folderContentsAction ? (
@@ -1879,7 +1887,13 @@ class Contents extends Component {
                         </Dropdown>
                       </Segment>
                       <div className="contents-table-wrapper">
-                        <Table selectable compact singleLine attached>
+                        <Table
+                          selectable
+                          compact
+                          singleLine
+                          attached
+                          className={columnCountClass}
+                        >
                           <Table.Header>
                             <Table.Row>
                               <Table.HeaderCell>
@@ -2069,8 +2083,11 @@ class Contents extends Component {
                                 </Popup>
                               </Table.HeaderCell>
                               <Table.HeaderCell
-                                width={Math.ceil(
-                                  16 / this.state.index.selectedCount,
+                                width={Math.max(
+                                  4,
+                                  Math.ceil(
+                                    10 - this.state.index.selectedCount - 1,
+                                  ),
                                 )}
                               >
                                 <FormattedMessage
@@ -2084,9 +2101,7 @@ class Contents extends Component {
                                   this.state.index.values[index].selected && (
                                     <ContentsIndexHeader
                                       key={index}
-                                      width={Math.ceil(
-                                        16 / this.state.index.selectedCount,
-                                      )}
+                                      width={2}
                                       label={
                                         this.state.index.values[index].label
                                       }

package/src/customizations/volto/components/manage/Contents/ContentsItem.jsx

@@ -161,16 +161,17 @@ export const ContentsItemComponent = ({
                 title={item['Type'] || item['@type']}
               />
               <span title={item.title} className="content-title-force-one-line">
+                {item.ExpirationDate !== 'None' &&
+                  new Date(item.ExpirationDate).getTime() <
+                    new Date().getTime() && (
+                    <Button className="button-margin" size="mini">
+                      <FormattedMessage id="Expired" defaultMessage="Expired" />
+                    </Button>
+                  )}
                 {item.title}
               </span>
             </div>
-            {item.ExpirationDate !== 'None' &&
-              new Date(item.ExpirationDate).getTime() <
-                new Date().getTime() && (
-                <Button className="button-margin" size="mini">
-                  <FormattedMessage id="Expired" defaultMessage="Expired" />
-                </Button>
-              )}
+
             {item.EffectiveDate !== 'None' &&
               new Date(item.EffectiveDate).getTime() > new Date().getTime() && (
                 <Button className="button-margin effective-future" size="mini">

package/src/index.js

@@ -201,6 +201,12 @@ const applyConfig = (config) => {
           'navroot',
         ],
       },
+      {
+        match: '/en/faq',
+        exact: false,
+        GET_CONTENT: ['contextnavigation'],
+      },
+
       {
         match: '',
         GET_CONTENT: ['navigation'],

package/theme/site/extras/contents.less

@@ -1,6 +1,27 @@
+.folder-contents .ui.table .icon-align-name {
+  max-width: unset;
+}
+
+.ui.table td,
+.ui.table th,
 .folder-contents .ui.table .icon-align-name span.content-title-force-one-line {
-  max-width: 250px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.ui.table.many-columns .icon-align-name span.content-title-force-one-line {
+  max-width: 400px;
+}
+
+.ui.table.three-columns .icon-align-name span.content-title-force-one-line {
+  width: 440px;
+}
+
+.ui.table.two-columns .icon-align-name span.content-title-force-one-line {
+  width: 600px;
+}
+
+.ui.table.one-column .icon-align-name span.content-title-force-one-line {
+  width: 770px;
+}