@eeacms/volto-cca-policy 0.2.99 → 0.3.0

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-01-31T08:25:40.802Z\n"
+"POT-Creation-Date: 2025-02-03T13:57:05.869Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -60,16 +60,6 @@ msgstr ""
 msgid "Agenda and supporting documents"
 msgstr ""
 
-#. Default: "Apr"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Apr"
-msgstr ""
-
-#. Default: "Aug"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Aug"
-msgstr ""
-
 #. Default: "Background information"
 #: components/theme/Views/C3SIndicatorView
 msgid "Background information"
@@ -198,11 +188,6 @@ msgstr ""
 msgid "Date of release:"
 msgstr ""
 
-#. Default: "Dec"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Dec"
-msgstr ""
-
 #. Default: "Description"
 #: helpers/Utils
 msgid "Description"
@@ -263,21 +248,11 @@ msgstr ""
 msgid "Explore more on Climate-ADAPT"
 msgstr ""
 
-#. Default: "Feb"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Feb"
-msgstr ""
-
 #. Default: "For more search options"
 #: index
 msgid "For more search options"
 msgstr ""
 
-#. Default: "Fr"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Fr"
-msgstr ""
-
 #. Default: "Fullscreen"
 #: components/theme/Views/C3SIndicatorView
 msgid "Fullscreen"
@@ -364,21 +339,6 @@ msgstr ""
 msgid "Info"
 msgstr ""
 
-#. Default: "Jan"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Jan"
-msgstr ""
-
-#. Default: "Jul"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Jul"
-msgstr ""
-
-#. Default: "Jun"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Jun"
-msgstr ""
-
 #. Default: "Key Type Measure"
 #: components/manage/Blocks/FilterAceContent/FilterAceContentView
 msgid "Key Type Measure"
@@ -441,21 +401,6 @@ msgstr ""
 msgid "Macro-Transnational region:"
 msgstr ""
 
-#. Default: "Mar"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Mar"
-msgstr ""
-
-#. Default: "May"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "May"
-msgstr ""
-
-#. Default: "Mo"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Mo"
-msgstr ""
-
 #. Default: "National HHAP"
 #: components/manage/Blocks/CountryMapHeatIndex/Filter
 msgid "National HHAP"
@@ -476,11 +421,6 @@ msgstr ""
 msgid "No results"
 msgstr ""
 
-#. Default: "Nov"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Nov"
-msgstr ""
-
 #. Default: "Objectives of the adaptation measure"
 #: components/theme/Views/CaseStudyView
 msgid "Objectives of the adaptation measure"
@@ -496,16 +436,16 @@ msgstr ""
 msgid "Observatory contributions"
 msgstr ""
 
-#. Default: "Oct"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Oct"
-msgstr ""
-
 #. Default: "Organisation Documents"
 #: helpers/Utils
 msgid "Organisation Documents"
 msgstr ""
 
+#. Default: "Organised by EEA"
+#: components/manage/Blocks/Listing/EventCardsListingView
+msgid "Organised by EEA"
+msgstr ""
+
 #. Default: "Other regions"
 #: components/manage/Blocks/TransRegionSelect/TransRegionSelectView
 msgid "Other regions"
@@ -593,11 +533,6 @@ msgstr ""
 msgid "Replace existing file"
 msgstr ""
 
-#. Default: "Sa"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Sa"
-msgstr ""
-
 #. Default: "Search the Climate-ADAPT database"
 #: index
 msgid "Search the Climate-ADAPT database"
@@ -644,11 +579,6 @@ msgstr ""
 msgid "Select"
 msgstr ""
 
-#. Default: "Sep"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Sep"
-msgstr ""
-
 #. Default: "Share your information"
 #: components/manage/Blocks/SearchAceContent/SearchAceContentView
 #: components/theme/ShareInfoButton/ShareInfoButton
@@ -678,11 +608,6 @@ msgstr ""
 msgid "Stakeholder participation"
 msgstr ""
 
-#. Default: "Su"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Su"
-msgstr ""
-
 #. Default: "Sub Nationals:"
 #: helpers/ContentMetadata
 msgid "Sub Nationals:"
