@eeacms/volto-clms-theme 1.0.76 → 1.0.79

package/src/components/Blocks/CclHomeUsersBlock/CclHomeUsersBlockEdit.jsx

@@ -2,88 +2,12 @@ import './styles.less';
 
 import { CardBlockSchema, HomeUsersSchema } from './HomeUsersSchema';
 /** upload image */
-import { Dimmer, Image, Label, Loader, Message } from 'semantic-ui-react';
-import { Icon, InlineForm, SidebarPortal } from '@plone/volto/components';
+import { InlineForm, SidebarPortal } from '@plone/volto/components';
 import React, { useState } from 'react';
-import { connect, useDispatch } from 'react-redux';
-import { defineMessages, useIntl } from 'react-intl';
 import { emptyCard, getPanels } from '../utils';
-import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 
-import { compose } from 'redux';
-import { createContent } from '@plone/volto/actions';
-import editingSVG from '@plone/volto/icons/editing.svg';
 import { isEmpty } from 'lodash';
-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',
-  },
-});
-
-function 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,
-        },
-      }),
-    );
-  });
-}
-
-function onChangeCardBlockImage(
-  onChangeBlock,
-  block,
-  data,
-  selectedCardBlock,
-  imageValue,
-) {
-  onChangeBlock(block, {
-    ...data,
-    customCards: {
-      ...data.customCards,
-      blocks: {
-        ...data.customCards.blocks,
-        [selectedCardBlock]: {
-          ...data.customCards.blocks[selectedCardBlock],
-          image: imageValue,
-        },
-      },
-    },
-  });
-}
-
-function isSelected(selected, uid, selectedCardBlock) {
-  return selected && uid === selectedCardBlock;
-}
+import CclImageEditor from '@eeacms/volto-clms-theme/components/CclImageEditor/CclImageEditor';
 
 function isBlockEdit(selected, selectedCardBlock) {
   return selected && selectedCardBlock === -1;
@@ -93,107 +17,16 @@ function isCardEdit(selected, blocks, selectedCardBlock) {
   return selected && blocks && selectedCardBlock !== -1;
 }
 
-function 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 UploadingDimmer = ({ uid, selectedCardBlock, uploading, intl }) => {
-  return uid === selectedCardBlock && uploading ? (
-    <Dimmer active>
-      <Loader indeterminate>
-        {intl.formatMessage(messages.uploadingFile)}
-      </Loader>
-    </Dimmer>
-  ) : (
-    <></>
-  );
-};
-
-const ImageEditor = ({
-  editable,
-  pathname,
-  setUploading,
-  dispatch,
-  onChangeBlock,
-  block,
-  data,
-  selectedCardBlock,
-  openObjectBrowser,
-}) => {
-  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>
-    )
-  );
-};
-
 const CclHomeUsersBlockEdit = ({
   block,
   data,
   onChangeBlock,
   selected,
   editable,
-  request,
-  content,
   setSidebarTab,
   openObjectBrowser,
   pathname,
 }) => {
-  const intl = useIntl();
-
   const properties = isEmpty(data?.customCards?.blocks)
     ? emptyCard(4)
     : data.customCards;
@@ -213,27 +46,6 @@ const CclHomeUsersBlockEdit = ({
   }, []);
 
   const [selectedCardBlock, setSelectedCardBlock] = useState(-1);
-  const [uploading, setUploading] = useState(false);
-  const dispatch = useDispatch();
-  React.useEffect(() => {
-    if (!__SERVER__) {
-      setUploading(false);
-    }
-    if (!selected) {
-      setSelectedCardBlock(-1);
-    }
-  }, [selected]);
-
-  React.useEffect(() => {
-    if (request.loaded && !request.loading) {
-      setUploading(false);
-      onChangeCardBlockImage(onChangeBlock, block, data, selectedCardBlock, {
-        url: flattenToAppURL(content['@id']),
-        alt: content?.image?.filename,
-      });
-    }
-    /* eslint-disable-next-line */
-  }, [request]);
 
   return (
     <>
@@ -264,100 +76,19 @@ const CclHomeUsersBlockEdit = ({
             >
               <div className="card-line">
                 <div className="card-image">
-                  {panel.image?.url ? (
-                    <>
-                      {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={`${panel.image.url}/@@images/image`}
-                        />
-                        {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}
-                            dispatch={dispatch}
-                            onChangeBlock={onChangeBlock}
-                            block={block}
-                            data={data}
-                            selectedCardBlock={selectedCardBlock}
-                            openObjectBrowser={openObjectBrowser}
-                          />
-                        </center>
-                      </Message>
-                    </div>
-                  )}
+                  <CclImageEditor
+                    block={block}
+                    data={data}
+                    editable={editable}
+                    imageUrl={panel?.image?.url}
+                    onChangeBlock={onChangeBlock}
+                    openObjectBrowser={openObjectBrowser}
+                    pathname={pathname}
+                    selected={selected}
+                    selectedCardBlock={selectedCardBlock}
+                    setSelectedCardBlock={setSelectedCardBlock}
+                    uid={uid}
+                  />
                 </div>
                 <div className={'card-text'}>
                   <div className="card-title">{panel?.title}</div>
@@ -412,12 +143,4 @@ const CclHomeUsersBlockEdit = ({
     </>
   );
 };
-export default compose(
-  connect(
-    (state) => ({
-      request: state.content.create,
-      content: state.content.data,
-    }),
-    { createContent },
-  ),
-)(CclHomeUsersBlockEdit);
+export default CclHomeUsersBlockEdit;

package/src/components/Blocks/customBlocks.js

@@ -31,8 +31,6 @@ import { ARCGIS_BLOCK } from '@eeacms/volto-arcgis-block/constants';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
 import CclButtonBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclButtonBlock/CclButtonBlockEdit';
 import CclButtonBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclButtonBlock/CclButtonBlockView';
-import CclCardBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclCardBlock/CclCardBlockEdit';
-import CclCardBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclCardBlock/CclCardBlockView';
 import CclCardContainerBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclCardContainerBlock/CclCardContainerBlockEdit';
 import CclCardContainerBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclCardContainerBlock/CclCardContainerBlockView';
 import CclContextNavigationBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclContextNavigationBlock/CclContextNavigationBlockEdit';
@@ -58,7 +56,6 @@ import TextLinkCarouselEdit from '@eeacms/volto-clms-theme/components/Blocks/Ccl
 import TextLinkCarouselView from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView';
 import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionView';
 import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
-import cardSVG from '@plone/volto/icons/indent.svg';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import customIdFieldSchema from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/customIdFieldSchema';
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -83,6 +80,7 @@ function listingVariation(id, isDefault, title, template, isWO = false) {
     id: id,
     isDefault: isDefault,
     title: title,
+    templateID: template,
     template: isWO
       ? CclListingWorkOpportunities
       : VariationHOC(CclListingCards, template),
@@ -283,22 +281,6 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
-  cardBlock: {
-    id: 'cardBlock', // The name (id) of the block
-    title: 'Card Block', // The display name of the block
-    icon: cardSVG, // The icon used in the block chooser
-    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
-    view: CclCardBlockView, // The view mode component
-    edit: CclCardBlockEdit, // The edit mode component
-    restricted: false, // If the block is restricted, it won't show in the chooser
-    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
-    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
-    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
-    security: {
-      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
-      view: [], // Future proof (not implemented yet) view user role(s)
-    },
-  },
   search: {
     ...config.blocks.blocksConfig.search,
     variations: [