@eeacms/volto-clms-theme 1.0.73 → 1.0.74

package/CHANGELOG.md

@@ -4,9 +4,21 @@ 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.74](https://github.com/eea/volto-clms-theme/compare/1.0.73...1.0.74)
+
+- 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.74",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -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/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 = '';
@@ -43,27 +46,31 @@ const CclRelatedListingView = (props) => {
 
   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',
           },
           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>
       )}
+      {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,7 +50,7 @@ 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>
   );

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';
@@ -85,7 +87,6 @@ function listingVariation(id, isDefault, title, template, isWO = false) {
       isWO ? CclListingWorkOpportunities : CclListingCards,
       template,
     ),
-    fullobjects: true,
   };
 }
 
@@ -443,6 +444,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/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,52 @@ 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];
-}
+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={
+        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+      }
+      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 +78,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 +112,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 +134,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 +161,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/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,