@plone/volto 19.0.0-alpha.18 → 19.0.0-alpha.19

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,92 @@ 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}
+              />
+            </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 +459,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 +471,8 @@ export class QuerystringWidgetComponent extends Component {
                                     }
                                   : curRow,
                               ),
-                            )
-                          }
+                            );
+                          }}
                         />
                       </Form.Field>
                       <Form.Field style={{ flex: '1 0 auto' }}>
@@ -408,7 +533,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 +625,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/Unauthorized/Unauthorized.jsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
   const error_message = useSelector((state) => state.apierror?.message);
@@ -12,6 +13,7 @@ const Unauthorized = () => {
 
   return (
     <Container className="view-wrapper">
+      <BodyClass className="view-unauthorized" />
       <h1>
         <FormattedMessage id="Unauthorized" defaultMessage="Unauthorized" />
       </h1>
@@ -62,5 +64,6 @@ const Unauthorized = () => {
     </Container>
   );
 };
-
-export default withServerErrorCode(401)(Unauthorized);
+const UnauthorizedWithCode = withServerErrorCode(401)(Unauthorized);
+UnauthorizedWithCode.displayName = 'unauthorized';
+export default UnauthorizedWithCode;

package/src/components/theme/View/View.jsx

@@ -222,6 +222,13 @@ class View extends Component {
       }
       return (
         <div id="view">
+          <BodyClass
+            className={
+              FoundView.displayName
+                ? `view-${this.cleanViewName(FoundView.displayName)}`
+                : null
+            }
+          />
           <FoundView {...this.props} />
         </div>
       );

package/src/reducers/querystring/querystring.js

@@ -30,10 +30,17 @@ export default function querystring(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_QUERYSTRING}_SUCCESS`:
+      let indexes = action.result.indexes;
+      if (indexes?.path?.operations) {
+        //remove path operation, to remove unhandled 'Navigation path' option from QueryWidget
+        indexes.path.operations = indexes.path.operations.filter(
+          (o) => o !== 'plone.app.querystring.operation.string.path',
+        );
+      }
       return {
         ...state,
         error: null,
-        indexes: action.result.indexes,
+        indexes: indexes,
         sortable_indexes: action.result.sortable_indexes,
         loaded: true,
         loading: false,

package/theme/themes/pastanaga/extras/contents.less

@@ -267,3 +267,66 @@
   overflow: auto;
   max-height: 75vh;
 }
+
+.contents-dropzone {
+  position: relative;
+
+  &.drag-over {
+    overflow: hidden;
+  }
+}
+
+.dropzone-overlay {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px dashed black;
+  animation: fadeIn 0.3s ease-in;
+  backdrop-filter: blur(2px);
+  inset: 0;
+}
+
+.dropzone-content {
+  animation: scaleIn 0.3s ease-out;
+  color: black;
+  text-align: center;
+
+  h3 {
+    margin-top: 16px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 18px;
+  }
+
+  h3,
+  p {
+    color: black;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/theme/themes/pastanaga/extras/widgets.less

@@ -337,3 +337,37 @@ body.babel-view .field.language-independent-field {
     color: var(--text-color-disabled);
   }
 }
+
+.ui.form .query-widget {
+  .location-object-browser {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+
+    .object-browser-field {
+      min-height: 60px;
+      flex: 1 0 auto;
+      padding-right: 1em;
+      padding-left: 1em;
+      margin-bottom: 0px;
+    }
+
+    .object-browser-field + .field {
+      margin-bottom: 0px;
+    }
+
+    .objectbrowser-field {
+      height: 100%;
+    }
+
+    .reference-widget-depth {
+      .field {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+  .location-object-browser + button.ui.button {
+    padding-top: 0;
+  }
+}

package/types/components/manage/Contents/DropZoneContent.d.ts

@@ -0,0 +1,2 @@
+export default DropZoneContent;
+declare function DropZoneContent(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Controlpanels/Relations/RelationsMatrix.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Multilingual/ManageTranslations.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowser.d.ts

@@ -31,7 +31,7 @@ declare function withObjectBrowser(WrappedComponent: any): {
          *     }),
          *   });
          */
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/ImageWidget.d.ts

@@ -10,7 +10,7 @@ export const ImageInput: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/InternalUrlWidget.d.ts

@@ -41,7 +41,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/ObjectBrowserWidget.d.ts

@@ -23,6 +23,7 @@ export class ObjectBrowserWidgetComponent extends React.Component<any, any, any>
         openObjectBrowser: any;
         allowExternals: any;
         placeholder: any;
+        onlyFolderishSelectable: any;
     };
     /**
      * Default properties
@@ -38,6 +39,7 @@ export class ObjectBrowserWidgetComponent extends React.Component<any, any, any>
         return: string;
         initialPath: string;
         allowExternals: boolean;
+        onlyFolderishSelectable: boolean;
     };
     constructor(props: any);
     state: {

package/types/components/manage/Widgets/QueryWidget.d.ts

@@ -60,7 +60,8 @@ export class QuerystringWidgetComponent extends React.Component<any, any, any> {
      * @param {number} index Row index.
      * @returns {Object} Widget.
      */
-    getWidget(row: any, index: number, Select: any): any;
+    getWidget(row: any, index: number, Select: any, intl: any): any;
+    loadReferenceWidgetItem(v: any): void;
     /**
      * Component did mount lifecycle method
      * @method componentDidMount
@@ -74,6 +75,8 @@ export class QuerystringWidgetComponent extends React.Component<any, any, any> {
      */
     render(): string;
 }
-declare const _default: any;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & React.RefAttributes<React.ComponentType<import("react-intl").WrappedComponentProps<string>>>> & {
+    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
+};
 export default _default;
 import React from 'react';

package/types/components/manage/Widgets/UrlWidget.d.ts

@@ -41,7 +41,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/index.d.ts

@@ -9,7 +9,7 @@ export declare const FileWidget: import("@loadable/component").LoadableComponent
 export declare const HiddenWidget: import("@loadable/component").LoadableComponent<any>;
 export declare const IdWidget: import("@loadable/component").LoadableComponent<any>;
 export declare const PasswordWidget: import("@loadable/component").LoadableComponent<import("react-intl").WithIntlProps<any>>;
-export declare const QueryWidget: import("@loadable/component").LoadableClassComponent<any>;
+export declare const QueryWidget: import("@loadable/component").LoadableComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & import("react").RefAttributes<import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>>>;
 export declare const QuerySortOnWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const QuerystringWidget: import("@loadable/component").LoadableComponent<any>;
 export declare const RadioGroupWidget: import("@loadable/component").LoadableClassComponent<any>;
@@ -25,7 +25,7 @@ export declare const UrlWidget: import("@loadable/component").LoadableClassCompo
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;
@@ -65,7 +65,7 @@ export declare const InternalUrlWidget: import("@loadable/component").LoadableCl
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/theme/Unauthorized/Unauthorized.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
-export default _default;
+export default UnauthorizedWithCode;
+declare const UnauthorizedWithCode: (props: any) => import("react/jsx-runtime").JSX.Element;