@eeacms/volto-clms-theme 1.0.76 → 1.0.77

package/src/components/CclImageEditor/CclImageEditor.jsx

@@ -0,0 +1,316 @@
+import './styles.less';
+
+// import { CardBlockSchema, HomeUsersSchema } from './HomeUsersSchema';
+/** upload image */
+import { Dimmer, Image, Label, Loader, Message } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+
+import { createContent, getContent } from '@plone/volto/actions';
+import editingSVG from '@plone/volto/icons/editing.svg';
+import navSVG from '@plone/volto/icons/nav.svg';
+import { readAsDataURL } from 'promise-file-reader';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+
+const messages = defineMessages({
+  uploadImage: {
+    id: 'Upload image',
+    defaultMessage: 'Upload or select an image',
+  },
+  uploadingFile: {
+    id: 'Uploading file',
+    defaultMessage: 'Uploading file',
+  },
+  removeImage: {
+    id: 'Remove image',
+    defaultMessage: 'Remove image',
+  },
+  editImage: {
+    id: 'Edit image',
+    defaultMessage: 'Edit',
+  },
+});
+
+const onChangeCardBlockImage = (
+  onChangeBlock,
+  block,
+  data,
+  selectedCardBlock,
+  imageValue,
+) => {
+  onChangeBlock(block, {
+    ...data,
+    customCards: {
+      ...data.customCards,
+      blocks: {
+        ...data.customCards.blocks,
+        [selectedCardBlock]: {
+          ...data.customCards.blocks[selectedCardBlock],
+          image: imageValue,
+        },
+      },
+    },
+  });
+};
+
+const onUploadImage = (pathname, e, setUploading, dispatch) => {
+  e.stopPropagation();
+  e.preventDefault();
+  const target = e.target;
+  const file = target.files[0];
+  readAsDataURL(file).then((data) => {
+    setUploading(true);
+    const fields = data.match(/^data:(.*);(.*),(.*)$/);
+    dispatch(
+      createContent(getBaseUrl(pathname), {
+        '@type': 'Image',
+        image: {
+          data: fields[3],
+          encoding: fields[2],
+          'content-type': fields[1],
+          filename: file.name,
+        },
+      }),
+    ).then((response) => {
+      dispatch(getContent(getBaseUrl(pathname)));
+    });
+  });
+};
+
+const ImageEditor = ({
+  editable,
+  pathname,
+  setUploading,
+  uploading,
+  dispatch,
+  onChangeBlock,
+  block,
+  data,
+  selected,
+  selectedCardBlock,
+  setSelectedCardBlock,
+  openObjectBrowser,
+  request,
+  content,
+}) => {
+  React.useEffect(() => {
+    if (!__SERVER__) {
+      setUploading(false);
+    }
+    if (!selected) {
+      setSelectedCardBlock(-1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected]);
+  React.useEffect(() => {
+    if (request?.loaded && !request?.loading && uploading) {
+      setUploading(false);
+      onChangeCardBlockImage(onChangeBlock, block, data, selectedCardBlock, {
+        url: flattenToAppURL(content['@id']),
+        alt: content?.image?.filename,
+      });
+    }
+    /* eslint-disable-next-line */
+  }, [request]);
+  return (
+    editable && (
+      <p>
+        <label className="file">
+          <Icon className="ui button" name={uploadSVG} size={35} />
+          <input
+            type="file"
+            onChange={(e) => onUploadImage(pathname, e, setUploading, dispatch)}
+            style={{ display: 'none' }}
+          />
+        </label>
+        <label className="file">
+          <Icon className="ui button" name={navSVG} size={35} />
+          <input
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              openObjectBrowser({
+                onSelectItem: (url, element) =>
+                  onChangeCardBlockImage(
+                    onChangeBlock,
+                    block,
+                    data,
+                    selectedCardBlock,
+                    {
+                      url: element['@id'],
+                      alt: element.title,
+                    },
+                  ),
+              });
+            }}
+            style={{ display: 'none' }}
+          />
+        </label>
+      </p>
+    )
+  );
+};
+
+function isSelected(selected, uid, selectedCardBlock) {
+  return selected && uid === selectedCardBlock;
+}
+
+const UploadingDimmer = ({ uid, selectedCardBlock, uploading, intl }) => {
+  return uid === selectedCardBlock && uploading ? (
+    <Dimmer active>
+      <Loader indeterminate>
+        {intl.formatMessage(messages.uploadingFile)}
+      </Loader>
+    </Dimmer>
+  ) : (
+    <></>
+  );
+};
+
+const handleEdit = (handleEditProps) => {
+  const {
+    selected,
+    uid,
+    selectedCardBlock,
+    setSelectedCardBlock,
+    openObjectBrowser,
+    onChangeBlock,
+    block,
+    data,
+  } = handleEditProps;
+  if (isSelected(selected, uid, selectedCardBlock)) {
+    openObjectBrowser({
+      onSelectItem: (url, element) =>
+        onChangeCardBlockImage(onChangeBlock, block, data, selectedCardBlock, {
+          url: element['@id'],
+          alt: element.title,
+        }),
+    });
+  } else {
+    setSelectedCardBlock(uid);
+  }
+};
+
+const CclImageEditor = ({
+  block,
+  data,
+  editable,
+  imageUrl,
+  onChangeBlock,
+  openObjectBrowser,
+  pathname,
+  selected,
+  selectedCardBlock,
+  setSelectedCardBlock,
+  uid,
+}) => {
+  const intl = useIntl();
+
+  const [uploading, setUploading] = useState(false);
+  const dispatch = useDispatch();
+  const request = useSelector((state) => state.content.create);
+  const content = useSelector((state) => state.content.data);
+
+  return imageUrl ? (
+    <>
+      {isSelected(selected, uid, selectedCardBlock) && (
+        <Label
+          as="a"
+          color="red"
+          pointing="below"
+          onClick={() =>
+            onChangeCardBlockImage(
+              onChangeBlock,
+              block,
+              data,
+              selectedCardBlock,
+              {},
+            )
+          }
+        >
+          {intl.formatMessage(messages.removeImage)}
+        </Label>
+      )}
+
+      <div
+        role="button"
+        tabindex="0"
+        className="ui image edit-image-container"
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          const handleEditPC = {
+            selected: selected,
+            uid: uid,
+            selectedCardBlock: selectedCardBlock,
+            setSelectedCardBlock: setSelectedCardBlock,
+            openObjectBrowser: openObjectBrowser,
+            onChangeBlock: onChangeBlock,
+            block: block,
+            data: data,
+          };
+          handleEdit(handleEditPC);
+        }}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          const handleEditPK = {
+            selected: selected,
+            uid: uid,
+            selectedCardBlock: selectedCardBlock,
+            setSelectedCardBlock: setSelectedCardBlock,
+            openObjectBrowser: openObjectBrowser,
+            onChangeBlock: onChangeBlock,
+            block: block,
+            data: data,
+          };
+          handleEdit(handleEditPK);
+        }}
+      >
+        <Image size="small" src={`${imageUrl}/@@images/image/preview`} />
+        {isSelected(selected, uid, selectedCardBlock) && (
+          <div className="edit-image">
+            <Icon className="ui" name={editingSVG} size={35} />
+            {intl.formatMessage(messages.editImage)}
+          </div>
+        )}
+      </div>
+    </>
+  ) : (
+    <div className="image-add">
+      <Message className="image-message">
+        <UploadingDimmer
+          uid={uid}
+          selectedCardBlock={selectedCardBlock}
+          uploading={uploading}
+          intl={intl}
+        />
+        <center>
+          <h4>{intl.formatMessage(messages.uploadImage)}</h4>
+          <ImageEditor
+            editable={editable}
+            pathname={pathname}
+            setUploading={setUploading}
+            uploading={uploading}
+            dispatch={dispatch}
+            onChangeBlock={onChangeBlock}
+            block={block}
+            data={data}
+            selected={selected}
+            selectedCardBlock={selectedCardBlock}
+            setSelectedCardBlock={setSelectedCardBlock}
+            openObjectBrowser={openObjectBrowser}
+            request={request}
+            content={content}
+          />
+        </center>
+      </Message>
+    </div>
+  );
+};
+
+export default CclImageEditor;

