@eeacms/volto-clms-theme 1.0.73 → 1.0.76

package/CHANGELOG.md

@@ -4,9 +4,44 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.76](https://github.com/eea/volto-clms-theme/compare/1.0.75...1.0.76)
+
+- add modal when download requests are both standard downloads or prepackaged files [`#219`](https://github.com/eea/volto-clms-theme/pull/219)
+- upgrade volto-accordion-block [`cf8a7a6`](https://github.com/eea/volto-clms-theme/commit/cf8a7a6909b1d38f855ef01f0642add7e882e804)
+- add modal when downloading files are prepackaged and mapviewer [`c974d37`](https://github.com/eea/volto-clms-theme/commit/c974d37f42fd13d0de53416c36ed4b8f8a8ba2c0)
+
+#### [1.0.75](https://github.com/eea/volto-clms-theme/compare/1.0.74...1.0.75)
+
+> 1 March 2022
+
+- New release [`#218`](https://github.com/eea/volto-clms-theme/pull/218)
+- add elvis operator [`#217`](https://github.com/eea/volto-clms-theme/pull/217)
+- no need to tinker with dates, we configure the listing in Volto [`#215`](https://github.com/eea/volto-clms-theme/pull/215)
+- use new placeholder image [`#216`](https://github.com/eea/volto-clms-theme/pull/216)
+- add sorting to related item listing [`#214`](https://github.com/eea/volto-clms-theme/pull/214)
+- change no related item message [`#213`](https://github.com/eea/volto-clms-theme/pull/213)
+- test [`2863dbd`](https://github.com/eea/volto-clms-theme/commit/2863dbd060043419ee6bfd8f9ba709df1b82811d)
+- use new placeholder [`875b97b`](https://github.com/eea/volto-clms-theme/commit/875b97b75311cf0f2722ddb8f1e2e62d0fcdb8f4)
+- no longer needed VariationHOC for WorkOpportunities [`5148f5a`](https://github.com/eea/volto-clms-theme/commit/5148f5a3b7906a78108480a172ad541aec7d98de)
+
+#### [1.0.74](https://github.com/eea/volto-clms-theme/compare/1.0.73...1.0.74)
+
+> 25 February 2022
+
+- Remove fullobjects from listings and demo feedback [`#212`](https://github.com/eea/volto-clms-theme/pull/212)
+- fix [`3d683f2`](https://github.com/eea/volto-clms-theme/commit/3d683f241799aaeb9034652f1839b34bc8662003)
+- add husky installer script to package.json [`071706f`](https://github.com/eea/volto-clms-theme/commit/071706f2c65333aba82c0ec9b545095479bb5348)
+- remove fullobjects and show images with generated url [`0bfbc00`](https://github.com/eea/volto-clms-theme/commit/0bfbc0080a6a9be4b63bfd3eb7ed8f65856382a2)
+- stop re-requesting on re-rendering of relatedListing view [`27bd33c`](https://github.com/eea/volto-clms-theme/commit/27bd33cdbb65686a37b0591e8a023aa155f2539d)
+- date format [`e61e6f1`](https://github.com/eea/volto-clms-theme/commit/e61e6f1a655914d5ecadc7b8cfe51cfa6d19a7cb)
+- fix related Listing block portal_type selector [`02228f9`](https://github.com/eea/volto-clms-theme/commit/02228f98e3032a9af436dedc6e5e6a5ac7d863fa)
+- feedback received on demo fixed [`52530c0`](https://github.com/eea/volto-clms-theme/commit/52530c0deea9ba855816350041cb285adde03035)
+
 #### [1.0.73](https://github.com/eea/volto-clms-theme/compare/1.0.72...1.0.73)
 
-- fix import [`9d7f118`](https://github.com/eea/volto-clms-theme/commit/9d7f1189984066d9f53b46ead0b32c232bd73463)
+> 23 February 2022
+
+- fix import [`#211`](https://github.com/eea/volto-clms-theme/pull/211)
 
 #### [1.0.72](https://github.com/eea/volto-clms-theme/compare/1.0.71...1.0.72)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.73",
+  "version": "1.0.76",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -30,7 +30,7 @@
     "@eeacms/volto-taxonomy"
   ],
   "dependencies": {
-    "@eeacms/volto-accordion-block": "3.4.7",
+    "@eeacms/volto-accordion-block": "3.4.13",
     "@eeacms/volto-arcgis-block": "*",
     "@eeacms/volto-clms-utils": "0.1.6",
     "@eeacms/volto-columns-block": "4.4.3",
@@ -121,6 +121,7 @@
     "cypress:run": "NODE_ENV=production CYPRESS_API=plone ../../../node_modules/cypress/bin/cypress run",
     "cypress:open": "NODE_ENV=production CYPRESS_API=plone ../../../node_modules/cypress/bin/cypress open",
     "precommit": "yarn stylelint && yarn prettier && yarn lint",
+    "husky": "husky install",
     "test": "docker run -it --rm -v $(pwd):/opt/frontend/my-volto-project/src/addons/volto-clms-theme -e GIT_NAME=volto-clms-theme -e NAMESPACE=@eeacms plone/volto-addon-ci"
   }
 }

package/src/components/Blocks/CclCardBlock/__snapshots__/CclCardBlockEdit.test.jsx.snap

@@ -18,7 +18,7 @@ Array [
     >
       <img
         alt="Placeholder"
-        src="https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg"
+        src="ccl-thumbnail-placeholder.jpg"
       />
     </div>
     <div

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingEdit.jsx

@@ -9,7 +9,10 @@ const CclRelatedListingEdit = (props) => {
   const schema = config.blocks.blocksConfig['relatedListing'].blockSchema;
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   const types = useSelector((state) => state.types.types);
-  const types_schema = types.map((type) => [type.title, type.title]);
+  const types_schema = types.map((type) => [
+    type['@id'].split('/').pop(),
+    type.title,
+  ]);
   let libraries = searchSubrequests?.[props.id]?.items || [];
   const variationsConfig =
     config.blocks.blocksConfig['relatedListing'].variations;

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingView.jsx

@@ -3,13 +3,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import React from 'react';
 import config from '@plone/volto/registry';
 import { searchContent } from '@plone/volto/actions';
+import { Segment } from 'semantic-ui-react';
 
 const CclRelatedListingView = (props) => {
   const { data, id, properties, metadata } = props;
   const dispatch = useDispatch();
-  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  const searchSubrequests = useSelector(
+    (state) => state.search.subrequests?.[props.id],
+  );
   const uid = metadata ? metadata['UID'] : properties['UID'];
-  let libraries = searchSubrequests?.[props.id]?.items || [];
+  let libraries = searchSubrequests?.items || [];
   const variationsConfig =
     config.blocks.blocksConfig['relatedListing'].variations;
   let TemplateView = '';
@@ -36,34 +39,50 @@ const CclRelatedListingView = (props) => {
     template_id = defaultVariation.id;
     data.variation = template_id;
   }
-
   if (!data.content_type) {
     data.content_type = 'News Item';
   }
 
+  // Configure sorting for the related items
+  let sort_on = 'effective';
+  let sort_order = 'descending';
+  if (data.content_type === 'eea.meeting') {
+    sort_on = 'start';
+    sort_order = 'descending';
+  } else if (data.content_type === 'TechnicalLibrary') {
+    sort_on = 'documentation_sorting';
+    sort_order = 'ascending';
+  }
+
   React.useEffect(() => {
     uid &&
+      !searchSubrequests?.loading &&
+      !searchSubrequests?.loaded &&
+      !searchSubrequests?.error &&
       dispatch(
         searchContent(
-          '',
+          '/',
           {
-            fullobjects: 1,
             portal_type: data.content_type || 'News Item',
-            path: '/',
             associated_products: uid,
+            metadata_fields: '_all',
+            sort_on: sort_on,
+            sort_order: sort_order,
           },
           id,
         ),
       );
-  }, [data, id, uid, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, id, uid, dispatch, searchSubrequests]);
 
   return (
     <>
-      {libraries.length > 0 ? (
+      {searchSubrequests?.loaded && libraries.length > 0 ? (
         <TemplateView items={libraries} variation={template_id} />
       ) : (
-        <p>There are no related {data.content_type} items.</p>
+        <p>There are no related items.</p>
       )}
+      {searchSubrequests?.loading && <Segment loading></Segment>}
     </>
   );
 };

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionEdit.jsx

@@ -0,0 +1,37 @@
+import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import { SidebarPortal } from '@plone/volto/components';
+import { SubscriptionSchema } from './schema';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
+const SubscriptionBlockEdit = (props) => {
+  const { block, data, onChangeBlock, selected } = props;
+
+  return (
+    <>
+      <div className="ccl-block-editor-header">
+        <legend
+          onClick={() => {
+            props.setSidebarTab(1);
+          }}
+          aria-hidden="true"
+        />
+      </div>
+      <SubscriptionView type={data.type || 'events'} />
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={SubscriptionSchema()}
+          title="Product card block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default SubscriptionBlockEdit;

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionView.jsx

@@ -0,0 +1,9 @@
+import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+
+const SubscriptionBlockView = (props) => {
+  const { data } = props;
+
+  return <SubscriptionView type={data.type || 'events'} />;
+};
+
+export default SubscriptionBlockView;

package/src/components/Blocks/CclSubscriptionBlock/schema.js

@@ -0,0 +1,21 @@
+export const SubscriptionSchema = () => ({
+  title: 'Subscription block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['type'],
+    },
+  ],
+  properties: {
+    type: {
+      title: 'Subscription type',
+      choices: [
+        ['news', 'news'],
+        ['events', 'events'],
+        ['newsletter', 'newsletter'],
+      ],
+    },
+  },
+  required: ['product'],
+});

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingWorkOpportunities.jsx

@@ -7,15 +7,15 @@ import { Link } from 'react-router-dom';
 const messages = defineMessages({
   ProcurementNo: {
     id: 'ProcurementNo',
-    defaultMessage: 'Procurement No:',
+    defaultMessage: 'Procurement No: ',
   },
   ReferenceNo: {
     id: 'ReferenceNo',
-    defaultMessage: 'Reference No:',
+    defaultMessage: 'Reference No: ',
   },
   SubmissionDeadline: {
     id: 'SubmissionDeadline',
-    defaultMessage: 'Submission deadline:',
+    defaultMessage: 'Submission deadline: ',
   },
 });
 
@@ -50,48 +50,26 @@ const CclWorkOpportunity = (props) => {
         <span className="card-work-deadline-title">
           {intl.formatMessage(messages.SubmissionDeadline)}
         </span>
-        {new Date(item.submission_deadline).toLocaleDateString()}
+        {new Date(item.submission_deadline).toLocaleString()}
       </div>
     </div>
   );
 };
 
-var Today = new Date();
-
 const CclListingWorkOpportunities = (props) => {
-  const { items, variation } = props;
+  const { items } = props;
   const intl = useIntl();
   const user = useSelector((state) => state.users?.user);
   return (
     <>
-      {items
-        .filter(
-          (item) =>
-            new Date(item.submission_deadline) < Today &&
-            variation === 'CloseTenders',
-        )
-        .map((item, index) => (
-          <CclWorkOpportunity
-            key={index}
-            item={item}
-            intl={intl}
-            user={user}
-          ></CclWorkOpportunity>
-        ))}
-      {items
-        .filter(
-          (item) =>
-            new Date(item.submission_deadline) > Today &&
-            variation === 'OpenTenders',
-        )
-        .map((item, index) => (
-          <CclWorkOpportunity
-            key={index}
-            item={item}
-            intl={intl}
-            user={user}
-          ></CclWorkOpportunity>
-        ))}
+      {items.map((item, index) => (
+        <CclWorkOpportunity
+          key={index}
+          item={item}
+          intl={intl}
+          user={user}
+        ></CclWorkOpportunity>
+      ))}
     </>
   );
 };

package/src/components/Blocks/customBlocks.js

@@ -56,6 +56,8 @@ import RelatedListingSchema from '@eeacms/volto-clms-theme/components/Blocks/Ccl
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import TextLinkCarouselEdit from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselEdit';
 import TextLinkCarouselView from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView';
+import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionView';
+import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
 import cardSVG from '@plone/volto/icons/indent.svg';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import customIdFieldSchema from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/customIdFieldSchema';
@@ -81,11 +83,9 @@ function listingVariation(id, isDefault, title, template, isWO = false) {
     id: id,
     isDefault: isDefault,
     title: title,
-    template: VariationHOC(
-      isWO ? CclListingWorkOpportunities : CclListingCards,
-      template,
-    ),
-    fullobjects: true,
+    template: isWO
+      ? CclListingWorkOpportunities
+      : VariationHOC(CclListingCards, template),
   };
 }
 
@@ -443,6 +443,22 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
+  subscriptionBlock: {
+    id: 'subscriptionBlock', // The name (id) of the block
+    title: 'Subscription Block', // 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: SubscriptionBlockView, // The view mode component
+    edit: SubscriptionBlockEdit, // 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)
+    },
+  },
   form: {
     ...config.blocks.blocksConfig.form,
     fieldSchema: customIdFieldSchema,

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -4,7 +4,7 @@
  * @module components/CLMSDownloadCartView/CLMSCartContent
  */
 
-import { Checkbox, Segment, Select } from 'semantic-ui-react';
+import { Checkbox, Grid, Modal, Segment, Select } from 'semantic-ui-react';
 import React, { useEffect, useState } from 'react';
 import {
   getCartObjectFromMapviewer,
@@ -30,10 +30,16 @@ import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 const CLMSCartContent = (props) => {
   const { localSessionCart } = props;
   const dispatch = useDispatch();
-  const cart = useSelector((state) => state.cart_items.items);
   const { removeCartItem, removeCartItems } = useCartState();
+
+  // component states
+  const [openedModal, setOpenedModal] = useState(false);
   const [cartSelection, setCartSelection] = useState([]);
   const [loadingTable, setLoadingTable] = useState(false);
+  const [cartItems, setCartItems] = useState([]);
+
+  // state connections
+  const cart = useSelector((state) => state.cart_items.items);
   const post_download_in_progress = useSelector(
     (state) => state.downloadtool.post_download_in_progress,
   );
@@ -46,8 +52,6 @@ const CLMSCartContent = (props) => {
   );
   const nutsnames = useSelector((state) => state.nutsnames.nutsnames);
 
-  const [cartItems, setCartItems] = useState([]);
-
   useEffect(() => {
     dispatch(getProjections());
     dispatch(getFormatConversionTable());
@@ -139,7 +143,7 @@ const CLMSCartContent = (props) => {
     dispatch(getDownloadtool());
   };
 
-  function startDownloading() {
+  const startDownloading = () => {
     setLoadingTable(true);
     window.scrollTo(0, 0);
 
@@ -161,7 +165,21 @@ const CLMSCartContent = (props) => {
         setLoadingTable(false);
         toast.error(<Toast autoClose={5000} title={'Something went wrong.'} />);
       });
-  }
+  };
+
+  const downloadModal = () => {
+    let selectedItems = getSelectedCartItems();
+    const hasPrepackaged =
+      selectedItems.filter((item) => item.file_id).length > 0;
+    const hasMapSelection =
+      selectedItems.filter((item) => item.area).length > 0;
+    if (!(hasMapSelection && hasPrepackaged)) {
+      startDownloading();
+    } else {
+      setOpenedModal(true);
+    }
+  };
+
   const setProjectionValue = (unique_id, value) => {
     const objIndex = cartItems.findIndex((obj) => obj.unique_id === unique_id);
     cartItems[objIndex].projection = value;
@@ -346,12 +364,70 @@ const CLMSCartContent = (props) => {
       )}
       {cartItems?.length !== 0 && (
         <CclButton
-          onClick={() => startDownloading()}
+          onClick={() => downloadModal()}
           disabled={cartSelection.length === 0}
         >
           Start downloading
         </CclButton>
       )}
+      <Modal
+        // onClose={() => closeModal()}
+        // onOpen={() => openModal()}
+        open={openedModal}
+        // trigger={trigger}
+        className={'modal-clms'}
+        size={'fullscreen'}
+      >
+        <Modal.Header>Download processing</Modal.Header>
+        <Modal.Content>
+          <div className={'modal-clms-background'}>
+            <div className={'modal-clms-container'}>
+              {'The download is going to be processed in two different files.'}
+              <br />
+              <br />
+              <strong>Prepackaged files:</strong>
+              <ul>
+                {getSelectedCartItems()
+                  .filter((item) => item.file_id)
+                  .map((item, key) => (
+                    <li key={key}>{item.name}</li>
+                  ))}
+              </ul>
+              <br />
+              <strong>Map viewer selection:</strong>
+              <ul>
+                {getSelectedCartItems()
+                  .filter((item) => item.area)
+                  .map((item, key) => (
+                    <li key={key}>{item.name}</li>
+                  ))}
+              </ul>
+            </div>
+          </div>
+        </Modal.Content>
+        <Modal.Actions>
+          <Grid columns={2} stackable textAlign="center">
+            <Grid.Row verticalAlign="middle">
+              <Grid.Column>
+                <CclButton onClick={() => setOpenedModal(false)}>
+                  Cancel
+                </CclButton>
+              </Grid.Column>
+              <Grid.Column>
+                <CclButton
+                  mode={'filled'}
+                  onClick={() => {
+                    setOpenedModal(false);
+                    startDownloading();
+                  }}
+                >
+                  Accept
+                </CclButton>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Modal.Actions>
+      </Modal>
     </>
   );
 };

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -73,10 +73,6 @@ export const CLMSMeetingView = (props) => {
       id: 'meetingtype',
       defaultMessage: 'Type',
     },
-    meetinglevel: {
-      id: 'meetinglevel',
-      defaultMessage: 'Level',
-    },
     hosting_organisation: {
       id: 'hosting_organisation',
       defaultMessage: 'Hosting organisation',
@@ -330,19 +326,6 @@ export const CLMSMeetingView = (props) => {
           </>
         )}
 
-        {content.meeting_level && (
-          <>
-            <div className="dataset-info-field">
-              <div className="dataset-field-title">
-                <Header>{intl.formatMessage(messages.meetinglevel)}</Header>
-              </div>
-              <div className="dataset-field-description">
-                {content.meeting_level.title}
-              </div>
-            </div>
-          </>
-        )}
-
         {content.hosting_organisation && (
           <>
             <div className="dataset-info-field">

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -8,7 +8,7 @@ const CLMSNewsItemView = (props) => {
       <h1 className="page-title">{content.title}</h1>
       <div className="news-detail">
         <div className="news-detail-date">
-          {new Date(content?.effective).toLocaleDateString()}
+          {new Date(content?.effective).toLocaleString()}
         </div>
         {content?.image && (
           <figure className="news-detail-image">

package/src/components/CclCard/CclCard.jsx

@@ -1,7 +1,5 @@
 import './cards.less';
 
-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';
@@ -12,12 +10,49 @@ import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock'
 import penSVG from '@plone/volto/icons/pen.svg';
 import { Icon } from '@plone/volto/components';
 
-function bytesToSize(bytes) {
-  var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-  if (bytes === 0) return '0 Byte';
-  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
-}
+import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
+
+const CardImage = ({ card, size = 'preview' }) => {
+  return card?.image_field ? (
+    <img
+      src={`${card.getURL}/@@images/${card?.image_field}/${size}`}
+      alt={card?.image?.alt || 'Placeholder'}
+    />
+  ) : (
+    <img src={PlaceHolder} alt={card?.image?.alt || 'Placeholder'} />
+  );
+};
+
+const DocCard = ({ card, url, showEditor, children }) => {
+  return (
+    <>
+      <div className="card-doc-title">
+        {card?.Type === 'TechnicalLibrary' ? (
+          <a href={`${card['@id']}/@@download/file`}>{card?.title}</a>
+        ) : (
+          <Link to={url}>{card?.title}</Link>
+        )}
+        {card?.Type === 'TechnicalLibrary' && showEditor && (
+          <Link to={`${url}/edit`}>
+            <Icon
+              name={penSVG}
+              size="15px"
+              className="circled"
+              title={'Edit'}
+            />
+          </Link>
+        )}
+      </div>
+      <div className="card-doc-text">
+        <div className="doc-description">{card?.description}</div>
+        {card?.Type === 'TechnicalLibrary' && (
+          <div className="card-doc-size">{card.getObjSize || ''}</div>
+        )}
+        {children}
+      </div>
+    </>
+  );
+};
 function CclCard(props) {
   const { type, children, card, showEditor = false } = props;
   let url = '/';
@@ -40,53 +75,27 @@ function CclCard(props) {
     >
       {conditional_types.includes(type) ? (
         <>
-          {(type === 'doc' || type === 'globalSearch') && (
+          {type === 'doc' && (
             <>
-              {type === 'globalSearch' && (
-                <Label ribbon="right" color="olive">
-                  {content_type}
-                </Label>
-              )}
-              <div className="card-doc-title">
-                {card?.file?.download ? (
-                  <a href={card.file.download}>{card?.title}</a>
-                ) : (
-                  <Link to={url}>{card?.title}</Link>
-                )}
-                {card?.file?.download && showEditor && (
-                  <Link to={`${url}/edit`}>
-                    <Icon
-                      name={penSVG}
-                      size="15px"
-                      className="circled"
-                      title={'Edit'}
-                    />
-                  </Link>
-                )}
-              </div>
-              <div className="card-doc-text">
-                <div className="doc-description">{card?.description}</div>
-                {card?.file && (
-                  <div className="card-doc-size">
-                    {mime.extension(card?.file?.['content-type']).toUpperCase()}{' '}
-                    {bytesToSize(card?.file?.size) || ''}
-                  </div>
-                )}
+              <DocCard card={card} url={url} showEditor={showEditor}>
                 {children}
-              </div>
+              </DocCard>
+            </>
+          )}
+          {type === 'globalSearch' && (
+            <>
+              <Label ribbon="right" color="olive">
+                {content_type}
+              </Label>
+              <DocCard card={card} url={url} showEditor={showEditor}>
+                {children}
+              </DocCard>
             </>
           )}
           {(type === 'block' || type === 'threeColumns') && (
             <>
               <div className={`card-${type}-image`}>
-                <img
-                  src={
-                    card?.image?.scales?.preview?.download ||
-                    card?.image?.download ||
-                    'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                  }
-                  alt={card?.image?.alt || 'Placeholder'}
-                />
+                <CardImage card={card} size={'preview'} />
               </div>
               <div className="card-text">
                 <div className="card-title">
@@ -100,21 +109,14 @@ function CclCard(props) {
           {type === 'news' && (
             <>
               <div className="card-news-image">
-                <img
-                  src={
-                    card?.image?.scales?.mini?.download ||
-                    card?.image?.download ||
-                    'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                  }
-                  alt={card?.image?.alt || 'Placeholder'}
-                />
+                <CardImage card={card} size={'mini'} />
               </div>
               <div className="card-news-text">
                 <div className="card-news-title">
                   <Link to={url}>{card?.title || 'Card default title'}</Link>
                 </div>
                 <div className="card-news-date">
-                  {new Date(card?.effective).toLocaleDateString()}
+                  {new Date(card?.effective).toLocaleString()}
                 </div>
                 <p className="card-news-description">{card?.description}</p>
               </div>
@@ -129,19 +131,11 @@ function CclCard(props) {
                 <div className="card-event-when">
                   <FontAwesomeIcon icon={['far', 'calendar-alt']} />
                   <div className="card-event-when-text">
-                    {card.whole_day ? (
-                      <When
-                        start={card.start}
-                        end={card.start}
-                        whole_day={card.whole_day}
-                      />
-                    ) : (
-                      <When
-                        start={card.start}
-                        end={card.end}
-                        whole_day={card.whole_day}
-                      />
-                    )}
+                    <When
+                      start={card.start}
+                      end={card.whole_day ? card.start : card.end}
+                      whole_day={card.whole_day}
+                    />
                   </div>
                 </div>
                 {card?.location ? (
@@ -164,14 +158,7 @@ function CclCard(props) {
       ) : (
         <>
           <div className="card-image">
-            <img
-              src={
-                card?.image?.scales?.mini?.download ||
-                card?.image?.download ||
-                'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-              }
-              alt={card?.image?.alt || 'Placeholder'}
-            />
+            <CardImage card={card} size={'mini'} />
           </div>
           <div className={'card-text'}>
             <div className="card-title">

package/src/components/CclDownloadTable/CclDownloadTable.jsx

@@ -55,7 +55,7 @@ function CclDownloadTable(props) {
 
   React.useEffect(() => {
     let fItems = prePackagedCollection.filter((item) =>
-      item.resolution.toLowerCase().includes(filterText.toLocaleLowerCase()),
+      item?.resolution?.toLowerCase().includes(filterText.toLocaleLowerCase()),
     );
     if (filterText) {
       setCurrentPageItems(fItems.slice(0, 10));
@@ -231,7 +231,7 @@ function CclDownloadTable(props) {
                         <span
                           className={
                             'tag tag-' +
-                            (dataset_file?.type.toLowerCase() || 'raster')
+                            (dataset_file?.type?.toLowerCase() || 'raster')
                           }
                         >
                           {dataset_file?.type || 'Raster'}

package/src/index.js

@@ -40,7 +40,6 @@ const applyConfig = (config) => {
       ...config.contentTypesViews,
       DataSet: CLMSDatasetDetailView,
       'News Item': CLMSNewsItemView,
-      TechnicalLibrary: CLMSDownloadableFileView,
       File: CLMSDownloadableFileView,
       'eea.meeting': CLMSMeetingView,
       'eea.meeting.subscribers': CLMSMeetingSubscribersView,