Add ability to filter the attributes that are saved in the ObjectBrow…

…serWidget and add proper object_widget (#2053)

CHANGELOG.md

@@ -6,6 +6,9 @@
 
 ### Feature
 
+- Add ability to filter the attributes that are saved in the ObjectBrowserWidget @sneridagh
+- Add `object_browser` as widget @sneridagh
+
 ### Bugfix
 
 - Adding video thumbnail for the .mp4 extension @iFlameing.

docs/source/blocks/editcomponent.md

@@ -189,6 +189,36 @@ if we use object browser widget for fields:
 - **image**: dataName is _url_ and propDataName is null
 - **link**: dataName is _href_ and propDataName is null
 
+#### Usage in blocks schema
+
+Used in along with `InlineForm`, one can instantiate and configure it using the widget props like this:
+
+```js
+{
+  title: 'Item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['href'],
+    },
+  ],
+  properties: {
+    href: {
+      title: 'title',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: ['Title', 'Description'],
+    },
+}
+```
+
+#### selectedItemAttrs
+
+You can select the attributes from the object (coming from the metadata brain from
+@search endpoint used in the browser) using the `selectedItemAttrs` prop as shown in the
+last example.
+
 #### ObjectBrowserWidgetMode()
 
 Returns the component widget with _mode_ passed as argument.

src/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -137,7 +137,6 @@ class ObjectBrowserWidget extends Component {
     if (maxSize === 1 && value.length === 1) {
       value = []; //enable replace of selected item with another value, if maxsize is 1
     }
-
     let exists = false;
     let index = -1;
     value.forEach((_item, _index) => {
@@ -150,8 +149,26 @@ class ObjectBrowserWidget extends Component {
     //   '@id': flattenToAppURL(item['@id']),
     // });
     if (!exists) {
-      //add item
-      value.push(item);
+      // add item
+      // Check if we want to filter the attributes of the selected item
+      let resultantItem = item;
+      if (this.props.selectedItemAttrs) {
+        const allowedItemKeys = [
+          ...this.props.selectedItemAttrs,
+          // Add the required attributes for the widget to work
+          '@id',
+          'title',
+        ];
+        resultantItem = Object.keys(item)
+          .filter((key) => allowedItemKeys.includes(key))
+          .reduce((obj, key) => {
+            obj[key] = item[key];
+            return obj;
+          }, {});
+      }
+      // Add required @id field, just in case
+      resultantItem = { ...resultantItem, '@id': item['@id'] };
+      value.push(resultantItem);
       this.props.onChange(this.props.id, value);
     } else {
       //remove item

src/config/Widgets.jsx

@@ -49,6 +49,7 @@ export const widgetMapping = {
     align: AlignWidget,
     url: UrlWidget,
     email: EmailWidget,
+    object_browser: ObjectBrowserWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,