package/src/components/CclImageEditor/styles.less

@@ -0,0 +1,97 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple) '../../theme.config';
+
+@borderColor: rgba(120, 192, 215, 0.75);
+
+.block-editor-homeUsers,
+.block-editor-cardContainer {
+  .block-column .ui.block.inner {
+    .block {
+      margin-bottom: 0;
+    }
+  }
+
+  .block.homeUsers.selected::before,
+  .block.homeUsers:hover::before,
+  .block.cardContainer.selected::before,
+  .block.cardContainer:hover::before {
+    border-style: dashed;
+  }
+
+  .homeUsers-header,
+  .cardContainer-header {
+    position: absolute;
+    z-index: 3;
+    top: -1.3em;
+    left: 0;
+    width: fit-content;
+    padding: 0 1rem;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: @pageBackground;
+    color: @borderColor;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .block .card-image,
+  .block .card-image img {
+    width: 300px;
+  }
+
+  .ui.image.edit-image-container {
+    height: 12rem;
+
+    img {
+      width: 100%;
+      height: 100%;
+      -o-object-fit: cover;
+      object-fit: cover;
+    }
+  }
+
+  .card-image .edit-image-container {
+    position: relative;
+    text-align: center;
+  }
+
+  .edit-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: none !important;
+    padding: 0.5rem;
+    background-color: white;
+    border-radius: 0.2rem;
+    font-size: 0.8rem;
+    transform: translate(-50%, -50%);
+  }
+
+  .edit-image-container:hover {
+    cursor: pointer;
+
+    .edit-image {
+      display: block !important;
+    }
+
+    img {
+      opacity: 0.8;
+    }
+  }
+}
+
+.ccl-list-items .ccl-list-item .ccl-list-item-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ccl-container .slick-slider {
+  display: grid;
+}
+
+.block.selected .card-line .card-image {
+  text-align: center;
+}

