@eeacms/volto-cca-policy 0.2.4 → 0.2.6

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

@@ -0,0 +1,226 @@
+import React from 'react';
+import {
+  HTMLField,
+  BannerTitle,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
+import { Container, Grid, Image, Segment, List } from 'semantic-ui-react';
+import {
+  PortalMessage,
+  MissionDisclaimer,
+} from '@eeacms/volto-cca-policy/components';
+
+function MissionToolView(props) {
+  const { content } = props;
+
+  return (
+    <div className="mission-item-view">
+      <BannerTitle
+        content={{ ...content, image: '' }}
+        data={{
+          info: [{ description: '' }],
+          hideContentType: true,
+          hideCreationDate: false,
+          hideModificationDate: false,
+          hidePublishingDate: false,
+          hideDownloadButton: false,
+          hideShareButton: false,
+        }}
+      />
+
+      <Container>
+        <PortalMessage content={content} />
+        <Grid columns="12">
+          <div className="row">
+            <Grid.Column
+              mobile={12}
+              tablet={12}
+              computer={8}
+              className="col-left"
+            >
+              {!!content.objective && (
+                <>
+                  <h2>Objective(s)</h2>
+                  <HTMLField value={content.objective} />
+                </>
+              )}
+
+              {!!content.short_description && (
+                <>
+                  <h2>Short description</h2>
+                  <HTMLField value={content.short_description} />
+                </>
+              )}
+
+              {!!content.free_keywords && (
+                <>
+                  <h2>Free keywords</h2>
+                  <HTMLField value={content.free_keywords} />
+                </>
+              )}
+
+              {!!content.readiness_for_use &&
+                content.readiness_for_use.length > 0 && (
+                  <>
+                    <h2>Readiness for use</h2>
+
+                    <MetadataItemList value={content.readiness_for_use} />
+                  </>
+                )}
+
+              {!!content.applications && (
+                <>
+                  <h2>Applications</h2>
+                  <HTMLField value={content.applications} />
+                </>
+              )}
+
+              {!!content.strengths_weaknesses && (
+                <>
+                  <h2>
+                    Strengths and weaknesses, comparative added value to other
+                    similar tools
+                  </h2>
+                  <HTMLField value={content.strengths_weaknesses} />
+                </>
+              )}
+
+              {!!content.input && (
+                <>
+                  <h2>Input(s)</h2>
+                  <HTMLField value={content.input} />
+                </>
+              )}
+
+              {!!content.output && (
+                <>
+                  <h3>Output(s)</h3>
+                  <HTMLField value={content.output} />
+                </>
+              )}
+
+              {!!content.output_image && (
+                <Image
+                  src={content.output_image?.scales?.large?.download}
+                  alt={content.title}
+                  style={{ margin: '2.5em 0' }}
+                />
+              )}
+
+              {!!content.replicability && (
+                <>
+                  <h2>Replicability: Cost/effort for (new) usage</h2>
+                  <HTMLField value={content.replicability} />
+                </>
+              )}
+
+              {!!content.materials && (
+                <>
+                  <h2>Materials or other support available</h2>
+                  <HTMLField value={content.materials} />
+                </>
+              )}
+
+              {!!content.website && (
+                <>
+                  <h2>Website and maintenance</h2>
+                  <HTMLField value={content.website} />
+                </>
+              )}
+
+              {!!content.contact && (
+                <>
+                  <h2>Contact</h2>
+                  <HTMLField value={content.contact} />
+                </>
+              )}
+
+              {!!content.associated_project && (
+                <>
+                  <h2>Associated project(s)</h2>
+                  <HTMLField value={content.associated_project} />
+                </>
+              )}
+            </Grid.Column>
+            <Grid.Column
+              mobile={12}
+              tablet={12}
+              computer={4}
+              className="col-right"
+            >
+              <Segment className="metadata">
+                {!!content.rast_steps && content.rast_steps.length > 0 && (
+                  <>
+                    <h5>RAST step(s) of relevance:</h5>
+                    <List>
+                      {content.rast_steps.map((step, index) => (
+                        <List.Item key={index}>{step.title}</List.Item>
+                      ))}
+                    </List>
+                  </>
+                )}
+
+                {!!content.geographical_scale &&
+                  content.geographical_scale.length > 0 && (
+                    <>
+                      <h5>Geographical scale:</h5>
+                      <MetadataItemList value={content.geographical_scale} />
+                    </>
+                  )}
+
+                {!!content.geographical_area && (
+                  <>
+                    <h5>Geographical area:</h5>
+                    <HTMLField value={content.geographical_area} />
+                  </>
+                )}
+
+                {!!content.climate_impacts &&
+                  content.climate_impacts.length > 0 && (
+                    <>
+                      <h5>Climate impacts:</h5>
+                      <MetadataItemList value={content.climate_impacts} />
+                    </>
+                  )}
+
+                {!!content.tool_language && content.tool_language.length > 0 && (
+                  <>
+                    <h5>Language(s) of the tool:</h5>
+                    <MetadataItemList value={content.tool_language} />
+                  </>
+                )}
+
+                {!!content.sectors && content.sectors.length > 0 && (
+                  <>
+                    <h5>Adaptation sectors:</h5>
+                    <MetadataItemList value={content.sectors} />
+                  </>
+                )}
+
+                {!!content.most_useful_for &&
+                  content.most_useful_for.length > 0 && (
+                    <>
+                      <h5>Most useful for:</h5>
+                      <MetadataItemList value={content.most_useful_for} />
+                    </>
+                  )}
+
+                {!!content.user_requirements &&
+                  content.user_requirements.length > 0 && (
+                    <>
+                      <h5>User requirements:</h5>
+                      <MetadataItemList value={content.user_requirements} />
+                    </>
+                  )}
+              </Segment>
+            </Grid.Column>
+          </div>
+        </Grid>
+
+        <MissionDisclaimer />
+      </Container>
+    </div>
+  );
+}
+
+export default MissionToolView;

package/src/components/theme/Views/MissionToolView.test.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import MissionToolView from './MissionToolView';
+import config from '@plone/volto/registry';
+
+config.blocks = {
+  blocksConfig: {
+    title: {
+      view: () => <div>Title Block Component</div>,
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+describe('MissionToolView', () => {
+  it('should render the component', () => {
+    const data = {
+      content: {
+        contributors: [],
+        description: 'Summary',
+        objective: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        short_description: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        free_keywords: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        readiness_for_use: [
+          {
+            title: 'Tool tested in several case studies',
+            token: 'Tool tested in several case studies',
+          },
+          {
+            title: 'Tool broadly used',
+            token: 'Tool broadly used',
+          },
+        ],
+        application: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        strengths_weaknesses: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        input: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        output: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        replicability: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        materials: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        website: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        contact: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        associated_project: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        rast_steps: [
+          {
+            title: 'Step 1. Preparing the ground for adaptation',
+            token: 'STEP_1',
+          },
+          {
+            title: 'Step 4. Assessing and selecting adaptation options',
+            token: 'STEP_4',
+          },
+        ],
+        geographical_scale: [
+          {
+            title: 'Item 1',
+            token: 'Item 1',
+          },
+          {
+            title: 'Item 2',
+            token: 'Item 2',
+          },
+        ],
+        geographical_area: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        sectors: [
+          {
+            title: 'Biodiversity',
+            token: 'BIODIVERSITY',
+          },
+          {
+            title: 'Coastal areas',
+            token: 'COASTAL',
+          },
+        ],
+        title: 'Title here',
+      },
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <MissionToolView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/helpers/ContentMetadata.jsx

@@ -1,3 +1,7 @@
+import { Fragment } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Popup, Segment } from 'semantic-ui-react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import {
   ACE_COUNTRIES,
   BIOREGIONS,
@@ -9,11 +13,10 @@ import {
   INDICATOR,
   PUBICATION_REPORT,
 } from '@eeacms/volto-cca-policy/helpers/Constants';
-import { Fragment } from 'react';
-import { Popup, Segment } from 'semantic-ui-react';
-import { isObservatoryMetadataURL } from '@eeacms/volto-cca-policy/helpers';
-import { useLocation } from 'react-router-dom';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import {
+  isObservatoryMetadataURL,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
 
 const messages = defineMessages({
   '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': {
@@ -312,27 +315,8 @@ function PublicationDateInfo(props) {
   ) : null;
 }
 
-function ItemsList(props) {
-  let { value, join } = props;
-  if (join === undefined) {
-    join = ', ';
-  }
-  if (join === '<br />') {
-    return (
-      <span>
-        {value.map((item, index) => (
-          <Fragment key={index}>
-            <span>{item.title}</span>
-            <br />
-          </Fragment>
-        ))}
-      </span>
-    );
-  }
-  return <span>{value.map((item) => item.title).join(join)}</span>;
-}
-
 function ContentMetadata(props) {
+  const intl = useIntl();
   const { content } = props;
   const {
     sectors,
@@ -353,8 +337,6 @@ function ContentMetadata(props) {
   const isObservatoryItem = isObservatoryMetadataURL(location.pathname);
   const hasGeoChars = geochars !== null || spatial_layer.length > 0;
 
-  const intl = useIntl();
-
   let date_title;
   if (type === VIDEO) {
     date_title = intl.formatMessage(messages['Date of release:']);
@@ -387,7 +369,7 @@ function ContentMetadata(props) {
                     defaultMessage="Health impact:"
                   />
                 </h5>
-                <ItemsList value={health_impacts} />
+                <MetadataItemList value={health_impacts} />
               </>
             )}
           </>
@@ -410,7 +392,7 @@ function ContentMetadata(props) {
                 defaultMessage="Key Type Measures:"
               />
             </h5>
-            <ItemsList value={key_type_measures} />
+            <MetadataItemList value={key_type_measures} />
           </>
         )}
 
@@ -422,7 +404,7 @@ function ContentMetadata(props) {
                 defaultMessage="IPCC adaptation options categories:"
               />
             </h5>
-            <ItemsList value={ipcc_category} />
+            <MetadataItemList value={ipcc_category} />
           </>
         )}
 
@@ -436,7 +418,7 @@ function ContentMetadata(props) {
                     defaultMessage="Climate impacts:"
                   />
                 </h5>
-                <ItemsList value={climate_impacts} />
+                <MetadataItemList value={climate_impacts} />
               </>
             )}
 
@@ -448,7 +430,7 @@ function ContentMetadata(props) {
                     defaultMessage="Adaptation elements:"
                   />
                 </h5>
-                <ItemsList value={elements} />
+                <MetadataItemList value={elements} />
               </>
             )}
 
@@ -457,7 +439,7 @@ function ContentMetadata(props) {
                 <h5>
                   <FormattedMessage id="Sectors:" defaultMessage="Sectors:" />
                 </h5>
-                <ItemsList value={sectors} />
+                <MetadataItemList value={sectors} />
               </>
             )}
           </>
@@ -471,7 +453,7 @@ function ContentMetadata(props) {
                 defaultMessage="Governance level:"
               />
             </h5>
-            <ItemsList value={governance_level} join="<br />" />
+            <MetadataItemList value={governance_level} join_type="<br />" />
           </>
         )}
 

package/src/helpers/Utils.jsx

@@ -482,3 +482,26 @@ export const EventDetails = (props) => {
     </>
   );
 };
+
+export const MetadataItemList = (props) => {
+  const { value, join_type } = props;
+
+  return value && value.length > 0 ? (
+    <>
+      {!join_type ? (
+        <p>{value.map((item) => item.title).join(', ')}</p>
+      ) : (
+        <>
+          {value.map((item, index) => (
+            <React.Fragment key={index}>
+              <span>{item.title}</span>
+              {index !== value.length - 1 && (
+                <span dangerouslySetInnerHTML={{ __html: join_type }} />
+              )}
+            </React.Fragment>
+          ))}
+        </>
+      )}
+    </>
+  ) : null;
+};

package/src/helpers/index.js

@@ -15,6 +15,7 @@ export {
   ItemLogo,
   SubjectTags,
   EventDetails,
+  MetadataItemList,
 } from './Utils';
 export { default as ContentMetadata } from './ContentMetadata';
 export {

package/src/index.js

@@ -11,6 +11,8 @@ import C3SIndicatorView from './components/theme/Views/C3SIndicatorView';
 import DatabaseItemView from './components/theme/Views/DatabaseItemView';
 import MissionFundingCCAView from './components/theme/Views/MissionFundingCCAView';
 
+import { MissionToolView } from '@eeacms/volto-cca-policy/components';
+
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
 
 import ccaLogo from '@eeacms/volto-cca-policy/../theme/assets/images/Header/climate-adapt-logo.svg';
@@ -287,6 +289,7 @@ const applyConfig = (config) => {
     'eea.climateadapt.adaptationoption': AdaptationOptionView,
     'News Item': NewsItemView,
     mission_funding_cca: MissionFundingCCAView,
+    mission_tool: MissionToolView,
   };
 
   config.views.layoutViewsNamesMapping.view_cca_event = 'CCA Event View';

package/theme/elements/list.variables

@@ -6,4 +6,4 @@
          View
 --------------------*/
 
-@listFontWeight: 500;
+@listFontWeight: 400;

package/theme/globals/mission.less

@@ -1,5 +1,20 @@
 /* Mission subsite */
 
+.mission-item-view {
+  .ui.segment.metadata {
+    border: none;
+    background-color: #f9f9f9;
+
+    h5 {
+      margin: 1em 0 0.5em 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
 body.view-viewview.contenttype-subsite.section-mission
   .block.__grid.teaserGrid.centered
   h2 {

package/src/components/theme/Views/styles.less

@@ -1,7 +0,0 @@
-// MissionFundingCCAView
-div.col-right {
-  div.metadata {
-    padding: 10px;
-    background: #e6e7e8;
-  }
-}