relocation and relocationcontext

rohberg · Jan 5, 2021 · 10c84f0 · 10c84f0
1 parent 1fab876
commit 10c84f0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 18 deletions.
diff --git a/src/components/Blocks/FacetedSearchBlockEdit.jsx b/src/components/Blocks/FacetedSearchBlockEdit.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
 
 import Sidebar from './Sidebar';
-import FacetedSearch from '../Views/FacetedSearch';
+// import FacetedSearch from '../Views/FacetedSearch';
 
 const Edit = ({ data, onChangeBlock, block, selected }) => {
   return (

diff --git a/src/components/Blocks/schema.js b/src/components/Blocks/schema.js
@@ -4,7 +4,12 @@ export const SearchBlockSchema = {
     {
       id: 'default',
       title: 'Default',
-      fields: ['elastic_search_api_url', 'elastic_search_api_index'],
+      fields: [
+        'elastic_search_api_url',
+        'elastic_search_api_index',
+        'relocation',
+        'relocationcontext',
+      ],
     },
   ],
   properties: {
@@ -16,6 +21,15 @@ export const SearchBlockSchema = {
       title: 'Elastic Search API Index',
       default: 'esploneindex',
     },
+    relocation: {
+      title: 'Relocation',
+      description:
+        'Selector for relaction of search bar. Leave empty to keep search bar in block.',
+    },
+    relocationcontext: {
+      title: 'Relocation context',
+      description: 'Path where search bar should be relocated',
+    },
   },
   required: ['elastic_search_api_url', 'elastic_search_api_index'],
 };
diff --git a/src/components/Views/FacetedSearch.jsx b/src/components/Views/FacetedSearch.jsx
@@ -1,4 +1,5 @@
 // TODO update counts of BucketAggregation on selection of filter
+// TODO lacales actionProps, placeholder
 import React, { useEffect } from 'react';
 
 import { OverridableContext } from 'react-overridable';
@@ -275,9 +276,9 @@ const customEmpytResultsElement = (props) => {
         onClick={() => {
           resetQuery();
           // todo click cross of search input field
-          document
-            .querySelector('nav.navigation .ui.basic.button.cancel')
-            .click();
+          // document
+          //   .querySelector('nav.navigation .ui.basic.button.cancel')
+          //   .click();
         }}
       >
         Suche zurücksetzen
@@ -315,6 +316,8 @@ const FacetedSearch = ({ data }) => {
   const {
     search_url = data.elastic_search_api_url || 'http://localhost:9200',
     search_index = data.elastic_search_api_index || 'esploneindex',
+    relocation = data.relocation || '',
+    relocationcontext = data.relocationcontext || null,
   } = data;
 
   const dispatch = useDispatch();
@@ -353,26 +356,40 @@ const FacetedSearch = ({ data }) => {
             initialQueryState={initialState}
           >
             <Container>
-              <div>
-                debug1:
-                {console.log(
-                  'debug1',
-                  location,
-                  isClient,
-                  document.querySelectorAll('nav.navigation'),
-                )}
-              </div>
-              {location?.pathname?.startsWith('/dokumentation') && (
+              {relocationcontext &&
+              document &&
+              location?.pathname === relocationcontext &&
+              relocation.length > 0 ? (
                 <Portal
                   node={
                     isClient &&
-                    document.querySelectorAll('nav.navigation') &&
-                    document.querySelectorAll('nav.navigation')[0]
+                    document &&
+                    document.querySelectorAll(relocation) &&
+                    document.querySelectorAll(relocation)[0]
                   }
                 >
-                  <SearchBar />
+                  <SearchBar
+                    placeholder="Suche"
+                    autofocus="true"
+                    actionProps={{ content: 'Suche' }}
+                    uiProps={{ icon: 'search', iconPosition: 'left' }}
+                  />
                 </Portal>
+              ) : (
+                <Grid relaxed style={{ padding: '2em 0' }}>
+                  <Grid.Row>
+                    <Grid.Column width={12}>
+                      <SearchBar
+                        placeholder="Suche"
+                        autofocus="true"
+                        actionProps={{ content: 'Suche' }}
+                        uiProps={{ icon: 'search', iconPosition: 'left' }}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
               )}
+
               <Grid relaxed style={{ padding: '2em 0' }}>
                 <Grid.Row>
                   <Grid.Column