package/src/components/Blocks/CclCardBlock/CardBlockSchema.js

@@ -1,44 +0,0 @@
-export const CardBlockSchema = () => ({
-  title: 'Product card block',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['title', 'image', 'description', 'href', 'cardStyle'],
-    },
-  ],
-  properties: {
-    title: {
-      title: 'Title',
-      description: 'Card title',
-      type: 'string',
-      placeholder: 'Card title here',
-    },
-    image: {
-      title: 'Card image',
-    },
-    description: {
-      title: 'Product description',
-      type: 'string',
-    },
-    href: {
-      title: 'URL',
-      description: 'Select site content or paste external url',
-      widget: 'object_browser',
-      mode: 'link',
-      selectedItemAttrs: ['Title', 'Description', '@type', '@id'],
-      allowExternals: true,
-    },
-    cardStyle: {
-      title: 'Card style',
-      choices: [
-        ['line', 'Line card'],
-        ['block', 'Block card'],
-        ['line-color', 'Colored Line card'],
-        ['event', 'Event card'],
-        ['news', 'News card'],
-      ],
-    },
-  },
-  required: ['product'],
-});

package/src/components/Blocks/CclCardBlock/CclCardBlockEdit.jsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
-
-import { SidebarPortal } from '@plone/volto/components';
-import { CardBlockSchema } from './CardBlockSchema';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-
-const CclCardBlockEdit = (props) => {
-  const { block, data, onChangeBlock, selected } = props;
-
-  let card = {
-    product: data.title,
-    description: data.description,
-    image: {
-      scales: {
-        icon: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        large: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        listing: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        mini: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        preview: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        thumb: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        tile: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-      },
-    },
-    url: data.url,
-  };
-
-  return (
-    <>
-      <div className="ccl-block-editor-header">
-        <legend
-          onClick={() => {
-            props.setSidebarTab(1);
-          }}
-          aria-hidden="true"
-        />
-      </div>
-      <CclCard type={data.cardStyle || 'line'} card={card} />
-      <SidebarPortal selected={selected}>
-        <InlineForm
-          schema={CardBlockSchema()}
-          title="Product card block"
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
-
-export default CclCardBlockEdit;

package/src/components/Blocks/CclCardBlock/CclCardBlockEdit.test.jsx

@@ -1,171 +0,0 @@
-import Enzyme, { mount } from 'enzyme';
-
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import CclCardBlockEdit from './CclCardBlockEdit';
-import { MemoryRouter } from 'react-router-dom';
-import { Provider } from 'react-intl-redux';
-import React from 'react';
-import configureStore from 'redux-mock-store';
-import renderer from 'react-test-renderer';
-
-// import { shallow } from 'enzyme';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
-
-const mockStore = configureStore();
-
-describe('CclCardBlockEdit', () => {
-  it('CclCardBlockEdit block clicks', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-    const data = {
-      title: 'example title',
-      description: 'example description',
-      image: [
-        {
-          scales: [
-            {
-              icon: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              large: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              listing: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              mini: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              preview: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              thumb: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              tile: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-            },
-          ],
-        },
-      ],
-      url: 'https://www.google.com',
-    };
-    // const component = shallow(
-    const component = mount(
-      <Provider store={store}>
-        <MemoryRouter>
-          <CclCardBlockEdit
-            data={data}
-            block="1234"
-            onChangeBlock={() => {
-              return 'test';
-            }}
-            setSidebarTab={() => {
-              return 'test';
-            }}
-          />
-        </MemoryRouter>
-      </Provider>,
-    );
-    const legend = component.find('.ccl-block-editor-header legend');
-    legend.simulate('click');
-    expect(legend).toBeDefined();
-  });
-  it('renders a CclCardBlockEdit block component', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-    const data = {
-      title: 'example title',
-      description: 'example description',
-      image: [
-        {
-          scales: [
-            {
-              icon: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              large: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              listing: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              mini: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              preview: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              thumb: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-              tile: {
-                download:
-                  'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-              },
-            },
-          ],
-        },
-      ],
-      url: 'https://www.google.com',
-    };
-    const component = renderer.create(
-      <Provider store={store}>
-        <MemoryRouter>
-          <CclCardBlockEdit
-            data={data}
-            block="1234"
-            onChangeBlock={() => {
-              return 'test';
-            }}
-            onSelectBlock={() => {
-              return 'test';
-            }}
-            onChangeField={() => {
-              return 'test';
-            }}
-            setSidebarTab={() => {
-              return 'test';
-            }}
-          />
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-});