@@ -699,11 +624,6 @@ msgstr ""
 msgid "Success and limiting factors"
 msgstr ""
 
-#. Default: "Th"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Th"
-msgstr ""
-
 #. Default: "The Adaptation Support Tool - Getting started"
 #: components/theme/ASTNavigation/ASTAccordion
 msgid "The Adaptation Support Tool - Getting started"
@@ -724,11 +644,6 @@ msgstr ""
 msgid "The date refers to the moment in which the item has been prepared or updated by contributing experts to be submitted for the publication in Climate ADAPT"
 msgstr ""
 
-#. Default: "Tu"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "Tu"
-msgstr ""
-
 #. Default: "Updating notes"
 #: components/theme/Views/CaseStudyView
 msgid "Updating notes"
@@ -744,11 +659,6 @@ msgstr ""
 msgid "Visit external website"
 msgstr ""
 
-#. Default: "We"
-#: components/manage/Blocks/Listing/EventCardsListingView
-msgid "We"
-msgstr ""
-
 #. Default: "Web"
 #: helpers/Utils
 msgid "Web"

package/package.json

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

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

@@ -1,186 +1,161 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { Card, Grid, Icon, Label } from 'semantic-ui-react';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { connect, useSelector } from 'react-redux';
+import { Card, Grid, Icon, Label, Image } from 'semantic-ui-react';
 import { ConditionalLink, UniversalLink } from '@plone/volto/components';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+import eeaLogo from '@eeacms/volto-cca-policy/../theme/assets/images/eea-logo.svg';
+import { capitalizeFirstLetter } from '@eeacms/volto-cca-policy/helpers';
+import config from '@plone/volto/registry';
 import './styles.less';
 
-const Separator = () => {
-  return <div className="sep">&nbsp;&nbsp;⎯&nbsp;&nbsp;</div>;
-};
-
-const messages = defineMessages({
-  jan: { id: 'Jan', defaultMessage: 'Jan' },
-  feb: { id: 'Feb', defaultMessage: 'Feb' },
-  mar: { id: 'Mar', defaultMessage: 'Mar' },
-  apr: { id: 'Apr', defaultMessage: 'Apr' },
-  may: { id: 'May', defaultMessage: 'May' },
-  jun: { id: 'Jun', defaultMessage: 'Jun' },
-  jul: { id: 'Jul', defaultMessage: 'Jul' },
-  aug: { id: 'Aug', defaultMessage: 'Aug' },
-  sep: { id: 'Sep', defaultMessage: 'Sep' },
-  oct: { id: 'Oct', defaultMessage: 'Oct' },
-  nov: { id: 'Nov', defaultMessage: 'Nov' },
-  dec: { id: 'Dec', defaultMessage: 'Dec' },
-
-  mo: { id: 'Mo', defaultMessage: 'Mo' },
-  tu: { id: 'Tu', defaultMessage: 'Tu' },
-  we: { id: 'We', defaultMessage: 'We' },
-  th: { id: 'Th', defaultMessage: 'Th' },
-  fr: { id: 'Fr', defaultMessage: 'Fr' },
-  sa: { id: 'Sa', defaultMessage: 'Sa' },
-  su: { id: 'Su', defaultMessage: 'Su' },
-});
+const goToContact = (contactInfo) =>
+  contactInfo.includes('@') ? `mailto:${contactInfo}` : contactInfo;
 
