@eeacms/volto-clms-theme 1.0.76 → 1.0.79

package/src/components/CclCard/CclCard.jsx

@@ -12,17 +12,39 @@ import { Icon } from '@plone/volto/components';
 
 import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
 
-const CardImage = ({ card, size = 'preview' }) => {
+const CardImage = ({ card, size = 'preview', isCustomCard }) => {
   return card?.image_field ? (
     <img
       src={`${card.getURL}/@@images/${card?.image_field}/${size}`}
       alt={card?.image?.alt || 'Placeholder'}
     />
+  ) : isCustomCard && card?.image?.url ? (
+    <img src={`${card.image.url}/@@images/image`} alt={card.image.alt} />
   ) : (
     <img src={PlaceHolder} alt={card?.image?.alt || 'Placeholder'} />
   );
 };
 
+const CardLink = ({ url, children, className, condition = true }) => {
+  function hasProtocol(protocolUrl) {
+    return (
+      protocolUrl.startsWith('https://') || protocolUrl.startsWith('http://')
+    );
+  }
+  const RenderElement = hasProtocol(url) ? 'a' : Link;
+  return !condition ? (
+    children
+  ) : hasProtocol(url) ? (
+    <RenderElement className={className} href={url}>
+      {children}
+    </RenderElement>
+  ) : (
+    <RenderElement className={className} to={url}>
+      {children}
+    </RenderElement>
+  );
+};
+
 const DocCard = ({ card, url, showEditor, children }) => {
   return (
     <>
@@ -54,12 +76,26 @@ const DocCard = ({ card, url, showEditor, children }) => {
   );
 };
 function CclCard(props) {
-  const { type, children, card, showEditor = false } = props;
+  const {
+    type,
+    children,
+    card,
+    showEditor = false,
+    CclImageEditor = null,
+    onClickImage = () => {
+      return '';
+    },
+    isCustomCard = false,
+  } = props;
   let url = '/';
   let content_type = '';
-  if (card) {
-    url = card['@id'] || card.hrerf || '/';
+  if (card && !isCustomCard) {
+    url = card['@id'] || '/';
     content_type = portal_types_labels[card['@type']] || card['@type'];
+  } else {
+    if (card?.url?.length > 0) {
+      url = card.url[0]['@id'] || '/';
+    }
   }
   const conditional_types = [
     'doc',
@@ -69,107 +105,146 @@ function CclCard(props) {
     'threeColumns',
     'globalSearch',
   ];
+  const wrapperClass =
+    'card-' + (type === 'globalSearch' ? 'doc' : type || 'line');
   return (
-    <div
-      className={'card-' + (type === 'globalSearch' ? 'doc' : type || 'line')}
+    <CardLink
+      url={url}
+      className={wrapperClass}
+      condition={type === 'block' || type === 'threeColumns'}
     >
-      {conditional_types.includes(type) ? (
-        <>
-          {type === 'doc' && (
-            <>
-              <DocCard card={card} url={url} showEditor={showEditor}>
-                {children}
-              </DocCard>
-            </>
-          )}
-          {type === 'globalSearch' && (
-            <>
-              <Label ribbon="right" color="olive">
-                {content_type}
-              </Label>
-              <DocCard card={card} url={url} showEditor={showEditor}>
-                {children}
-              </DocCard>
-            </>
-          )}
-          {(type === 'block' || type === 'threeColumns') && (
-            <>
-              <div className={`card-${type}-image`}>
-                <CardImage card={card} size={'preview'} />
-              </div>
-              <div className="card-text">
-                <div className="card-title">
-                  <Link to={url}>{card?.title || 'Card default title'}</Link>
-                </div>
-                <div className="card-description">{card?.description}</div>
-                {children}
-              </div>
-            </>
-          )}
-          {type === 'news' && (
-            <>
-              <div className="card-news-image">
-                <CardImage card={card} size={'mini'} />
-              </div>
-              <div className="card-news-text">
-                <div className="card-news-title">
-                  <Link to={url}>{card?.title || 'Card default title'}</Link>
-                </div>
-                <div className="card-news-date">
-                  {new Date(card?.effective).toLocaleString()}
+      <div
+        tabIndex="0"
+        role="button"
+        onClick={() => onClickImage()}
+        onKeyDown={() => onClickImage()}
+        className={
+          !(type === 'block' || type === 'threeColumns') && wrapperClass
+        }
+      >
+        {conditional_types.includes(type) ? (
+          <>
+            {type === 'doc' && (
+              <>
+                <DocCard card={card} url={url} showEditor={showEditor}>
+                  {children}
+                </DocCard>
+              </>
+            )}
+            {type === 'globalSearch' && (
+              <>
+                <Label ribbon="right" color="olive">
+                  {content_type}
+                </Label>
+                <DocCard card={card} url={url} showEditor={showEditor}>
+                  {children}
+                </DocCard>
+              </>
+            )}
+            {(type === 'block' || type === 'threeColumns') && (
+              <>
+                <div className={`card-${type}-image`}>
+                  {isCustomCard && CclImageEditor ? (
+                    CclImageEditor
+                  ) : (
+                    <CardImage
+                      isCustomCard={isCustomCard}
+                      card={card}
+                      size={'preview'}
+                    />
+                  )}
                 </div>
-                <p className="card-news-description">{card?.description}</p>
-              </div>
-            </>
-          )}
-          {type === 'event' && (
-            <>
-              <div className={'card-event-text'}>
-                <div className="card-event-title">
-                  <Link to={url}>{card?.title || 'Event default title'}</Link>
+                <div className="card-text">
+                  <div className="card-title">{card?.title}</div>
+                  <div className="card-description">{card?.description}</div>
+                  {children}
                 </div>
-                <div className="card-event-when">
-                  <FontAwesomeIcon icon={['far', 'calendar-alt']} />
-                  <div className="card-event-when-text">
-                    <When
-                      start={card.start}
-                      end={card.whole_day ? card.start : card.end}
-                      whole_day={card.whole_day}
+              </>
+            )}
+            {type === 'news' && (
+              <>
+                <div className="card-news-image">
+                  {isCustomCard && CclImageEditor ? (
+                    CclImageEditor
+                  ) : (
+                    <CardImage
+                      isCustomCard={isCustomCard}
+                      card={card}
+                      size={'mini'}
                     />
+                  )}
+                </div>
+                <div className="card-news-text">
+                  <div className="card-news-title">
+                    <CardLink url={url}>{card?.title}</CardLink>
+                    {/* <CardLink url={url} title={card?.title} /> */}
                   </div>
+                  <div className="card-news-date">
+                    {new Date(card?.effective).toLocaleString()}
+                  </div>
+                  <p className="card-news-description">{card?.description}</p>
                 </div>
-                {card?.location ? (
-                  <div className="card-event-where">
-                    <>
-                      <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
-                      <div className="card-event-where-text">
-                        {card?.location}
-                      </div>
-                    </>
+              </>
+            )}
+            {type === 'event' && (
+              <>
+                <div className={'card-event-text'}>
+                  <div className="card-event-title">
+                    <CardLink url={url}>{card?.title}</CardLink>
+                    {/* <CardLink url={url} title={card?.title} /> */}
+                  </div>
+                  <div className="card-event-when">
+                    <FontAwesomeIcon icon={['far', 'calendar-alt']} />
+                    <div className="card-event-when-text">
+                      <When
+                        start={card.start}
+                        end={card.whole_day ? card.start : card.end}
+                        whole_day={card.whole_day}
+                      />
+                    </div>
                   </div>
-                ) : (
-                  ''
-                )}
-                <p className="card-event-description">{card?.description}</p>
+                  {card?.location ? (
+                    <div className="card-event-where">
+                      <>
+                        <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
+                        <div className="card-event-where-text">
+                          {card?.location}
+                        </div>
+                      </>
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                  <p className="card-event-description">{card?.description}</p>
+                </div>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            <div className="card-image">
+              {isCustomCard && CclImageEditor ? (
+                CclImageEditor
+              ) : (
+                <CardImage
+                  isCustomCard={isCustomCard}
+                  card={card}
+                  size={'mini'}
+                />
+              )}
+            </div>
+            <div className={'card-text'}>
+              <div className="card-title">
+                <CardLink url={url}>{card?.title}</CardLink>
+                {/* <CardLink url={url} title={card?.title} /> */}
               </div>
-            </>
-          )}
-        </>
-      ) : (
-        <>
-          <div className="card-image">
-            <CardImage card={card} size={'mini'} />
-          </div>
-          <div className={'card-text'}>
-            <div className="card-title">
-              <Link to={url}>{card?.title || 'Card default title'}</Link>
+              <div className="card-description">{card?.description}</div>
+              {children}
             </div>
-            <div className="card-description">{card?.description}</div>
-            {children}
-          </div>
-        </>
-      )}
-    </div>
+          </>
+        )}
+      </div>
+    </CardLink>
   );
 }
 

package/src/components/CclCard/cards.less

@@ -14,6 +14,7 @@
 }
 
 .card-line .card-image {
+  border: solid 1px #a0b12833;
   margin-right: 1rem;
 }
 
@@ -59,6 +60,7 @@
 .card-line-color .card-image {
   width: 12rem;
   height: 12rem;
+  border: solid 1px #a0b12833;
   margin: 0;
 }
 
@@ -101,6 +103,7 @@
 
 .card-block .card-block-image {
   height: 12rem;
+  border: solid 1px #a0b12833;
 }
 
 .card-block img {
@@ -137,6 +140,7 @@
 
 .card-threeColumns .card-threeColumns-image {
   height: 12rem;
+  border: solid 1px #a0b12833;
 }
 
 .card-threeColumns img {
@@ -186,13 +190,16 @@
 }
 
 .card-news .card-news-image {
+  width: 10rem;
+  height: 10rem;
   flex-shrink: 0;
+  border: solid 1px #a0b12833;
   margin-right: 1.5rem;
 }
 
 .card-news .card-news-image img {
-  width: 10rem;
-  height: 10rem;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 
@@ -249,13 +256,16 @@
 }
 
 .card-event .card-event-image {
+  width: 10rem;
+  height: 10rem;
   flex-shrink: 0;
+  border: solid 1px #a0b12833;
   margin-right: 1.5rem;
 }
 
 .card-event .card-event-image img {
-  width: 10rem;
-  height: 10rem;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 

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;