@eeacms/volto-cca-policy 0.2.96 → 0.2.98

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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.2.98](https://github.com/eea/volto-cca-policy/compare/0.2.97...0.2.98) - 30 January 2025
+
+#### :bug: Bug Fixes
+
+- fix: date time widget styling in metadata block [kreafox - [`67aad7f`](https://github.com/eea/volto-cca-policy/commit/67aad7f5cdfe397555417550afb05308346caa13)]
+
+### [0.2.97](https://github.com/eea/volto-cca-policy/compare/0.2.96...0.2.97) - 27 January 2025
+
+#### :rocket: New Features
+
+- feat(widget): Add image download option for PromotionalImageWidget - refs #283317 [kreafox - [`cc9b1ab`](https://github.com/eea/volto-cca-policy/commit/cc9b1ab4b79fcc92ea3d555cbc9b9f17298a147c)]
+
+#### :nail_care: Enhancements
+
+- change(view): remove last modified date from DB items, refactoring, cleanup - refs  #283449 [kreafox - [`bb3b60a`](https://github.com/eea/volto-cca-policy/commit/bb3b60aae64ac21d22ad391f60a40a9b226ee1fe)]
+
+#### :hammer_and_wrench: Others
+
+- test: Fix issue reported by sonarqube [kreafox - [`78dca60`](https://github.com/eea/volto-cca-policy/commit/78dca60618339183dc08bb70cb96e2e35d370b5c)]
+- Add PromotionalImageWidget tests - refs #283317 [kreafox - [`8d74e37`](https://github.com/eea/volto-cca-policy/commit/8d74e37bebd468feaa93b2e468e742a18f7deefa)]
 ### [0.2.96](https://github.com/eea/volto-cca-policy/compare/0.2.95...0.2.96) - 24 January 2025
 
 #### :nail_care: Enhancements

package/package.json

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

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

@@ -34,6 +34,7 @@ describe('AdaptationOptionView', () => {
         },
       ],
       websites: ['https://my-website.com'],
+      cca_published: '2022-06-24T12:52:50+00:00',
       source: {
         'content-type': 'text/html',
         data: '<p>Some text</p>',

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

@@ -26,6 +26,7 @@ describe('CaseStudyView', () => {
     const content = {
       title: 'CaseStudyView',
       cca_gallery: [],
+      cca_published: '2022-06-24T12:52:50+00:00',
       geochars:
         '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
     };

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

@@ -37,6 +37,7 @@ describe('DatabaseItemView', () => {
           '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
         encoding: 'utf-8',
       },
+      publication_date: '2022-06-24',
       geochars:
         '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
       keywords: ['keyword 1', 'keyword 2'],

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

@@ -25,6 +25,7 @@ describe('ProjectView', () => {
   it('should render the component', () => {
     const content = {
       title: 'My ProjectView',
+      cca_published: '2022-06-24T12:52:50+00:00',
       geochars:
         '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
     };

package/src/components/theme/Widgets/PromotionalImageWidget.jsx

@@ -0,0 +1,238 @@
+// Original: https://github.com/plone/volto/blob/16.x.x/src/components/manage/Widgets/FileWidget.jsx
+
+/**
+ * FileWidget component.
+ * @module components/manage/Widgets/FileWidget
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { readAsDataURL } from 'promise-file-reader';
+import { injectIntl } from 'react-intl';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import loadable from '@loadable/component';
+import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+
+const imageMimetypes = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/jpg',
+  'image/gif',
+  'image/svg+xml',
+];
+const Dropzone = loadable(() => import('react-dropzone'));
+
+const messages = defineMessages({
+  releaseDrag: {
+    id: 'Drop files here ...',
+    defaultMessage: 'Drop files here ...',
+  },
+  editFile: {
+    id: 'Drop file here to replace the existing file',
+    defaultMessage: 'Drop file here to replace the existing file',
+  },
+  fileDrag: {
+    id: 'Drop file here to upload a new file',
+    defaultMessage: 'Drop file here to upload a new file',
+  },
+  replaceFile: {
+    id: 'Replace existing file',
+    defaultMessage: 'Replace existing file',
+  },
+  addNewFile: {
+    id: 'Choose a file',
+    defaultMessage: 'Choose a file',
+  },
+});
+
+/**
+ * FileWidget component class.
+ * @function FileWidget
+ * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  widget: 'file',
+ * }
+ * ```
+ * or:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  type: 'object',
+ * }
+ * ```
+ *
+ */
+const FileWidget = (props) => {
+  const { id, value, onChange, isDisabled } = props;
+  const [fileType, setFileType] = React.useState(false);
+  const intl = useIntl();
+
+  React.useEffect(() => {
+    if (value && imageMimetypes.includes(value['content-type'])) {
+      setFileType(true);
+    }
+  }, [value]);
+
+  const imgsrc = value?.download
+    ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
+    : value?.data
+    ? `data:${value['content-type']};${value.encoding},${value.data}`
+    : null;
+
+  /**
+   * Drop handler
+   * @method onDrop
+   * @param {array} files File objects
+   * @returns {undefined}
+   */
+  const onDrop = (files) => {
+    const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
+    readAsDataURL(file).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      onChange(id, {
+        data: fields[3],
+        encoding: fields[2],
+        'content-type': fields[1],
+        filename: file.name,
+      });
+    });
+
+    let reader = new FileReader();
+    reader.onload = function () {
+      const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
+      if (imageMimetypes.includes(fields[1])) {
+        setFileType(true);
+        let imagePreview = document.getElementById(`field-${id}-image`);
+        imagePreview.src = reader.result;
+      } else {
+        setFileType(false);
+      }
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Dropzone onDrop={onDrop}>
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <div className="file-widget-dropzone" {...getRootProps()}>
+            {isDragActive && <Dimmer active></Dimmer>}
+            {fileType ? (
+              <Image
+                className="image-preview"
+                id={`field-${id}-image`}
+                size="small"
+                src={imgsrc}
+              />
+            ) : (
+              <div className="dropzone-placeholder">
+                {isDragActive ? (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.releaseDrag)}
+                  </p>
+                ) : value ? (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.editFile)}
+                  </p>
+                ) : (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.fileDrag)}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <label className="label-file-widget-input">
+              {value
+                ? intl.formatMessage(messages.replaceFile)
+                : intl.formatMessage(messages.addNewFile)}
+            </label>
+            <input
+              {...getInputProps({
+                type: 'file',
+                style: { display: 'none' },
+              })}
+              id={`field-${id}`}
+              name={id}
+              type="file"
+              disabled={isDisabled}
+            />
+          </div>
+        )}
+      </Dropzone>
+
+      {value && value.download && (
+        <a
+          className="image-download-btn"
+          href={flattenToAppURL(value.download)}
+          download={value.filename || 'download'}
+        >
+          Download image
+        </a>
+      )}
+      <div className="field-file-name">
+        {value && value.filename}
+        {value && (
+          <Button
+            type="button"
+            icon
+            basic
+            className="delete-button"
+            aria-label="delete file"
+            disabled={isDisabled}
+            onClick={() => {
+              onChange(id, null);
+              setFileType(false);
+            }}
+          >
+            <Icon name={deleteSVG} size="20px" />
+          </Button>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FileWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.shape({
+    '@type': PropTypes.string,
+    title: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+FileWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+};
+
+export default injectIntl(FileWidget);

package/src/components/theme/Widgets/PromotionalImageWidget.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Provider } from 'react-intl-redux';
+import { render, waitFor } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+
+import FileWidget from './PromotionalImageWidget';
+
+jest.spyOn(global.Date, 'now').mockImplementation(() => '0');
+
+const mockStore = configureStore();
+
+describe('FileWidget', () => {
+  test('renders an empty file widget component', async () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <FileWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+        />
+      </Provider>,
+    );
+
+    await waitFor(() => {});
+    expect(container).toMatchSnapshot();
+  });
+  test('renders a file widget component with value', async () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <FileWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+          value={{
+            download: 'http://myfile',
+            'content-type': 'image/png',
+            filename: 'myfile',
+            encoding: '',
+          }}
+        />
+      </Provider>,
+    );
+
+    await waitFor(() => {});
+    expect(container).toMatchSnapshot();
+  });
+  test('renders a file widget component with value in raw data', async () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <FileWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+          value={{
+            data: 'oiweurtksdgfjaslfqw9523563456',
+            'content-type': 'image/png',
+            filename: 'myfile',
+            encoding: 'base64',
+          }}
+        />
+      </Provider>,
+    );
+
+    await waitFor(() => {});
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/helpers/Constants.jsx

@@ -542,4 +542,5 @@ export const EU_COUNTRIES = [
   'SK',
   'TR',
   'XK',
+  'GB',
 ];

package/src/helpers/Utils.jsx

@@ -254,64 +254,34 @@ export const ReferenceInfo = (props) => {
   ) : null;
 };
 
-export const PublishedModifiedInfo = (props) => {
-  const { content } = props;
-
-  const cca_modif = content.cca_last_modified;
-  const cca_publ = content.cca_published;
+export const PublishedModifiedInfo = ({ content }) => {
+  const { cca_published, publication_date } = content;
 
-  let published = null;
-  let modified = null;
   const dateFormatOptions = {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
   };
-  if (cca_modif !== undefined) {
-    modified = new Date(cca_modif).toLocaleString('default', dateFormatOptions);
-  } else {
-    modified = new Date(content.modification_date).toLocaleString(
-      'default',
-      dateFormatOptions,
-    );
-  }
-  if (cca_publ !== undefined) {
-    published = new Date(cca_publ).toLocaleString('default', dateFormatOptions);
-  } else {
-    published = new Date(content.publication_date).toLocaleString(
-      'default',
-      dateFormatOptions,
-    );
-  }
 
-  // TODO fix wrong information for some cases. Test for each content type.
-  return (
-    <div className="published-modified-info">
+  const published = new Date(cca_published || publication_date).toLocaleString(
+    'default',
+    dateFormatOptions,
+  );
+
+  return published ? (
+    <div className="published-info">
       <p>
-        <span>
-          <strong>
-            <FormattedMessage
-              id="Published in Climate-ADAPT"
-              defaultMessage="Published in Climate-ADAPT"
-            />
-          </strong>
-          &nbsp;
-          {published}
-        </span>
-        <span> &nbsp; - &nbsp; </span>
-        <span>
-          <strong>
-            <FormattedMessage
-              id="Last Modified in Climate-ADAPT"
-              defaultMessage="Last Modified in Climate-ADAPT"
-            />
-          </strong>
-          &nbsp;
-          {modified}
-        </span>
+        <strong>
+          <FormattedMessage
+            id="Published in Climate-ADAPT"
+            defaultMessage="Published in Climate-ADAPT"
+          />
+        </strong>
+        {': '}
+        {published}
       </p>
     </div>
-  );
+  ) : null;
 };
 
 export const DocumentsList = (props) => {

package/src/index.js

@@ -21,6 +21,7 @@ import DatabaseItemView from './components/theme/Views/DatabaseItemView';
 
 import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
 import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
+import PromotionalImageWidget from './components/theme/Widgets/PromotionalImageWidget';
 import MigrationButtons from './components/MigrationButtons';
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
 import ClusterHorizontalCardItem from './components/Result/ClusterHorizontalCardItem';
@@ -396,6 +397,7 @@ const applyConfig = (config) => {
   // Custom widgets
   config.widgets.id.geochars = GeocharsWidget;
   config.widgets.id.geolocation = GeolocationWidget;
+  config.widgets.id.promotional_image = PromotionalImageWidget;
 
   if (config.widgets.views?.widget) {
     config.widgets.views.id.rast_steps = RASTWidgetView;

package/theme/globals/site.overrides

@@ -199,3 +199,41 @@ body.subsite {
 iframe {
   border: none;
 }
+
+.label-file-widget-input {
+  font-weight: bold;
+}
+
+.image-download-btn {
+  display: inline-block;
+  padding: 7px 23px;
+  border: 2px solid #007eb1;
+  margin-top: 10px;
+  border-radius: 10px;
+  color: #007eb1;
+  cursor: pointer;
+  opacity: 0.8;
+  max-width: max-content;
+  font-weight: bold;
+}
+
+.block.metadata,
+.block.metadata-section {
+  .inline.field .wide.column {
+    .date-time-widget-wrapper {
+      .ui.input {
+        width: auto;
+        vertical-align: middle;
+
+        input {
+          height: 60px;
+          padding: 0.75em 0;
+          border-width: 0 0 0.0625rem 0;
+          border-radius: 0;
+
+          font-size: 1em;
+        }
+      }
+    }
+  }
+}

package/theme/globals/views.less

@@ -38,7 +38,7 @@ div.geochars-field {
   float: right;
 }
 
-.published-modified-info {
+.published-info {
   margin: 2em 0;
   font-size: 0.8em;
 }