@plone/volto 15.0.0-alpha.5 → 15.0.0-alpha.6

package/src/components/manage/Blocks/Search/components/FilterList.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Accordion, Button, Label, Icon } from 'semantic-ui-react';
+import { Accordion, Button, Icon } from 'semantic-ui-react';
 import { Icon as VoltoIcon } from '@plone/volto/components';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import { defineMessages, useIntl } from 'react-intl';
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   currentFilters: {
@@ -15,26 +17,27 @@ const messages = defineMessages({
   },
 });
 
+/**
+ * A list of active filtered values and controls to clear those filters.
+ *
+ */
 const FilterList = (props) => {
-  const { data, facets, setFacets, isEditMode } = props;
+  const { data = {}, facets = {}, setFacets, isEditMode } = props;
+  const definedFacets = data.facets || [];
   const [isOpened, setIsOpened] = React.useState(false);
 
-  // TODO: the facets are merged with the default query. We need to untangle
-  // and claim only the original facet values
-  const showFilterList = !Object.values(facets).every((facet) => !facet.length);
+  const totalFilters = definedFacets.filter(
+    ({ field }) =>
+      field && Object.keys(facets).includes(field.value) && facets[field.value],
+  ).length;
 
-  const currentFilters = Object.fromEntries(
-    Object.entries(facets).filter((v) => v[1] && v[0] !== 'SearchableText'),
-  );
-
-  const totalFilters = [].concat.apply([], Object.values(currentFilters))
-    .length;
-
-  // console.log({ data, facets, showFilterList, currentFilters, totalFilters });
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
 
   const intl = useIntl();
 
-  return showFilterList && Object.keys(currentFilters).length ? (
+  return totalFilters ? (
     <Accordion className="filter-listing">
       <Accordion.Title
         className="filter-list-header"
@@ -61,59 +64,26 @@ const FilterList = (props) => {
       </Accordion.Title>
       <Accordion.Content className="filter-list-content" active={isOpened}>
         <div className="filter-list">
-          {Object.keys(facets || {}).map((facet, i) => (
-            <div key={i}>
-              {facets[facet].length > 0 && (
-                <div className="filter-list-group" key={i}>
-                  {data?.facets?.map((f, i) => {
-                    return facet === f?.field?.value ? (
-                      <span className="label-title" key={i}>
-                        {f.title || f?.field?.label}:
-                      </span>
-                    ) : (
-                      ''
-                    );
-                  })}
-                  {typeof facets[facet] === 'string' ? (
-                    <Label size="small" key={i}>
-                      {facets[facet]}
-                      <Icon
-                        name="delete"
-                        onClick={() => {
-                          !isEditMode &&
-                            setFacets({
-                              ...facets,
-                              [facet]: '',
-                            });
-                        }}
-                      />
-                    </Label>
-                  ) : (
-                    <>
-                      {facets[facet].map((entry, i) => (
-                        <Label size="small" key={i}>
-                          {entry}
-                          <Icon
-                            name="delete"
-                            onClick={() => {
-                              const entries = facets[facet].filter(
-                                (item) => item !== entry,
-                              );
-                              !isEditMode &&
-                                setFacets({
-                                  ...facets,
-                                  [facet]: entries,
-                                });
-                            }}
-                          />
-                        </Label>
-                      ))}
-                    </>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
+          {data.facets?.map((facetSettings, i) => {
+            const {
+              filterListComponent: FilterListComponent,
+            } = resolveExtension('type', facetWidgetTypes, facetSettings);
+            const facet = facetSettings?.field?.value;
+            if (!facet) return null;
+
+            return (
+              <div key={i}>
+                {Object.keys(facets).includes(facet) && !!facets[facet] && (
+                  <div className="filter-list-group" key={i}>
+                    <span className="label-title">
+                      {facetSettings.title ?? facetSettings?.field?.label}
+                    </span>
+                    <FilterListComponent {...props} facet={facet} />
+                  </div>
+                )}
+              </div>
+            );
+          })}
         </div>
       </Accordion.Content>
     </Accordion>

package/src/components/manage/Blocks/Search/components/FilterList.test.jsx

@@ -2,11 +2,45 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
 
 import FilterList from './FilterList';
+import SelectFacet from './SelectFacet';
+import SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
 
 const mockStore = configureStore();
 
+config.blocks.blocksConfig = {
+  search: {
+    id: 'search',
+    title: 'Search',
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+    extensions: {
+      facetWidgets: {
+        types: [
+          {
+            id: 'selectFacet',
+            title: 'Select',
+            view: SelectFacet,
+            isDefault: true,
+            schemaEnhancer: SelectFacet.schemaEnhancer,
+            stateToValue: SelectFacet.stateToValue,
+            valueToQuery: SelectFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
+        ],
+      },
+    },
+  },
+};
+
 describe('FilterList', () => {
   it('renders filters listing component for search block', () => {
     const store = mockStore({
@@ -17,9 +51,23 @@ describe('FilterList', () => {
         messages: {},
       },
     });
+    const data = {
+      facets: [
+        {
+          '@id': 'a',
+          field: {
+            value: 'portal_type',
+            label: 'Portal type',
+          },
+        },
+      ],
+    };
     const component = renderer.create(
       <Provider store={store}>
-        <FilterList facets={{ portal_type: ['Document', 'Folder'] }} />
+        <FilterList
+          data={data}
+          facets={{ portal_type: ['Document', 'Folder'] }}
+        />
       </Provider>,
     );
     const json = component.toJSON();

package/src/components/manage/Blocks/Search/components/SelectFacet.jsx

@@ -5,6 +5,11 @@ import {
   DropdownIndicator,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 import { selectTheme, customSelectStyles } from './SelectStyling';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from './base';
 
 const SelectFacet = (props) => {
   const {
@@ -47,4 +52,8 @@ const SelectFacet = (props) => {
   );
 };
 
+SelectFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+SelectFacet.stateToValue = selectFacetStateToValue;
+SelectFacet.valueToQuery = selectFacetValueToQuery;
+
 export default injectLazyLibs('reactSelect')(SelectFacet);

package/src/components/manage/Blocks/Search/components/SelectFacetFilterListEntry.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Label, Icon } from 'semantic-ui-react';
+
+function SelectFacetFilterListEntry(props) {
+  const { facet, isEditMode, setFacets, facets } = props;
+  return typeof facets[facet] === 'string' ? (
+    <Label size="small">
+      {facets[facet]}
+      <Icon
+        name="delete"
+        onClick={() => {
+          !isEditMode &&
+            setFacets({
+              ...facets,
+              [facet]: '',
+            });
+        }}
+      />
+    </Label>
+  ) : (
+    <>
+      {facets[facet].map((entry, i) => (
+        <Label size="small" key={i}>
+          {entry}
+          <Icon
+            name="delete"
+            onClick={() => {
+              const entries = facets[facet].filter((item) => item !== entry);
+              !isEditMode &&
+                setFacets({
+                  ...facets,
+                  [facet]: entries,
+                });
+            }}
+          />
+        </Label>
+      ))}
+    </>
+  );
+}
+
+export default SelectFacetFilterListEntry;

package/src/components/manage/Blocks/Search/components/SelectStyling.jsx

@@ -15,7 +15,7 @@ export const customSelectStyles = {
     borderBottom: '1px solid #c7d5d8',
     boxShadow: 'none',
     borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
-    minHeight: '40px',
+    minHeight: '37px',
   }),
   menu: (styles, state) => ({
     ...styles,

package/src/components/manage/Blocks/Search/components/ToggleFacet.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Radio, Header } from 'semantic-ui-react';
+
+const ToggleFacet = (props) => {
+  const { facet, isEditMode, onChange, value } = props; // value, choices, isMulti, onChange,
+
+  return (
+    <div className="checkbox-facet">
+      <Header as="h4">{facet?.title ?? facet?.field?.label}</Header>
+      <div className="radio">
+        <Radio
+          toggle
+          checked={value || typeof value === 'string'}
+          disabled={isEditMode}
+          onChange={(e, { checked }) => {
+            onChange(facet.field.value, checked);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+ToggleFacet.stateToValue = ({ facetSettings, index, selectedValue }) => {
+  return selectedValue || typeof selectedValue === 'string';
+};
+
+ToggleFacet.valueToQuery = ({ value, facet }) => {
+  return value || typeof value === 'string'
+    ? {
+        i: facet.field.value,
+        o: 'plone.app.querystring.operation.boolean.isTrue',
+        v: '',
+      }
+    : null;
+};
+
+export default ToggleFacet;

package/src/components/manage/Blocks/Search/components/ToggleFacetFilterListEntry.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Label, Icon } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  yes: {
+    id: 'yes',
+    defaultMessage: 'Yes',
+  },
+  no: {
+    id: 'no',
+    defaultMessage: 'No',
+  },
+});
+
+function ToggleFacetFilterListEntry(props) {
+  const { facet, isEditMode, setFacets, facets } = props;
+  const intl = useIntl();
+
+  return (
+    <Label size="small">
+      {intl.formatMessage(facets[facet] ? messages.yes : messages.no)}
+      <Icon
+        name="delete"
+        onClick={() => {
+          const filteredFacets = Object.assign(
+            {},
+            ...Object.keys(facets)
+              .filter((f) => f !== facet)
+              .map((f) => ({ [f]: facets[f] })),
+          );
+          !isEditMode && setFacets(filteredFacets);
+        }}
+      />
+    </Label>
+  );
+}
+
+export default ToggleFacetFilterListEntry;

package/src/components/manage/Blocks/Search/components/base.js

@@ -0,0 +1,52 @@
+import { isEmpty } from 'lodash';
+
+/**
+ * Converts the state (extracted from URL) to options for the facet control
+ *
+ * Shared by the SelectFacet and CheckboxFacet
+ */
+export const selectFacetStateToValue = ({
+  facetSettings,
+  index,
+  selectedValue,
+}) => {
+  const isMulti = facetSettings.multiple;
+  return selectedValue
+    ? isMulti
+      ? Array.isArray(selectedValue)
+        ? selectedValue.map((v) => ({
+            value: v,
+            label: index.values?.[v]?.title,
+          }))
+        : []
+      : {
+          value: selectedValue,
+          label: index.values?.[selectedValue]?.title,
+        }
+    : [];
+};
+
+export const selectFacetSchemaEnhancer = ({ schema, formData }) => {
+  // adds (enables) the 'multiple' field after the 'type' dropdown
+  let { fields } = schema.fieldsets[0];
+  const pos = fields.indexOf('type') + 1;
+  fields = [
+    ...fields.slice(0, pos),
+    'multiple',
+    ...fields.slice(pos, fields.length),
+  ];
+  schema.fieldsets[0].fields = fields;
+  return schema;
+};
+
+export const selectFacetValueToQuery = ({ value, facet }) => {
+  return !isEmpty(value)
+    ? {
+        i: facet.field.value,
+        o: Array.isArray(value)
+          ? 'plone.app.querystring.operation.list.contains'
+          : 'plone.app.querystring.operation.selection.is',
+        v: value,
+      }
+    : undefined;
+};

package/src/components/manage/Blocks/Search/components/index.js

@@ -2,6 +2,11 @@ export SearchDetails from './SearchDetails';
 export Facets from './Facets';
 export SelectFacet from './SelectFacet';
 export CheckboxFacet from './CheckboxFacet';
+export DateRangeFacet from './DateRangeFacet';
 export SearchInput from './SearchInput';
 export FilterList from './FilterList';
 export SortOn from './SortOn';
+export ToggleFacet from './ToggleFacet';
+export SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
+export ToggleFacetFilterListEntry from './ToggleFacetFilterListEntry';
+export DateRangeFacetFilterListEntry from './DateRangeFacetFilterListEntry';

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { isEmpty } from 'lodash';
 import qs from 'query-string';
 import { useLocation, useHistory } from 'react-router-dom';
 
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
+
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }
@@ -25,16 +27,30 @@ const PAQO = 'plone.app.querystring.operation';
  *
  */
 function getInitialState(data, facets, urlSearchText, id) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const facetSettings = data?.facets || [];
+
   return {
     query: [
       ...(data.query?.query || []),
-      ...Object.keys(facets).map((name) => ({
-        i: name,
-        v: facets[name],
-
-        // TODO: make the facet operator pluggable
-        o: 'plone.app.querystring.operation.selection.is',
-      })),
+      ...(facetSettings || [])
+        .map((facet) => {
+          if (!facet?.field) return null;
+
+          const { valueToQuery } = resolveExtension(
+            'type',
+            facetWidgetTypes,
+            facet,
+          );
+
+          const name = facet.field.value;
+          const value = facets[name];
+
+          return valueToQuery({ value, facet });
+        })
+        .filter((f) => !!f),
       ...(urlSearchText
         ? [
             {
@@ -54,27 +70,42 @@ function getInitialState(data, facets, urlSearchText, id) {
 }
 
 /**
- * "Normalizes" the search state to something that's serializable and usable
- * as initial state
+ * "Normalizes" the search state to something that's serializable
+ * (for querying) and used to compute data for the ListingBody
  *
  * @function normalizeState
  *
  */
-function normalizeState({ query, facets, id, searchText, sortOn, sortOrder }) {
+function normalizeState({
+  query, // base query
+  facets, // facet values
+  id, // block id
+  searchText, // SearchableText
+  sortOn,
+  sortOrder,
+  facetSettings, // data.facets extracted from block data
+}) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+
   const params = {
     query: [
       ...(query.query || []),
-      ...Object.keys(facets).map((name) =>
-        !isEmpty(facets[name])
-          ? {
-              i: name,
-              o: Array.isArray(facets[name])
-                ? 'plone.app.querystring.operation.list.contains'
-                : 'plone.app.querystring.operation.selection.is',
-              v: facets[name],
-            }
-          : undefined,
-      ),
+      ...(facetSettings || []).map((facet) => {
+        if (!facet?.field) return null;
+
+        const { valueToQuery } = resolveExtension(
+          'type',
+          facetWidgetTypes,
+          facet,
+        );
+
+        const name = facet.field.value;
+        const value = facets[name];
+
+        return valueToQuery({ value, facet });
+      }),
     ].filter((o) => !!o),
     sort_on: sortOn || query.sort_on,
     sort_order: sortOrder || query.sort_order,
@@ -217,7 +248,7 @@ const withSearch = (options) => (WrappedComponent) => {
     const [facets, setFacets] = React.useState(
       Object.assign(
         {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
 
         // support for simple filters like ?Subject=something
         // TODO: since the move to hash params this is no longer working.
@@ -245,19 +276,21 @@ const withSearch = (options) => (WrappedComponent) => {
     );
 
     const timeoutRef = React.useRef();
+    const facetSettings = data?.facets;
 
     const onTriggerSearch = React.useCallback(
-      (toSearch, toSearchFacets, toSortOn, toSortOrder) => {
+      (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
             const searchData = normalizeState({
+              id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              id,
-              searchText: toSearch,
+              searchText: toSearchText,
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
+              facetSettings,
             });
             if (toSearchFacets) setFacets(toSearchFacets);
             if (toSortOn) setSortOn(toSortOn);
@@ -268,7 +301,15 @@ const withSearch = (options) => (WrappedComponent) => {
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
       },
-      [data.query, facets, id, setLocationSearchData, sortOn, sortOrder],
+      [
+        data.query,
+        facets,
+        id,
+        setLocationSearchData,
+        sortOn,
+        sortOrder,
+        facetSettings,
+      ],
     );
 
     const querystringResults = useSelector(

package/src/components/manage/Blocks/Search/schema.js

@@ -1,6 +1,7 @@
 import config from '@plone/volto/registry';
 import { defineMessages } from 'react-intl';
 import { cloneDeep } from 'lodash';
+import { hasNonValueOperation, hasDateOperation } from './utils';
 
 const messages = defineMessages({
   searchBlock: {
@@ -99,9 +100,9 @@ const messages = defineMessages({
 
 const enhanceSchema = (originalSchema, formData) => {
   const extensionName = 'facetWidgets';
-  const extensionType = 'type';
+  const extensionType = 'type'; // property name in stored block data
   const variations =
-    config.blocks.blocksConfig.search.extensions[extensionName][extensionType];
+    config.blocks.blocksConfig.search.extensions[extensionName].types;
 
   const activeItemName = formData?.[extensionType];
   let activeItem = variations?.find((item) => item.id === activeItemName);
@@ -122,7 +123,7 @@ const FacetSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'field', 'type', 'multiple', 'hidden'],
+      fields: ['title', 'field', 'type', 'hidden'],
     },
   ],
   properties: {
@@ -141,7 +142,9 @@ const FacetSchema = ({ intl }) => ({
         return Object.assign(
           {},
           ...Object.keys(options).map((k) =>
-            Object.keys(options[k].values || {}).length
+            Object.keys(options[k].values || {}).length ||
+            hasNonValueOperation(options[k].operations) ||
+            hasDateOperation(options[k].operations)
               ? { [k]: options[k] }
               : {},
           ),

package/src/components/manage/Blocks/Search/utils.js

@@ -0,0 +1,16 @@
+export const NONVALUE_OPERATIONS = new Set([
+  'plone.app.querystring.operation.boolean.isFalse',
+  'plone.app.querystring.operation.boolean.isTrue',
+]);
+
+export const DATE_OPERATIONS = new Set([
+  'plone.app.querystring.operation.date.between',
+]);
+
+export const hasNonValueOperation = (ops) => {
+  return ops.filter((x) => NONVALUE_OPERATIONS.has(x)).length > 0;
+};
+
+export const hasDateOperation = (ops) => {
+  return ops.filter((x) => DATE_OPERATIONS.has(x)).length > 0;
+};

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

@@ -178,7 +178,9 @@ export class DatetimeWidgetComponent extends Component {
   onFocusChange = ({ focused }) => this.setState({ focused });
 
   render() {
-    const { id, noPastDates, resettable, intl, reactDates } = this.props;
+    const { id, resettable, intl, reactDates, widgetOptions } = this.props;
+    const noPastDates =
+      this.props.noPastDates || widgetOptions?.pattern_options?.noPastDates;
     const moment = this.props.moment.default;
     const datetime = this.getInternalValue();
     const dateOnly = this.getDateOnly();