@eeacms/volto-clms-theme 1.0.206 → 1.0.208

package/CHANGELOG.md

@@ -4,11 +4,19 @@ 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.206](https://github.com/eea/volto-clms-theme/compare/1.0.205...1.0.206) - 18 May 2023
+### [1.0.208](https://github.com/eea/volto-clms-theme/compare/1.0.207...1.0.208) - 19 May 2023
+
+#### :hammer_and_wrench: Others
+
+- feat CLMS-2185 block chooser padding fix [Unai - [`2809c9f`](https://github.com/eea/volto-clms-theme/commit/2809c9ff01e6f9acd35f03c3f5aa903d689b4ed0)]
+### [1.0.207](https://github.com/eea/volto-clms-theme/compare/1.0.206...1.0.207) - 19 May 2023
 
 #### :hammer_and_wrench: Others
 
-- restore icon sizes [Mikel Larreategi - [`40d82cd`](https://github.com/eea/volto-clms-theme/commit/40d82cde432fc43a69f8e8acbfeb630fca88dbe3)]
+- refactor FAQ block view. Small modification done for CclTabs to set active the second tab if the first is a parent tab [ionlizarazu - [`e79f44f`](https://github.com/eea/volto-clms-theme/commit/e79f44f93444fe38ce5209c94cfbc00775e5c124)]
+- CLMS-2024 empty columns and export order for Downloadable File [ionlizarazu - [`4f289f8`](https://github.com/eea/volto-clms-theme/commit/4f289f87d1dd0b91102579ef1b4fcf7796aba801)]
+### [1.0.206](https://github.com/eea/volto-clms-theme/compare/1.0.205...1.0.206) - 18 May 2023
+
 ### [1.0.205](https://github.com/eea/volto-clms-theme/compare/1.0.204...1.0.205) - 17 May 2023
 
 ### [1.0.204](https://github.com/eea/volto-clms-theme/compare/1.0.203...1.0.204) - 17 May 2023

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.206",
+  "version": "1.0.208",
   "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/CclFAQBlockView.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { useDispatch, useSelector } from 'react-redux';
 import { Accordion, Segment } from 'semantic-ui-react';
 
-import { searchContent } from '@plone/volto/actions';
+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';
@@ -16,8 +16,8 @@ const CclFAQBlockView = (props) => {
   const { isEditMode } = props;
   const dispatch = useDispatch();
   const path = useSelector((state) => state.router.location.pathname);
-  const search = useSelector((state) => state.search);
-  const search_key = 'faq-block';
+  const contextNavigation = useSelector((state) => state.contextNavigation);
+  const cn_key = `${path.replace('/edit', '')}/@contextnavigation`;
   const handleClick = ({ index }) => {
     const newIndex =
       activeIndex.indexOf(index) === -1
@@ -26,181 +26,108 @@ 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',
+        )
+      : [],
+  );
+  const [activeIndex, setActiveIndex] = useState([0]);
   React.useEffect(() => {
-    dispatch(
-      searchContent(
-        path.replace('/edit', ''),
-        {
-          fullobjects: 1,
-          portal_type: 'FAQ',
-          b_size: 999,
-          sort_on: 'getObjPositionInParent',
-        },
-        search_key,
-      ),
-    );
+    dispatch(getContextNavigation(path.replace('/edit', '')));
   }, [path, dispatch]);
-  React.useEffect(() => {
-    if (search?.subrequests?.[search_key]?.loaded) {
-      const firstOfCategories = categories.map((cat, key, self) => {
-        const cat_indexes = search?.subrequests?.[search_key]?.items.reduce(
-          (filtered, item, index) => {
-            if (filtered.UID) {
-              filtered = [];
-            }
-            if (
-              item.taxonomy_faqcategories.filter(
-                (item_cat) =>
-                  item_cat.title && item_cat.title.includes(cat.title),
-              ).length > 0
-            ) {
-              if (index === 1) {
-                filtered.push(0);
-              } else {
-                filtered.push(index);
-              }
-            }
-            return filtered;
-          },
-        );
-        return cat_indexes.length > 0 ? cat_indexes[0] : 0;
-      });
-      setActiveIndex(firstOfCategories);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [search?.subrequests]);
-  let categories =
-    search?.subrequests &&
-    search?.subrequests?.[search_key] &&
-    search?.subrequests?.[search_key]?.loaded &&
-    search?.subrequests?.[search_key]?.items.length > 0
-      ? [
-          ...new Set(
-            search?.subrequests?.[search_key]?.items
-              .map((item) => item.taxonomy_faqcategories)
-              .flat(),
-          ),
-        ]
-          .map((cat) => {
-            if (cat.title) {
-              const cat_family = cat.title?.split(' » ');
-              if (cat_family && cat_family.length > 1) {
-                cat['subTab'] = true;
-              }
-            }
-            return cat;
-          })
-          .filter(
-            (thing, index, self) =>
-              index === self.findIndex((t) => t.token === thing.token),
-          )
-          .sort((a, b) => {
-            if (a.title < b.title) {
-              return -1;
-            } else if (a.title > b.title) {
-              return 1;
-            }
-            return 0;
-          })
-      : [];
-  categories.forEach((cat, index) => {
-    if (cat.subTab && !categories[index - 1].subTab) {
-      categories[index - 1]['parent'] = true;
-    }
-  });
+
   const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
 
-  const [activeIndex, setActiveIndex] = React.useState([0]);
   return (
     <div id="faq-listing" className="ccl-container tab-container">
-      {search?.subrequests?.[search_key]?.loaded ? (
-        search?.subrequests?.[search_key]?.items?.length > 0 &&
-        categories.length > 0 && (
+      {contextNavigation?.[cn_key]?.loaded ? (
+        contextNavigation?.[cn_key]?.data?.items?.length > 0 && (
           <CclTabs routing={true}>
-            {categories.map((cat, key) => {
-              let cat_title = '';
-              let cat_family = [];
-              if (cat.title) {
-                cat_family = cat.title.split(' » ');
-                cat_title =
-                  cat_family.length > 1
-                    ? cat_family[1].split('#')[1]
-                    : cat_family[0].split('#')[1];
-              }
-              return (
+            {flatCN
+              .filter((cn) => cn.type === 'document')
+              .map((cn, key) => (
                 <div
                   key={key}
-                  tabTitle={cat_title}
-                  className={cat_family.length > 1 ? 'subcard' : ''}
-                  parent={cat.parent}
+                  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">
-                    {search?.subrequests?.[search_key]?.items.map(
-                      (item, item_key) => {
+                    {cn.items
+                      .filter((item) => item.type === 'faq')
+                      .map((item, item_key) => {
                         return (
-                          item.taxonomy_faqcategories.filter(
-                            (faq_cat) =>
-                              faq_cat.title &&
-                              faq_cat.title.includes(cat.title),
-                          ).length > 0 && (
-                            <Accordion fluid styled key={item_key}>
-                              <Accordion.Title
-                                as={'h2'}
-                                onClick={() => handleClick({ index: item_key })}
-                                className={'accordion-title align-arrow-right'}
-                              >
-                                {activeIndex.includes(item_key) ? (
-                                  <Icon
-                                    name={titleIcons.opened.rightPosition}
-                                  />
-                                ) : (
+                          <Accordion fluid styled key={item_key}>
+                            <Accordion.Title
+                              as={'h2'}
+                              onClick={() => handleClick({ index: item_key })}
+                              className={'accordion-title align-arrow-right'}
+                            >
+                              {activeIndex.includes(item_key) ? (
+                                <Icon name={titleIcons.opened.rightPosition} />
+                              ) : (
+                                <Icon name={titleIcons.closed.rightPosition} />
+                              )}
+                              {isEditMode && (
+                                <UniversalLink
+                                  openLinkInNewTab={true}
+                                  href={`${item['@id']}/edit`}
+                                >
                                   <Icon
-                                    name={titleIcons.closed.rightPosition}
+                                    name={penSVG}
+                                    className="circled"
+                                    title={'Edit'}
                                   />
-                                )}
-                                {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_key)}
+                                </UniversalLink>
+                              )}
+                              <span>{item.title}</span>
+                            </Accordion.Title>
+                            <Accordion.Content
+                              active={activeIndex.includes(item_key)}
+                            >
+                              <AnimateHeight
+                                animateOpacity
+                                duration={500}
+                                height={'auto'}
                               >
-                                <AnimateHeight
-                                  animateOpacity
-                                  duration={500}
-                                  height={'auto'}
-                                >
-                                  {/* <StringToHTML
+                                {/* <StringToHTML
                                   string={item.text ? item.text.data : ''}
                                 /> */}
-                                  {hasBlocksData(item) && (
-                                    <RenderBlocks content={item} />
-                                  )}
-                                </AnimateHeight>
-                              </Accordion.Content>
-                            </Accordion>
-                          )
+                                {hasBlocksData(item) && (
+                                  <RenderBlocks content={item} />
+                                )}
+                              </AnimateHeight>
+                            </Accordion.Content>
+                          </Accordion>
                         );
-                      },
-                    )}
+                      })}
                   </div>
                 </div>
-              );
-            })}
+              ))}
           </CclTabs>
         )
       ) : (
-        <Segment loading={search?.subrequests?.[search_key]?.loading}></Segment>
+        <Segment loading={contextNavigation?.[cn_key]?.loading}></Segment>
       )}
     </div>
   );

package/src/components/CclTab/CclTabs.jsx

@@ -38,6 +38,16 @@ const CclTabs = (props) => {
         setActiveTab(slugify(firstTab.props?.tabTitle));
       } else if (hash) {
         setActiveTab(hash);
+      } else if (
+        children.filter((item) => !!item?.props?.tabTitle).length > 1 &&
+        firstTab.props?.parent
+      ) {
+        setActiveTab(
+          slugify(
+            children.filter((item) => !!item?.props?.tabTitle)[1].props
+              ?.tabTitle,
+          ),
+        );
       } else {
         setActiveTab(slugify(firstTab.props?.tabTitle));
       }

package/src/components/Widgets/DownloadableFilesTableWidget.jsx

@@ -6,6 +6,41 @@ import CclButton from '../CclButton/CclButton';
 import { Segment, Loader, Header, Divider } from 'semantic-ui-react';
 import './DownloadableFilesTableWidget.less';
 
+const orderKeysBy = (array, data) => {
+  if (data) {
+    return JSON.stringify(
+      array.reduce((obj, key) => {
+        obj[key] = data[key] || '';
+        return obj;
+      }, {}),
+    );
+  }
+  return {};
+};
+const deleteNotExistingColumnsData = (props, schema, uiSchema) => {
+  const { id, value } = props;
+  const validFields = ['@id', ...Object.keys(schema?.properties)];
+  for (let i in value?.items) {
+    Object.keys(value?.items[i]).forEach((k) => {
+      if (!validFields.includes(k)) {
+        delete value?.items[i][k];
+      }
+    });
+  }
+  props.onChange(id, {
+    items: value.items,
+    schema,
+    uiSchema,
+  });
+};
+
+const fixSchema = (schema) => {
+  schema.properties = Object.fromEntries(
+    Object.entries(schema.properties).filter(([k, v]) => v != null && k),
+  );
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter((f) => f);
+};
+
 const DownloadableFilesTableWidget = (props) => {
   const { functions, data } = useSchema(
     props?.value?.schema,
@@ -15,30 +50,6 @@ const DownloadableFilesTableWidget = (props) => {
   const { setSchema, setUISchema, setSchemaHandler } = functions;
   const [edited, setEdited] = React.useState(false);
 
-  const fixSchema = (schema) => {
-    schema.properties = Object.fromEntries(
-      Object.entries(schema.properties).filter(([k, v]) => v != null && k),
-    );
-    schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter((f) => f);
-  };
-
-  const deleteNotExistingColumnsData = (props, schema) => {
-    const { id, value } = props;
-    const validFields = ['@id', ...Object.keys(schema?.properties)];
-    for (let i in value?.items) {
-      Object.keys(value?.items[i]).forEach((k) => {
-        if (!validFields.includes(k)) {
-          delete value?.items[i][k];
-        }
-      });
-    }
-    props.onChange(id, {
-      items: value.items,
-      ...props?.schema,
-      ...props?.uiSchema,
-    });
-  };
-
   return (
     <>
       <div className="ui container">
@@ -93,15 +104,11 @@ const DownloadableFilesTableWidget = (props) => {
             setSchemaHandler(
               schema,
               uiSchema,
-              (id, schema, uiSchema) =>
-                props.onChange(id, {
-                  ...props.value,
-                  schema: schema,
-                  uiSchema: uiSchema,
-                }),
+              props.onChange,
               props.id,
+              props.value,
             );
-            deleteNotExistingColumnsData(props, schema);
+            deleteNotExistingColumnsData(props, schema, uiSchema);
           }}
         >
           APPLY MODIFIED SCHEMA
@@ -121,9 +128,22 @@ const DownloadableFilesTableWidget = (props) => {
           schema={schema}
           csvexport={true}
           csvimport={true}
-          value={props.value?.items || props.default?.items || []}
+          value={
+            [
+              ...props.value?.items.map((i) =>
+                JSON.parse(orderKeysBy(['@id', ...uiSchema['ui:order']], i)),
+              ),
+            ] ||
+            props.default?.items ||
+            []
+          }
           onChange={(id, value) =>
-            props.onChange(id, { ...props.value, items: value })
+            props.onChange(id, {
+              ...props.value,
+              items: value,
+              schema: schema,
+              uiSchema: uiSchema,
+            })
           }
         />
       )}

package/src/components/Widgets/SchemaCreatorWidget.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 export const useSchema = (baseSchema, baseUISchema) => {
   const [schema, setSchema] = useState(
     baseSchema || {
@@ -91,9 +92,8 @@ export const useSchema = (baseSchema, baseUISchema) => {
     },
   );
   const [ready, setReady] = useState(true);
-  const setSchemaHandler = (schema, uiSchema, onChange, id) => {
+  const setSchemaHandler = (schema, uiSchema, onChange, id, value) => {
     setReady(false);
-    // console.log('schema', schema);
     Object.keys(schema.properties).forEach((pr) => {
       //modify the Dropdown field type to make it compatible with Volto select
       if (schema.properties[pr].enum) {
@@ -104,8 +104,11 @@ export const useSchema = (baseSchema, baseUISchema) => {
       }
     });
     setSchema(schema);
-    onChange(id, schema, uiSchema);
-    // setTimeout(() => onChangeUi(id, uiSchema), 1500);
+    onChange(id, {
+      ...value,
+      schema: schema,
+      uiSchema: uiSchema,
+    });
     setTimeout(() => setReady(true), 1500);
   };
 

package/theme/clms/css/volto-block-style-override.css

@@ -390,10 +390,8 @@ body:not(.is-authenticated):not(.document_wide_view).stretch {
   }
 }
 
-.tabs-block {
-  .blocks-chooser {
-    right: 0;
-    left: auto !important;
-    margin-top: 50px;
-  }
+.tabs-block .blocks-chooser {
+  right: 0;
+  left: auto !important;
+  margin-top: 50px;
 }