@eeacms/volto-clms-theme 1.0.45 → 1.0.49

package/src/components/CLMSDatasetDetailView/MetadataContent.jsx

@@ -1,29 +1,27 @@
-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 (
     <>
-      {data.geonetwork_identifiers?.items.map((item) => {
-        return item.type === 'EEA' ? (
-          <CclButton
-            className="ccl-button ccl-button--default download-dataset-metadata"
-            url={
-              'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
-              item.id
-            }
-            download={true}
-          >
-            Download metadata: {item.title}
-          </CclButton>
-        ) : (
+      {data?.geonetwork_identifiers?.items.map((item, key) => {
+        return (
           <CclButton
+            key={key}
             className="ccl-button ccl-button--default download-dataset-metadata"
             url={
-              'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
-              item.id
+              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}
           >
@@ -34,90 +32,221 @@ const MetadataContent = (data) => {
 
       <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>
-        <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} />}
-        />
+        {data?.keywords && data?.keywords?.length > 0 && (
+          <CclInfoDescription
+            title="Keywords"
+            tooltip=""
+            description={
+              <Label.Group>
+                {data?.keywords.map((keyword, key) => {
+                  return (
+                    <Label key={key} color="olive">
+                      {keyword}
+                    </Label>
+                  );
+                })}
+              </Label.Group>
+            }
+          />
+        )}
+        {data?.geographicCoverage?.geolocation && (
+          <CclInfoDescription
+            title="Geographic coverage"
+            tooltip=""
+            description={
+              <Label.Group>
+                {data?.geographicCoverage?.geolocation.map((location, key) => {
+                  return (
+                    <Label key={key} color="olive">
+                      {location.label}
+                    </Label>
+                  );
+                })}
+              </Label.Group>
+            }
+          />
+        )}
+        {data?.accessAndUseLimitationPublic_line && (
+          <CclInfoDescription
+            title="Limitation of public access"
+            tooltip=""
+            description={data?.accessAndUseLimitationPublic_line}
+          />
+        )}
         <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={
+              <Label.Group>
+                {data?.classificationTopicCategory &&
+                  data?.classificationTopicCategory.map((topic, key) => {
+                    return (
+                      <Label key={key} color="olive">
+                        {topic.title}
+                      </Label>
+                    );
+                  })}
+              </Label.Group>
+            }
+          />
+        )}
+        {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={
+              <Label.Group>
+                {data?.temporalCoverage &&
+                  data?.temporalCoverage.map((year, key) => {
+                    return (
+                      <Label key={key} color="olive">
+                        {year}
+                      </Label>
+                    );
+                  })}
+              </Label.Group>
+            }
+          />
+        )}
       </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={
+                <Label.Group>
+                  {data?.coordinateReferenceSystemList &&
+                    data?.coordinateReferenceSystemList.map(
+                      (reference, key) => {
+                        return (
+                          <Label key={key} color="olive">
+                            {reference}
+                          </Label>
+                        );
+                      },
+                    )}
+                </Label.Group>
+              }
+            />
+          </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>
+        {data?.conformityPass?.title && (
+          <CclInfoDescription
+            title="Pass"
+            tooltip=""
+            description={data?.conformityPass?.title}
+          />
+        )}
         <CclInfoDescription
-          title="Responsible party"
-          tooltip="Organisation associated with the resource. Organisation name, contact information (email)."
-          description={<StringToHTML string={data.owners?.data} />}
-        />
-        <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/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/CclCard/CclCard.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
 import './cards.less';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import * as mime from 'react-native-mime-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import React from 'react';
+
 function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes === 0) return '0 Byte';
@@ -26,7 +28,7 @@ function CclCard(props) {
           {type === 'doc' && (
             <>
               <div className="card-doc-title">
-                <a href={card?.file?.download || '#'}>
+                <a href={card?.file?.download || url}>
                   {card?.title || 'Card default title'}
                 </a>
               </div>
@@ -47,6 +49,7 @@ function CclCard(props) {
               <div className="card-block-image">
                 <img
                   src={
+                    card?.image?.scales?.preview?.download ||
                     card?.image?.download ||
                     'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
                   }

package/src/components/CclInfoDescription/CclInfoDescription.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 /**
@@ -16,14 +16,16 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
       </CclInfoDescription>
  * 
  */
-function CclInfoDescription({ title, description, tooltip = 'Info' }) {
+function CclInfoDescription({ title, description, tooltip }) {
   return (
     <div className="dataset-info-field">
       <div className="dataset-field-title">
         <h3>{title}</h3>
-        <span className="info-icon" tooltip={tooltip} direction="up">
-          <FontAwesomeIcon icon={faInfoCircle} />
-        </span>
+        {tooltip && (
+          <span className="info-icon" tooltip={tooltip} direction="up">
+            <FontAwesomeIcon icon={faInfoCircle} />
+          </span>
+        )}
       </div>
       <div className="dataset-field-description">{description}</div>
     </div>
@@ -32,7 +34,6 @@ function CclInfoDescription({ title, description, tooltip = 'Info' }) {
 
 CclInfoDescription.propTypes = {
   title: PropTypes.string.isRequired,
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-    .isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 export default CclInfoDescription;

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
 import { useDispatch, useSelector } from 'react-redux';
 import { getRegistry } from '@eeacms/volto-clms-theme/actions';
@@ -75,9 +74,4 @@ function CclLoginModal() {
   );
 }
 
-CclLoginModal.propTypes = {
-  title: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  marginBottom: PropTypes.bool,
-};
 export default CclLoginModal;

package/src/components/CclTab/CclTab.jsx

@@ -1,28 +1,25 @@
-import React from 'react';
+import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import React from 'react';
+import cx from 'classnames';
 
 function CclTab(props) {
-  let { activeTab, tabTitle, onClick } = props;
+  let { activeTab, tabTitle, onClick, tabId } = props;
 
   function onTabClick() {
-    onClick(tabTitle);
-  }
-
-  let className = 'card';
-
-  if (activeTab === tabTitle) {
-    className += ' active';
+    onClick(tabId);
   }
 
   return (
     <div
-      className={className}
+      className={cx('card', activeTab === tabId && 'active')}
       onClick={onTabClick}
       onKeyDown={onTabClick}
       tabIndex="0"
       role="button"
+      id={tabId}
     >
-      <li className="collapsed">{tabTitle}</li>
+      <NavLink to={'#' + tabId}>{tabTitle}</NavLink>
     </div>
   );
 }

package/src/components/CclTab/CclTabs.jsx

@@ -1,7 +1,9 @@
+import './CclTabs.less';
+
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+
 import CclTab from './CclTab';
-import './CclTabs.less';
+import PropTypes from 'prop-types';
 
 /**
  * Tabs component documentation.
@@ -20,30 +22,43 @@ import './CclTabs.less';
  */
 const CclTabs = (props) => {
   let { children } = props;
-  let [activeTab, setActiveTab] = useState(props.children[0].props.tabTitle);
+  let [activeTab, setActiveTab] = useState(props.children[0].props.tabId || '');
 
   function onClickTabItem(tab) {
     setActiveTab(tab);
   }
+  React.useEffect(() => {
+    const hash = window.location.hash.substring(1) || '';
+    if (hash) {
+      setActiveTab(hash);
+    } else {
+      setActiveTab(
+        children
+          .filter((item) => !!item.props.tabTitle)[0]
+          .props?.tabTitle?.replace(' ', ''),
+      );
+    }
+  }, [children]);
 
   return (
     <div className="ccl-container-flex">
       <div className="left-content cont-w-25">
-        <ul className="left-menu">
+        <nav className="left-menu">
           {children
             .filter((item) => !!item.props.tabTitle)
-            .map((child) => {
+            .map((child, key) => {
               const { tabTitle } = child.props;
               return (
                 <CclTab
                   activeTab={activeTab}
-                  key={tabTitle}
+                  key={key}
+                  tabId={tabTitle.replace(' ', '')}
                   tabTitle={tabTitle}
                   onClick={onClickTabItem}
                 />
               );
             })}
-        </ul>
+        </nav>
 
         {/* Check if underPanel element exist and render */}
         {children
@@ -59,7 +74,7 @@ const CclTabs = (props) => {
           {children
             .filter((item) => !!item.props.tabTitle)
             .map((child, index) => {
-              return child.props.tabTitle !== activeTab ? (
+              return child.props.tabTitle.replace(' ', '') !== activeTab ? (
                 <div key={index} className="deactivate-content">
                   {child.props.children}
                 </div>

package/theme/clms/css/block-form.less

@@ -0,0 +1,62 @@
+div.form.block {
+  .ui.form input:not([type]):focus,
+  .ui.form input[type='date']:focus,
+  .ui.form input[type='datetime-local']:focus,
+  .ui.form input[type='email']:focus,
+  .ui.form input[type='number']:focus,
+  .ui.form input[type='password']:focus,
+  .ui.form input[type='search']:focus,
+  .ui.form input[type='tel']:focus,
+  .ui.form input[type='time']:focus,
+  .ui.form input[type='text']:focus,
+  .ui.form input[type='file']:focus,
+  .ui.form input[type='url']:focus {
+    border-color: #a0b128;
+    color: #a0b128;
+  }
+
+  .ui.form textarea:focus {
+    border-color: #a0b128;
+  }
+
+  .label-file-widget-input {
+    display: inline-block;
+    padding: 0.6rem 3rem;
+    border: 1px solid transparent;
+    border-color: #a0b128;
+    margin-top: 20px;
+    border-radius: 0px;
+    color: #a0b128;
+    cursor: pointer;
+    opacity: 1;
+  }
+
+  .label-file-widget-input:hover {
+    background-color: #a0b128;
+    color: white;
+  }
+
+  .ui.primary.button {
+    padding: 0.6rem 3rem;
+    border: 1px solid transparent;
+    background-color: #a0b128;
+    border-radius: 0px;
+    color: white;
+    font-size: 1rem;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    transition: all 0.3s ease-out;
+    vertical-align: middle;
+  }
+
+  .ui.primary.button:hover {
+    border-color: #a0b128;
+    background-color: white;
+    color: #a0b128;
+  }
+
+  .dropzone-text {
+    color: #c7d5d8;
+  }
+}

package/theme/clms/css/menu.css

@@ -208,6 +208,10 @@
   background-color: #a0b128;
 }
 
+.left-menu .subcard {
+  margin-left: 1rem;
+}
+
 .left-menu a {
   display: inline-block;
   width: 100%;