@plone/volto 18.31.0 → 18.32.1

package/src/components/manage/Contents/DropZoneContent.jsx

@@ -0,0 +1,338 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Modal,
+  Table,
+  Input,
+  Dimmer,
+  Progress,
+} from 'semantic-ui-react';
+import cx from 'classnames';
+import filesize from 'filesize';
+import { readAsDataURL } from 'promise-file-reader';
+
+import { createContent } from '@plone/volto/actions/content/content';
+import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+const SUBREQUEST = 'batch-upload';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  upload: {
+    id: '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+    defaultMessage:
+      '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+  },
+  filesUploaded: {
+    id: 'Files uploaded: {uploadedFiles}',
+    defaultMessage: 'Files uploaded: {uploadedFiles}',
+  },
+  dropFiles: {
+    id: 'Drop files here to upload',
+    defaultMessage: 'Drop files here to upload',
+  },
+  releaseToAdd: {
+    id: 'Release to add file(s) to this folder',
+    defaultMessage: 'Release to add file(s) to this folder',
+  },
+  totalFilesToUpload: {
+    id: 'Total files to upload: {totalFiles}',
+    defaultMessage: 'Total files to upload: {totalFiles}',
+  },
+  uploadFiles: {
+    id: 'Upload Files ({count})',
+    defaultMessage: 'Upload Files ({count})',
+  },
+});
+const hasFiles = (e) => {
+  return e.dataTransfer.types && e.dataTransfer.types.includes('Files');
+};
+
+const DropZoneContent = (props) => {
+  const { onOk, onCancel, pathname, children } = props;
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState([]);
+  const [totalFiles, setTotalFiles] = useState(0);
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const request = useSelector(
+    (state) => state.content.subrequests?.[SUBREQUEST] || {},
+    shallowEqual,
+  );
+
+  const uploadedFiles = useSelector((state) => state.content.uploadedFiles);
+  const prevrequestloading = usePrevious(request.loading);
+
+  useEffect(() => {
+    if (prevrequestloading && request.loaded) {
+      onOk();
+      setDroppedFiles([]);
+    }
+  }, [prevrequestloading, request.loaded, onOk]);
+
+  const handleDragEnter = (e) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onDrop = async (e) => {
+    if (!hasFiles(e)) {
+      return;
+    }
+    setIsDragOver(false);
+    const newFiles = Array.from(e.dataTransfer.files);
+    const validFiles = [];
+    for (let i = 0; i < newFiles.length; i++) {
+      if (validateFileUploadSize(newFiles[i], intl.formatMessage)) {
+        await readAsDataURL(newFiles[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          newFiles[i].preview = fields[0];
+        });
+        validFiles.push(newFiles[i]);
+      }
+    }
+    setDroppedFiles((prev) => prev.concat(validFiles));
+    setTotalFiles((prev) => prev + validFiles.length);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    onCancel();
+    setDroppedFiles([]);
+    setTotalFiles(0);
+  };
+
+  const onSubmit = () => {
+    Promise.all(droppedFiles.map((file) => readAsDataURL(file))).then(
+      (dataUrls) => {
+        dispatch(
+          createContent(
+            pathname,
+            droppedFiles.map((file, index) => {
+              const fields = dataUrls[index].match(/^data:(.*);(.*),(.*)$/);
+              const image = fields[1].split('/')[0] === 'image';
+              return {
+                '@type': image ? 'Image' : 'File',
+                title: file.name,
+                [image ? 'image' : 'file']: {
+                  data: fields[3],
+                  encoding: fields[2],
+                  'content-type': fields[1],
+                  filename: file.name,
+                },
+              };
+            }),
+            SUBREQUEST,
+          ),
+        );
+      },
+    );
+    handleCloseModal();
+  };
+  const onRemoveFile = (index) => {
+    const updatedFiles = droppedFiles.filter((file, i) => i !== index);
+    setDroppedFiles(updatedFiles);
+    setTotalFiles(updatedFiles.length);
+  };
+
+  const onChangeFileName = (e, index) => {
+    let copyOfFiles = [...droppedFiles];
+    let originalFile = droppedFiles[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    setDroppedFiles(copyOfFiles);
+  };
+
+  return (
+    <>
+      <div
+        className={cx('contents-dropzone', {
+          'drag-over': isDragOver,
+          'drag-inactive': !isDragOver,
+        })}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={onDrop}
+      >
+        {children}
+        {isDragOver && (
+          <div className="dropzone-overlay">
+            <div className="dropzone-content">
+              <Icon name={uploadSVG} size="48px" />
+              <h3>{intl.formatMessage(messages.dropFiles)}</h3>
+              <p>{intl.formatMessage(messages.releaseToAdd)}</p>
+            </div>
+          </div>
+        )}
+      </div>
+      <Modal
+        open={totalFiles > 0 && showModal}
+        onClose={handleCloseModal}
+        className="contents-upload-modal"
+      >
+        <Modal.Header>
+          {intl.formatMessage(messages.uploadFiles, {
+            count: droppedFiles.length,
+          })}
+        </Modal.Header>
+        <Dimmer active={request.loading}>
+          <div className="progress-container">
+            <Progress
+              className="progress-bar"
+              value={uploadedFiles}
+              total={totalFiles}
+            >
+              {intl.formatMessage(messages.filesUploaded, {
+                uploadedFiles,
+              })}
+              <br />
+              {intl.formatMessage(messages.totalFilesToUpload, {
+                totalFiles,
+              })}
+            </Progress>
+          </div>
+        </Dimmer>
+        <Modal.Content>
+          {droppedFiles.length > 0 && (
+            <Table compact singleLine>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell width={8}>
+                    <FormattedMessage id="Filename" defaultMessage="Filename" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="Last modified"
+                      defaultMessage="Last modified"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="File size"
+                      defaultMessage="File size"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage id="Preview" defaultMessage="Preview" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell />
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {droppedFiles.map((file, index) => (
+                  <Table.Row className="upload-row" key={index}>
+                    <Table.Cell>
+                      <Input
+                        className="file-name"
+                        value={file.name}
+                        onChange={(e) => onChangeFileName(e, index)}
+                      />
+                    </Table.Cell>
+                    <Table.Cell>
+                      {file.lastModifiedDate && (
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>{filesize(file.size, { round: 0 })}</Table.Cell>
+                    <Table.Cell>
+                      {file.type.split('/')[0] === 'image' && (
+                        <Image
+                          src={file.preview}
+                          height={60}
+                          className="ui image"
+                        />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Icon
+                        name={clearSVG}
+                        size="24px"
+                        onClick={() => onRemoveFile(index)}
+                      />
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          )}
+        </Modal.Content>
+        <Modal.Actions>
+          {droppedFiles.length > 0 && (
+            <Button
+              basic
+              circular
+              primary
+              floated="right"
+              icon="arrow right"
+              aria-label={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              onClick={onSubmit}
+              title={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              size="big"
+            />
+          )}
+          <Button
+            basic
+            circular
+            secondary
+            icon="remove"
+            aria-label={intl.formatMessage(messages.cancel)}
+            title={intl.formatMessage(messages.cancel)}
+            floated="right"
+            size="big"
+            onClick={handleCloseModal}
+          />
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default DropZoneContent;

package/src/components/manage/Sidebar/ObjectBrowser.jsx

@@ -58,6 +58,7 @@ const withObjectBrowser = (WrappedComponent) =>
       selectableTypes,
       maximumSelectionSize,
       currentPath,
+      onlyFolderishSelectable,
     } = {}) =>
       this.setState(() => ({
         isObjectBrowserOpen: true,
@@ -70,6 +71,7 @@ const withObjectBrowser = (WrappedComponent) =>
         selectableTypes,
         maximumSelectionSize,
         currentPath,
+        onlyFolderishSelectable,
       }));
 
     closeObjectBrowser = () => this.setState({ isObjectBrowserOpen: false });
@@ -110,6 +112,7 @@ const withObjectBrowser = (WrappedComponent) =>
                 searchableTypes={this.state.searchableTypes}
                 selectableTypes={this.state.selectableTypes}
                 maximumSelectionSize={this.state.maximumSelectionSize}
+                onlyFolderishSelectable={this.state.onlyFolderishSelectable}
               />
             </SidebarPopup>
           </>

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -86,6 +86,7 @@ class ObjectBrowserBody extends Component {
     maximumSelectionSize: PropTypes.number,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -101,6 +102,7 @@ class ObjectBrowserBody extends Component {
     selectableTypes: [],
     searchableTypes: null,
     maximumSelectionSize: null,
+    onlyFolderishSelectable: false,
   };
 
   /**
@@ -329,7 +331,17 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    const { maximumSelectionSize, data, mode, selectableTypes } = this.props;
+    const {
+      maximumSelectionSize,
+      data,
+      mode,
+      selectableTypes,
+      onlyFolderishSelectable,
+    } = this.props;
+
+    if (onlyFolderishSelectable && !item.is_folderish) {
+      return false;
+    }
     if (
       maximumSelectionSize &&
       data &&

package/src/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -82,6 +82,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
     placeholder: PropTypes.string,
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -98,6 +99,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     return: 'multiple',
     initialPath: '',
     allowExternals: false,
+    onlyFolderishSelectable: false,
   };
 
   state = {
@@ -315,6 +317,9 @@ export class ObjectBrowserWidgetComponent extends Component {
       maximumSelectionSize:
         this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
         this.props.maximumSelectionSize,
+      onlyFolderishSelectable:
+        this.props.widgetOptions?.pattern_options?.onlyFolderishSelectable ||
+        this.props.onlyFolderishSelectable,
     });
   };
 

package/src/components/manage/Widgets/QueryWidget.jsx

@@ -15,8 +15,12 @@ import groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 import { defineMessages, injectIntl } from 'react-intl';
+import { withRouter } from 'react-router';
 import { getQuerystring } from '@plone/volto/actions/querystring/querystring';
+import { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
+import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
@@ -43,8 +47,27 @@ const messages = defineMessages({
     id: 'querystring-widget-select',
     defaultMessage: 'Select…',
   },
+  currentPath: {
+    id: 'query-widget-currentPath',
+    defaultMessage: 'Current path (./)',
+  },
+  parentPath: {
+    id: 'query-widget-parentPath',
+    defaultMessage: 'Parent path (../)',
+  },
 });
 
+const parseUidDepth = (val) => {
+  if (typeof val !== 'string') return { uid: '', depth: 1 };
+  const lastSep = String(val).lastIndexOf('::');
+  if (lastSep !== -1) {
+    const uid = val.substring(0, lastSep);
+    const parsed = parseInt(val.substring(lastSep + 2), 10);
+    return { uid, depth: Number.isNaN(parsed) ? 1 : parsed };
+  }
+  return { uid: val, depth: 1 };
+};
+
 /**
  * Widget for a querystring value, to define a catalog search criteria.
  */
@@ -97,6 +120,7 @@ export class QuerystringWidgetComponent extends Component {
     };
     this.onChangeValue = this.onChangeValue.bind(this);
     this.getWidget = this.getWidget.bind(this);
+    this.loadReferenceWidgetItem = this.loadReferenceWidgetItem.bind(this);
   }
 
   /**
@@ -111,6 +135,27 @@ export class QuerystringWidgetComponent extends Component {
     this.props.getQuerystring();
   }
 
+  loadReferenceWidgetItem(v) {
+    const loading =
+      this.props.reference[`${v}_query_reference`]?.loading ?? false;
+    if (!loading && v?.length > 0) {
+      this.props.getQueryStringResults(
+        '/',
+        {
+          b_size: 1,
+          query: [
+            {
+              i: 'path',
+              o: 'plone.app.querystring.operation.string.absolutePath',
+              v: v + '::0',
+            },
+          ],
+        },
+        v + '_query_reference',
+      );
+    }
+  }
+
   /**
    * Get correct widget
    * @method getWidget
@@ -118,15 +163,16 @@ export class QuerystringWidgetComponent extends Component {
    * @param {number} index Row index.
    * @returns {Object} Widget.
    */
-  getWidget(row, index, Select) {
+  getWidget(row, index, Select, intl) {
     const props = {
       fluid: true,
       value: row.v,
       onChange: (data) => this.onChangeValue(index, data.target.value),
     };
     const values = this.props.indexes[row.i].values;
+    const operator = this.props.indexes[row.i].operators[row.o];
 
-    switch (this.props.indexes[row.i].operators[row.o].widget) {
+    switch (operator.widget) {
       case null:
         return <span />;
       case 'DateWidget':
@@ -217,13 +263,93 @@ export class QuerystringWidgetComponent extends Component {
           </Form.Field>
         );
       case 'ReferenceWidget':
+        const { uid: uidValue, depth: depthValue } = parseUidDepth(props.value);
+        if (!this.props.reference[`${uidValue}_query_reference`]) {
+          this.loadReferenceWidgetItem(uidValue);
+        }
+        const referenceItem = this.props.reference[
+          `${uidValue}_query_reference`
+        ]
+          ? this.props.reference[`${uidValue}_query_reference`].items[0]
+          : null;
+        return (
+          <div className="location-object-browser">
+            <Form.Field className="object-browser-field">
+              <ObjectBrowserWidget
+                id={`query-reference-widget-${index}`}
+                mode="link"
+                onChange={(id, data) => {
+                  const itemSelected = data.length > 0 ? data[0] : {};
+                  const uid = itemSelected.UID ?? '';
+                  this.onChangeValue(index, uid ? `${uid}::${depthValue}` : '');
+                  this.loadReferenceWidgetItem(uid);
+                }}
+                value={uidValue && this.props.reference ? [referenceItem] : []}
+                wrapped={false}
+                onlyFolderishSelectable={true}
+                allowExternals={true}
+              />
+            </Form.Field>
+
+            {uidValue && (
+              <Form.Field className="reference-widget-depth">
+                <NumberWidget
+                  title={intl.formatMessage({
+                    id: 'Depth',
+                    defaultMessage: 'Depth',
+                  })}
+                  min={1}
+                  step={1}
+                  value={depthValue}
+                  onChange={(id, value) => {
+                    const newDepth = parseInt(value, 10) || 1;
+                    const curUid = uidValue || '';
+                    this.onChangeValue(index, `${curUid}::${newDepth}`);
+                  }}
+                />
+              </Form.Field>
+            )}
+          </div>
+        );
+      case 'RelativePathWidget':
+        const relativePathOptions = [
+          {
+            label: intl.formatMessage(messages.currentPath),
+            value: './',
+          },
+          {
+            label: intl.formatMessage(messages.parentPath),
+            value: '../',
+          },
+        ];
+        return (
+          <Form.Field style={{ flex: '1 0 auto', maxWidth: '92%' }}>
+            <Select
+              {...props}
+              className="react-select-container"
+              classNamePrefix="react-select"
+              options={relativePathOptions}
+              styles={customSelectStyles}
+              placeholder={this.props.intl.formatMessage(messages.select)}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              onChange={(data) => {
+                this.onChangeValue(index, data.value);
+              }}
+              isMulti={false}
+              value={
+                relativePathOptions.filter((p) => p.value === props.value)?.[0]
+              }
+            />
+          </Form.Field>
+        );
       default:
         // if (row.o === 'plone.app.querystring.operation.string.relativePath') {
         //   props.onChange = data => this.onChangeValue(index, data.target.value);
         // }
         return (
           <Form.Field style={{ flex: '1 0 auto' }}>
-            <Input {...props} />
+            <Input {...props} description={operator.description} />
           </Form.Field>
         );
     }
@@ -334,7 +460,7 @@ export class QuerystringWidgetComponent extends Component {
                             value: row.i,
                             label: indexes[row.i]?.title,
                           }}
-                          onChange={(data) =>
+                          onChange={(data) => {
                             onChange(
                               id,
                               map(value, (curRow, curIndex) =>
@@ -346,8 +472,8 @@ export class QuerystringWidgetComponent extends Component {
                                     }
                                   : curRow,
                               ),
-                            )
-                          }
+                            );
+                          }}
                         />
                       </Form.Field>
                       <Form.Field style={{ flex: '1 0 auto' }}>
@@ -408,7 +534,7 @@ export class QuerystringWidgetComponent extends Component {
                         </Button>
                       )}
                     </div>
-                    {this.getWidget(row, index, Select)}
+                    {this.getWidget(row, index, Select, intl)}
                     {this.props.indexes[row.i].operators[row.o].widget && (
                       <Button
                         onClick={(event) => {
@@ -500,10 +626,12 @@ export class QuerystringWidgetComponent extends Component {
 export default compose(
   injectIntl,
   injectLazyLibs(['reactSelect']),
+  withRouter,
   connect(
-    (state) => ({
+    (state, props) => ({
       indexes: state.querystring.indexes,
+      reference: state.querystringsearch.subrequests,
     }),
-    { getQuerystring },
+    { getQuerystring, getQueryStringResults },
   ),
 )(QuerystringWidgetComponent);

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions/language/language';
-import { toGettextLang } from '@plone/volto/helpers/Utils/Utils';
+import { toGettextLang, toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
@@ -38,7 +38,7 @@ const MultilingualRedirector = (props) => {
   }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
 
   return pathname === '/' && settings.isMultilingual ? (
-    <Redirect to={`/${redirectToLanguage}`} />
+    <Redirect to={`/${toBackendLang(redirectToLanguage)}`} />
   ) : (
     <>{children}</>
   );