@eeacms/volto-clms-theme 1.0.41 → 1.0.45

package/src/components/Blocks/customBlocks.js

@@ -27,6 +27,8 @@ import CclHomeSearchBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/C
 import {
   DefaultEdit,
   defaultSchema,
+  TabsEdit,
+  TabsView,
 } from '@eeacms/volto-tabs-block/components';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 
@@ -37,6 +39,7 @@ import {
   CclCarouselView,
   RoutingHOC,
   CclProductTabsView,
+  FixTemplates,
 } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoTabsBlock';
 
 import {
@@ -61,8 +64,12 @@ import { ARCGIS_BLOCK } from '@eeacms/volto-arcgis-block/constants';
 import CclUseCaseListView from '@eeacms/volto-clms-theme/components/Blocks/CclUseCaseList/CclUseCaseListView';
 import CclUseCaseListEdit from '@eeacms/volto-clms-theme/components/Blocks/CclUseCaseList/CclUseCaseListEdit';
 
-import CclTechnicalLibrariesListView from '@eeacms/volto-clms-theme/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListView';
-import CclTechnicalLibrariesListEdit from '@eeacms/volto-clms-theme/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListEdit';
+import CclRelatedListingView from '@eeacms/volto-clms-theme/components/Blocks/CclRelatedListingBlock/CclRelatedListingView';
+import CclRelatedListingEdit from '@eeacms/volto-clms-theme/components/Blocks/CclRelatedListingBlock/CclRelatedListingEdit';
+import RelatedListingSchema from '@eeacms/volto-clms-theme/components/Blocks/CclRelatedListingBlock/schema';
+
+import TextLinkCarouselView from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView';
+import TextLinkCarouselEdit from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselEdit';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -74,6 +81,11 @@ export const customGroupBlocksOrder = {
 
 const customBlocks = (config) => ({
   ...config.blocks.blocksConfig,
+  video: {
+    ...config.blocks.blocksConfig.video,
+    mostUsed: false,
+  },
+
   [ARCGIS_BLOCK]: {
     ...config.blocks.blocksConfig[ARCGIS_BLOCK],
     styles: {
@@ -93,8 +105,12 @@ const customBlocks = (config) => ({
   },
   [TABS_BLOCK]: {
     ...config.blocks.blocksConfig[TABS_BLOCK],
+    edit: FixTemplates(TabsEdit),
+    view: FixTemplates(TabsView),
+    deprecated_templates: ['CCLTabs', 'CclRouteTabsView'],
+    mostUsed: true, // A meta group `most used`, appearing at the top of the chooser
     templates: {
-      CCLTabs: {
+      default: {
         title: 'Horizontal Tabs',
         edit: DefaultEdit,
         view: CclTabsView,
@@ -109,13 +125,13 @@ const customBlocks = (config) => ({
       CCLProductTabs: {
         title: 'Vertical Product Tabs',
         edit: DefaultEdit,
-        view: CclProductTabsView,
+        view: RoutingHOC(CclProductTabsView),
         schema: defaultSchema,
       },
       CCLVerticalFaqTabs: {
         title: 'Vertical FAQ Tabs',
         edit: DefaultEdit,
-        view: CclVerticalFaqTabsView,
+        view: RoutingHOC(CclVerticalFaqTabsView),
         schema: defaultSchema,
       },
       CCLCarousel: {
@@ -130,59 +146,59 @@ const customBlocks = (config) => ({
     ...config.blocks.blocksConfig.listing,
     showLinkMore: true,
     variations: [
-      ...config.blocks.blocksConfig.listing.variations,
       {
-        id: 'CclCardsline-color',
-        isDefault: false,
-        title: 'CclCards Colored Line',
+        id: 'CclCardsdoc',
+        isDefault: true,
+        title: 'Line list',
         template: CclListingCards,
       },
       {
         id: 'CclCardsline',
         isDefault: false,
-        title: 'CclCards Image Line',
+        title: 'Line list with Image',
         template: CclListingCards,
       },
       {
-        id: 'CclCardsdoc',
+        id: 'CclCardsline-color',
         isDefault: false,
-        title: 'CclCards Line',
+        title: 'Colored Line list with Image',
         template: CclListingCards,
       },
       {
         id: 'CclCardsblock',
         isDefault: false,
-        title: 'CclCards Block',
+        title: 'Cards list',
         template: CclListingCards,
       },
       {
         id: 'CclCardsnews',
         isDefault: false,
-        title: 'CclCards News',
+        title: 'News Line list',
         template: CclListingCards,
       },
       {
         id: 'CclCardsevent',
         isDefault: false,
-        title: 'CclCards Events',
+        title: 'Events Line list',
         template: CclListingCards,
       },
       {
         id: 'CclWOOpenTenders',
         isDefault: false,
-        title: 'CclWO Open Tenders',
+        title: 'Open Work Opportunities',
         template: CclListingWorkOpportunities,
       },
       {
         id: 'CclWOCloseTenders',
         isDefault: false,
-        title: 'CclWO Close Tenders',
+        title: 'Closed Work Opportunities',
         template: CclListingWorkOpportunities,
       },
     ],
   },
   accordion: {
     ...config.blocks.blocksConfig.accordion,
+    mostUsed: true,
     titleIcons: {
       closed: { leftPosition: downSVG, rightPosition: downSVG },
       opened: { leftPosition: upSVG, rightPosition: upSVG },
@@ -264,7 +280,7 @@ const customBlocks = (config) => ({
     view: CclProductLeftMenuView, // The view mode component
     edit: CclProductLeftMenuEdit, // The edit mode component
     restricted: false, // If the block is restricted, it won't show in the chooser
-    mostUsed: true, // A meta group `most used`, appearing at the top of the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
     blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
     sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
     security: {
@@ -324,7 +340,7 @@ const customBlocks = (config) => ({
   },
   homeBgImage: {
     id: 'homeBgImage', // The name (id) of the block
-    title: 'Home BG Image', // The display name of the block
+    title: 'Carousel Item', // The display name of the block
     icon: homeBand, // The icon used in the block chooser
     group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
     view: CclHomeBgImageBlockView, // The view mode component
@@ -342,12 +358,12 @@ const customBlocks = (config) => ({
       {
         id: 'green-bg',
         isDefault: true,
-        title: 'Green background carousel',
+        title: 'Green background',
         template: CclGreenBgView,
       },
       {
         id: 'white-bg',
-        title: 'White background carousel',
+        title: 'White background',
         template: CclWhiteBgView,
       },
     ],
@@ -368,13 +384,68 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
-  technicalLibrariesList: {
-    id: 'technicalLibrariesList', // The name (id) of the block
-    title: 'Technical Libraries List', // The display name of the block
+  relatedListing: {
+    id: 'relatedListing', // The name (id) of the block
+    title: 'Related items listing', // The display name of the block
+    icon: homeBand, // The icon used in the block chooser
+    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
+    view: CclRelatedListingView, // The view mode component
+    edit: CclRelatedListingEdit, // The edit mode component
+    schema: RelatedListingSchema,
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+    variations: [
+      {
+        id: 'CclCardsdoc',
+        isDefault: false,
+        title: 'Line list',
+        template: CclListingCards,
+      },
+      {
+        id: 'CclCardsline',
+        isDefault: true,
+        title: 'Line list with Image',
+        template: CclListingCards,
+      },
+      {
+        id: 'CclCardsline-color',
+        isDefault: false,
+        title: 'Colored Line list with Image',
+        template: CclListingCards,
+      },
+      {
+        id: 'CclCardsblock',
+        isDefault: false,
+        title: 'Cards list',
+        template: CclListingCards,
+      },
+      {
+        id: 'CclCardsnews',
+        isDefault: false,
+        title: 'News Line list',
+        template: CclListingCards,
+      },
+      {
+        id: 'CclCardsevent',
+        isDefault: false,
+        title: 'Events Line list',
+        template: CclListingCards,
+      },
+    ],
+  },
+  textLinkCarousel: {
+    id: 'textLinkCarousel', // The name (id) of the block
+    title: 'Text and Link Carousel', // The display name of the block
     icon: homeBand, // The icon used in the block chooser
     group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
-    view: CclTechnicalLibrariesListView, // The view mode component
-    edit: CclTechnicalLibrariesListEdit, // The edit mode component
+    view: TextLinkCarouselView, // The view mode component
+    edit: TextLinkCarouselEdit, // The edit mode component
     restricted: false, // If the block is restricted, it won't show in the chooser
     mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
     blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -3,21 +3,27 @@
  * @module components/theme/View/CLMSDatasetDetailView
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-// import { FormattedMessage } from 'react-intl';
-import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
 import {
   DataSetInfoContent,
   DownloadDataSetContent,
   MetadataContent,
 } from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView';
-import { useLocation } from 'react-router-dom';
+import { Modal, Segment } from 'semantic-ui-react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import jwtDecode from 'jwt-decode';
+import { getUser } from '@plone/volto/actions';
 import { injectIntl } from 'react-intl';
+import jwtDecode from 'jwt-decode';
+import { postImportGeonetwork } from '../../actions';
+import { useLocation } from 'react-router-dom';
+
 // import {
 //   mockDatabaseInfo,
 //   mockMetadata,
@@ -35,20 +41,169 @@ import { injectIntl } from 'react-intl';
 
 const CLMSDatasetDetailView = ({ content, token }) => {
   const location = useLocation();
+  const dispatch = useDispatch();
+  const geonetwork_importation = useSelector(
+    (state) => state.geonetwork_importation,
+  );
+  // const userSession = useSelector((state) => state.userSession);
+  // const user_token = userSession.token ? jwtDecode(userSession.token).sub : '';
+  const user = useSelector((state) => state.users?.user);
+  React.useEffect(() => {
+    dispatch(getUser(token));
+  }, [dispatch, token]);
+
+  function handleImport(id, type) {
+    dispatch(postImportGeonetwork(location.pathname, id, type));
+  }
+  const [open, setOpen] = React.useState({});
+  const locale = useSelector((state) => state.intl.locale);
 
   return (
     <div className="ccl-container ">
       <h1 className="page-title">{content.title}</h1>
+      {content.geonetwork_identifiers?.items?.length > 0 &&
+        user.roles &&
+        user.roles.includes('Manager') && (
+          <Segment.Group compact horizontal>
+            {content.geonetwork_identifiers?.items.map((item) => {
+              return (
+                <Segment
+                  padded={'very'}
+                  color={'olive'}
+                  key={item.id}
+                  loading={geonetwork_importation.loading}
+                  circular
+                >
+                  <strong>
+                    {item.title} (from {item.type}):{' '}
+                  </strong>
+                  <br />
+                  <br />
+                  <Modal
+                    onClose={() => {
+                      setOpen({ ...open, [item.id]: false });
+                    }}
+                    onOpen={() => {
+                      setOpen({ ...open, [item.id]: true });
+                    }}
+                    open={open[item.id]}
+                    trigger={
+                      <CclButton>
+                        <FormattedMessage
+                          id="Import data"
+                          defaultMessage="Import data"
+                        />
+                      </CclButton>
+                    }
+                    className={'modal-clms'}
+                  >
+                    <div className={'modal-clms-background'}>
+                      <div className={'modal-clms-container'}>
+                        <div className={'modal-close modal-clms-close'}>
+                          <span
+                            className="ccl-icon-close"
+                            aria-label="Close"
+                            onClick={() => {
+                              setOpen({ ...open, [item.id]: false });
+                            }}
+                            onKeyDown={() => {
+                              setOpen({ ...open, [item.id]: false });
+                            }}
+                            tabIndex="0"
+                            role="button"
+                          ></span>
+                        </div>
+                        <div className="modal-login-text">
+                          <h1>
+                            <FormattedMessage
+                              id="Import from GeoNetwork"
+                              defaultMessage="Import from GeoNetwork"
+                            />
+                          </h1>
+                          This action will import the data from{' '}
+                          <strong>{item.title}</strong> (from {item.type}) into
+                          this dataset.
+                          <br />
+                          <br />
+                          {item.type === 'EEA' && (
+                            <a
+                              target="_blank"
+                              rel="noreferrer"
+                              href={
+                                'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
+                                item.id
+                              }
+                            >
+                              <FormattedMessage
+                                id="EEA Geonetwork element"
+                                defaultMessage="EEA Geonetwork element"
+                              />
+                            </a>
+                          )}
+                          {item.type === 'VITO' && (
+                            <a
+                              target="_blank"
+                              rel="noreferrer"
+                              href={
+                                'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
+                                item.id
+                              }
+                            >
+                              <FormattedMessage
+                                id="VITO Geonetwork element"
+                                defaultMessage="VITO Geonetwork element"
+                              />
+                            </a>
+                          )}
+                        </div>
+                        <CclButton
+                          onClick={() => {
+                            handleImport(item.id, item.type);
+                            setOpen({ ...open, [item.id]: false });
+                          }}
+                          mode="filled"
+                        >
+                          <FormattedMessage
+                            id="Import data"
+                            defaultMessage="Import data"
+                          />
+                        </CclButton>
+                      </div>
+                    </div>
+                  </Modal>
+                  {geonetwork_importation.imported_data
+                    ?.requested_geonetwork_id === item.id && (
+                    <p>
+                      {geonetwork_importation.loaded &&
+                        geonetwork_importation.error === null && (
+                          <strong>
+                            {' '}
+                            The data has been successfully imported
+                          </strong>
+                        )}
+                    </p>
+                  )}
+                  {geonetwork_importation.imported_data?.status === 'error' && (
+                    <p>
+                      <strong>
+                        {' '}
+                        {geonetwork_importation.imported_data?.message}
+                      </strong>
+                    </p>
+                  )}
+                </Segment>
+              );
+            })}
+          </Segment.Group>
+        )}
       <CclTabs>
         <div tabTitle="General Info">{DataSetInfoContent(content)}</div>
         <div tabTitle="Metadata">{MetadataContent(content)}</div>
-        {(content.mapviewer_viewservice?.length === 0 ||
-          content.mapviewer_viewservice === null) &&
-        (content.downloadable_files?.items?.length === 0 ||
-          content.downloadable_files === null) ? (
-          <div tabTitle=""></div>
-        ) : (
+
+        {content?.downloadable_dataset ? (
           <div tabTitle="Download">{DownloadDataSetContent(content)}</div>
+        ) : (
+          <div tabTitle=""></div>
         )}
 
         <div underPanel={true}>
@@ -63,8 +218,13 @@ const CLMSDatasetDetailView = ({ content, token }) => {
             )}
             {content?.mapviewer_viewservice?.length > 0 && (
               <div className="menu-detail-button">
-                <CclButton url={location.pathname + '/map-viewer'}>
-                  View in the map viewer
+                <CclButton
+                  url={'/' + locale + '/map-viewer?dataset=' + content.UID}
+                >
+                  <FormattedMessage
+                    id="View in the map viewer"
+                    defaultMessage="View in the map viewer"
+                  />
                 </CclButton>
               </div>
             )}

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -12,11 +12,10 @@ import config from '@plone/volto/registry';
 
 const DataSetInfoContent = (props) => {
   const dispatch = useDispatch();
-  const path = props.parent['@id'];
-  const parent = useSelector((state) => state.reduxAsyncConnect.content.parent);
-  const parentId = parent['@id'].split('/').pop();
+  const { UID, id } = props;
+  const path = props['@id'];
   const searchSubrequests = useSelector((state) => state.search.subrequests);
-  let libraries = searchSubrequests?.[props.id]?.items || [];
+  let libraries = searchSubrequests?.[id]?.items || [];
 
   React.useEffect(() => {
     dispatch(
@@ -26,12 +25,12 @@ const DataSetInfoContent = (props) => {
           fullobjects: 1,
           portal_type: 'TechnicalLibrary',
           path: '/',
-          associated_products: parentId,
+          associated_datasets: UID,
         },
-        props.id,
+        id,
       ),
     );
-  }, [path, props.id, parentId, dispatch]);
+  }, [path, id, UID, dispatch]);
 
   const [activeIndex, setActiveIndex] = React.useState([0]);
 
@@ -52,12 +51,13 @@ const DataSetInfoContent = (props) => {
 
   return (
     <div>
-      <CclCitation title="Validation status" marginBottom={true}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
-          mauris ante, a iaculis leo placerat quis.
-        </p>
-      </CclCitation>
+      {props?.validation?.data && (
+        <CclCitation
+          title="Validation status"
+          marginBottom={true}
+          children={<StringToHTML string={props.validation.data} />}
+        ></CclCitation>
+      )}
       <CclInfoContainer>
         <h2>General Info</h2>
 
@@ -130,6 +130,13 @@ const DataSetInfoContent = (props) => {
           </div>
         </div>
       )}
+
+      <CclCitation title="Dataset citation" marginBottom={true}>
+        <p>
+          © European Union, Copernicus Land Monitoring Service , European
+          Environment Agency (EEA)
+        </p>
+      </CclCitation>
     </div>
   );
 };

package/src/components/CLMSDatasetDetailView/MetadataContent.jsx

@@ -6,13 +6,32 @@ 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) => {
+        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>
+        ) : (
+          <CclButton
+            className="ccl-button ccl-button--default download-dataset-metadata"
+            url={
+              '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

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>