@eeacms/volto-clms-theme 1.0.65 → 1.0.69

package/src/components/Blocks/CclUseCaseList/CclUseCaseListView.jsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import getProductGroups from './utils';
-import { useSelector, useDispatch } from 'react-redux';
-import { searchContent } from '@plone/volto/actions';
 import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { getProductGroups } from './utils';
+import { searchContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   xUseCases: {
@@ -33,6 +34,15 @@ const CclUseCaseListView = (props) => {
   }, [path, data, id, dispatch]);
   let productGroups = getProductGroups(useCases);
   const [expanded, setExpanded] = useState([]);
+  function handleTitle(expandedT, productTokenT, setExpandedT) {
+    if (expandedT.includes(productTokenT)) {
+      let newExpanded = expandedT.slice();
+      newExpanded.splice(newExpanded.indexOf(productTokenT), 1);
+      setExpandedT(newExpanded);
+    } else {
+      setExpandedT([...expandedT, productTokenT]);
+    }
+  }
   return (
     <>
       <div className="ccl-container">
@@ -53,22 +63,10 @@ const CclUseCaseListView = (props) => {
                   className="ccl-expandable__button"
                   aria-expanded={expanded.includes(productToken)}
                   onClick={() => {
-                    if (expanded.includes(productToken)) {
-                      let newExpanded = expanded.slice();
-                      newExpanded.splice(newExpanded.indexOf(productToken), 1);
-                      setExpanded(newExpanded);
-                    } else {
-                      setExpanded([...expanded, productToken]);
-                    }
+                    handleTitle(expanded, productToken, setExpanded);
                   }}
                   onKeyDown={() => {
-                    if (expanded.includes(productToken)) {
-                      let newExpanded = expanded.slice();
-                      newExpanded.splice(newExpanded.indexOf(productToken), 1);
-                      setExpanded(newExpanded);
-                    } else {
-                      setExpanded([...expanded, productToken]);
-                    }
+                    handleTitle(expanded, productToken, setExpanded);
                   }}
                   role="button"
                   tabIndex="0"
@@ -77,8 +75,8 @@ const CclUseCaseListView = (props) => {
                 </div>
                 <div className="use-cases-element-container">
                   {productGroups[productToken].useCases.map(
-                    (useCase, index) => (
-                      <div key={index} className="use-cases-element">
+                    (useCase, indexCase) => (
+                      <div key={indexCase} className="use-cases-element">
                         <div className="use-case-element-title">
                           {useCase.title}
                         </div>

package/src/components/Blocks/CclUseCaseList/utils.js

@@ -1,4 +1,4 @@
-export default function getProductGroups(useCases) {
+export function getProductGroups(useCases) {
   let products = {};
   let exists = false;
   useCases.forEach((useCase) => {

package/src/components/Blocks/CustomTemplates/VoltoArcgisBlock/CclMapMenu.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function MenuContainer() {
+function CclMapMenu() {
   return (
     <div className="map-menu tab-container" style={{ display: 'block' }}>
       <div className="tabs" role="tablist">
@@ -43,4 +43,4 @@ function MenuContainer() {
   );
 }
 
-export default MenuContainer;
+export default CclMapMenu;

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/customIdFieldSchema.js

@@ -1,6 +1,6 @@
+import { defineMessages, useIntl } from 'react-intl';
+
 import config from '@plone/volto/registry';
-import { defineMessages } from 'react-intl';
-import { useIntl } from 'react-intl';
 
 const messages = defineMessages({
   field_label: {

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-// import config from '@plone/volto/registry';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
@@ -26,10 +25,8 @@ const CclListingCards = (props) => {
   let containerClass = '';
   if (['news', 'event'].includes(variation)) {
     containerClass = 'ccl-container';
-  } else if (!['line', 'doc'].includes(variation)) {
+  } else if (!['line', 'doc', 'globalSearch'].includes(variation)) {
     containerClass = 'card-container';
-  } else {
-    containerClass = '';
   }
   return (
     <>

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards.test.jsx

@@ -0,0 +1,247 @@
+import Enzyme, { mount } from 'enzyme';
+
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import CclListingCards from './CclListingCards';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const mockStore = configureStore();
+
+describe('CclListingCards', () => {
+  it('News listing card internal link', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const items = [
+      {
+        title: 'Card Title',
+        description: 'Card description',
+        image: {
+          download:
+            'https://localhost:3000/news/new/@@images/image/filename.jpg',
+        },
+      },
+    ];
+    const linkHref = [{ '@id': '/news' }];
+    const linkTitle = 'More news';
+    const isEditMode = true;
+    const variation = 'CclCardsnews';
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclListingCards
+            items={items}
+            linkHref={linkHref}
+            linkTitle={linkTitle}
+            isEditMode={isEditMode}
+            variation={variation}
+          ></CclListingCards>
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(component).toBeDefined();
+  });
+  it('Line-color listing card external link', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const items = [
+      {
+        title: 'Card Title',
+        description: 'Card description',
+        image: {
+          download:
+            'https://localhost:3000/news/new/@@images/image/filename.jpg',
+        },
+      },
+    ];
+    const linkHref = [{ '@id': 'https://wwww.google.com' }];
+    const linkTitle = 'More line-color';
+    const isEditMode = true;
+    const variation = 'CclCardsline-color';
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclListingCards
+            items={items}
+            linkHref={linkHref}
+            linkTitle={linkTitle}
+            isEditMode={isEditMode}
+            variation={variation}
+          ></CclListingCards>
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(component).toBeDefined();
+  });
+  it('line listing card external link', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const items = [
+      {
+        title: 'Card Title',
+        description: 'Card description',
+        image: {
+          download:
+            'https://localhost:3000/news/new/@@images/image/filename.jpg',
+        },
+      },
+    ];
+    const linkHref = [{ '@id': 'https://wwww.google.com' }];
+    const linkTitle = 'More line';
+    const isEditMode = true;
+    const variation = 'CclCardsline';
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclListingCards
+            items={items}
+            linkHref={linkHref}
+            linkTitle={linkTitle}
+            isEditMode={isEditMode}
+            variation={variation}
+          ></CclListingCards>
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(component).toBeDefined();
+  });
+  it('without linkHref', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const items = [
+      {
+        title: 'Card Title',
+        description: 'Card description',
+        image: {
+          download:
+            'https://localhost:3000/news/new/@@images/image/filename.jpg',
+        },
+      },
+    ];
+    const isEditMode = true;
+    const variation = 'CclCardsnews';
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclListingCards
+            items={items}
+            isEditMode={isEditMode}
+            variation={variation}
+          ></CclListingCards>
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(component).toBeDefined();
+  });
+  it('internal link without linkTitle', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const items = [
+      {
+        title: 'Card Title',
+        description: 'Card description',
+        image: {
+          download:
+            'https://localhost:3000/news/new/@@images/image/filename.jpg',
+        },
+      },
+    ];
+    const linkHref = [{ '@id': '/news' }];
+    const isEditMode = true;
+    const variation = 'CclCardsnews';
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclListingCards
+            items={items}
+            linkHref={linkHref}
+            isEditMode={isEditMode}
+            variation={variation}
+          ></CclListingCards>
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(component).toBeDefined();
+  });
+  it('External link without linkTitle', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const items = [
+      {
+        title: 'Card Title',
+        description: 'Card description',
+        image: {
+          download:
+            'https://localhost:3000/news/new/@@images/image/filename.jpg',
+        },
+      },
+    ];
+    const linkHref = [{ '@id': 'https://www.google.com' }];
+    const isEditMode = true;
+    const variation = 'CclCardsnews';
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclListingCards
+            items={items}
+            linkHref={linkHref}
+            isEditMode={isEditMode}
+            variation={variation}
+          ></CclListingCards>
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(component).toBeDefined();
+  });
+});

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/AccordionFacet.jsx

@@ -0,0 +1,82 @@
+import { Checkbox } from 'semantic-ui-react';
+import React from 'react';
+
+const AccordionFacet = (props) => {
+  const {
+    facet,
+    choices,
+    isMulti,
+    onChange,
+    value,
+    isEditMode,
+    typeName,
+  } = props;
+  const facetValue = value;
+  var [open, setOpen] = React.useState(false);
+  function isChoiceValue(isChecked, choiceValue) {
+    return isChecked ? choiceValue : null;
+  }
+
+  const Wrapper = ({ typeName, children }) => {
+    if (typeName === 'checkbox') {
+      return <div className="ccl-form">{children}</div>;
+    } else if (typeName === 'label') {
+      return (
+        <div>
+          <div className="filters-tag-container">{children}</div>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <fieldset className="ccl-fieldset">
+      <div
+        className="ccl-expandable__button"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        onKeyDown={() => setOpen(!open)}
+        tabIndex={0}
+        role={'button'}
+      >
+        <legend className="ccl-form-legend">{facet.title}</legend>
+      </div>
+      <Wrapper typeName={typeName}>
+        {choices.map((choice, i) => (
+          <div
+            className={
+              typeName === 'checkbox' ? 'ccl-form-group' : 'filters-tag'
+            }
+            key={choice.value}
+          >
+            <Checkbox
+              disabled={isEditMode}
+              label={choice.label}
+              radio={!isMulti}
+              checked={
+                isMulti
+                  ? !!facetValue?.find((f) => f.value === choice.value)
+                  : facetValue && facetValue.value === choice.value
+              }
+              onChange={(e, { checked }) =>
+                onChange(
+                  facet.field.value,
+                  isMulti
+                    ? [
+                        ...facetValue
+                          .filter((f) => f.value !== choice.value)
+                          .map((f) => f.value),
+                        ...(checked ? [choice.value] : []),
+                      ]
+                    : isChoiceValue(checked, choice.value),
+                )
+              }
+            />
+          </div>
+        ))}
+      </Wrapper>
+    </fieldset>
+  );
+};
+
+export default AccordionFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -0,0 +1,74 @@
+import { Segment } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import InputRange from 'react-input-range';
+import 'react-input-range/lib/css/index.css';
+import './range.css';
+
+const DoubleRangeFacet = (props) => {
+  const { facet, choices, onChange, value } = props;
+  const facetValue = value;
+  var [open, setOpen] = React.useState(false);
+
+  const convertToRange = (values) => {
+    return {
+      min: Math.min.apply(
+        Math,
+        values.map(function (o) {
+          return o.value;
+        }),
+      ),
+      max: Math.max.apply(
+        Math,
+        values.map(function (o) {
+          return o.value;
+        }),
+      ),
+    };
+  };
+
+  const startingValues = convertToRange(choices);
+
+  const [rangeValues, setRangeValues] = useState(startingValues);
+
+  const onChangeRange = (rValue, onChange) => {
+    setRangeValues(rValue);
+    onChange(
+      facet.field.value,
+      [...Array(rValue.max - rValue.min + 1).keys()].map((i) =>
+        (i + rValue.min).toString(),
+      ),
+    );
+  };
+
+  return (
+    <fieldset className="ccl-fieldset">
+      <div
+        className="ccl-expandable__button"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        onKeyDown={() => setOpen(!open)}
+        tabIndex={0}
+        role={'button'}
+      >
+        <legend className="ccl-form-legend">
+          {facet.title} {startingValues.min} - {startingValues.max}
+        </legend>
+      </div>
+      <div>
+        <Segment basic padded>
+          <InputRange
+            minValue={startingValues.min}
+            maxValue={startingValues.max}
+            value={
+              facetValue.length > 0 ? convertToRange(facetValue) : rangeValues
+            }
+            onChange={(value) => onChangeRange(value, onChange)}
+          />
+        </Segment>
+        <br />
+      </div>
+    </fieldset>
+  );
+};
+
+export default DoubleRangeFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/FilterList.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Icon } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  currentFilters: {
+    id: 'Current filters applied',
+    defaultMessage: 'Current filters applied',
+  },
+  clearFilters: {
+    id: 'Clear filters',
+    defaultMessage: 'Clear filters',
+  },
+});
+
+const FilterList = (props) => {
+  const { facets, setFacets, isEditMode } = props;
+  const showFilterList = !Object.values(facets).every((facet) => !facet.length);
+
+  const currentFilters = Object.fromEntries(
+    Object.entries(facets).filter((v) => v[1] && v[0] !== 'SearchableText'),
+  );
+
+  const totalFilters = [].concat.apply([], Object.values(currentFilters))
+    .length;
+
+  const intl = useIntl();
+
+  return showFilterList && Object.keys(currentFilters).length ? (
+    <div className="accordion ui filter-listing">
+      <div
+        className="filter-list-header"
+        style={{ cursor: 'auto' }}
+        active={false}
+      >
+        <div className="filter-list-title">
+          {intl.formatMessage(messages.currentFilters)}: {totalFilters}
+        </div>
+        <Button
+          icon
+          basic
+          compact
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            !isEditMode && setFacets({});
+          }}
+        >
+          <Icon name="trash" />
+          {intl.formatMessage(messages.clearFilters)}
+        </Button>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default FilterList;