@plone/volto 15.0.0-alpha.0 → 15.0.0-alpha.11

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

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Header } from 'semantic-ui-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { compose } from 'redux';
+import { Icon } from '@plone/volto/components';
+
+import leftKey from '@plone/volto/icons/left-key.svg';
+import rightKey from '@plone/volto/icons/right-key.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+
+const messages = defineMessages({
+  startDate: {
+    id: 'Start Date',
+    defaultMessage: 'Start Date',
+  },
+  endDate: {
+    id: 'End Date',
+    defaultMessage: 'End Date',
+  },
+});
+
+const PrevIcon = () => (
+  <div
+    className="prev-icon"
+    style={{
+      color: '#000',
+      left: '22px',
+      padding: '5px',
+      position: 'absolute',
+      top: '15px',
+    }}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex="0"
+  >
+    <Icon name={leftKey} size="30px" />
+  </div>
+);
+const NextIcon = () => (
+  <div
+    className="next-icon"
+    style={{
+      color: '#000',
+      right: '22px',
+      padding: '5px',
+      position: 'absolute',
+      top: '15px',
+    }}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex="0"
+  >
+    <Icon name={rightKey} size="30px" />
+  </div>
+);
+
+const CloseIcon = () => <Icon name={clearSVG} size="24px" className="close" />;
+
+const DateRangeFacet = (props) => {
+  const { facet, isEditMode, onChange, value, reactDates, intl } = props;
+  const moment = props.moment.default;
+  const { DateRangePicker } = reactDates;
+  const [focused, setFocused] = useState(null);
+
+  return (
+    <div className="daterange-facet">
+      <Header as="h4">{facet?.title ?? facet?.field?.label}</Header>
+      <div className="ui form date-time-widget-wrapper">
+        <div className="ui input date-input">
+          <DateRangePicker
+            startDate={value && value[0] ? moment(value[0]) : null}
+            startDateId={`${facet['@id']}-start-date`}
+            startDatePlaceholderText={intl.formatMessage(messages.startDate)}
+            endDate={value && value[1] ? moment(value[1]) : null}
+            endDateId={`${facet['@id']}-end-date`}
+            endDatePlaceholderText={intl.formatMessage(messages.endDate)}
+            numberOfMonths={1}
+            disabled={isEditMode}
+            noBorder
+            showClearDates
+            customCloseIcon={<CloseIcon />}
+            displayFormat={moment.localeData(intl.locale).longDateFormat('L')}
+            focusedInput={focused}
+            onFocusChange={(focusedInput) => setFocused(focusedInput)}
+            onDatesChange={({ startDate, endDate }) => {
+              onChange(facet.field.value, [
+                startDate ? startDate.format('YYYY-MM-DD') : null,
+                endDate ? endDate.format('YYYY-MM-DD') : null,
+              ]);
+            }}
+            isOutsideRange={() => false}
+            navPrev={<PrevIcon />}
+            navNext={<NextIcon />}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+DateRangeFacet.stateToValue = ({ facetSettings, index, selectedValue }) => {
+  return selectedValue || [null, null];
+};
+
+DateRangeFacet.valueToQuery = ({ value, facet }) => {
+  return value && typeof value[0] === 'string' && typeof value[1] === 'string'
+    ? {
+        i: facet.field.value,
+        o: 'plone.app.querystring.operation.date.between',
+        v: value,
+      }
+    : null;
+};
+
+export default compose(
+  injectLazyLibs(['reactDates', 'moment']),
+  injectIntl,
+)(DateRangeFacet);

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen } from '@testing-library/react';
+
+import DateRangeFacet from './DateRangeFacet';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+describe('DateRangeFaceg', () => {
+  it('renders a facet component with a date range widget', async () => {
+    const store = mockStore({
+      userSession: { token: null },
+      content: { data: { '@id': 'myid' } },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const { container } = render(
+      <Provider store={store}>
+        <DateRangeFacet facet={{ title: 'Test Facet', field: {} }} />
+      </Provider>,
+    );
+    await waitFor(() => screen.getByText('Test Facet'));
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry.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 DateRangeFacetFilterListEntry(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 DateRangeFacetFilterListEntry;

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

@@ -1,6 +1,17 @@
 import React from 'react';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
+import { hasNonValueOperation, hasDateOperation } from '../utils';
+
+const showFacet = (index) => {
+  const { values } = index;
+  return index
+    ? hasNonValueOperation(index.operations || []) ||
+      hasDateOperation(index.operations || [])
+      ? true
+      : values && Object.keys(values).length > 0
+    : values && Object.keys(values).length > 0;
+};
 
 const Facets = (props) => {
   const {
@@ -22,9 +33,9 @@ const Facets = (props) => {
   return (
     <>
       {data?.facets
-        ?.filter((facet) => !facet.hidden)
-        .map((facet) => {
-          const field = facet?.field?.value;
+        ?.filter((facetSettings) => !facetSettings.hidden)
+        .map((facetSettings) => {
+          const field = facetSettings?.field?.value;
           const index = querystring.indexes[field] || {};
           const { values = {} } = index;
 
@@ -41,40 +52,28 @@ const Facets = (props) => {
                 : true,
             );
 
-          const isMulti = facet.multiple;
-          const selectedValue = facets[facet?.field?.value];
+          const isMulti = facetSettings.multiple;
+          const selectedValue = facets[facetSettings?.field?.value];
 
           // TODO :handle changing the type of facet (multi/nonmulti)
 
-          let value = selectedValue
-            ? isMulti
-              ? Array.isArray(selectedValue)
-                ? selectedValue.map((v) => ({
-                    value: v,
-                    label: index.values?.[v]?.title,
-                  }))
-                : []
-              : {
-                  value: selectedValue,
-                  label: index.values?.[selectedValue]?.title,
-                }
-            : [];
-
-          const { view: FacetWidget } = resolveExtension(
+          const { view: FacetWidget, stateToValue } = resolveExtension(
             'type',
             search.extensions.facetWidgets.types,
-            facet,
+            facetSettings,
           );
 
+          let value = stateToValue({ facetSettings, index, selectedValue });
+
           const {
             rewriteOptions = (name, options) => options,
           } = search.extensions.facetWidgets;
 
-          return FacetWrapper && Object.keys(values).length ? (
-            <FacetWrapper key={facet['@id']}>
+          return FacetWrapper && (isEditMode || showFacet(index)) ? (
+            <FacetWrapper key={facetSettings['@id']}>
               <FacetWidget
-                facet={facet}
-                choices={rewriteOptions(facet?.field?.value, choices)}
+                facet={facetSettings}
+                choices={rewriteOptions(facetSettings?.field?.value, choices)}
                 isMulti={isMulti}
                 value={value}
                 isEditMode={isEditMode}

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;
+};