@eeacms/volto-clms-theme 1.0.86 → 1.0.89

package/CHANGELOG.md

@@ -4,8 +4,32 @@ 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.89](https://github.com/eea/volto-clms-theme/compare/1.0.88...1.0.89)
+
+- date formats [`e93f97d`](https://github.com/eea/volto-clms-theme/commit/e93f97dfef7c40a8e5639bac07224989df1f5b11)
+- fix texts [`6ed7d77`](https://github.com/eea/volto-clms-theme/commit/6ed7d77257ff65cf0bb0a076766b3a0b8e572edf)
+- profile tab texts [`d619d74`](https://github.com/eea/volto-clms-theme/commit/d619d74929ab99fba5a86444d04d43fcebded70e)
+- HomeProductBlock [`3d006ef`](https://github.com/eea/volto-clms-theme/commit/3d006ef334ed25de782d073e3e7c5d68e4b2a430)
+- add onclick call to homeproductBlock cards [`fcacfc2`](https://github.com/eea/volto-clms-theme/commit/fcacfc2a7ba6cf31f83e9d390e11eaede1a54a53)
+
+#### [1.0.88](https://github.com/eea/volto-clms-theme/compare/1.0.87...1.0.88)
+
+> 24 March 2022
+
+- cart element format [`#245`](https://github.com/eea/volto-clms-theme/pull/245)
+- fix type changing format [`adf5424`](https://github.com/eea/volto-clms-theme/commit/adf542474f4e62a21bbbb009243438e2a53d2662)
+
+#### [1.0.87](https://github.com/eea/volto-clms-theme/compare/1.0.86...1.0.87)
+
+> 23 March 2022
+
+- images condition for lightGallery rendering [`#244`](https://github.com/eea/volto-clms-theme/pull/244)
+
 #### [1.0.86](https://github.com/eea/volto-clms-theme/compare/1.0.85...1.0.86)
 
+> 23 March 2022
+
+- Develop [`#243`](https://github.com/eea/volto-clms-theme/pull/243)
 - News item view and blocks [`#242`](https://github.com/eea/volto-clms-theme/pull/242)
 - NewsItem with blocks [`5320bd3`](https://github.com/eea/volto-clms-theme/commit/5320bd3073f7528d511d49b41755a5ebea05ba20)
 - if a news item has blocks render them [`5795bd4`](https://github.com/eea/volto-clms-theme/commit/5795bd47a8215a575142bfe5a42713f2ed2b540b)

package/package.json

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

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

@@ -10,11 +10,19 @@ const CclHomeProductsBlockView = (props) => {
       {products?.map((product, index) => (
         <div
           key={index}
+          role="button"
           className={
             product.productIcon === 'iconless'
               ? 'home-product home-product-main'
               : 'home-product'
           }
+          tabIndex={0}
+          onClick={() => {
+            window.location.href = product?.linkSelector || props.path;
+          }}
+          onKeyDown={() => {
+            window.location.href = product?.linkSelector || props.path;
+          }}
           id={product.productIcon === 'iconless' ? '' : product.productIcon}
         >
           {product.productIcon === 'iconless' ? (

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

@@ -53,8 +53,7 @@ export const ProductSchema = () => ({
     },
     linkSelector: {
       title: 'Product link selector',
-      widget: 'object_browser',
-      mode: 'link',
+      type: 'string',
     },
   },
   required: [],

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

@@ -7,6 +7,7 @@ import { SidebarPortal } from '@plone/volto/components';
 import { UseCaseListSchema } from './UseCaseListSchema';
 import { getProductGroups } from './utils';
 import { searchContent } from '@plone/volto/actions';
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const messages = defineMessages({
   xUseCases: {
@@ -91,9 +92,7 @@ const CclUseCaseListEdit = (props) => {
                         <span>
                           {useCase.topics.map((topic) => topic.title)}
                         </span>
-                        <span>
-                          {new Date(useCase?.effective).toLocaleDateString()}
-                        </span>
+                        <span>{cclDateTimeFormat(useCase?.effective)}</span>
                         <span>{useCase.responsibleOrganization}</span>
                       </div>
                     </div>

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

@@ -137,7 +137,7 @@ const RightModalFacets = (props) => {
                   trigger={
                     <div className="filters-element">
                       <div className="filters-title">
-                        <Icon className="ui" name={filterSVG} size={20} />
+                        <Icon className="ui" name={filterSVG} size={'20'} />
                         <span className="filters-title-bold">
                           {data.facetsTitle}
                         </span>

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -79,6 +79,19 @@ const CLMSCartContent = (props) => {
     }
   }, [nutsnames]);
 
+  // useEffect(() => {
+  //   const type_options = [];
+  //   if (requestedItem.dataset_download_information?.items.length > 0) {
+  //     requestedItem.dataset_download_information.items.forEach((item) => {
+  //       type_options.push({
+  //         id: item['@id'],
+  //         name: item.name,
+  //         full_format: item.full_format,
+  //       });
+  //     });
+  //   }
+  // }, [requestedItem]);
+
   function concatRequestedCartItem() {
     localSessionCart.forEach((localItem) => {
       const requestedItem = datasets
@@ -239,6 +252,13 @@ const CLMSCartContent = (props) => {
             (obj) => obj.unique_id === item.unique_id,
           );
           cartItems[objIndex].type = data.value;
+          const dataset = datasets
+            ? datasets.find((req) => req.UID === item.dataset_uid)
+            : false;
+          const format_item = dataset.dataset_download_information.items.find(
+            (item) => item['@id'] === data.value,
+          );
+          cartItems[objIndex].format = format_item.full_format;
           setCartItems([...cartItems]);
         }}
       />

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -66,16 +66,17 @@ export const getCartObjectFromMapviewer = (
   const type_options = [];
   if (dataset_data.dataset_download_information?.items.length > 0) {
     dataset_data.dataset_download_information.items.forEach((item) => {
-      type_options.push({ id: item['@id'], name: item.name });
+      type_options.push({
+        id: item['@id'],
+        name: item.name,
+        full_format: item.full_format,
+      });
     });
   }
   return {
     name: dataset_data.title || '-',
     area: area || '-',
-    format:
-      dataset_data.dataset_full_format?.token ||
-      dataset_data.dataset_full_format ||
-      '-',
+    format: type_options.length > 0 ? type_options[0].full_format : null,
     resolution: dataset_data.resolution || '-',
     size: dataset_data.size || '-',
     source: 'Map viewer',

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -16,6 +16,7 @@ import errorSVG from '@plone/volto/icons/error.svg';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import packSVG from '@plone/volto/icons/pack.svg';
 import removeSVG from '@plone/volto/icons/delete.svg';
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const prettyBytes = require('pretty-bytes');
 
@@ -127,13 +128,7 @@ const FileCard = (props) => {
             <Segment basic className="file-datetimes">
               {item?.RegistrationDateTime && (
                 <>
-                  Start date:
-                  {new Date(item?.RegistrationDateTime).toLocaleString(
-                    'en-GB',
-                    {
-                      timeZone: 'UTC',
-                    },
-                  )}
+                  Start date: {cclDateTimeFormat(item?.RegistrationDateTime)}
                   <span
                     className="info-icon"
                     tooltip="Dates and times are in UTC"
@@ -146,13 +141,7 @@ const FileCard = (props) => {
               )}
               {item?.FinalizationDateTime && (
                 <>
-                  End date:{' '}
-                  {new Date(item?.FinalizationDateTime).toLocaleString(
-                    'en-GB',
-                    {
-                      timeZone: 'UTC',
-                    },
-                  )}
+                  End date: {cclDateTimeFormat(item?.FinalizationDateTime)}
                   <span
                     className="info-icon"
                     tooltip="Dates and times are in UTC"

package/src/components/CLMSMeetingView/CLMSMeetingEmailView.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Header, Segment } from 'semantic-ui-react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 export const CLMSMeetingEmailView = (props) => {
   const { content, intl } = props;
@@ -63,7 +64,7 @@ export const CLMSMeetingEmailView = (props) => {
           <Header as="h2">{intl.formatMessage(messages.subject)}</Header>
           <p>{content.subject}</p>
           <Header as="h2">{intl.formatMessage(messages.modified)}</Header>
-          <p>{new Date(content.modified).toLocaleDateString()}</p>
+          <p>{cclDateTimeFormat(content.modified)}</p>
           <Header as="h2">{intl.formatMessage(messages.type)}</Header>
           <p>{content.email_type}</p>
           <Header as="h2">{intl.formatMessage(messages.body)}</Header>

package/src/components/CLMSMeetingView/CLMSMeetingEmailsView.jsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { Pagination } from '@plone/volto/components';
 import { searchContent } from '@plone/volto/actions';
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 export const CLMSMeetingEmailsView = (props) => {
   const { content, intl } = props;
@@ -142,7 +143,7 @@ export const CLMSMeetingEmailsView = (props) => {
                         </td>
                         <td>{email.cc}</td>
                         <td>{email.subject}</td>
-                        <td>{new Date(email.modified).toLocaleDateString()}</td>
+                        <td>{cclDateTimeFormat(email.modified)}</td>
                         <td>{email.email_type}</td>
                       </tr>
                     ))

package/src/components/CLMSMeetingView/CclLightGallery.jsx

@@ -4,8 +4,9 @@ import LightGallery from 'lightgallery/react';
 import lgZoom from 'lightgallery/plugins/zoom';
 import 'lightgallery/css/lightgallery.css';
 import 'lightgallery/css/lg-zoom.css';
-import { Image } from 'semantic-ui-react';
 import './styles.less';
+
+import { Image } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { useDispatch, useSelector } from 'react-redux';
 import { searchContent } from '@plone/volto/actions';
@@ -23,7 +24,6 @@ export const LightGalleryListing = () => {
         {
           'path.depth': 1,
           portal_type: 'Image',
-          fullobjects: true,
         },
         'images',
       ),
@@ -32,27 +32,32 @@ export const LightGalleryListing = () => {
       dispatch(searchContent([]));
     };
   }, [dispatch]);
-
   return (
     <>
       <div>
-        <LightGallery plugins={[lgZoom]} mode="lg-fade">
-          {images?.map((item, index) => (
-            <a
-              key={index}
-              className="gallery-item"
-              href={flattenToAppURL(item?.image?.download)}
-              data-sub-html={item.description}
-              data-src={flattenToAppURL(item?.image?.scales?.huge?.download)}
-            >
-              <Image
-                src={flattenToAppURL(item?.image?.scales?.large?.download)}
-                className="img-responsive"
-                alt={item.description}
-              />
-            </a>
-          ))}
-        </LightGallery>
+        {images?.length > 0 && (
+          <LightGallery plugins={[lgZoom]} mode="lg-fade">
+            {images?.map((item, index) => (
+              <a
+                key={index}
+                className="gallery-item"
+                href={flattenToAppURL(
+                  `${item['@id']}/@@images/${item?.image_field}/huge`,
+                )}
+                data-sub-html={item?.description}
+                data-src={flattenToAppURL(
+                  `${item['@id']}/@@images/${item?.image_field}/huge`,
+                )}
+              >
+                <Image
+                  src={`${item['@id']}/@@images/${item?.image_field}/large`}
+                  className="img-responsive"
+                  alt={item?.description}
+                />
+              </a>
+            ))}
+          </LightGallery>
+        )}
       </div>
     </>
   );

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 const CLMSNewsItemView = (props) => {
   const { content } = props;
   return (
@@ -14,7 +14,7 @@ const CLMSNewsItemView = (props) => {
           <h1 className="page-title">{content.title}</h1>
           <div className="news-detail">
             <div className="news-detail-date">
-              {new Date(content?.effective).toLocaleDateString()}
+              {cclDateTimeFormat(content?.effective)}
             </div>
             {content?.image && (
               <figure className="news-detail-image">

package/src/components/CLMSProfileView/CLMSApiTokensView.jsx

@@ -24,11 +24,11 @@ import {
 const messages = defineMessages({
   ApiTokens: {
     id: 'ApiTokens',
-    defaultMessage: 'API Tokens',
+    defaultMessage: 'API tokens',
   },
   title: {
     id: 'title',
-    defaultMessage: 'API Token management',
+    defaultMessage: 'API token management',
   },
   tokenTitleLabel: {
     id: 'tokenTitleLabel',

package/src/components/CLMSProfileView/CLMSNewsletterSubscriberView.jsx

@@ -24,7 +24,7 @@ class CLMSNewsletterSubscriberView extends Component {
     this.handleClick = this.handleClick.bind(this);
     this.state = {
       download: false,
-      headers: [{ label: 'Newsletter Subscribers', key: 'email' }],
+      headers: [{ label: 'Newsletter subscribers', key: 'email' }],
     };
   }
   componentDidMount() {

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -54,15 +54,15 @@ class CLMSProfileView extends Component {
       <div className="ccl-container ">
         {loggedIn && (
           <CclTabs>
-            <div tabTitle="USER PROFILE">
+            <div tabTitle="User profile">
               <CLMSUserProfileView />
             </div>
-            <div tabTitle="API TOKENS">
+            <div tabTitle="API tokens">
               <CLMSApiTokensView />
             </div>
             {(this.props.roles?.includes('Manager') ||
               this.props.roles?.includes('Site Administrator')) && (
-              <div tabTitle="NEWSLETTER SUBSCRIBERS">
+              <div tabTitle="Newsletter subscribers">
                 <CLMSNewsletterSubscriberView />
               </div>
             )}

package/src/components/CLMSProfileView/CLMSUserProfileView.jsx

@@ -19,7 +19,7 @@ import { getUserSchema } from '../../actions';
 const messages = defineMessages({
   UserProfile: {
     id: 'UserProfile',
-    defaultMessage: 'User Profile',
+    defaultMessage: 'User profile',
   },
   default: {
     id: 'Default',
@@ -27,7 +27,7 @@ const messages = defineMessages({
   },
   fullnameTitle: {
     id: 'Full Name',
-    defaultMessage: 'Full Name',
+    defaultMessage: 'Full name',
   },
   fullnameDescription: {
     id: 'Enter full name, e.g. John Smith.',

package/src/components/CLMSSubscriptionView/subscription_utils.js

@@ -1,16 +1,16 @@
 export const AVAILABLE_SUBSCRIPTIONS = [
   {
-    title: 'SUBSCRIBE TO OUR NEWSLETTER',
+    title: 'Subscribe to our newsletter',
     type: 'newsletter',
     back_url: 'newsletter',
   },
   {
-    title: 'SUBSCRIBE TO OUR NEWS',
+    title: 'Subscribe to our news',
     type: 'news',
     back_url: 'newsitem',
   },
   {
-    title: 'SUBSCRIBE TO OUR EVENTS',
+    title: 'Subscribe to our events',
     type: 'events',
     back_url: 'event',
   },

package/src/components/CclCard/CclCard.jsx

@@ -11,6 +11,7 @@ import penSVG from '@plone/volto/icons/pen.svg';
 import { Icon } from '@plone/volto/components';
 
 import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const CardImage = ({ card, size = 'preview', isCustomCard }) => {
   return card?.image_field ? (
@@ -180,7 +181,7 @@ function CclCard(props) {
                     {/* <CardLink url={url} title={card?.title} /> */}
                   </div>
                   <div className="card-news-date">
-                    {new Date(card?.effective).toLocaleString()}
+                    {cclDateTimeFormat(card?.effective)}
                   </div>
                   <p className="card-news-description">{card?.description}</p>
                 </div>

package/src/components/CclUtils/dateFormats.js

@@ -0,0 +1,17 @@
+export const cclDateTimeFormat = (date) => {
+  const dateObj = new Date(date);
+  const day = ('0' + (dateObj.getDate() + 1)).slice(-2);
+  const month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
+  const year = dateObj.getFullYear();
+  const hours = ('0' + (dateObj.getHours() + 1)).slice(-2);
+  const minutes = ('0' + (dateObj.getMinutes() + 1)).slice(-2);
+  return `${day}.${month}.${year} ${hours}.${minutes}`;
+};
+
+export const cclDateFormat = (date) => {
+  const dateObj = new Date(date);
+  const day = dateObj.getDate();
+  const month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
+  const year = dateObj.getFullYear();
+  return `${day}.${month}.${year}`;
+};

package/src/components/CclUtils/index.js

@@ -1,3 +1,5 @@
 import StringToHTML from './StringToHTML';
 
 export { StringToHTML };
+
+export { cclDateFormat, cclDateTimeFormat } from './dateFormats';