@eeacms/volto-clms-theme 1.0.135 → 1.0.136

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.136](https://github.com/eea/volto-clms-theme/compare/1.0.135...1.0.136) - 26 October 2022
+
+#### :bug: Bug Fixes
+
+- fix: redirection on tabs [ionlizarazu - [`68f9a74`](https://github.com/eea/volto-clms-theme/commit/68f9a7402ac9988516dd2926961f3b0321ed69e9)]
+- fix: cart items naming [ionlizarazu - [`bde8fba`](https://github.com/eea/volto-clms-theme/commit/bde8fba4e3e0378ae82ec5deb75b791698f10a6a)]
+- fix: go to the form top position after sending it correctly [ionlizarazu - [`38c1f2c`](https://github.com/eea/volto-clms-theme/commit/38c1f2c6061f617e105b4208ca412482eea33ecd)]
+
+#### :hammer_and_wrench: Others
+
+- tabs preventDefault [ionlizarazu - [`31bf522`](https://github.com/eea/volto-clms-theme/commit/31bf522517e41167bae9bb81e59fa1342c426a7e)]
+- add an option to redirect another path after login [ionlizarazu - [`85b8d98`](https://github.com/eea/volto-clms-theme/commit/85b8d9860dade00d33fdf60bd371b4b9c98edcb1)]
+- Satellite background image [ionlizarazu - [`5fc29eb`](https://github.com/eea/volto-clms-theme/commit/5fc29ebc8bb956e1c775c50aefaee0e429e79913)]
+- tabs functionality for redirects and not logged in users [ionlizarazu - [`7e0ae6e`](https://github.com/eea/volto-clms-theme/commit/7e0ae6e12385c2a4b64ad9029ba5aafb70e14bc1)]
+- change Document naming to Other content [ionlizarazu - [`ddaa1d0`](https://github.com/eea/volto-clms-theme/commit/ddaa1d0664669641c2b67fa01119c8b6cf7ba57c)]
+- meeting register button condition [ionlizarazu - [`73fea5b`](https://github.com/eea/volto-clms-theme/commit/73fea5b2964c106efa405ad9047ba9bd910394e1)]
 ### [1.0.135](https://github.com/eea/volto-clms-theme/compare/1.0.134...1.0.135) - 13 October 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.135",
+  "version": "1.0.136",
   "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/HomeProductsSchema.js

@@ -49,6 +49,7 @@ export const ProductSchema = () => ({
         ['home_product_3', 'Leaf'],
         ['home_product_4', 'Computer'],
         ['home_product_5', 'Database'],
+        ['home_product_6', 'Satellite'],
       ],
     },
     linkSelector: {

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/View.jsx

@@ -225,6 +225,8 @@ const View = ({ data, id, path }) => {
     onChangeFormData,
   });
 
+  const formid = `form-${id}`;
+
   useEffect(() => {
     if (submitResults?.loaded) {
       setFormState({
@@ -232,6 +234,16 @@ const View = ({ data, id, path }) => {
         result: intl.formatMessage(messages.formSubmitted),
       });
       captcha.reset();
+      const formItem = document.getElementById(formid);
+      if (formItem !== null) {
+        const formItemPosition = formItem.getBoundingClientRect();
+        formItemPosition !== null &&
+          window.scrollTo({
+            top: formItemPosition.x,
+            left: formItemPosition.y,
+            behavior: 'smooth',
+          });
+      }
     } else if (submitResults?.error) {
       let errorDescription = `${
         JSON.parse(submitResults.error.response?.text ?? '{}')?.message
@@ -249,6 +261,7 @@ const View = ({ data, id, path }) => {
 
   return (
     <FormView
+      id={formid}
       formState={formState}
       formErrors={formErrors}
       formData={formData}

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/rewriteOptions.js

@@ -7,7 +7,7 @@ export const portal_types_labels = {
   WorkOpportunity: 'Vacancy',
   Tender: 'Tender',
   TechnicalLibrary: 'Product documentation',
-  Document: 'Page',
+  Document: 'Other content',
 };
 
 export const category_labels = {

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { compose } from 'redux';
 import { Modal, Segment } from 'semantic-ui-react';
 
 import { getUser } from '@plone/volto/actions';
@@ -20,7 +21,6 @@ import {
 
 import jwtDecode from 'jwt-decode';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
 
 /**
  * Full view component.
@@ -390,19 +390,27 @@ const CLMSDatasetDetailView = ({ content, token }) => {
 
         {content?.downloadable_dataset &&
           content?.downloadable_files?.items?.length > 0 && (
-            <div tabTitle="Download">
+            <div
+              tabTitle="Download"
+              loginRequired={true}
+              redirect={
+                content?.downloadable_files?.items[0].path === ''
+                  ? location.pathname + '/download-by-area'
+                  : ''
+              }
+            >
               {DownloadDataSetContent(content, token)}
             </div>
           )}
-        {content?.downloadable_dataset &&
+        {/* {content?.downloadable_dataset &&
           content?.downloadable_files?.items?.length === 0 && (
             <div
-              tabTitle="Download"
+              tabTitle="Downloadaa"
               redirect={`${location.pathname}/download-by-area`}
             >
               {''}
             </div>
-          )}
+          )} */}
 
         <div underPanel={true}>
           <nav className="left-menu-detail">

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -1,48 +1,25 @@
-import React, { useEffect } from 'react';
-import CclDownloadTable from '@eeacms/volto-clms-theme/components/CclDownloadTable/CclDownloadTable';
-import { useDispatch, useSelector } from 'react-redux';
-import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import config from '@plone/volto/registry';
-import { UniversalLink } from '@plone/volto/components';
-import CclModal from '../CclModal/CclModal';
-import { getRegistry } from '@eeacms/volto-clms-theme/actions';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useLocation, Redirect } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import CclDownloadTable from '@eeacms/volto-clms-theme/components/CclDownloadTable/CclDownloadTable';
+import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/CclLoginModal';
 
 const DownloadDataSetContent = (data, token) => {
   const location = useLocation();
-  const dispatch = useDispatch();
 
-  const registryRecords = useSelector((state) => state.registry.records);
-  const [loginUrl, setLoginUrl] = React.useState('');
-  const registry_key = config.settings?.registry?.login_url || null;
-
-  useEffect(() => {
-    if (registryRecords && registry_key in registryRecords) {
-      setLoginUrl(
-        registryRecords[registry_key] +
-          '?came_from=' +
-          location.pathname +
-          '/download-by-area',
-      );
-    }
-  }, [registryRecords, registry_key, location.pathname]);
   const user = useSelector((state) => state.users?.user);
 
-  function modalStatus(status) {
-    if (status === true) {
-      dispatch(getRegistry(registry_key));
-    }
-  }
-
   return (
     <div>
-      {data.downloadable_files?.items[0].path === '' &&
+      {/* {data.downloadable_files?.items[0].path === '' &&
       location.hash === '#Download' ? (
         <Redirect to={location.pathname + '/download-by-area'} />
       ) : (
         ''
-      )}
+      )} */}
 
       {data?.mapviewer_viewservice?.length > 0 && (
         <div className="dataset-download-area">
@@ -62,8 +39,8 @@ const DownloadDataSetContent = (data, token) => {
               </CclButton>
             )
           ) : (
-            <CclModal
-              trigger={
+            <CclLoginModal
+              triggerComponent={() => (
                 <CclButton
                   isButton={true}
                   className={'ccl-button ccl-button--default'}
@@ -73,64 +50,8 @@ const DownloadDataSetContent = (data, token) => {
                     defaultMessage="Go to download by area"
                   />
                 </CclButton>
-              }
-              size="tiny"
-              modalStatus={modalStatus}
-            >
-              <div className="content">
-                <div className="modal-login-title">
-                  This website uses EU Login for user authentication.
-                </div>
-                <div className="modal-login-text">
-                  <p>
-                    {' '}
-                    EU Login, the European Commission Authentication Service,
-                    enables you to access various web applications centrally
-                    using the same e-mail and password. You can read more{' '}
-                    <UniversalLink
-                      openLinkInNewTab
-                      href="https://ecas.ec.europa.eu/cas/about.html"
-                    >
-                      here
-                    </UniversalLink>
-                    .
-                  </p>
-                  <p>
-                    {' '}
-                    If you have EU Login account, please click 'Login using EU
-                    Login'.
-                  </p>
-                  <p>
-                    If you don't have EU Login account, please follow this{' '}
-                    <UniversalLink
-                      openLinkInNewTab
-                      href="https://ecas.ec.europa.eu/cas/eim/external/register.cgi"
-                    >
-                      link
-                    </UniversalLink>{' '}
-                    to create it
-                  </p>
-                  <p>
-                    If you have other questions, please contact our
-                    <UniversalLink openLinkInNewTab href="/en/service-desk">
-                      {' '}
-                      Service desk
-                    </UniversalLink>
-                    .
-                  </p>
-                </div>
-              </div>
-              <div className="actions">
-                <div className="modal-buttons">
-                  <a
-                    href={loginUrl || '#'}
-                    className="ccl-button ccl-button-green"
-                  >
-                    Login using EU Login
-                  </a>
-                </div>
-              </div>
-            </CclModal>
+              )}
+            />
           )}
           {/* {data.token === '' ? (
             <CclButton

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -233,11 +233,7 @@ const CLMSCartContent = (props) => {
   const CollectionNaming = (typeProps) => {
     const { item } = typeProps;
     if (item.file_id) {
-      return (
-        <span className={'tag tag-' + item?.type?.toLowerCase()}>
-          {contentOrDash(item.type)}
-        </span>
-      );
+      return '-';
     } else if (!item.type) {
       return '-';
     }
@@ -250,13 +246,17 @@ const CLMSCartContent = (props) => {
             ? item.type
             : item.type_options.length > 0 && item.type_options[0].id
         }
-        options={item.type_options.map((option) => {
-          return {
-            key: option.id,
-            value: option.id,
-            text: (option.collection === undefined && '-') || option.collection,
-          };
-        })}
+        options={
+          item?.type_options?.length > 0 &&
+          item?.type_options.map((option) => {
+            return {
+              key: option.id,
+              value: option.id,
+              text:
+                (option.collection === undefined && '-') || option.collection,
+            };
+          })
+        }
         onChange={(e, data) => {
           const objIndex = cartItems.findIndex(
             (obj) => obj.unique_id === item.unique_id,
@@ -346,13 +346,13 @@ const CLMSCartContent = (props) => {
                           </div>
                         </div>
                       </td>
-                      {item.title ? (
+                      {/* {item.title ? (
                         <td>
                           {item.title} ({contentOrDash(item.name)})
                         </td>
-                      ) : (
-                        <td>{contentOrDash(item.name)}</td>
-                      )}
+                      ) : ( */}
+                      <td>{contentOrDash(item.name)}</td>
+                      {/* )} */}
                       <td>{contentOrDash(item.source)}</td>
                       <td style={{ wordBreak: 'break-word' }}>
                         <AreaNaming item={item} />

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -38,7 +38,7 @@ const DatasetNaming = (props) => {
   const { dataset } = props;
   return (
     <>
-      {`${dataset['name']} -
+      {`${dataset['name'] ? dataset['name'] : 'loading...'} -
     ${
       dataset?.OutputFormat
         ? dataset?.OutputFormat

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -146,7 +146,8 @@ export const CLMSMeetingView = (props) => {
             />
           </Message>
         ) : (
-          rIsLoggedIn && (
+          rIsLoggedIn &&
+          rContent.can_register && (
             <>
               <div>
                 <input
@@ -439,7 +440,8 @@ export const CLMSMeetingView = (props) => {
                 <>
                   {content.anonymous_registration_form?.published &&
                     content.anonymous_registration_form?.email &&
-                    content.anonymous_registration_form?.fullname && (
+                    content.anonymous_registration_form?.fullname &&
+                    content.can_register && (
                       <CclButton url={content.anonymous_registration_form?.url}>
                         <FormattedMessage
                           id="Register"

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -1,11 +1,14 @@
 import React, { useEffect } from 'react';
-import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
-import { useDispatch, useSelector } from 'react-redux';
-import { getRegistry } from '@eeacms/volto-clms-theme/actions';
 import { FormattedMessage } from 'react-intl';
-import config from '@plone/volto/registry';
+import { useDispatch, useSelector } from 'react-redux';
+
 import { UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import { getRegistry } from '@eeacms/volto-clms-theme/actions';
+import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
+
 import './ccl-login-modal.css';
+
 /**
  * Login Modal component doc.
  * @function CclLoginModal
@@ -13,7 +16,15 @@ import './ccl-login-modal.css';
  *
  */
 function CclLoginModal(props) {
-  let { classname = 'header-login-link' } = props;
+  let {
+    classname = 'header-login-link',
+    triggerComponent = () => (
+      <span className={classname}>
+        <FormattedMessage id="loginRegister" defaultMessage="Register/Login" />
+      </span>
+    ),
+    otherPath = undefined,
+  } = props;
   const dispatch = useDispatch();
   const registryRecords = useSelector((state) => state.registry.records);
   const [loginUrl, setLoginUrl] = React.useState('');
@@ -21,11 +32,15 @@ function CclLoginModal(props) {
 
   useEffect(() => {
     if (registryRecords && registry_key in registryRecords) {
-      setLoginUrl(
-        registryRecords[registry_key] + '?came_from=' + window.location.href,
-      );
+      if (otherPath) {
+        setLoginUrl(`${registryRecords[registry_key]}?came_from=${otherPath}`);
+      } else {
+        setLoginUrl(
+          `${registryRecords[registry_key]}?came_from=${window.location.href}`,
+        );
+      }
     }
-  }, [registryRecords, registry_key]);
+  }, [otherPath, registryRecords, registry_key]);
 
   function modalStatus(status) {
     if (status === true) {
@@ -35,14 +50,7 @@ function CclLoginModal(props) {
 
   return (
     <CclModal
-      trigger={
-        <span className={classname}>
-          <FormattedMessage
-            id="loginRegister"
-            defaultMessage="Register/Login"
-          />
-        </span>
-      }
+      trigger={triggerComponent()}
       size="tiny"
       modalStatus={modalStatus}
     >
@@ -90,7 +98,12 @@ function CclLoginModal(props) {
       </div>
       <div className="actions">
         <div className="modal-buttons">
-          <a href={loginUrl || '#'} className="ccl-button ccl-button-green">
+          <a
+            href={loginUrl || '#'}
+            target="_blank"
+            rel="noreferrer"
+            className="ccl-button ccl-button-green"
+          >
             Login using EU Login
           </a>
         </div>

package/src/components/CclTab/CclTab.jsx

@@ -1,32 +1,72 @@
-import { NavLink } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import React from 'react';
+import { useSelector } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
+
+import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/CclLoginModal';
+
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 
 function CclTab(props) {
-  let { activeTab, tabTitle, onClick, tabId, routing, redirect } = props;
-
+  let {
+    activeTab,
+    tabTitle,
+    onClick,
+    tabId,
+    routing,
+    redirect,
+    loginRequired,
+  } = props;
+  const token = useSelector((state) => state.userSession?.token);
   function onTabClick() {
     onClick(tabId);
   }
+  const [redirecting, setRedirecting] = React.useState(false);
   return (
     <div
-      className={cx('card', activeTab === tabId && 'active')}
-      onClick={onTabClick}
-      onKeyDown={onTabClick}
+      className={cx('card', activeTab === tabId ? 'active' : '')}
+      onClick={(e) => {
+        !loginRequired
+          ? onTabClick(e)
+          : loginRequired && token && onTabClick(e);
+      }}
+      onKeyDown={(e) => {
+        !loginRequired
+          ? onTabClick(e)
+          : loginRequired && token && onTabClick(e);
+      }}
       tabIndex="0"
       role="button"
       id={tabId}
     >
-      {routing && !redirect ? (
+      {loginRequired && !token ? (
+        <CclLoginModal
+          otherPath={redirect ? redirect : undefined}
+          triggerComponent={() => (
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid
+            <a style={{ cursor: 'pointer' }}>{tabTitle}</a>
+          )}
+        />
+      ) : routing && !redirect ? (
         <NavLink to={'#' + tabId}>{tabTitle}</NavLink>
+      ) : !redirect ? (
+        <NavLink to={'#'}>{tabTitle}</NavLink>
       ) : (
-        !redirect && <NavLink to={'#'}>{tabTitle}</NavLink>
-      )}
-      {redirect && (
-        <a href={redirect} target="_blank" rel="noreferrer">
-          {tabTitle}
-        </a>
+        redirect && (
+          // eslint-disable-next-line jsx-a11y/anchor-is-valid
+          <a
+            rel="noreferrer"
+            role="button"
+            onClick={() => setRedirecting(true)}
+            onKeyPress={() => setRedirecting(true)}
+            tabIndex={0}
+            style={{ cursor: 'pointer' }}
+          >
+            {tabTitle}
+            {redirecting && <Redirect push to={redirect} />}
+          </a>
+        )
       )}
     </div>
   );

package/src/components/CclTab/CclTabs.jsx

@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
           // Any content under tabs
         </div>
       </CclTabs>
- * 
+ *
  */
 const CclTabs = (props) => {
   let { children, routing = false } = props;
@@ -63,6 +63,7 @@ const CclTabs = (props) => {
                   tabTitle={tabTitle}
                   onClick={onClickTabItem}
                   redirect={redirect}
+                  {...child.props}
                 />
               );
             })}

package/theme/clms/css/home.css

@@ -248,6 +248,10 @@
   background-image: url('../img/home_product_5.png');
 }
 
+#home_product_6 {
+  background-image: url('../img/home_product_6.png');
+}
+
 /* Datasets band */
 .home-datasets-container {
   padding: 3rem 1rem;