Checkpoint

searchlib/components/SearchView/SearchView.jsx

@@ -20,7 +20,7 @@ import { useAtom } from 'jotai';
 import { isLandingPageAtom } from './state';
 
 export const SearchView = (props) => {
-  const { appConfig, appName, mode = 'view' } = props;
+  const { appConfig, appName, mode = 'view', slotFills = {} } = props;
 
   const searchContext = useSearchContext();
   const { driver } = React.useContext(SUISearchContext);
@@ -53,26 +53,30 @@ export const SearchView = (props) => {
       <Layout
         appConfig={appConfig}
         header={
-          <SearchBox
-            searchContext={searchContext}
-            isLandingPage={!wasInteracted}
-            autocompleteMinimumCharacters={3}
-            autocompleteResults={appConfig.autocomplete.results}
-            autocompleteSuggestions={appConfig.autocomplete.suggestions}
-            shouldClearFilters={false}
-            useSearchPhrases={appConfig.useSearchPhrases}
-            inputView={
-              appConfig.searchBoxInputComponent
-                ? registry.resolve[appConfig.searchBoxInputComponent].component
-                : undefined
-            }
-            view={
-              appConfig.searchBoxComponent
-                ? registry.resolve[appConfig.searchBoxComponent].component
-                : undefined
-            }
-            mode={mode}
-          />
+          <>
+            {slotFills.aboveSearchInput}
+            <SearchBox
+              searchContext={searchContext}
+              isLandingPage={!wasInteracted}
+              autocompleteMinimumCharacters={3}
+              autocompleteResults={appConfig.autocomplete.results}
+              autocompleteSuggestions={appConfig.autocomplete.suggestions}
+              shouldClearFilters={false}
+              useSearchPhrases={appConfig.useSearchPhrases}
+              inputView={
+                appConfig.searchBoxInputComponent
+                  ? registry.resolve[appConfig.searchBoxInputComponent]
+                      .component
+                  : undefined
+              }
+              view={
+                appConfig.searchBoxComponent
+                  ? registry.resolve[appConfig.searchBoxComponent].component
+                  : undefined
+              }
+              mode={mode}
+            />
+          </>
         }
         sideContent={null}
         bodyHeader={<SampleQueryPrompt />}

src/SearchBlock/BlockContainer/BlockContainer.jsx

@@ -1,5 +1,51 @@
 import React from 'react';
+import { RenderBlocks } from '@plone/volto/components';
+import { useLocation } from 'react-router-dom';
+import BlockEdit from '@plone/volto/components/manage/Blocks/Block/Edit';
+import NewBlockAddButton from './NewBlockAddButton';
+
+const style = {
+  zIndex: '101',
+  position: 'relative',
+};
 
 export default function BlockContainer(props) {
-  return null;
+  // console.log('block container', props);
+  const { mode, block, data, onChangeSlotfill, onDeleteSlotfill } = props;
+  const location = useLocation();
+  const content = {
+    blocks: { [block]: data },
+    blocks_layout: { items: [block] },
+  };
+  const metadata = {};
+  const index = 0;
+  return (
+    <div className="aboveSearchblockOverlay" style={style}>
+      {mode === 'view' ? (
+        <RenderBlocks
+          content={content}
+          metadata={metadata}
+          location={location}
+        />
+      ) : data ? (
+        <BlockEdit
+          id={block}
+          block={block}
+          data={data}
+          type={data['@type']}
+          properties={metadata}
+          selected={false}
+          multiSelected={false}
+          onMoveBlock={() => {}}
+          onDeleteBlock={() => {}}
+          onChangeBlock={onChangeSlotfill}
+          index={index}
+        />
+      ) : (
+        <div>
+          <NewBlockAddButton block={block} onMutateBlock={onChangeSlotfill} />
+        </div>
+      )}
+    </div>
+  );
 }

src/SearchBlock/BlockContainer/NewBlockAddButton.jsx

@@ -5,7 +5,7 @@ import useOutsideClick from '@eeacms/search/lib/hocs/useOutsideClick';
 import addSVG from '@plone/volto/icons/add.svg';
 
 const NewBlockAddButton = (props) => {
-  const { allowedBlocks, block, index, onChangeGridItem } = props;
+  const { allowedBlocks, block, onMutateBlock } = props;
   const ref = React.useRef();
   const [isOpenMenu, setOpenMenu] = React.useState(false);
 
@@ -16,7 +16,7 @@ const NewBlockAddButton = (props) => {
       {isOpenMenu ? (
         <div ref={ref}>
           <BlockChooser
-            onMutateBlock={(block, value) => onChangeGridItem(index, value)}
+            onMutateBlock={onMutateBlock}
             currentBlock={block}
             showRestricted
             allowedBlocks={allowedBlocks}
@@ -28,7 +28,7 @@ const NewBlockAddButton = (props) => {
           icon
           onClick={() => setOpenMenu(true)}
           className="add-block-button"
-          aria-label={`Add grid block in position ${index}`}
+          aria-label={`Add block in position ${block}`}
         >
           <Icon name={addSVG} className="circled" size="24px" />
         </Button>

src/SearchBlock/SearchBlockEdit.jsx

@@ -28,9 +28,45 @@ const SearchBlockEdit = (props) => {
     return schema;
   }, [stableData]);
 
+  const onChangeSlotfill = React.useCallback(
+    (slotId, value) => {
+      const newValue = {
+        ...stableData,
+        slotFills: {
+          ...(stableData.slotFills || {}),
+          [slotId]: {
+            ...(stableData?.slotFills?.[slotId] || {}),
+            ...value,
+          },
+        },
+      };
+      console.log('onChange', { block, value, stableData, newValue });
+      onChangeBlock(block, newValue);
+    },
+    [block, stableData, onChangeBlock],
+  );
+
+  const onDeleteSlotfill = React.useCallback(
+    (slotId) => {
+      onChangeBlock(block, {
+        ...stableData,
+        slotFills: {
+          ...(stableData.slotFills || {}),
+          [slotId]: undefined,
+        },
+      });
+    },
+    [block, onChangeBlock, stableData],
+  );
+
   return (
     <div>
-      <SearchBlockView {...props} mode="edit">
+      <SearchBlockView
+        {...props}
+        mode="edit"
+        onChangeSlotfill={onChangeSlotfill}
+        onDeleteSlotfill={onDeleteSlotfill}
+      >
         <SidebarPortal selected={props.selected}>
           <BlockDataForm
             schema={schema}

src/SearchBlock/SearchBlockView.jsx

@@ -8,7 +8,14 @@ import { useDebouncedStableData } from './hocs';
 import './less/styles.less';
 
 function SearchBlockView(props) {
-  const { data = {}, mode = 'view', variation, children } = props;
+  const {
+    data = {},
+    mode = 'view',
+    variation,
+    children,
+    onChangeSlotfill,
+    onDeleteSlotfill,
+  } = props;
   const { appName = 'default' } = data;
   const stableData = useDebouncedStableData(data);
 
@@ -57,6 +64,8 @@ function SearchBlockView(props) {
         defaultFilters={data.defaultFilters
           ?.map((f) => (f.value ? f.value : undefined))
           .filter((f) => !!f)}
+        onChangeSlotfill={onChangeSlotfill}
+        onDeleteSlotfill={onDeleteSlotfill}
       >
         {mode !== 'view' ? children : null}
       </Variation>

src/SearchBlock/templates/FullView.jsx

@@ -17,17 +17,30 @@ const slots = [
   'belowResults',
 ];
 
-const getBlocks = (slotFills = {}, mode = 'view') => {
+const getBlocks = (slotFills = {}, mode = 'view', props) => {
   return Object.assign(
     {},
-    slots.map((name) => ({
-      [name]: <BlockContainer block={name} data={slotFills[name]} />,
+    ...slots.map((name) => ({
+      [name]: (
+        <BlockContainer
+          block={name}
+          data={slotFills[name]}
+          mode={mode}
+          {...props}
+        />
+      ),
     })),
   );
 };
 
 function FullView(props) {
-  const { appName, mode } = props;
+  const {
+    appName,
+    mode,
+    slotFills,
+    onChangeSlotfill,
+    onDeleteSlotfill,
+  } = props;
 
   // TODO: (about bodyclass) this is a hack, please solve it properly
 
@@ -39,7 +52,10 @@ function FullView(props) {
         )}
         <SearchApp
           {...props}
-          slotFills={getBlocks(props.data?.slotFills, mode)}
+          slotFills={getBlocks(slotFills, mode, {
+            onChangeSlotfill,
+            onDeleteSlotfill,
+          })}
         />
         {props.children}
       </div>