feat(search): show facets count and hide facets values that are not meeting the mandatory criterias in search block

packages/volto/news/5812.feature

@@ -0,0 +1 @@
+feat(search): show facets count and hide facets that are not meeting the mandatory criterias in search block @razvanMiu @dobri1408

packages/volto/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -23,7 +23,6 @@ export default function getListingBlockAsyncData(props) {
 
   const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
   const currentPage = getCurrentPage(location, id);
-
   return [
     dispatch(
       getQueryStringResults(

packages/volto/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -29,7 +29,14 @@ export default function withQuerystringResults(WrappedComponent) {
     // save the path so it won't trigger dispatch on eager router location change
     const [initialPath] = React.useState(getBaseUrl(path));
 
-    const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
+    const copyFields = [
+      'limit',
+      'query',
+      'sort_on',
+      'sort_order',
+      'depth',
+      'facets',
+    ];
     const { currentPage, setCurrentPage } = usePagination(id, 1);
     const adaptedQuery = Object.assign(
       variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },

packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -9,7 +9,7 @@ import config from '@plone/volto/registry';
 
 import { SearchBlockViewComponent } from './SearchBlockView';
 import Schema from './schema';
-import { withSearch, withQueryString } from './hocs';
+import { withSearch, withQueryString, withFacetsCount } from './hocs';
 import { cloneDeep } from 'lodash';
 
 const messages = defineMessages({
@@ -99,4 +99,8 @@ const SearchBlockEdit = (props) => {
   );
 };
 
-export default compose(withQueryString, withSearch())(SearchBlockEdit);
+export default compose(
+  withQueryString,
+  withFacetsCount,
+  withSearch(),
+)(SearchBlockEdit);

packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -5,7 +5,7 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
-import { withSearch, withQueryString } from './hocs';
+import { withSearch, withQueryString, withFacetsCount } from './hocs';
 import { compose } from 'redux';
 import { useSelector } from 'react-redux';
 import { isEqual, isFunction } from 'lodash';
@@ -106,4 +106,6 @@ export const SearchBlockViewComponent = compose(
   (Component) => React.memo(Component, blockPropsAreChanged),
 )(SearchBlockView);
 
-export default withSearch()(withQueryString(SearchBlockViewComponent));
+export default withSearch()(
+  withQueryString(withFacetsCount(SearchBlockViewComponent)),
+);

packages/volto/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx

@@ -11,42 +11,83 @@ import {
  * filtering
  */
 const CheckboxFacet = (props) => {
-  const { facet, choices, isMulti, onChange, value, isEditMode } = props;
+  const {
+    facet,
+    facetCount,
+    choices,
+    isMulti,
+    onChange,
+    value,
+    isEditMode,
+    isFacetCountEnabled,
+  } = props;
   const facetValue = value;
 
   return (
     <div className="checkbox-facet">
       <Header as="h4">{facet.title ?? facet?.field?.label}</Header>
       <div className="entries">
-        {choices.map(({ label, value }, i) => (
-          <div className="entry" key={value}>
-            <Checkbox
-              disabled={isEditMode}
-              label={label}
-              radio={!isMulti}
-              checked={
-                isMulti
-                  ? !!facetValue?.find((f) => f.value === value)
-                  : facetValue && facetValue.value === value
-              }
-              onChange={(e, { checked }) =>
-                onChange(
-                  facet.field.value,
-                  isMulti
-                    ? [
-                        ...facetValue
-                          .filter((f) => f.value !== value)
-                          .map((f) => f.value),
-                        ...(checked ? [value] : []),
-                      ]
-                    : checked
-                      ? value
-                      : null,
-                )
-              }
-            />
-          </div>
-        ))}
+        {choices.map(({ label, value }, i) => {
+          const count = facetCount?.data?.[value] || 0;
+
+          return (
+            <div className="entry" key={value}>
+              {isFacetCountEnabled === true ? (
+                <Checkbox
+                  disabled={isEditMode}
+                  label={`${label} (${count})`}
+                  radio={!isMulti}
+                  checked={
+                    isMulti
+                      ? !!facetValue?.find((f) => f.value === value)
+                      : facetValue && facetValue.value === value
+                  }
+                  onChange={(e, { checked }) =>
+                    onChange(
+                      facet.field.value,
+                      isMulti
+                        ? [
+                            ...facetValue
+                              .filter((f) => f.value !== value)
+                              .map((f) => f.value),
+                            ...(checked ? [value] : []),
+                          ]
+                        : checked
+                          ? value
+                          : null,
+                    )
+                  }
+                />
+              ) : (
+                <Checkbox
+                  disabled={isEditMode}
+                  label={label}
+                  radio={!isMulti}
+                  checked={
+                    isMulti
+                      ? !!facetValue?.find((f) => f.value === value)
+                      : facetValue && facetValue.value === value
+                  }
+                  onChange={(e, { checked }) =>
+                    onChange(
+                      facet.field.value,
+                      isMulti
+                        ? [
+                            ...facetValue
+                              .filter((f) => f.value !== value)
+                              .map((f) => f.value),
+                            ...(checked ? [value] : []),
+                          ]
+                        : checked
+                          ? value
+                          : null,
+                    )
+                  }
+                />
+              )}
+            </div>
+          );
+        })}
       </div>
     </div>
   );

packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx

@@ -79,6 +79,9 @@ const Facets = (props) => {
           const isAdvanced = facetSettings?.advanced;
           const index = querystring.indexes[field] || {};
           const { values = {} } = index;
+          const isFacetCountEnabled = props.facetsCount ? true : false;
+          const facetCount =
+            props.facetsCount?.[facetSettings?.field?.value] || 0;
 
           let choices = Object.keys(values)
             .map((name) => ({
@@ -124,7 +127,17 @@ const Facets = (props) => {
             >
               <FacetWidget
                 facet={facetSettings}
-                choices={rewriteOptions(facetSettings?.field?.value, choices)}
+                facetCount={facetCount}
+                isFacetCountEnabled={isFacetCountEnabled}
+                choices={rewriteOptions(
+                  facetSettings?.field?.value,
+                  choices,
+                ).filter(({ _, value }) => {
+                  if (isFacetCountEnabled === false) return true;
+                  return Object.keys(facetCount?.data || {}).find(
+                    (key) => key === value,
+                  );
+                })}
                 isMulti={isMulti}
                 value={value}
                 isEditMode={isEditMode}

packages/volto/src/components/manage/Blocks/Search/components/SelectFacet.jsx

@@ -13,37 +13,76 @@ import {
 } from './base';
 
 const SelectFacet = (props) => {
-  const { facet, choices, reactSelect, isMulti, onChange, value, isEditMode } =
-    props;
+  const {
+    facet,
+    facetCount,
+    choices,
+    reactSelect,
+    isMulti,
+    onChange,
+    value,
+    isEditMode,
+    isFacetCountEnabled,
+  } = props;
   const Select = reactSelect.default;
   const v = Array.isArray(value) && value.length === 0 ? null : value;
-
-  return (
-    <Select
-      placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
-      className="react-select-container"
-      classNamePrefix="react-select"
-      options={choices}
-      styles={customSelectStyles}
-      theme={selectTheme}
-      components={{ DropdownIndicator, Option, MultiValueContainer }}
-      isDisabled={isEditMode}
-      onChange={(data) => {
-        if (data) {
-          onChange(
-            facet.field.value,
-            isMulti ? data.map(({ value }) => value) : data.value,
-          );
-        } else {
-          // data has been removed
-          onChange(facet.field.value, isMulti ? [] : '');
-        }
-      }}
-      isMulti={facet.multiple}
-      isClearable
-      value={v}
-    />
-  );
+  if (isFacetCountEnabled)
+    return (
+      <Select
+        placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={choices}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option, MultiValueContainer }}
+        isDisabled={isEditMode}
+        onChange={(data) => {
+          if (data) {
+            onChange(
+              facet.field.value,
+              isMulti ? data.map(({ value }) => value) : data.value,
+            );
+          } else {
+            // data has been removed
+            onChange(facet.field.value, isMulti ? [] : '');
+          }
+        }}
+        isMulti={facet.multiple}
+        isClearable
+        value={v}
+        getOptionLabel={({ label, value }) => {
+          return `${label} (${facetCount?.data?.[value] || 0})`;
+        }}
+      />
+    );
+  else
+    return (
+      <Select
+        placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={choices}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option, MultiValueContainer }}
+        isDisabled={isEditMode}
+        onChange={(data) => {
+          if (data) {
+            onChange(
+              facet.field.value,
+              isMulti ? data.map(({ value }) => value) : data.value,
+            );
+          } else {
+            // data has been removed
+            onChange(facet.field.value, isMulti ? [] : '');
+          }
+        }}
+        isMulti={facet.multiple}
+        isClearable
+        value={v}
+      />
+    );
 };
 
 SelectFacet.schemaEnhancer = selectFacetSchemaEnhancer;

packages/volto/src/components/manage/Blocks/Search/hocs/index.js

@@ -1,2 +1,3 @@
+export { default as withFacetsCount } from './withFacetsCount';
 export { default as withQueryString } from './withQueryString';
 export { default as withSearch } from './withSearch';

packages/volto/src/components/manage/Blocks/Search/hocs/withFacetsCount.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+/**
+ * A HOC that injects querystring metadata information from the backend.
+ *
+ */
+export default function withFacetsCount(WrappedComponent) {
+  function WithFacetsCount(props) {
+    const { id } = props;
+
+    const facetsCount = useSelector((state) => {
+      return state.querystringsearch.subrequests[id]?.facets_count;
+    });
+
+    return <WrappedComponent {...props} facetsCount={facetsCount} />;
+  }
+  WithFacetsCount.displayName = `WithFacetsCount(${getDisplayName(
+    WrappedComponent,
+  )})`;
+  return WithFacetsCount;
+}

packages/volto/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -18,6 +18,7 @@ const SEARCH_ENDPOINT_FIELDS = [
   'limit',
   'sort_on',
   'sort_order',
+  'facets',
 ];
 
 const PAQO = 'plone.app.querystring.operation';
@@ -42,7 +43,12 @@ function getInitialState(
 
   return {
     query: [
-      ...(data.query?.query || []),
+      ...(data.query?.query.map((q) => {
+        return {
+          ...q,
+          mandatory: true,
+        };
+      }) || []),
       ...(facetSettings || [])
         .map((facet) => {
           if (!facet?.field) return null;
@@ -73,6 +79,7 @@ function getInitialState(
     sort_order: sortOrderParam || data.query?.sort_order,
     b_size: data.query?.b_size,
     limit: data.query?.limit,
+    facets: (data?.facets || []).map((facet) => facet?.field?.value),
     block: id,
   };
 }
@@ -126,6 +133,7 @@ function normalizeState({
         return valueToQuery({ value, facet });
       }),
     ].filter((o) => !!o),
+    facets: configuredFacets,
     sort_on: sortOn || query.sort_on,
     sort_order: sortOrder || query.sort_order,
     b_size: query.b_size,
@@ -447,7 +455,6 @@ const withSearch = (options) => (WrappedComponent) => {
     );
     const totalItems =
       querystringResults[id]?.total || querystringResults[id]?.items?.length;
-
     return (
       <WrappedComponent
         {...props}