(fix): In search block on edit, the sort on and sort order are not wo…

…rking (#205)

* fix-search-block-on-edit

* fix no selection not working

src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -0,0 +1,106 @@
+//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
+//See here volto pr: https://github.com/plone/volto/pull/5262
+import React, { useEffect } from 'react';
+import { defineMessages } from 'react-intl';
+import { compose } from 'redux';
+
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+import { getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+import { SearchBlockViewComponent } from '@plone/volto/components/manage/Blocks/Search/SearchBlockView';
+import Schema from '@plone/volto/components/manage/Blocks/Search/schema';
+import {
+  withSearch,
+  withQueryString,
+} from '@plone/volto/components/manage/Blocks/Search/hocs';
+import { cloneDeep } from 'lodash';
+
+const messages = defineMessages({
+  template: {
+    id: 'Results template',
+    defaultMessage: 'Results template',
+  },
+});
+
+const SearchBlockEdit = (props) => {
+  const {
+    block,
+    onChangeBlock,
+    data,
+    selected,
+    intl,
+    navRoot,
+    contentType,
+    onTriggerSearch,
+    querystring = {},
+  } = props;
+  const { sortable_indexes = {} } = querystring;
+
+  let schema = Schema({ data, intl });
+
+  schema = addExtensionFieldToSchema({
+    schema,
+    name: 'listingBodyTemplate',
+    items: config.blocks.blocksConfig.listing.variations,
+    intl,
+    title: { id: intl.formatMessage(messages.template) },
+  });
+  const listingVariations = config.blocks.blocksConfig?.listing?.variations;
+  let activeItem = listingVariations.find(
+    (item) => item.id === data.listingBodyTemplate,
+  );
+  const listingSchemaEnhancer = activeItem?.schemaEnhancer;
+  if (listingSchemaEnhancer)
+    schema = listingSchemaEnhancer({
+      schema: cloneDeep(schema),
+      data,
+      intl,
+    });
+  schema.properties.sortOnOptions.items = {
+    choices: Object.keys(sortable_indexes).map((k) => [
+      k,
+      sortable_indexes[k].title,
+    ]),
+  };
+
+  const { query = {} } = data || {};
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
+    onTriggerSearch(
+      '',
+      data?.facets,
+      data?.query?.sort_on,
+      data?.query?.sort_order,
+    );
+  }, [deepQuery, onTriggerSearch, data]);
+
+  return (
+    <>
+      <SearchBlockViewComponent
+        {...props}
+        path={getBaseUrl(props.pathname)}
+        mode="edit"
+      />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default compose(withQueryString, withSearch())(SearchBlockEdit);