@eeacms/volto-clms-theme 1.0.44 → 1.0.48

package/src/components/CLMSDatasetDetailView/MetadataContent.jsx

@@ -1,104 +1,214 @@
-import React from 'react';
-import { CclInfoDescription, CclInfoContainer } from '../CclInfoDescription';
+import { CclInfoContainer, CclInfoDescription } from '../CclInfoDescription';
+
+import BoundingBoxComponent from './BoundingBoxComponent';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import ContactComponent from './ContactComponent';
+import DistributionInfoComponent from './DistributionInfoComponent';
+import { Label } from 'semantic-ui-react';
+import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const MetadataContent = (data) => {
   return (
     <>
-      <CclButton
-        className="ccl-button ccl-button--default download-dataset-metadata"
-        url={data['@id']}
-        download={true}
-      >
-        Download metadata
-      </CclButton>
+      {data?.geonetwork_identifiers?.items.map((item, key) => {
+        return (
+          <CclButton
+            key={key}
+            className="ccl-button ccl-button--default download-dataset-metadata"
+            url={
+              item.type === 'EEA'
+                ? 'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
+                  item.id
+                : 'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
+                  item.id
+            }
+            download={true}
+          >
+            Download metadata: {item.title}
+          </CclButton>
+        );
+      })}
+
       <CclInfoContainer>
         <h2>Data identification</h2>
-        <CclInfoDescription
-          title="Resource title"
-          tooltip="Name by which the cited resource is known"
-          description={data.dataResourceTitle}
-        />
+        {data?.dataResourceTitle && (
+          <CclInfoDescription
+            title="Resource title"
+            tooltip="Name by which the cited resource is known"
+            description={data?.dataResourceTitle}
+          />
+        )}
+        {data?.resourceEffective && (
+          <CclInfoDescription
+            title="Date of publication"
+            tooltip=""
+            description={new Date(data?.resourceEffective).toLocaleDateString()}
+          />
+        )}
+        {data?.resourceModified && (
+          <CclInfoDescription
+            title="Revision date"
+            tooltip=""
+            description={new Date(data?.resourceModified).toLocaleDateString()}
+          />
+        )}
         <CclInfoDescription
           title="Resource abstract"
           tooltip="Brief narrative summary of the content of the resource(s) with coverage, main attributes, data sources, important of the work, etc."
           description={
-            <StringToHTML string={data.dataResourceAbstract?.data || ''} />
+            <StringToHTML string={data?.dataResourceAbstract?.data || ''} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Classification of spatial data</h2>
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Geographic reference</h2>
+        {data?.keywords && data?.keywords?.length > 0 && (
+          <CclInfoDescription
+            title="Keywords"
+            tooltip=""
+            description={data?.keywords.map((keyword) => {
+              return <Label color="olive">{keyword}</Label>;
+            })}
+          />
+        )}
+        {data?.geographicCoverage && (
+          <CclInfoDescription
+            title="Geographic coverage"
+            tooltip=""
+            description={JSON.stringify(data?.geographicCoverage)}
+          />
+        )}
+        {data?.accessAndUseLimitationPublic_line && (
+          <CclInfoDescription
+            title="Limitation of public access"
+            tooltip=""
+            description={data?.accessAndUseLimitationPublic_line}
+          />
+        )}
         <CclInfoDescription
-          title="Coordinate Reference System"
-          tooltip="CRS of the resource"
-          description={data.coordinateReferenceSystem}
-        />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Temporal reference</h2>
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Quality and validity</h2>
-        <CclInfoDescription
-          title="Lineage"
-          tooltip="General explanation of the data produce knowledge's about the lineage of a dataset"
-          description={<StringToHTML string={data.qualityLineage?.data} />}
-        />
-        <CclInfoDescription
-          title="Spatial resolution"
-          tooltip="A set of zero to many resolution distances (typically for gridded data and imagery-derived products) or equivalent scales (typically for maps or map-derived products)"
+          title="Conditions applying to access and use"
+          tooltip=""
           description={
-            <StringToHTML string={data.qualitySpatialResolution?.data} />
+            <StringToHTML string={data?.accessAndUseConstraints?.data || ''} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Conformity</h2>
         <CclInfoDescription
-          title="Specification"
-          tooltip="A citation of the implementing rules adopted under Article 7(1) of Directive 2007/2/EC or other specification to which a particular resource conforms"
-          description={
-            <StringToHTML string={data.conformitySpecification?.data} />
-          }
+          title="Spatial Resolution"
+          tooltip=""
+          description={data?.qualitySpatialResolution_line}
         />
+        {data?.classificationTopicCategory && (
+          <CclInfoDescription
+            title="Topic of Category"
+            tooltip=""
+            description={
+              data?.classificationTopicCategory &&
+              data?.classificationTopicCategory.map((topic) => {
+                return <Label color="olive">{topic.title}</Label>;
+              })
+            }
+          />
+        )}
+        {data?.geographicBoundingBox?.items?.length > 0 && (
+          <CclInfoDescription
+            title="Bounding Boxes"
+            tooltip=""
+            description={data?.geographicBoundingBox?.items.map((bbox, key) => {
+              return <BoundingBoxComponent key={key} bbox={bbox} />;
+            })}
+          />
+        )}
+        {data?.temporalCoverage && (
+          <CclInfoDescription
+            title="Temporal Extent"
+            tooltip=""
+            description={
+              data?.temporalCoverage &&
+              data?.temporalCoverage.map((year) => {
+                return <Label color="olive">{year}</Label>;
+              })
+            }
+          />
+        )}
       </CclInfoContainer>
+      {data?.dataResourceType && (
+        <CclInfoContainer>
+          <h2>Hierarchy Level</h2>
+          <CclInfoDescription
+            title="Resource Type"
+            tooltip=""
+            description={data?.dataResourceType}
+          />
+        </CclInfoContainer>
+      )}
+      {data?.responsiblePartyWithRole?.items &&
+        data?.responsiblePartyWithRole?.items?.length > 0 && (
+          <CclInfoContainer>
+            <h2>Contacts</h2>
+            <CclInfoDescription
+              title="Responsible Party with Role"
+              tooltip=""
+              description={data?.responsiblePartyWithRole?.items.map(
+                (item, key) => {
+                  return <ContactComponent key={key} contact={item} />;
+                },
+              )}
+            />
+          </CclInfoContainer>
+        )}
+      {data?.coordinateReferenceSystemList &&
+        data?.coordinateReferenceSystemList.length > 0 && (
+          <CclInfoContainer>
+            <h2>Reference system info</h2>
+            <CclInfoDescription
+              title="Coordinate Reference System"
+              tooltip="CRS of the resource"
+              description={
+                data?.coordinateReferenceSystemList &&
+                data?.coordinateReferenceSystemList.map((reference) => {
+                  return <Label color="olive">{reference}</Label>;
+                })
+              }
+            />
+          </CclInfoContainer>
+        )}
       <CclInfoContainer>
-        <h2>Constraints related to access and use</h2>
-        <CclInfoDescription
-          title="Conditions applying to access and use"
-          tooltip="Restriction on the access and use of a resource or metadata"
-          description={
-            <StringToHTML string={data.accessAndUseConstraints?.data} />
-          }
-        />
+        <h2>Data quality info</h2>
         <CclInfoDescription
-          title="Limitation of public access"
-          tooltip="Limitation and other reason for public access"
+          title="Specification"
+          tooltip="A citation of the implementing rules adopted under Article 7(1) of Directive 2007/2/EC or other specification to which a particular resource conforms"
           description={
-            <StringToHTML string={data.accessAndUseLimitationPublic?.data} />
+            <StringToHTML string={data?.conformitySpecification?.data} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Responsible organisation</h2>
-        <CclInfoDescription
-          title="Responsible party"
-          tooltip="Organisation associated with the resource. Organisation name, contact information (email)."
-          description={<StringToHTML string={data.owners?.data} />}
-        />
+        {data?.conformityPass && (
+          <CclInfoDescription
+            title="Pass"
+            tooltip=""
+            description={data?.conformityPass}
+          />
+        )}
         <CclInfoDescription
-          title="Responsible party role"
-          tooltip="Function performed by the party"
-          description={
-            <StringToHTML string={data.responsiblePartyRole?.data} />
-          }
+          title="Lineage"
+          tooltip="General explanation of the data produce knowledge's about the lineage of a dataset"
+          description={<StringToHTML string={data?.qualityLineage?.data} />}
         />
       </CclInfoContainer>
+      {data?.distributionInfo?.items &&
+        data?.distributionInfo?.items?.length > 0 && (
+          <CclInfoContainer>
+            <h2>Distribution info</h2>
+            <CclInfoDescription
+              title="Resource Locator and Services"
+              tooltip=""
+              description={data?.distributionInfo?.items.map(
+                (resource, key) => {
+                  return (
+                    <DistributionInfoComponent key={key} resource={resource} />
+                  );
+                },
+              )}
+            />
+          </CclInfoContainer>
+        )}
     </>
   );
 };

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -275,7 +275,11 @@ const CLMSDownloadCartView = (props) => {
                         <tr>
                           <td
                             colSpan={11}
-                            style={{ textAlign: 'center', fontSize: '1.5em' }}
+                            style={{
+                              textAlign: 'center',
+                              color: '#adb0b8',
+                              opacity: 0.5,
+                            }}
                           >
                             Empty cart
                           </td>

package/src/components/CLMSEventView/CLMSEventView.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 export const CLMSEventView = (props) => {
   const { content } = props;
@@ -12,17 +12,19 @@ export const CLMSEventView = (props) => {
         <div className="event-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure className="news-detail-image">
-          <img
-            src={
-              content?.image
-                ? content?.image?.download
-                : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-            }
-            alt={content?.image ? content?.image?.filename : 'Placeholder'}
-          />
-          <figcaption>{content?.image_caption}</figcaption>
-        </figure>
+        {content?.image && (
+          <figure className="news-detail-image">
+            <img
+              src={
+                content?.image
+                  ? content?.image?.download
+                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+              }
+              alt={content?.image ? content?.image?.filename : 'Placeholder'}
+            />
+            <figcaption>{content?.image_caption}</figcaption>
+          </figure>
+        )}
         <div className="event-detail-when">
           <FontAwesomeIcon icon={['far', 'calendar-alt']} />
           <div className="event-detail-when-text">

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -10,17 +10,19 @@ const CLMSNewsItemView = (props) => {
         <div className="news-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure className="news-detail-image">
-          <img
-            src={
-              content?.image
-                ? content?.image?.download
-                : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-            }
-            alt={content?.image ? content?.image?.filename : 'Placeholder'}
-          />
-          <figcaption>{content?.image_caption}</figcaption>
-        </figure>
+        {content?.image && (
+          <figure className="news-detail-image">
+            <img
+              src={
+                content?.image
+                  ? content?.image?.download
+                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+              }
+              alt={content?.image ? content?.image?.filename : 'Placeholder'}
+            />
+            <figcaption>{content?.image_caption}</figcaption>
+          </figure>
+        )}
         <div className="news-detail-content">
           <StringToHTML string={content.text?.data || ''} />
         </div>

package/src/components/CLMSProfileView/CLMSApiTokensView.jsx

@@ -67,7 +67,7 @@ const messages = defineMessages({
   },
   createdToken: {
     id: 'Created token name',
-    defaultMessage: 'Token',
+    defaultMessage: 'The token has been created successfuly',
   },
   copyButton: {
     id: 'Copy created token button',
@@ -144,11 +144,12 @@ class CLMSApiTokensView extends Component {
         ip_range: PropTypes.string,
         issued: PropTypes.string,
         key_id: PropTypes.string,
-        last_used: PropTypes.string,
-        title: PropTypes.string,
+        public_key: PropTypes.string,
+        private_key: PropTypes.string,
       }),
     ),
   };
+
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
@@ -184,12 +185,9 @@ class CLMSApiTokensView extends Component {
   onClose() {
     this.componentDidMount();
     this.setState({
-      value: '',
-      createdToken: false,
-      modal: false,
-      tokenTitle: '',
-      textToCopy: '',
       createNewToken: false,
+      public_key: undefined,
+      private_key: undefined,
     });
   }
 
@@ -203,10 +201,10 @@ class CLMSApiTokensView extends Component {
 
   handleClick() {
     this.setState({
-      createdToken: true,
       modal: false,
-      button: false,
       createNewToken: true,
+      public_key: undefined,
+      private_key: undefined,
     });
   }
 
@@ -225,14 +223,14 @@ class CLMSApiTokensView extends Component {
     this.props.getUser(this.props.userId);
     this.props.getTokens();
     this.setState({
-      value: '',
-      tokenTitle: '',
+      value: undefined,
+      tokenTitle: undefined,
       button: false,
-      createNewToken: true,
+      // createNewToken: true,
       modal: false,
       createdToken: false,
-      textToCopy: '',
-      key_id: '',
+      textToCopy: undefined,
+      key_id: undefined,
     });
   }
 
@@ -263,21 +261,36 @@ class CLMSApiTokensView extends Component {
               {this.props.intl.formatMessage(messages.ApiTokens)}
             </h1>
             <div>
-              <h3>{this.props.intl.formatMessage(messages.title)}</h3>
+              <h2>{this.props.intl.formatMessage(messages.title)}</h2>
               <p>{this.props.intl.formatMessage(messages.description)}</p>
               {this.props.createdTokens?.map((item) => (
                 <>
                   <div>
                     <p>{item.title}</p>
                     <p>{item.key_id}</p>
-                    <CclButton
-                      mode={'filled'}
-                      onClick={() => {
-                        this.deleteToken(item.key_id);
-                      }}
+                    <CclModal
+                      onClick={() => this.onClose}
+                      trigger={
+                        <CclButton mode={'filled'}>
+                          {this.props.intl.formatMessage(messages.deleteButton)}
+                        </CclButton>
+                      }
+                      size="small"
                     >
-                      {this.props.intl.formatMessage(messages.deleteButton)}
-                    </CclButton>
+                      <h4>This token will be deleted forever</h4>
+                      <p>
+                        You will not be able to use this token again. Only
+                        delete your tokens when you are absolutely sure of it
+                      </p>
+                      <CclButton
+                        mode={'filled'}
+                        onClick={() => {
+                          this.deleteToken(item.key_id);
+                        }}
+                      >
+                        {'I confirm that I want to delete this token'}
+                      </CclButton>
+                    </CclModal>
                   </div>
                 </>
               ))}
@@ -351,31 +364,40 @@ class CLMSApiTokensView extends Component {
                       <>
                         {(this.state.createdToken === true && (
                           <div>
-                            <p>
+                            <h3>
                               {this.props.intl.formatMessage(
                                 messages.createdToken,
                               )}
-                            </p>
+                            </h3>
                             <form className="ccl-form search-form">
                               {this.props.newTokens?.map((item) => (
                                 <>
-                                  {(item.public_key !== undefined && (
+                                  {(item?.private_key && (
                                     <>
-                                      <input
-                                        value={item.public_key}
+                                      <p>{'Download your service key.'}</p>
+                                      <p>
+                                        {
+                                          "This is the only time your private key will be displayed - it will not be stored on the server, and can't be recovered should you fail to save it."
+                                        }
+                                      </p>
+                                      <p>
+                                        {
+                                          'You should copy & paste this key into a .json file, and store this file in a location accessible only to your service application. This key grants anyone in possession of it full access to this account. You should therefore make sure to protect it with the least file system permissions possible.'
+                                        }
+                                      </p>
+
+                                      <textarea
                                         disabled="disabled"
-                                        type="text"
-                                        className="ccl-text-input"
                                         id="created_token"
                                         name="createdToken"
-                                        placeholder=""
-                                        aria-label="Created token"
+                                        class="ccl-text-input"
+                                        value={JSON.stringify(item)}
                                       />
                                       <CclButton
                                         mode={'filled'}
                                         onClick={() => {
                                           navigator.clipboard.writeText(
-                                            item.public_key,
+                                            JSON.stringify(item),
                                           );
                                         }}
                                       >

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -3,18 +3,20 @@
  * @module components/CLMSProfileView/CLMSProfileView
  */
 
+import {
+  CLMSApiTokensView,
+  CLMSUserProfileView,
+} from '@eeacms/volto-clms-theme/components/CLMSProfileView';
 import React, { Component } from 'react';
+import { getUser, updateUser } from '@plone/volto/actions';
+
+import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { compose } from 'redux';
-import jwtDecode from 'jwt-decode';
-import { getUser, updateUser } from '@plone/volto/actions';
+import { connect } from 'react-redux';
 import { getBaseUrl } from '@plone/volto/helpers';
-import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
-import {
-  CLMSUserProfileView,
-  CLMSApiTokensView,
-} from '@eeacms/volto-clms-theme/components/CLMSProfileView';
+import { getExtraBreadcrumbItems } from '../../actions';
+import jwtDecode from 'jwt-decode';
 
 /**
  * CLMSProfileView class.
@@ -32,13 +34,18 @@ class CLMSProfileView extends Component {
     children: PropTypes.instanceOf(Array),
     user: PropTypes.shape({
       '@id': PropTypes.string,
-      description: PropTypes.string,
+      are_you_registering_on_behalf_on_an_organisation_: PropTypes.bool,
+      country: PropTypes.string,
       email: PropTypes.string,
       fullname: PropTypes.string,
+      how_do_you_intend_to_use_the_products: PropTypes.arrayOf(
+        PropTypes.string,
+      ),
       id: PropTypes.string,
-      location: PropTypes.string,
-      nickname: PropTypes.string,
-      portrait: PropTypes.string,
+      organisation_institutional_domain: PropTypes.arrayOf(PropTypes.string),
+      organisation_name: PropTypes.string,
+      organisation_url: PropTypes.string,
+      professional_thematic_domain: PropTypes.arrayOf(PropTypes.string),
       roles: PropTypes.array,
       username: PropTypes.string,
       return_url: PropTypes.string,
@@ -56,8 +63,14 @@ class CLMSProfileView extends Component {
    */
   render() {
     const loggedIn = !!this.props.userId;
+    this.props.getExtraBreadcrumbItems([
+      {
+        title: 'Profile',
+        pathname: this.props.location.pathname,
+      },
+    ]);
     return (
-      <>
+      <div className="ccl-container ">
         {loggedIn && (
           <>
             <CclTabs>
@@ -70,7 +83,7 @@ class CLMSProfileView extends Component {
             </CclTabs>
           </>
         )}
-      </>
+      </div>
     );
   }
 }
@@ -83,6 +96,6 @@ export default compose(
         ? jwtDecode(state.userSession.token).sub
         : '',
     }),
-    { getUser, updateUser, getBaseUrl },
+    { getUser, updateUser, getBaseUrl, getExtraBreadcrumbItems },
   ),
 )(CLMSProfileView);