-const StartDate = (start) => {
-  const start_date = new Date(start);
+const getEventUrl = (item) => item?.event_url || item['@id'];
 
-  const day = start_date.getDate();
-  const monthIndex = start_date.getMonth();
+const StartDate = ({ start }) => {
+  const startDate = new Date(start);
+  const day = startDate.getDate();
+  const currentLang = useSelector((state) => state.intl.locale);
 
-  const intl = useIntl();
-  const monthNames = [
-    intl.formatMessage(messages.jan),
-    intl.formatMessage(messages.feb),
-    intl.formatMessage(messages.mar),
-    intl.formatMessage(messages.apr),
-    intl.formatMessage(messages.may),
-    intl.formatMessage(messages.jun),
-    intl.formatMessage(messages.jul),
-    intl.formatMessage(messages.aug),
-    intl.formatMessage(messages.sep),
-    intl.formatMessage(messages.oct),
-    intl.formatMessage(messages.nov),
-    intl.formatMessage(messages.dec),
-  ];
-
-  const dayNames = {
-    Mo: intl.formatMessage(messages.mo),
-    Tu: intl.formatMessage(messages.tu),
-    We: intl.formatMessage(messages.we),
-    Th: intl.formatMessage(messages.th),
-    Fr: intl.formatMessage(messages.fr),
-    Sa: intl.formatMessage(messages.sa),
-    Su: intl.formatMessage(messages.su),
-  };
-
-  const monthName = monthNames[monthIndex];
+  const monthName = capitalizeFirstLetter(
+    startDate.toLocaleDateString(currentLang, { month: 'short' }),
+  );
 
-  const dayOfWeek =
-    dayNames[
-      start_date.toLocaleDateString('en', { weekday: 'short' }).substring(0, 2)
-    ];
+  const dayOfWeek = capitalizeFirstLetter(
+    startDate.toLocaleDateString(currentLang, { weekday: 'short' }),
+  );
 
   return (
     <div className="start-date">
       <p className="day">{dayOfWeek}</p>
-      <p className="date">
-        {day} {monthName}
-      </p>
+      <p className="date">{`${day} ${monthName}`}</p>
     </div>
   );
 };
 
-const EventCardsListingView = ({ items, isEditMode, token }) => {
-  const goToContact = (contactInfo) =>
-    contactInfo.includes('@') ? `mailto:${contactInfo}` : contactInfo;
-
-  const getEventUrl = (item) => item.event_url || item['@id'];
+const EventCard = ({ item, isEditMode }) => (
+  <div className="u-item listing-item simple-listing-item" key={item.UID}>
+    <div className="wrapper">
+      <Card fluid>
+        <Card.Content>
+          <Grid stackable columns={12}>
+            <Grid.Column width={2}>
+              {item?.start && <StartDate start={item.start} />}
+            </Grid.Column>
+            <Grid.Column width={10}>
+              <div className="event-details">
+                <h3 className="listing-header">
+                  <UniversalLink href={getEventUrl(item)}>
+                    {item.title}
+                  </UniversalLink>
+                </h3>
+                <EventDetails item={item} isEditMode={isEditMode} />
+              </div>
+            </Grid.Column>
+          </Grid>
+        </Card.Content>
+      </Card>
+    </div>
+  </div>
+);
+
+const EventDetails = ({ item, isEditMode }) => (
+  <>
+    {item?.start && (
+      <div className="listing-body-dates">
+        <span className="event-date">
+          <Icon className="ri-calendar-line" />
+          <When
+            whole_day
+            start={item.start}
+            end={item.end}
+            open_end={item.open_end}
+          />
+        </span>
+      </div>
+    )}
+    {item?.location && (
+      <div className="listing-body-dates">
+        <span className="event-date">
+          <Icon className="map marker alternate" />
+          {item.location}
+        </span>
+      </div>
+    )}
+    {item?.description && (
+      <p className="listing-description">{item.description}</p>
+    )}
+    <BottomInfo item={item} isEditMode={isEditMode} />
+  </>
+);
+
+const BottomInfo = ({ item, isEditMode }) => {
+  const { '@type': itemType, event_url, subjects, contact_email } = item || {};
+  const isCcaEventType = itemType === 'cca-event';
+  const isExternal = event_url && !event_url.includes(config.settings.apiPath);
 
   return (
-    <div className="ui fluid eventCards">
-      {items.map((item, index) => (
-        <div className="u-item listing-item simple-listing-item" key={item.UID}>
-          <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">
-                        <UniversalLink href={getEventUrl(item)}>
-                          {item.title}
-                        </UniversalLink>
-                      </h3>
-                      {!!item.start && (
-                        <div className="listing-body-dates">
-                          <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>
-                      )}
-                      {!!item.location && (
-                        <div className="listing-body-dates">
-                          <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}>
-                            <FormattedMessage
-                              id="Climate-ADAPT page for this event"
-                              defaultMessage="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={goToContact(item.contact_email)}
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {item.contact_email}
-                              </a>
-                            </div>
-                          </>
-                        )}
-                      </div>
-                    </div>
-                  </Grid.Column>
-                </Grid>
-              </Card.Content>
-            </Card>
+    <>
+      {(!isExternal || isCcaEventType) && (
+        <div className="event-organisation">
+          <FormattedMessage
+            id="Organised by EEA"
+            defaultMessage="Organised by EEA"
+          />
+          <Image
+            className="eea-logo"
+            src={eeaLogo}
+            alt="European Environment Agency"
+            title="European Environment Agency"
+          />
+        </div>
+      )}
+      <div className="bottom-info">
+        {subjects && subjects.length > 0 && (
+          <div className="subjects">
+            {subjects.map((tag) => (
+              <Label key={tag} size="small">
+                {tag}
+              </Label>
+            ))}
           </div>
+        )}
+
+        <div className="source">
+          <ConditionalLink item={item} condition={!isEditMode}>
+            <FormattedMessage
+              id="Climate-ADAPT page for this event"
+              defaultMessage="Climate-ADAPT page for this event"
+            />
+          </ConditionalLink>
         </div>
+        {contact_email && (
+          <div className="email-info">
+            <Icon name="mail" />
+            <a
+              className="contact_email"
+              href={goToContact(contact_email)}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {contact_email}
+            </a>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+const EventCardsListingView = ({ items, isEditMode }) => {
+  return (
+    <div className="ui fluid eventCards">
+      {items.map((item) => (
+        <EventCard key={item.UID} item={item} isEditMode={isEditMode} />
       ))}
     </div>
   );

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

@@ -1,3 +1,8 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
 // Organisation Cards Listing
 div.organisationCards {
   div.card.u-card {
@@ -46,23 +51,31 @@ div.indicatorCards {
 }
 
 // Event Cards Listing
-div.eventCards {
-  div.simple-listing-item {
-    border-bottom: 1px solid #ddd !important;
+.eventCards {
+  .u-item.listing-item.simple-listing-item {
+    border-bottom: 1px solid #ddd;
   }
 
-  a {
-    color: #006bb8 !important;
+  .u-item.listing-item a {
+    color: @linkColor !important;
   }
 
-  div.start-date {
-    max-width: 80px;
-
+  .start-date {
     .day {
-      border-bottom: 3px solid #ef7000;
-      color: #ef7000;
+      position: relative;
+      color: @ccaOrangeColor;
       font-size: 2.5em;
       font-weight: 900;
+
+      &:after {
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        width: 80px;
+        height: 3px;
+        background-color: @ccaOrangeColor;
+        content: '';
+      }
     }
 
     .date {
@@ -71,15 +84,14 @@ div.eventCards {
     }
   }
 
-  div.bottom-info {
+  .bottom-info {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-start;
+    gap: 1em;
 
     .sep {
-      position: relative;
-      top: -2px;
       color: #ddd;
     }
 
@@ -89,15 +101,33 @@ div.eventCards {
       justify-content: flex-start;
     }
 
-    div.subjects {
+    .subjects {
       .label {
-        margin-right: 0.3em;
-        margin-bottom: 0.3em;
+        padding: 5px 7px;
+        margin-right: 0.5em;
         background: #eee;
         color: #3d5265;
       }
     }
   }
+
+  .u-item.listing-item {
+    .ui.image.eea-logo {
+      width: 100px;
+      max-width: none;
+      height: 45px;
+      object-fit: initial;
+      object-position: unset;
+    }
+
+    .event-organisation {
+      display: flex;
+      align-items: center;
+      margin: 1em 0;
+      gap: 0.5em;
+      // flex-direction: column;
+    }
+  }
 }
 
 .dropdown.listing {