@eeacms/volto-clms-theme 1.0.44 → 1.0.48

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget.jsx

@@ -1,23 +1,28 @@
-import React from 'react';
-import { v4 as uuid } from 'uuid';
+import './fontawesome';
+
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Grid, Header } from 'semantic-ui-react';
+import { faExternalLinkAlt, faIcons } from '@fortawesome/free-solid-svg-icons';
 import { omit, without } from 'lodash';
-import move from 'lodash-move';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+
 import { DragDropList } from '@plone/volto/components';
-import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import React from 'react';
+import { SidebarPopup } from '@plone/volto/components';
 import { StyleWrapperEdit } from '@eeacms/volto-block-style/StyleWrapper';
+import clearSVG from '@plone/volto/icons/clear.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
+import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
+import { fontAwesomeSchema } from './fontAwesomeSchema';
+import leftMenuSVG from '@plone/volto/icons/nav.svg';
+import move from 'lodash-move';
+import plusSVG from '@plone/volto/icons/circle-plus.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+import { subTabSchema } from './subTabSchema';
 import themeSVG from '@plone/volto/icons/theme.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faIcons, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import plusSVG from '@plone/volto/icons/circle-plus.svg';
-import { SidebarPopup } from '@plone/volto/components';
-import { fontAwesomeSchema } from './fontAwesomeSchema';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import './fontawesome';
-import { Header, Grid } from 'semantic-ui-react';
+import { v4 as uuid } from 'uuid';
 
 export function moveColumn(formData, source, destination) {
   return {
@@ -36,6 +41,7 @@ const TabsWidget = (props) => {
   const [blockStyleVisible, setBlockStyleVisible] = React.useState(false);
   const [activeTabId, setActiveTabId] = React.useState(0);
   const [activeFontAwesomePopup, setActiveFontAwesomePopup] = React.useState(0);
+  const [activeSubTabPopup, setActiveSubTabPopup] = React.useState(0);
 
   const { value = {}, id, onChange } = props;
   const { blocks = {} } = value;
@@ -83,7 +89,18 @@ const TabsWidget = (props) => {
                     <Icon name={dragSVG} size="18px" />
                   </div>
                   <div className="tab-area">
-                    <div className="label">
+                    <div
+                      className="label"
+                      style={{
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        maxWidth: '65%',
+                      }}
+                    >
+                      {child.subTab?.subtab === true && (
+                        <Icon name={rightSVG} size="18px" />
+                      )}
                       {child.title || `Tab ${index + 1}`}
                     </div>
                     <button
@@ -190,6 +207,52 @@ const TabsWidget = (props) => {
                       />
                     </SidebarPopup>
 
+                    <button
+                      onClick={() => {
+                        setActiveTabId(childId);
+                        setActiveSubTabPopup(true);
+                      }}
+                      title="Sub Tab"
+                    >
+                      <Icon size={'24px'} name={leftMenuSVG} />
+                    </button>
+                    <SidebarPopup open={activeSubTabPopup}>
+                      <InlineForm
+                        schema={subTabSchema()}
+                        title={
+                          <>
+                            {subTabSchema().title}
+                            <button
+                              onClick={() => {
+                                setActiveSubTabPopup(false);
+                              }}
+                              style={{ float: 'right' }}
+                            >
+                              <Icon name={clearSVG} size="24px" />
+                            </button>
+                          </>
+                        }
+                        formData={{
+                          ...activeTabData?.subTab,
+                        }}
+                        onChangeField={(idTab, formValue) => {
+                          onChange(id, {
+                            ...value,
+                            blocks: {
+                              ...value.blocks,
+                              [activeTabId]: {
+                                ...(activeTabData || {}),
+                                subTab: {
+                                  ...activeTabData?.subTab,
+                                  [idTab]: formValue,
+                                },
+                              },
+                            },
+                          });
+                        }}
+                      />
+                    </SidebarPopup>
+
                     {value.blocks_layout?.items?.length > 1 ? (
                       <button
                         onClick={() => {

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less

@@ -9,12 +9,18 @@ div.tabs-block.CCLCarousel {
     left: 50% !important;
     width: 100vw !important;
     max-width: initial !important;
-    // margin-top: -2rem;
     margin-right: -50vw !important;
     margin-left: -50vw !important;
   }
 }
 
+.slick-slider.text-carousel {
+  div & {
+    z-index: 1;
+    width: 60%;
+  }
+}
+
 .tabs-block .slick-slider {
   z-index: 1;
 }
@@ -22,3 +28,56 @@ div.tabs-block.CCLCarousel {
 .slick-arrows {
   margin-top: -2rem !important;
 }
+
+.text-link-carousel-block {
+  height: 2rem;
+  padding: 0;
+}
+
+.text-link-carousel-block-content {
+  display: flex;
+  height: 2rem;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.text-link-carousel-block .text-link-carousel-block-content > a,
+.text-link-carousel-block .text-link-carousel-block-content > a:hover {
+  color: #fff;
+}
+
+p.styled-slate {
+  margin-bottom: 0;
+}
+
+@media (max-width: 1200px) {
+  .text-link-carousel-block {
+    height: fit-content !important;
+    margin: 0.5rem;
+    margin-top: -2rem;
+  }
+
+  .text-carousel {
+    margin: 0.5rem;
+    margin-top: -2rem;
+  }
+
+  .text-link-carousel-block-content {
+    height: fit-content !important;
+  }
+}
+
+@media (max-width: 420px) {
+  .text-link-carousel-block {
+    margin-top: -4rem;
+  }
+
+  .text-carousel {
+    margin-top: -4rem;
+  }
+}
+
+div.tabs-block.edit a.item.active p.menu-item-text {
+  border-style: none none solid none;
+  font-weight: bold;
+}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/subTabSchema.js

@@ -0,0 +1,19 @@
+export const subTabSchema = () => ({
+  title: 'Vertical tab block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['subtab'],
+    },
+  ],
+  properties: {
+    subtab: {
+      title: 'Is subtab',
+      description: 'Define if this tab is a subTab',
+      type: 'boolean',
+      default: false,
+    },
+  },
+  required: [],
+});

package/src/components/Blocks/customBlocks.js

@@ -68,6 +68,9 @@ import CclRelatedListingView from '@eeacms/volto-clms-theme/components/Blocks/Cc
 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';
 
@@ -436,6 +439,22 @@ const customBlocks = (config) => ({
       },
     ],
   },
+  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: 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
+    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)
+    },
+  },
 });
 
 export default customBlocks;

package/src/components/CLMSDatasetDetailView/BoundingBoxComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const BoundingBoxComponent = (props) => {
+  const { north, south, east, west } = props.bbox;
+
+  return (
+    <div className="bounding-box-container">
+      <h3>Bounding Box</h3>
+      <div className="bounding-box-item">
+        {east && <div className="bounding-box-item">East: {east}</div>}
+        {west && <div className="bounding-box-item">West: {west}</div>}
+        {north && <div className="bounding-box-item">North: {north}</div>}
+        {south && <div className="bounding-box-item">South: {south}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default BoundingBoxComponent;

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,163 @@ 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 />
+                          <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href={
+                              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
+                            }
+                          >
+                            {item.type === 'EEA' && (
+                              <FormattedMessage
+                                id="EEA Geonetwork element"
+                                defaultMessage="EEA Geonetwork element"
+                              />
+                            )}
+                            {item.type === 'VITO' && (
+                              <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 +212,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/ContactComponent.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const ContactComponent = (props) => {
+  const {
+    organisationName,
+    deliveryPoint,
+    city,
+    administrativeArea,
+    postalCode,
+    country,
+    electronicMailAddress,
+    url,
+    urlTitle,
+    roleCode,
+  } = props.contact;
+
+  return (
+    <div className="contact-container">
+      <h3>Contact</h3>
+      <div className="contact-item">
+        {city && <div className="contact-item">{city}</div>}
+        {organisationName && (
+          <div className="contact-item">{organisationName}</div>
+        )}
+        {deliveryPoint && <div className="contact-item">{deliveryPoint}</div>}
+        {city && <div className="contact-item">{city}</div>}
+        {administrativeArea && (
+          <div className="contact-item">{administrativeArea}</div>
+        )}
+        {postalCode && <div className="contact-item">{postalCode}</div>}
+        {country && <div className="contact-item">{country}</div>}
+        {electronicMailAddress && (
+          <div className="contact-item">{electronicMailAddress}</div>
+        )}
+        {url && <div className="contact-item">{url}</div>}
+        {urlTitle && <div className="contact-item">{urlTitle}</div>}
+        {roleCode && <div className="contact-item">Role: {roleCode}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default ContactComponent;

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -51,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>
 
@@ -129,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/DistributionInfoComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const DistributionInfoComponent = (props) => {
+  const { resourceLocator, services } = props.resource;
+
+  return (
+    <div className="distribution-info-container">
+      <h3>Resource</h3>
+      <div className="distribution-info-item">
+        {resourceLocator && (
+          <div className="distribution-info-item">{resourceLocator}</div>
+        )}
+        {services && <div className="distribution-info-item">{services}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default DistributionInfoComponent;