From 56bc5c3bda62e0b515b45577b22cdfcb34442bd8 Mon Sep 17 00:00:00 2001 From: Philip Bauer Date: Thu, 18 May 2023 17:15:53 +0200 Subject: [PATCH 1/6] Search Block: Add support for advanced facets that are only displayed on demand (#4783) --- news/4783.feature | 2 + .../Blocks/Search/components/Facets.jsx | 60 ++++++++++++++++++- .../Blocks/Search/layout/LeftColumnFacets.jsx | 42 ++++++++----- .../Search/layout/RightColumnFacets.jsx | 42 ++++++++----- .../Blocks/Search/layout/TopSideFacets.jsx | 46 +++++++++----- src/components/manage/Blocks/Search/schema.js | 20 ++++++- theme/themes/pastanaga/extras/search.less | 6 ++ 7 files changed, 168 insertions(+), 50 deletions(-) create mode 100644 news/4783.feature diff --git a/news/4783.feature b/news/4783.feature new file mode 100644 index 0000000000..531d971133 --- /dev/null +++ b/news/4783.feature @@ -0,0 +1,2 @@ +Search Block: Add support for advanced facets that are only displayed on demand. +[pbauer, razvanMiu, claudiaifrim] diff --git a/src/components/manage/Blocks/Search/components/Facets.jsx b/src/components/manage/Blocks/Search/components/Facets.jsx index 0adc1009d0..dd8d6332d7 100644 --- a/src/components/manage/Blocks/Search/components/Facets.jsx +++ b/src/components/manage/Blocks/Search/components/Facets.jsx @@ -1,7 +1,16 @@ -import React from 'react'; +import React, { useState, useMemo } from 'react'; +import { Button, Grid } from 'semantic-ui-react'; import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions'; import config from '@plone/volto/registry'; import { hasNonValueOperation, hasDateOperation } from '../utils'; +import { defineMessages, useIntl } from 'react-intl'; + +const messages = defineMessages({ + showAdvanced: { id: 'Show advanced', defaultMessage: 'Show advanced' }, + hideAdvanced: { id: 'Hide advanced', defaultMessage: 'Hide advanced' }, + showFilters: { id: 'Show filters', defaultMessage: 'Show filters' }, + hideFilters: { id: 'Hide filters', defaultMessage: 'Hide filters' }, +}); const showFacet = (index) => { const { values } = index; @@ -14,6 +23,7 @@ const showFacet = (index) => { }; const Facets = (props) => { + const [hidden, setHidden] = useState(true); const { querystring, data = {}, @@ -24,11 +34,29 @@ const Facets = (props) => { } = props; const { search } = config.blocks.blocksConfig; + const advancedFilters = useMemo(() => { + let count = 0; + for (let facetSettings of data.facets || []) { + if (facetSettings.advanced) { + count++; + } + } + + if (count === data.facets?.length) { + return 2; + } + if (count) { + return 1; + } + return 0; + }, [data.facets]); + const FacetWrapper = facetWrapper; const query_to_values = Object.assign( {}, ...(data?.query?.query?.map(({ i, v }) => ({ [i]: v })) || []), ); + const intl = useIntl(); return ( <> @@ -36,6 +64,7 @@ const Facets = (props) => { ?.filter((facetSettings) => !facetSettings.hidden) .map((facetSettings) => { const field = facetSettings?.field?.value; + const isAdvanced = facetSettings?.advanced; const index = querystring.indexes[field] || {}; const { values = {} } = index; @@ -58,6 +87,7 @@ const Facets = (props) => { const isMulti = facetSettings.multiple; const selectedValue = facets[facetSettings?.field?.value]; + const visible = (isAdvanced && !hidden) || !isAdvanced; // TODO :handle changing the type of facet (multi/nonmulti) @@ -74,7 +104,11 @@ const Facets = (props) => { } = search.extensions.facetWidgets; return FacetWrapper && (isEditMode || showFacet(index)) ? ( - + { '' ); })} + {advancedFilters > 0 && ( + + + + )} ); }; diff --git a/src/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx b/src/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx index 626f721de2..d7f9fb0c09 100644 --- a/src/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx +++ b/src/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx @@ -11,6 +11,7 @@ import { Grid, Segment } from 'semantic-ui-react'; import { Button } from 'semantic-ui-react'; import { flushSync } from 'react-dom'; import { defineMessages, useIntl } from 'react-intl'; +import cx from 'classnames'; const messages = defineMessages({ searchButtonText: { @@ -19,11 +20,22 @@ const messages = defineMessages({ }, }); -const FacetWrapper = ({ children }) => ( - - {children} - -); +const FacetWrapper = ({ children, facetSettings = {}, visible }) => { + const { advanced, field = {} } = facetSettings; + + return ( + + {children} + + ); +}; const LeftColumnFacets = (props) => { const { @@ -88,16 +100,16 @@ const LeftColumnFacets = (props) => { {(Object.keys(data).includes('showSearchInput') ? data.showSearchInput : true) && ( -
- - {data.showSearchButton && ( - - )} -
- )} +
+ + {data.showSearchButton && ( + + )} +
+ )} ( - - {children} - -); +const FacetWrapper = ({ children, facetSettings = {}, visible }) => { + const { advanced, field = {} } = facetSettings; + + return ( + + {children} + + ); +}; const RightColumnFacets = (props) => { const { @@ -68,16 +80,16 @@ const RightColumnFacets = (props) => { {(Object.keys(data).includes('showSearchInput') ? data.showSearchInput : true) && ( -
- - {data.showSearchButton && ( - - )} -
- )} +
+ + {data.showSearchButton && ( + + )} +
+ )} ( - - {children} - -); +const FacetWrapper = ({ children, facetSettings = {}, visible }) => { + const { advanced, field = {} } = facetSettings; + + return ( + + {children} + + ); +}; const TopSideFacets = (props) => { const { @@ -64,16 +78,16 @@ const TopSideFacets = (props) => { {(Object.keys(data).includes('showSearchInput') ? data.showSearchInput : true) && ( -
- - {data.showSearchButton && ( - - )} -
- )} +
+ + {data.showSearchButton && ( + + )} +
+ )}
{ )}
+ {data.facets?.length > 0 && (
{data.facetsTitle &&

{data.facetsTitle}

} @@ -136,6 +151,7 @@ const TopSideFacets = (props) => {
)} +