@eeacms/volto-cca-policy 0.1.82 → 0.1.84

package/CHANGELOG.md

@@ -4,6 +4,48 @@ 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).
 
+### [0.1.84](https://github.com/eea/volto-cca-policy/compare/0.1.83...0.1.84) - 28 February 2024
+
+#### :bug: Bug Fixes
+
+- fix: image gallery [kreafox - [`758a8f3`](https://github.com/eea/volto-cca-policy/commit/758a8f3d187e44e7782c6bba2e9d98e3f179b559)]
+- fix: remove unused import [kreafox - [`9790189`](https://github.com/eea/volto-cca-policy/commit/97901892059d308a9500f53573ea1f1f0e27a587)]
+- fix: className [kreafox - [`851d7f1`](https://github.com/eea/volto-cca-policy/commit/851d7f1c6ac5ccc338225f18ab33f08b414d517f)]
+- fix: more checks on db items [kreafox - [`e673ca8`](https://github.com/eea/volto-cca-policy/commit/e673ca85fed7ebab6879a3dc8d09f6b80b97fce5)]
+- fix: missing content on c3sindicator view [kreafox - [`0126bb5`](https://github.com/eea/volto-cca-policy/commit/0126bb5ad2653956cd2863e03f66b6f18d9a25c4)]
+- fix: error on missing metadata values [kreafox - [`300849b`](https://github.com/eea/volto-cca-policy/commit/300849b0d4b17d6352290479fdd6458af538aa50)]
+
+#### :nail_care: Enhancements
+
+- change: remove Footer customization [kreafox - [`b1c2c86`](https://github.com/eea/volto-cca-policy/commit/b1c2c8608eaff77db40cbf1d9158a7a72bd558aa)]
+- change: small updates on db items, cleanup [kreafox - [`0a3981b`](https://github.com/eea/volto-cca-policy/commit/0a3981be1d2761d2bdf5049b0a2cffa1417687bc)]
+- change: update mission stories search index [kreafox - [`3ea7107`](https://github.com/eea/volto-cca-policy/commit/3ea71075e30cb8fa8d5a0b28822ab67ea6c1c7e9)]
+- change: update case study view, add ImageGallery component [kreafox - [`5a83100`](https://github.com/eea/volto-cca-policy/commit/5a83100f76f4f64655561f09e20a516a403dd982)]
+- change: formatting [kreafox - [`00a0baa`](https://github.com/eea/volto-cca-policy/commit/00a0baa225d2e39cc3b75e41a870c23a45a9b62a)]
+
+#### :house: Internal changes
+
+- style: nonclickable menu [kreafox - [`dc11808`](https://github.com/eea/volto-cca-policy/commit/dc11808c1ca5006713522f152c0d8359a4324ea1)]
+- style: update c3s indicator view [kreafox - [`2007587`](https://github.com/eea/volto-cca-policy/commit/2007587f919d2866ea79b846585c3177e4b905fd)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #265786 - Fix text Climate-ADAPT in events cards listing. [GhitaB - [`66e5f3d`](https://github.com/eea/volto-cca-policy/commit/66e5f3d6876cae0f6e3e2ebda11fcbd19cc10e5b)]
+- test: update tests for db items view [kreafox - [`ed3af67`](https://github.com/eea/volto-cca-policy/commit/ed3af67da0f535b5dda8616fe8523f286bbca935)]
+- CCA Event, Event view: use BannerTitle. [GhitaB - [`84d1dd6`](https://github.com/eea/volto-cca-policy/commit/84d1dd6e9472de069de8c2d1aedf9f00030e60c8)]
+- WIP: improve layout on DB items, code cleanup [kreafox - [`2f14ad1`](https://github.com/eea/volto-cca-policy/commit/2f14ad1be2b09ddf569b1c9893f113031421d6f5)]
+- WIP: database items view [kreafox - [`4602d76`](https://github.com/eea/volto-cca-policy/commit/4602d762849b2c84cc26af9f528fb11f22618c0f)]
+### [0.1.83](https://github.com/eea/volto-cca-policy/compare/0.1.82...0.1.83) - 27 February 2024
+
+#### :hammer_and_wrench: Others
+
+- Refs #265786 - Fix go to contact info (in case of email vs website url). [GhitaB - [`38029dc`](https://github.com/eea/volto-cca-policy/commit/38029dc5bcb21423b8b9edea8aef9627cc06b8a5)]
+- Refs #265786 - Fix go to contact info (in case of email vs website url). [GhitaB - [`4a45be0`](https://github.com/eea/volto-cca-policy/commit/4a45be04c57305874fb38952a354c7fc2e630c10)]
+- Refs #265786 - Event cards listing: fix icon to stay on the same line. [GhitaB - [`d7c32ae`](https://github.com/eea/volto-cca-policy/commit/d7c32aed9d0a66cd618daeb38ae8a8bb9c400be4)]
+- Refs #265786 - Event cards listing: improve styles, add email info and subjects tags. [GhitaB - [`3c92d54`](https://github.com/eea/volto-cca-policy/commit/3c92d54ceb88a4dd28536e99398412e1e4532b8d)]
+- Refs #265786 - Event cards listing: improve styles, improve day display. [GhitaB - [`80b0fe0`](https://github.com/eea/volto-cca-policy/commit/80b0fe047f254483664e5528871e1d51c02830e1)]
+- Refs #265786 - Implement events cards listing variation to be used for listing events. [GhitaB - [`73a77f2`](https://github.com/eea/volto-cca-policy/commit/73a77f2430568f3b20749f77c986720c6a5dab81)]
+- Add Display customization, to avoid crash in homepage [Tiberiu Ichim - [`6e3196b`](https://github.com/eea/volto-cca-policy/commit/6e3196b4298c0ec6adfb73df682b9adfa3cd9fae)]
 ### [0.1.82](https://github.com/eea/volto-cca-policy/compare/0.1.81...0.1.82) - 24 February 2024
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/index.js

@@ -0,0 +1,2 @@
+export ImageGallery from './theme/ImageGallery/ImageGallery';
+export BannerTitle from './theme/BannerTitle/BannerTitle';

package/src/components/manage/Blocks/Listing/EventCardsListingView.jsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import cx from 'classnames';
+import './styles.less';
+import { ConditionalLink } from '@plone/volto/components';
+import { Icon } from 'semantic-ui-react';
+import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+import { Card, Grid } from 'semantic-ui-react';
+import { Label } from 'semantic-ui-react';
+
+const Separator = () => {
+  return <div className="sep">&nbsp;&nbsp;⎯&nbsp;&nbsp;</div>;
+};
+
+const StartDate = (start) => {
+  const start_date = new Date(start);
+
+  const day = start_date.getDate();
+  const monthIndex = start_date.getMonth();
+
+  const monthNames = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+
+  const monthName = monthNames[monthIndex];
+
+  const dayOfWeek = start_date
+    .toLocaleDateString('en', { weekday: 'short' })
+    .substring(0, 2);
+
+  return (
+    <div className="start-date">
+      <p className="day">{dayOfWeek}</p>
+      <p className="date">
+        {day}.{monthName}.
+      </p>
+    </div>
+  );
+};
+
+const EventCardsListingView = ({ items, isEditMode, token }) => {
+  const go_to_contact = (contact_info) => {
+    if (contact_info.includes('@')) {
+      return `mailto:${contact_info}`;
+    }
+    return contact_info;
+  };
+
+  return (
+    <div className={cx('ui fluid eventCards')}>
+      {items.map((item, index) => (
+        <div
+          className={cx('u-item listing-item simple-listing-item')}
+          key={item['@id']}
+        >
+          <div className="wrapper">
+            <Card fluid>
+              <Card.Content>
+                <Grid stackable columns={12}>
+                  <Grid.Column width={2}>
+                    {!!item.start && StartDate(item.start)}
+                  </Grid.Column>
+                  <Grid.Column width={10}>
+                    <div className="event-details">
+                      <h3 className={'listing-header'}>
+                        <a href={item.event_url}>
+                          {item.title ? item.title : item.id}
+                        </a>
+                      </h3>
+                      <div className="listing-body-dates">
+                        {!!item.start && (
+                          <span className="event-date">
+                            <Icon className="ri-calendar-line" />
+                            <When
+                              start={item.start}
+                              end={item.end}
+                              whole_day={true}
+                              open_end={item.open_end}
+                            />
+                          </span>
+                        )}
+                      </div>
+                      <div className="listing-body-dates">
+                        {!!item['location'] && (
+                          <span className="event-date">
+                            <Icon className="map marker alternate" />
+                            {item['location']}
+                          </span>
+                        )}
+                      </div>
+                      {item.description && (
+                        <p className={'listing-description'}>
+                          {item.description}
+                        </p>
+                      )}
+                      <div className="bottom-info">
+                        {!!item.subjects && item.subjects.length > 0 && (
+                          <>
+                            <div className="subjects">
+                              {item.subjects.map((tag) => (
+                                <Label key={tag} size="small">
+                                  {tag}
+                                </Label>
+                              ))}
+                            </div>
+
+                            <Separator />
+                          </>
+                        )}
+                        <div className="source">
+                          <ConditionalLink item={item} condition={!isEditMode}>
+                            Climate-ADAPT page for this event
+                          </ConditionalLink>
+                        </div>
+                        {!!item.contact_email && (
+                          <>
+                            <Separator />
+                            <div className="email-info">
+                              <Icon className="mail" />
+                              <a
+                                className="contact_email"
+                                title=""
+                                href={go_to_contact(item.contact_email)}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                {item.contact_email}
+                              </a>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </Grid.Column>
+                </Grid>
+              </Card.Content>
+            </Card>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+EventCardsListingView.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default compose(
+  connect((state) => ({
+    token: state.userSession.token,
+  })),
+)(EventCardsListingView);

package/src/components/manage/Blocks/Listing/index.js

@@ -1,5 +1,6 @@
 import OrganisationCardsListingView from './OrganisationCardsListingView';
 import IndicatorCardsListingView from './IndicatorCardsListingView';
+import EventCardsListingView from './EventCardsListingView';
 
 export default function installListing(config) {
   config.blocks.blocksConfig.listing = {
@@ -20,6 +21,13 @@ export default function installListing(config) {
         isDefault: false,
         fullobjects: true,
       },
+      {
+        id: 'eventCards',
+        title: 'Event Cards',
+        template: EventCardsListingView,
+        isDefault: false,
+        fullobjects: true,
+      },
     ],
   };
 

package/src/components/manage/Blocks/Listing/styles.less

@@ -44,3 +44,58 @@ div.indicatorCards {
     margin-bottom: 1em !important;
   }
 }
+
+// Event Cards Listing
+div.eventCards {
+  div.simple-listing-item {
+    border-bottom: 1px solid #ddd !important;
+  }
+
+  a {
+    color: #006bb8 !important;
+  }
+
+  div.start-date {
+    max-width: 80px;
+
+    .day {
+      border-bottom: 3px solid #ef7000;
+      color: #ef7000;
+      font-size: 2.5em;
+      font-weight: 900;
+    }
+
+    .date {
+      font-size: 1.5em;
+      font-weight: 600;
+    }
+  }
+
+  div.bottom-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    .sep {
+      position: relative;
+      top: -2px;
+      color: #ddd;
+    }
+
+    .email-info {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    div.subjects {
+      .label {
+        margin-right: 0.3em;
+        margin-bottom: 0.3em;
+        background: #eee;
+        color: #3d5265;
+      }
+    }
+  }
+}

package/src/components/theme/BannerTitle/BannerTitle.jsx

@@ -0,0 +1,38 @@
+import config from '@plone/volto/registry';
+
+const BannerTitle = (props) => {
+  const { content } = props;
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TitleBlockView = blocksConfig?.title?.view;
+  const hasTitleBlock = content?.blocks
+    ? Object.keys(content?.blocks).find(
+        (id) => content?.blocks?.[id]?.['@type'] === 'title',
+      )
+    : null;
+  const isHomePage =
+    ['Subsite', 'LRF', 'Plone Site'].indexOf(content?.['@type']) > -1;
+
+  return !isHomePage ? (
+    <>
+      {!hasTitleBlock ? (
+        <TitleBlockView
+          {...props}
+          data={{
+            info: [{ description: '' }],
+            hideContentType: true,
+            hideCreationDate: true,
+            hideModificationDate: true,
+            hidePublishingDate: true,
+            hideDownloadButton: false,
+            hideShareButton: false,
+          }}
+          metadata={content}
+        />
+      ) : null}
+    </>
+  ) : null;
+};
+
+export default BannerTitle;

package/src/components/theme/ImageGallery/ImageGallery.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import { Modal, Image } from 'semantic-ui-react';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const Slider = loadable(() => import('react-slick'));
+
+const ImageGallery = (props) => {
+  const { items = [] } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [slideIndex, setSlideIndex] = React.useState(0);
+  const [updateCount, setUpdateCount] = React.useState(0);
+  const sliderRef = React.useRef(null);
+
+  const carouselSettings = React.useMemo(
+    () => ({
+      afterChange: () => setUpdateCount(updateCount + 1),
+      beforeChange: (current, next) => setSlideIndex(next),
+      infinite: true,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      dots: false,
+      arrows: true,
+      adaptiveHeight: true,
+      autoplay: false,
+      fade: false,
+      useTransform: false,
+      initialSlide: slideIndex,
+    }),
+    [slideIndex, updateCount],
+  );
+
+  const handleClick = () => {
+    if (items.length) {
+      setSlideIndex(0);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <div className="image-gallery">
+      <div
+        tabIndex={0}
+        role="button"
+        onKeyDown={handleClick}
+        onClick={handleClick}
+      >
+        <Image
+          src={items[0]?.url}
+          alt={items[0]?.title}
+          className="preview-image"
+        />
+      </div>
+
+      <Modal
+        closeIcon
+        open={open}
+        className="slider-modal"
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+      >
+        <Modal.Content>
+          <h3>{items[slideIndex]?.title}</h3>
+          <p>{items[slideIndex]?.description}</p>
+          <Slider {...carouselSettings} ref={sliderRef}>
+            {items.map((item, i) => {
+              return <Image key={i} src={item.url} alt={item?.title} />;
+            })}
+          </Slider>
+          <div className="slide-image-count">
+            <strong>{slideIndex + 1}</strong> of {items.length}
+          </div>
+        </Modal.Content>
+      </Modal>
+    </div>
+  );
+};
+
+export default ImageGallery;

package/src/components/theme/Views/AdaptationOptionView.jsx

@@ -7,7 +7,9 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Grid } from 'semantic-ui-react';
+import { Segment, Divider } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
 
 function createDataField(type, field, section, title) {
   return {
@@ -69,21 +71,23 @@ const SectionsMenu = (props) => {
   const { sections } = props;
 
   return (
-    <>
-      {sections.length > 0 && (
-        <>
-          <h5 className="Adaptation-option-selector">Additional Details</h5>
-          <ul>
-            {sections.map((data, index) => (
-              <li key={index}>
-                <a href={'#' + sectionID(data.title)}>{data.title}</a>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-      <>
-        <h5 className="Adaptation-option-selector">Reference information</h5>
+    <div className="adaptation-details">
+      <div>
+        {sections.length > 0 && (
+          <>
+            <h3>Additional Details</h3>
+            <ul>
+              {sections.map((data, index) => (
+                <li key={index}>
+                  <a href={'#' + sectionID(data.title)}>{data.title}</a>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+      <div>
+        <h3>Reference information</h3>
         <ul>
           <li>
             <a href="#websites">Websites</a>
@@ -92,95 +96,105 @@ const SectionsMenu = (props) => {
             <a href="#source">Source</a>
           </li>
         </ul>
-      </>
-      <hr />
-    </>
+      </div>
+    </div>
   );
 };
 
 function AdaptationOptionView(props) {
   const { content } = props;
+  const {
+    related_case_studies,
+    long_description,
+    websites,
+    source,
+    ipcc_category,
+  } = content;
 
   const usedSections = dataDisplay.filter((data) =>
     content?.hasOwnProperty(data.field),
   );
 
   return (
-    <div className="adaptation-option-view">
+    <div className="db-item-view adaptation-option-view">
       <BannerTitle content={content} type="Adaptation Option" />
 
       <div className="ui container">
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={9}
-              className="col-left"
-            >
-              <HTMLField
-                value={content.long_description}
-                className="long_description"
-              />
-
-              <SectionsMenu sections={usedSections} />
-
-              {content?.ipcc_category?.length > 0 && (
-                <Fragment>
-                  <h4>Adaptation Details</h4>
-
-                  <div id={sectionID('IPCC categories')} className="section">
-                    <h5 className="section-title">IPCC categories</h5>
-                    {content.ipcc_category
-                      .map((item) => item.title)
-                      .sort()
-                      .join(', ')}
-                    {usedSections.length > 0 && (
-                      <>
-                        {usedSections.map((data, index) => (
-                          <Fragment key={index}>
-                            <div id={sectionID(data.title)} className="section">
-                              <h5 className="section-title">{data.title}</h5>
-                              <HTMLField
-                                value={content[data.field]}
-                                className="long_description"
-                              />
-                            </div>
-                          </Fragment>
-                        ))}
-                      </>
-                    )}
-                  </div>
-                  <hr />
-                </Fragment>
+        <HTMLField value={long_description} />
+        <SectionsMenu sections={usedSections} />
+        <Divider />
+
+        {content?.ipcc_category?.length > 0 && (
+          <Fragment>
+            <h2>Adaptation Details</h2>
+            <div id={sectionID('IPCC categories')} className="section">
+              <h5 className="section-title">IPCC categories</h5>
+              {ipcc_category
+                .map((item) => item.title)
+                .sort()
+                .join(', ')}
+
+              {usedSections.length > 0 && (
+                <>
+                  {usedSections
+                    .filter((data) => data.field !== 'ipcc_category')
+                    .map((data, index) => (
+                      <Fragment key={index}>
+                        <div id={sectionID(data.title)} className="section">
+                          <h5 className="section-title">{data.title}</h5>
+                          <HTMLField value={content[data.field]} />
+                        </div>
+                      </Fragment>
+                    ))}
+                </>
               )}
-
-              <h4>Reference information</h4>
-
-              {content?.websites?.length > 0 && (
-                <LinksList title="Websites:" value={content.websites} />
-              )}
-
-              <div id="source" className="section">
-                <h5>References:</h5>
-                <HTMLField value={content.source} />
-              </div>
-
-              <PublishedModifiedInfo {...props} />
-              <ShareInfo {...props} />
-            </Grid.Column>
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={3}
-              className="col-right"
-            >
-              <div style={{}}>
-                <ContentMetadata {...props} />
+            </div>
+            <Divider />
+          </Fragment>
+        )}
+
+        <h2>Reference information</h2>
+
+        {websites && websites?.length > 0 && (
+          <LinksList title="Websites:" value={websites} />
+        )}
+
+        <div id="source" className="section">
+          <h5 id="source">References:</h5>
+          <HTMLField value={source} />
+        </div>
+
+        <PublishedModifiedInfo {...props} />
+        <ShareInfo {...props} />
+
+        <div className="content-box">
+          <div className="content-box-inner">
+            <Segment>
+              <ContentMetadata {...props} />
+            </Segment>
+
+            {related_case_studies?.length > 0 && (
+              <div className="content-metadata">
+                <Segment>
+                  <h5>Case studies related to this option</h5>
+                  <ul
+                    className={cx('related-case-studies', {
+                      columned: related_case_studies?.length > 5,
+                    })}
+                  >
+                    {related_case_studies.map((item, index) => (
+                      <li key={index}>
+                        <UniversalLink key={index} href={item.url}>
+                          {item.title}
+                        </UniversalLink>
+                      </li>
+                    ))}
+                  </ul>
+                </Segment>
               </div>
-            </Grid.Column>
+            )}
           </div>
-        </Grid>
+        </div>
       </div>
     </div>
   );