Merge pull request #84 from eea/develop

Release

CHANGELOG.md

@@ -4,6 +4,15 @@ 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).
 
+### [7.0.0](https://github.com/eea/volto-listing-block/compare/6.2.0...7.0.0) - 28 November 2023
+
+#### :rocket: New Features
+
+- feat: add an image widget so you can upload images in teaser - refs #258136 [dobri1408 - [`1cda268`](https://github.com/eea/volto-listing-block/commit/1cda2681a0fb5b410b2bc8fb21c7955cacfd8403)]
+
+#### :hammer_and_wrench: Others
+
+- Release 7.0.0 [Alin Voinea - [`81d5bda`](https://github.com/eea/volto-listing-block/commit/81d5bda34ce98bd88c8e7ab2be9c8ee45e0d8b33)]
 ### [6.2.0](https://github.com/eea/volto-listing-block/compare/6.1.0...6.2.0) - 24 November 2023
 
 #### :bug: Bug Fixes

cypress/e2e/01-listing-block-basics.cy.js

@@ -565,7 +565,6 @@ describe('Blocks Tests', () => {
     });
     cy.get('.item div[role="textbox"]').click({ force: true }).type('test');
 
-    cy.get;
     cy.get('#field-assetType .react-select__control').click({ force: true });
     cy.get('#field-assetType .react-select__option')
       .contains('Image')
@@ -598,7 +597,7 @@ describe('Blocks Tests', () => {
 
     cy.get('#field-theme').click({ force: true }).type('Test Theme');
   });
-  it('Add Block: Teaser', () => {
+  it('Add Block: teaserGrid', () => {
     // Change page title
     cy.get('[contenteditable=true]').first().click();
     cy.get('[contenteditable=true]').first().clear();
@@ -614,7 +613,17 @@ describe('Blocks Tests', () => {
     cy.get('.blocks-chooser .button.teaser').click({
       force: true,
     });
-
+    cy.get('#toolbar-save').click();
+    cy.get('.toolbar-actions .edit').click();
+    cy.get('.block-editor-teaser').click();
+    cy.get('.ui.buttons').first().click();
+    cy.get('.block.teaser .ui.input input[type="text"]')
+      .click()
+      .type('some random link');
+    cy.get('.block.teaser .ui.buttons .cancel').click();
+    cy.get('.block.teaser .ui.input input[type="text"]').type(
+      `https://github.com/plone/volto/raw/main/logos/volto-colorful.png{enter}`,
+    );
     cy.get(
       '.ui.form #blockform-fieldset-default .field-wrapper-title input#field-title',
     )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-listing-block",
-  "version": "6.2.0",
+  "version": "7.0.0",
   "description": "@eeacms/volto-listing-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/blocks/Listing/layout-templates/NewList.test.jsx

@@ -0,0 +1,7 @@
+import NewList from './NewsList';
+
+describe('Test New List', () => {
+  it('Given an object/object, p.restapi title/token', () => {
+    expect(<NewList items={[]} />).toMatchSnapshot();
+  });
+});

src/blocks/Listing/layout-templates/__snapshots__/NewList.test.jsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test New List Given an object/object, p.restapi title/token 1`] = `
+<CustomNewsListTemplate
+  items={Array []}
+/>
+`;

src/blocks/Teaser/Card.jsx

@@ -1,41 +1,66 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { omit } from 'lodash';
-import { Message } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
-
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
-
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-
-const messages = defineMessages({
-  PleaseChooseContent: {
-    id: 'Please choose an existing content as source for this element',
-    defaultMessage:
-      'Please choose an existing content as source for this element',
-  },
-});
+import ImageWidget from './ImageWidget';
+import { isInternalURL } from '@plone/volto/helpers';
+import '@eeacms/volto-listing-block/less/teaser-cards.less';
 
 const TeaserCardTemplate = (props) => {
-  const { data, isEditMode, ...rest } = props;
-  const intl = useIntl();
+  const {
+    data,
+    isEditMode,
+    onChangeBlock,
+    onSelectBlock,
+    block,
+    ...rest
+  } = props;
   const item = data.href?.[0];
 
-  return item ? (
+  const modelatePreviewImage = (data) => {
+    if (!data.preview_image) return {};
+    return {
+      preview_image_url:
+        typeof data.preview_image === 'string' &&
+        !isInternalURL(data.preview_image)
+          ? data.preview_image
+          : '',
+      preview_image: Array.isArray(data.preview_image)
+        ? data.preview_image
+        : [
+            typeof data.preview_image === 'string'
+              ? {
+                  '@id': data.preview_image,
+                  url: data.preview_image,
+                  title: data.preview_image,
+                }
+              : data.preview_image,
+          ],
+    };
+  };
+
+  return item || data.preview_image ? (
     <UniversalCard
       isEditMode={isEditMode}
       {...rest}
-      {...data}
+      {...{
+        ...data,
+        ...modelatePreviewImage(data),
+      }}
       item={{ ...(item || {}), ...omit(data, ['@type']) }}
       itemModel={data.itemModel || {}}
     />
   ) : isEditMode ? (
-    <Message>
-      <div className="grid-teaser-item placeholder">
-        <img src={imageBlockSVG} alt="" />
-        <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
-      </div>
-    </Message>
+    <ImageWidget
+      block={block}
+      onSelectBlock={onSelectBlock}
+      onChange={(e, id) => {
+        onChangeBlock(block, {
+          ...data,
+          preview_image: typeof id === 'string' ? id : id?.['@id'],
+        });
+      }}
+    />
   ) : null;
 };