@eeacms/volto-clms-theme 1.0.100 → 1.0.101

package/CHANGELOG.md

@@ -4,8 +4,16 @@ 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.101](https://github.com/eea/volto-clms-theme/compare/1.0.100...1.0.101)
+
+- Sprint 27 [`67c5d34`](https://github.com/eea/volto-clms-theme/commit/67c5d340fe2b4bbab19d52936e4e5013040c0f65)
+- some corrections of Sprint 27 [`9bb92da`](https://github.com/eea/volto-clms-theme/commit/9bb92dac754a5c7969b2e78c958918d5099a6d29)
+
 #### [1.0.100](https://github.com/eea/volto-clms-theme/compare/1.0.99...1.0.100)
 
+> 14 June 2022
+
+- save original format of the dataset to be able to handle conversions … [`#266`](https://github.com/eea/volto-clms-theme/pull/266)
 - remove console.log [`87d44e1`](https://github.com/eea/volto-clms-theme/commit/87d44e1eae1460da3eeeaa4936de00dcdd1617d9)
 - save original format of the dataset to be able to handle conversions correctlyÇ [`cb90951`](https://github.com/eea/volto-clms-theme/commit/cb909517bd8c8a1b3a0f9511a0a690d3c05b26ff)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.100",
+  "version": "1.0.101",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -55,7 +55,8 @@
     "volto-dropdownmenu": "2.2.7",
     "volto-form-block": "2.2.2",
     "react-input-range": "^1.3.0",
-    "lightgallery": "^2.4.0"
+    "lightgallery": "^2.4.0",
+    "validator": "13.7.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

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

@@ -18,10 +18,12 @@ const CclHomeProductsBlockView = (props) => {
           }
           tabIndex={0}
           onClick={() => {
-            window.location.href = product?.linkSelector || props.path;
+            window.location.href =
+              product?.linkSelector[0]['@id'] || props.path;
           }}
           onKeyDown={() => {
-            window.location.href = product?.linkSelector || props.path;
+            window.location.href =
+              product?.linkSelector[0]['@id'] || props.path;
           }}
           id={product.productIcon === 'iconless' ? '' : product.productIcon}
         >

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

@@ -53,7 +53,11 @@ export const ProductSchema = () => ({
     },
     linkSelector: {
       title: 'Product link selector',
-      type: 'string',
+      description: 'Select site content or paste external url',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: ['Title', 'Description', '@type', '@id'],
+      allowExternals: true,
     },
   },
   required: [],

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingView.jsx

@@ -50,6 +50,7 @@ const CclRelatedListingView = (props) => {
     sort_on = 'start';
     sort_order = 'descending';
   } else if (data.content_type === 'TechnicalLibrary') {
+    //if documentation_sorting is null the TechnicalLibrary is not stored in libraries [BACKEND]
     sort_on = 'documentation_sorting';
     sort_order = 'ascending';
   }

package/src/components/Blocks/customBlocks.js

@@ -90,6 +90,7 @@ function listingVariation(id, isDefault, title, template, isWO = false) {
 
 const availableVariations = [
   listingVariation('CclCardsdoc', true, 'Line list', 'doc'),
+  listingVariation('CclFiles', false, 'Files list', 'file'),
   listingVariation('CclCardsline', false, 'Line list with Image', 'line'),
   listingVariation(
     'CclCardsline-color',

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -19,6 +19,7 @@ import jwtDecode from 'jwt-decode';
 import { postMeetingRegister } from '../../actions';
 import { toast } from 'react-toastify';
 import { LightGalleryListing } from './CclLightGallery';
+import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards';
 
 export const CLMSMeetingView = (props) => {
   const { content, intl } = props;
@@ -108,6 +109,13 @@ export const CLMSMeetingView = (props) => {
     );
     history.push(props.location.pathname + '/form');
   }
+  const files = content.items.map((item) =>
+    item['@type'] === 'File' ? item : null,
+  );
+  const index = files.indexOf(null);
+  if (index > -1) {
+    files.splice(index, 1);
+  }
   const RegistrationButton = ({ rContent, rMeeting_register, rIsLoggedIn }) => {
     return (
       <>
@@ -382,6 +390,11 @@ export const CLMSMeetingView = (props) => {
         )}
         <StringToHTML string={content.text?.data || ''} />
         <LightGalleryListing />
+        <CclListingCards
+          variation="file"
+          items={files}
+          linkHref={`${files['@id']}/@@download/file`}
+        />
       </Segment>
     </div>
   );

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -3,8 +3,17 @@ 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';
+import { LightGalleryListing } from '@eeacms/volto-clms-theme/components/CLMSMeetingView/CclLightGallery';
+import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards';
 const CLMSNewsItemView = (props) => {
   const { content } = props;
+  const files = content.items.map((item) =>
+    item['@type'] === 'File' ? item : null,
+  );
+  const index = files.indexOf(null);
+  if (index > -1) {
+    files.splice(index, 1);
+  }
   return (
     <div className="ccl-container">
       {hasBlocksData(content) && content.blocks_layout?.items?.length > 4 ? (
@@ -34,6 +43,12 @@ const CLMSNewsItemView = (props) => {
             <div className="news-detail-content">
               <StringToHTML string={content.text?.data || ''} />
             </div>
+            <LightGalleryListing />
+            <CclListingCards
+              variation="file"
+              items={files}
+              linkHref={`${files['@id']}/@@download/file`}
+            />
           </div>
         </>
       )}

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -20,6 +20,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { getExtraBreadcrumbItems } from '../../actions';
 import jwtDecode from 'jwt-decode';
+import { Unauthorized } from '@plone/volto/components';
 /**
  * CLMSProfileView class.
  * @class CLMSProfileView
@@ -52,7 +53,7 @@ class CLMSProfileView extends Component {
 
     return (
       <div className="ccl-container ">
-        {loggedIn && (
+        {loggedIn ? (
           <CclTabs>
             <div tabTitle="User profile">
               <CLMSUserProfileView />
@@ -72,6 +73,8 @@ class CLMSProfileView extends Component {
               </div>
             ))}
           </CclTabs>
+        ) : (
+          <Unauthorized />
         )}
       </div>
     );

package/src/components/CLMSSubscriptionView/SubscriptionView.jsx

@@ -20,6 +20,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { getSubscriptionConfig } from './subscription_utils';
 import { toast } from 'react-toastify';
+import validator from 'validator';
 
 const messages = defineMessages({
   subscribeToThe: {
@@ -39,8 +40,12 @@ const messages = defineMessages({
     defaultMessage: 'Changes saved!',
   },
   subscriptionSuccessMessage: {
-    id: 'You will receive an email confirmation to',
-    defaultMessage: 'You will receive an email confirmation to {email}',
+    id: 'You will receive a subscription confirmation email to',
+    defaultMessage: 'You will receive a subscription confirmation email to',
+  },
+  unsubscriptionSuccessMessage: {
+    id: 'You will receive an unsubscription confirmation email to',
+    defaultMessage: 'You will receive an unsubscription confirmation email to',
   },
   success: {
     id: 'Success',
@@ -103,6 +108,10 @@ class SubscriptionView extends Component {
     );
   };
 
+  invalidEmailErrorToast = () => {
+    toast.error(<Toast error title={'Error'} content={'Invalid email'} />);
+  };
+
   requestErrorToast = () => {
     toast.error(
       <Toast
@@ -122,10 +131,15 @@ class SubscriptionView extends Component {
           <>
             <p>{this.props.intl.formatMessage(messages.saved)}</p>
             <small>
-              {this.props.intl.formatMessage(
-                messages.subscriptionSuccessMessage,
-                { email: this.state.value },
-              )}
+              {this.props.isUnsubscribe
+                ? this.props.intl.formatMessage(
+                    messages.unsubscriptionSuccessMessage,
+                    { email: this.state.value },
+                  )
+                : this.props.intl.formatMessage(
+                    messages.subscriptionSuccessMessage,
+                    { email: this.state.value },
+                  )}
             </small>
           </>
         }
@@ -183,7 +197,11 @@ class SubscriptionView extends Component {
             <Form
               className="ccl-form user-form contact-form"
               size={'large'}
-              onSubmit={this.onSubmit}
+              onSubmit={
+                validator.isEmail(this.state.value)
+                  ? this.onSubmit
+                  : this.invalidEmailErrorToast
+              }
             >
               <div className="ccl-fieldset">
                 <div className="ccl-form-group">
@@ -201,11 +219,12 @@ class SubscriptionView extends Component {
                   </p>
                   <Form.Group inline widths="equal">
                     <Form.Input
+                      maxLength={8000}
                       placeholder="example@example.com"
                       fluid
                       name="email"
                       id="email"
-                      required={true}
+                      // required={true}
                       value={this.state.value}
                       onChange={this.handleChange}
                     />

package/src/components/CclCard/CclCard.jsx

@@ -8,7 +8,7 @@ import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { Label } from 'semantic-ui-react';
 import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock';
 import penSVG from '@plone/volto/icons/pen.svg';
-import { Icon } from '@plone/volto/components';
+import { Icon, Grid } from 'semantic-ui-react';
 
 import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
 import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
@@ -105,6 +105,7 @@ function CclCard(props) {
     'block',
     'threeColumns',
     'globalSearch',
+    'file',
   ];
   const wrapperClass =
     'card-' + (type === 'globalSearch' ? 'doc' : type || 'line');
@@ -132,6 +133,28 @@ function CclCard(props) {
                 </DocCard>
               </>
             )}
+            {type === 'file' && (
+              <>
+                <Grid columns={2}>
+                  <Grid.Row>
+                    <Grid.Column className="card-icon" width={2}>
+                      <Icon
+                        color="olive"
+                        size="huge"
+                        name="file alternate outline"
+                      />
+                    </Grid.Column>
+                    <Grid.Column className="card-text" width={10}>
+                      <CardLink url={url}>{card?.title}</CardLink>
+                      <div className="card-description">
+                        {card?.description}
+                      </div>
+                      {children}
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </>
+            )}
             {type === 'globalSearch' && (
               <>
                 <Label ribbon="right" color="olive">

package/src/components/CclCard/cards.less

@@ -59,6 +59,15 @@
   background-color: #a0b1280f;
 }
 
+.card-file {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 1rem;
+  background-color: #a0b1280f;
+}
+
 .card-line-color .card-image {
   width: 12rem;
   height: 12rem;

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -26,6 +26,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { subscribeTo } from '../../../../../actions';
 import { toast } from 'react-toastify';
+import validator from 'validator';
 
 const messages = defineMessages({
   copernicusServices: {
@@ -156,6 +157,10 @@ class Footer extends Component {
     );
   };
 
+  invalidEmailErrorToast = () => {
+    toast.error(<Toast error title={'Error'} content={'Invalid email'} />);
+  };
+
   /**
    * Submit handler
    * @method onSubmit
@@ -335,6 +340,7 @@ class Footer extends Component {
               <form action="" className="ccl-footer-form">
                 <div className="ccl-footer-newsletter">
                   <input
+                    maxLength="8000"
                     placeholder="Enter an email adress"
                     type="text"
                     value={this.state.value}
@@ -343,7 +349,11 @@ class Footer extends Component {
                   <button
                     type="submit"
                     className="footer-privacy-button"
-                    onClick={this.onSubmit}
+                    onClick={
+                      validator.isEmail(this.state.value)
+                        ? this.onSubmit
+                        : this.invalidEmailErrorToast
+                    }
                   >
                     {this.props.intl.formatMessage(messages.subscribe)}
                   </button>

package/src/customizations/volto/components/theme/Logout/Logout.jsx

@@ -57,7 +57,7 @@ class CclLogout extends Component {
           <div className="event-detail-content">
             <p>{'You have logged out correctly'}</p>
           </div>
-          <CclButton mode={'filled'}>
+          <CclButton isButton={'false'} mode={'filled'}>
             <CclLoginModal />
           </CclButton>
         </div>