Show and hide filters according block configuration. Reorganise block…

… configuration in fieldsets.
rohberg · Feb 2, 2023 · b4bdcac · b4bdcac
1 parent d0ab19a
commit b4bdcac
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 32 deletions.
diff --git a/src/components/Blocks/FacetedSearchBlockEdit.jsx b/src/components/Blocks/FacetedSearchBlockEdit.jsx
@@ -8,10 +8,7 @@ const Edit = ({ data, onChangeBlock, block, selected }) => {
   return (
     <div className="block searchkitsearch">
       <SidebarPortal selected={selected}>
-        <Sidebar 
-          data={data}
-          block={block}
-          onChangeBlock={onChangeBlock} />
+        <Sidebar data={data} block={block} onChangeBlock={onChangeBlock} />
       </SidebarPortal>
 
       <div className="block searchkitsearch">

diff --git a/src/components/Blocks/SearchSectionsWidget.jsx b/src/components/Blocks/SearchSectionsWidget.jsx
@@ -20,6 +20,10 @@ const messages = defineMessages({
     id: 'Add search section',
     defaultMessage: 'Add search section',
   },
+  showFilter: {
+    id: 'Show filters',
+    defineMessage: 'Show filter',
+  },
 });
 
 const ItemSchema = ({ intl }) => {
@@ -33,12 +37,17 @@ const ItemSchema = ({ intl }) => {
       label: {
         title: intl.formatMessage(messages.searchsectionlabel),
       },
+      show_filter: {
+        title: intl.formatMessage(messages.showFilter),
+        type: 'boolean',
+        default: true,
+      },
     },
     fieldsets: [
       {
         id: 'default',
         title: 'History-Eintrag',
-        fields: ['section', 'label'],
+        fields: ['section', 'label', 'show_filter'],
       },
     ],
     required: [],

diff --git a/src/components/Blocks/schema.js b/src/components/Blocks/schema.js
@@ -58,20 +58,34 @@ export const SearchBlockSchema = ({ data = {}, intl }) => {
       },
       {
         id: 'search',
-        title: 'Facets and results',
+        title: 'Search',
         fields: [
-          'search_sections',
-          'allow_search_excluded_sections',
           'allowed_content_types',
           'allowed_review_states',
           'searchedFields',
+        ],
+      },
+      {
+        id: 'results',
+        title: 'Results',
+        fields: ['extrainfo_fields', 'subjectsFieldname'],
+      },
+      {
+        id: 'facets',
+        title: 'Facets',
+        fields: [
+          'search_sections',
+          'allow_search_excluded_sections',
+          'show_filter_for_excluded_sections',
           'facet_fields',
           'filterLayout',
-          'extrainfo_fields',
-          'subjectsFieldname',
-          'relocation',
         ],
       },
+      {
+        id: 'divers',
+        title: 'Divers',
+        fields: ['relocation'],
+      },
     ],
     properties: {
       elastic_search_api_url: {
@@ -101,6 +115,11 @@ export const SearchBlockSchema = ({ data = {}, intl }) => {
         title: 'Allow search everywhere except in sections',
         type: 'boolean',
       },
+      show_filter_for_excluded_sections: {
+        title: 'Show filter for excluded sections',
+        type: 'boolean',
+        default: true,
+      },
       allowed_content_types: {
         title: 'Types',
         description: 'Restrict types to display.',

diff --git a/src/components/Searchkit/CustomESRequestSerializer.jsx b/src/components/Searchkit/CustomESRequestSerializer.jsx
@@ -358,10 +358,6 @@ export class CustomESRequestSerializer {
       ];
     }
     bodyParams['post_filter'] = post_filter;
-    console.debug(
-      "bodyParams['post_filter']['bool']",
-      bodyParams['post_filter']['bool'],
-    );
 
     /**
      * Aggregations

diff --git a/src/components/Searchkit/SectionsSearch.jsx b/src/components/Searchkit/SectionsSearch.jsx
@@ -1,16 +1,23 @@
 import React from 'react';
+import { keyBy } from 'lodash';
 import { withState } from 'react-searchkit';
-import StateLogger from '../StateLogger';
+import { BodyClass } from '@plone/volto/helpers';
+// import StateLogger from '../StateLogger';
 
 const _SectionsSearch = ({
   allow_search_excluded_sections,
+  show_filter_for_excluded_sections,
   search_sections,
   currentQueryState,
   updateQueryState,
 }) => {
   const [activeSection, setActiveSection] = React.useState('all');
+
+  const search_sections_dict = keyBy(search_sections.items, (el) => {
+    return el.section;
+  });
+
   const restrictSearchToSection = (section) => {
-    console.debug('restrictSearchToSection');
     setActiveSection(section);
     let kitquerystate = {
       sortBy: 'modified',
@@ -23,6 +30,15 @@ const _SectionsSearch = ({
     if (currentQueryState.queryString) {
       kitquerystate.queryString = currentQueryState.queryString;
     }
+
+    // Empty filters for sections without filter
+    if (
+      (search_sections_dict[section] &&
+        !search_sections_dict[section].show_filter) ||
+      (section === 'others' && !show_filter_for_excluded_sections)
+    ) {
+      kitquerystate.filters = [];
+    }
     // Replace filter 'section'
     kitquerystate.filters = kitquerystate.filters.filter((el) => {
       return el[0] !== 'section';
@@ -34,13 +50,21 @@ const _SectionsSearch = ({
     } else {
       kitquerystate.filters.push(['section', section]);
     }
-
-    console.debug('kitquerystate.filters', kitquerystate.filters);
+    // Do search!
     updateQueryState(kitquerystate);
   };
 
   return (
     <>
+      <BodyClass
+        className={
+          (search_sections_dict[activeSection] &&
+            !search_sections_dict[activeSection].show_filter) ||
+          (activeSection === 'others' && !show_filter_for_excluded_sections)
+            ? 'section_without_filter'
+            : ''
+        }
+      />
       <div className="searchsections">
         {search_sections.items?.length > 0 ? (
           <button
@@ -61,6 +85,7 @@ const _SectionsSearch = ({
         {search_sections.items.map((el) => {
           return (
             <button
+              key={el.section}
               className={activeSection === el.section ? 'active' : ''}
               onClick={() => restrictSearchToSection(el.section)}
             >

diff --git a/src/components/Views/FacetedSearch.jsx b/src/components/Views/FacetedSearch.jsx
@@ -64,7 +64,7 @@ export const ploneSearchApi = (data) => {
     axios: {
       url: expandToBackendURL('/@kitsearch'),
       timeout: 5000,
-      headers: { 
+      headers: {
         Accept: 'application/json',
         Authorization: `Bearer ${authToken}`,
       },
@@ -163,7 +163,7 @@ class _ExtraInfo extends React.Component {
               {extrainfo_value?.map((item, index) => {
                 let tito = item.title || item.token || item;
                 return (
-                  <span>
+                  <span key={index}>
                     {tito}
                     {index < extrainfo_value.length - 1 ? ',' : null}
                   </span>
@@ -583,6 +583,7 @@ const initialState = {
 const FacetedSearch = ({ data, overriddenComponents }) => {
   const {
     allow_search_excluded_sections,
+    show_filter_for_excluded_sections,
     facet_fields,
     relocation,
     filterLayout,
@@ -681,26 +682,24 @@ const FacetedSearch = ({ data, overriddenComponents }) => {
                 </Grid>
               )}
               <Grid relaxed style={{ padding: '2em 0' }}>
-                <Grid.Row>
-                  <Grid.Column
-                    width={12}
-                    className={'facetedsearch_sections ' + filterLayout}
-                  >
+                <Grid.Row className={'facetedsearch_sections ' + filterLayout}>
+                  <Grid.Column width={12}>
                     <SectionsSearch
                       search_sections={search_sections}
                       allow_search_excluded_sections={
                         allow_search_excluded_sections
                       }
+                      show_filter_for_excluded_sections={
+                        show_filter_for_excluded_sections
+                      }
                     />
                   </Grid.Column>
                 </Grid.Row>
-                <Grid.Row>
-                  <Grid.Column
-                    width={12}
-                    className={'facetedsearch_filter ' + filterLayout}
-                  >
+                <Grid.Row className={'facetedsearch_filter ' + filterLayout}>
+                  <Grid.Column width={12}>
                     {Object.keys(facet_fields_object)?.map((facet) => (
                       <BucketAggregation
+                        key={facet}
                         title={facet_fields_object[facet]}
                         agg={{
                           field: facet,

diff --git a/src/components/Views/less/springisnow-volto-searchkit-block.less b/src/components/Views/less/springisnow-volto-searchkit-block.less
@@ -59,6 +59,9 @@
 
 // .ui.grid > .row > .column.facetedsearch_filter {
 .facetedsearch_filter {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 1s, visibility 1s;
     &.cards {
         display: flex;
         flex-direction: row;
@@ -138,6 +141,11 @@
         }
     }
 }
+// No filter according to block configuration
+body.section_without_filter .facetedsearch_filter {
+    visibility: hidden;
+    opacity: 0;
+}
 
 .searchsections {
     display: flex;
@@ -148,7 +156,7 @@
         background-color: #f3f1f1;
         color: #6e6a6a;
         &.active {
-            background-color: #e8e3e3;
+            background-color: #dfd8d8;
         }
     }
 }