diff --git a/packages/volto/news/5812.feature b/packages/volto/news/5812.feature new file mode 100644 index 0000000000..60c368a163 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/packages/volto/src/components/manage/Blocks/Listing/getAsyncData.js b/packages/volto/src/components/manage/Blocks/Listing/getAsyncData.js index bc125bb1c7..318a3e60ba 100644 --- a/packages/volto/src/components/manage/Blocks/Listing/getAsyncData.js +++ b/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( diff --git a/packages/volto/src/components/manage/Blocks/Listing/withQuerystringResults.jsx b/packages/volto/src/components/manage/Blocks/Listing/withQuerystringResults.jsx index 08c7bdeb6b..6e3010af9a 100644 --- a/packages/volto/src/components/manage/Blocks/Listing/withQuerystringResults.jsx +++ b/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' }, diff --git a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx index 2fbe1ce4c0..9526969f11 100644 --- a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx +++ b/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); diff --git a/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx b/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx index 2cc70ef341..0c2c4bb96a 100644 --- a/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx +++ b/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)), +); diff --git a/packages/volto/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx b/packages/volto/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx index c4b86c1147..b6c7c92376 100644 --- a/packages/volto/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx +++ b/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 (
{facet.title ?? facet?.field?.label}
- {choices.map(({ label, value }, i) => ( -
- 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, - ) - } - /> -
- ))} + {choices.map(({ label, value }, i) => { + const count = facetCount?.data?.[value] || 0; + + return ( +
+ {isFacetCountEnabled === true ? ( + 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, + ) + } + /> + ) : ( + 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, + ) + } + /> + )} +
+ ); + })}
); diff --git a/packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx b/packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx index 2995896a10..8546e948d5 100644 --- a/packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx +++ b/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) => { > { + if (isFacetCountEnabled === false) return true; + return Object.keys(facetCount?.data || {}).find( + (key) => key === value, + ); + })} isMulti={isMulti} value={value} isEditMode={isEditMode} diff --git a/packages/volto/src/components/manage/Blocks/Search/components/SelectFacet.jsx b/packages/volto/src/components/manage/Blocks/Search/components/SelectFacet.jsx index f3eb6c2f08..f43348d772 100644 --- a/packages/volto/src/components/manage/Blocks/Search/components/SelectFacet.jsx +++ b/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 ( - { + 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 ( +