[Admin] DataObject Grid - filter by relation fields

bundles/AdminBundle/Controller/Admin/ElementController.php

@@ -892,7 +892,7 @@ protected function getNicePathFormatterFieldDefinition($source, $context)
     }
 
     /**
-     * @param DataObject\Concrete $source
+     * @param Element\AbstractElement $source
      * @param array $context
      * @param array $result
      * @param array $targets
@@ -901,7 +901,7 @@ protected function getNicePathFormatterFieldDefinition($source, $context)
      *
      * @throws \Exception
      */
-    protected function convertResultWithPathFormatter(DataObject\Concrete $source, $context, $result, $targets): array
+    protected function convertResultWithPathFormatter(Element\AbstractElement $source, $context, $result, $targets): array
     {
         $fd = $this->getNicePathFormatterFieldDefinition($source, $context);
 

bundles/AdminBundle/Resources/public/js/pimcore/element/helpers/gridColumnConfig.js

@@ -263,6 +263,7 @@ pimcore.element.helpers.gridColumnConfig = {
         var menu = grid.headerCt.getMenu();
         menu.add(columnConfig);
         //
+
         var batchAllMenu = new Ext.menu.Item({
             text: t("batch_change"),
             iconCls: "pimcore_icon_table pimcore_icon_overlay_go",
@@ -330,11 +331,28 @@ pimcore.element.helpers.gridColumnConfig = {
         });
         menu.add(batchRemoveSelectedMenu);
 
+        var filterByRelationMenu = new Ext.menu.Item({
+            text: t("filter_by_relation"),
+            iconCls: "pimcore_icon_filter pimcore_icon_overlay_add",
+            handler: function (grid) {
+                var menu = grid.headerCt.getMenu();
+                var column = menu.activeHeader;
+                this.filterPrepare(column);
+            }.bind(this, grid)
+        });
+        menu.add(filterByRelationMenu);
+
         //
         menu.on('beforeshow', function (batchAllMenu, batchSelectedMenu, grid) {
             var menu = grid.headerCt.getMenu();
             var columnDataIndex = menu.activeHeader.dataIndex;
 
+            if (menu.activeHeader.config && typeof menu.activeHeader.config.getRelationFilter === "function") {
+                filterByRelationMenu.show();
+            } else {
+                filterByRelationMenu.hide();
+            }
+
             // no batch for system properties
             if (Ext.Array.contains(this.systemColumns, columnDataIndex) || Ext.Array.contains(this.noBatchColumns, columnDataIndex)) {
                 batchAllMenu.hide();
@@ -362,6 +380,84 @@ pimcore.element.helpers.gridColumnConfig = {
         }.bind(this, batchAllMenu, batchSelectedMenu, grid));
     },
 
+    filterPrepare: function (column) {
+        var dataIndexName = column.dataIndex
+        var gridColumns = this.grid.getColumns();
+        var columnIndex = -1;
+        for (let i = 0; i < gridColumns.length; i++) {
+            let dataIndex = gridColumns[i].dataIndex;
+            if (dataIndex == dataIndexName) {
+                columnIndex = i;
+                break;
+            }
+        }
+        if (columnIndex < 0) {
+            return;
+        }
+
+        if (this.systemColumns.indexOf(gridColumns[columnIndex].dataIndex) > -1) {
+            return;
+        }
+
+        var fieldInfo = this.grid.getColumns()[columnIndex].config;
+
+        if((this.objecttype === "object") || (this.objecttype === "variant")) {
+            if (!fieldInfo.layout || !fieldInfo.layout.layout) {
+                return;
+            }
+
+            var tagType = fieldInfo.layout.type;
+            var editor = new pimcore.object.tags[tagType](null, fieldInfo.layout.layout);
+            editor.setObject(this.object);
+        }
+
+        editor.updateContext({
+            containerType: "filterByRelationWindow"
+        });
+
+        var formPanel = Ext.create('Ext.form.Panel', {
+            xtype: "form",
+            border: false,
+            items: [editor.getLayoutEdit()],
+            bodyStyle: "padding: 10px;",
+            buttons: [
+                {
+                    text: t("clear_relation_filter"),
+                    iconCls: "pimcore_icon_filter_condition pimcore_icon_overlay_delete",
+                    handler: function () {
+                        this.filterByRelationWindow.close();
+                        this.grid.store.filters.removeByKey("x-gridfilter-"+fieldInfo.dataIndex);
+                    }.bind(this)
+                },
+                {
+                    text: t("apply_filter"),
+                    iconCls: "pimcore_icon_filter pimcore_icon_overlay_add",
+                    handler: function () {
+                        if (formPanel.isValid() && typeof fieldInfo.getRelationFilter === "function") {
+                            this.grid.filters.getStore().addFilter(
+                                fieldInfo.getRelationFilter(fieldInfo.dataIndex, editor)
+                            );
+                            this.filterByRelationWindow.close();
+                        }
+                    }.bind(this)
+                }
+            ]
+        });
+
+        var title = t("filter_by_relation_field") + " " + fieldInfo.text;
+        this.filterByRelationWindow = new Ext.Window({
+            autoScroll: true,
+            modal: false,
+            title: title,
+            items: [formPanel],
+            bodyStyle: "background: #fff;",
+            width: 700,
+            maxHeight: 650
+        });
+        this.filterByRelationWindow.show();
+        this.filterByRelationWindow.updateLayout();
+    },
+
     batchPrepare: function (column, onlySelected, append, remove) {
         var dataIndexName = column.dataIndex
         var gridColumns = this.grid.getColumns();

bundles/AdminBundle/Resources/public/js/pimcore/object/helpers/gridTabAbstract.js

@@ -207,6 +207,7 @@ pimcore.object.helpers.gridTabAbstract = Class.create({
                     }
                 );
 
+                this.grid.getStore().clearFilter();
                 this.grid.filters.clearFilters();
 
                 this.pagingtoolbar.moveFirst();
@@ -232,6 +233,7 @@ pimcore.object.helpers.gridTabAbstract = Class.create({
         );
         proxy.setExtraParam("condition", this.sqlEditor.getValue());
         if (this.grid && this.grid.filters) {
+            this.grid.getStore().clearFilter();
             this.grid.filters.clearFilters();
         }
 
@@ -295,6 +297,7 @@ pimcore.object.helpers.gridTabAbstract = Class.create({
                 text: t("clear_filters"),
                 tooltip: t("clear_filters"),
                 handler: function (button) {
+                    this.grid.getStore().clearFilter();
                     this.grid.filters.clearFilters();
                     this.toolbarFilterInfo.hide();
                     this.clearFilterButton.hide();
@@ -312,6 +315,7 @@ pimcore.object.helpers.gridTabAbstract = Class.create({
                 listeners: {
                     "change": function (field, checked) {
                         this.grid.getStore().setRemoteFilter(false);
+                        this.grid.getStore().clearFilter();
                         this.grid.filters.clearFilters();
 
                         this.store.getProxy().setExtraParam("only_direct_children", checked);

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/advancedManyToManyObjectRelation.js

@@ -598,6 +598,7 @@ pimcore.object.tags.advancedManyToManyObjectRelation = Class.create(pimcore.obje
         return {
             text: t(field.label), width: 150, sortable: false, dataIndex: field.key,
             getEditor: this.getWindowCellEditor.bind(this, field),
+            getRelationFilter: this.getRelationFilter,
             renderer: pimcore.object.helpers.grid.prototype.advancedRelationGridRenderer.bind(this, field, "fullpath")
         };
     },

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/advancedManyToManyRelation.js

@@ -940,10 +940,31 @@ pimcore.object.tags.advancedManyToManyRelation = Class.create(pimcore.object.tag
         return {
             text: t(field.label), width: 150, sortable: false, dataIndex: field.key,
             getEditor: this.getWindowCellEditor.bind(this, field),
-            renderer: pimcore.object.helpers.grid.prototype.advancedRelationGridRenderer.bind(this, field, "path")
+            getRelationFilter: this.getRelationFilter,
+            renderer: pimcore.object.helpers.grid.prototype.advancedRelationGridRenderer.bind(this, field, "path"),
         };
     },
 
+    getRelationFilter: function (dataIndex, editor) {
+        var filterValues = editor.store.getData().items;
+        if (!filterValues || !Array.isArray(filterValues) || !filterValues.length) {
+            filterValues = null;
+        } else {
+            filterValues = filterValues.map(function (item) {
+                return item.data.type + "|" + item.data.id;
+            }).join(',');
+        }
+
+        return new Ext.util.Filter({
+            operator: "like",
+            type: "string",
+            id: "x-gridfilter-" + dataIndex,
+            property: dataIndex,
+            dataIndex: dataIndex,
+            value: filterValues
+        });
+    },
+
     getCellEditValue: function () {
         return this.getValue();
     }

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/hotspotimage.js

@@ -54,6 +54,7 @@ pimcore.object.tags.hotspotimage = Class.create(pimcore.object.tags.image, {
         return {
             text: t(field.label), width: 100, sortable: false, dataIndex: field.key,
             getEditor: this.getWindowCellEditor.bind(this, field),
+            getRelationFilter: this.getRelationFilter,
             renderer: function (key, value, metaData, record, rowIndex, colIndex, store, view) {
                 this.applyPermissionStyle(key, value, metaData, record);
 
@@ -92,6 +93,18 @@ pimcore.object.tags.hotspotimage = Class.create(pimcore.object.tags.image, {
         };
     },
 
+    getRelationFilter: function (dataIndex, editor) {
+        var filterValue = editor.data && editor.data.id !== undefined ? editor.data.id : null;
+        return new Ext.util.Filter({
+            operator: "=",
+            type: "int",
+            id: "x-gridfilter-" + dataIndex,
+            property: dataIndex,
+            dataIndex: dataIndex,
+            value: filterValue
+        });
+    },
+
     getLayoutEdit: function () {
 
         if (intval(this.fieldConfig.width) < 1) {

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/image.js

@@ -32,6 +32,7 @@ pimcore.object.tags.image = Class.create(pimcore.object.tags.abstract, {
         return {
             text: t(field.label), width: 100, sortable: false, dataIndex: field.key,
             getEditor: this.getWindowCellEditor.bind(this, field),
+            getRelationFilter: this.getRelationFilter,
             renderer: function (key, value, metaData, record, rowIndex, colIndex, store, view) {
                 this.applyPermissionStyle(key, value, metaData, record);
 
@@ -67,6 +68,18 @@ pimcore.object.tags.image = Class.create(pimcore.object.tags.abstract, {
         };
     },
 
+    getRelationFilter: function (dataIndex, editor) {
+        var filterValue = editor.data && editor.data.id !== undefined ? editor.data.id : null;
+        return new Ext.util.Filter({
+            operator: "=",
+            type: "int",
+            id: "x-gridfilter-" + dataIndex,
+            property: dataIndex,
+            dataIndex: dataIndex,
+            value: filterValue
+        });
+    },
+
     getLayoutEdit: function () {
         if (!this.fieldConfig.width) {
             this.fieldConfig.width = 300;

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToManyObjectRelation.js

@@ -88,10 +88,31 @@ pimcore.object.tags.manyToManyObjectRelation = Class.create(pimcore.object.tags.
                         return result.join("<br />");
                     }
                 }.bind(this, field.key),
+            getRelationFilter: this.getRelationFilter,
             getEditor: this.getWindowCellEditor.bind(this, field)
         };
     },
 
+    getRelationFilter: function (dataIndex, editor) {
+        var filterValues = editor.store.getData().items;
+        if (!filterValues || !Array.isArray(filterValues) || !filterValues.length) {
+            filterValues = null;
+        } else {
+            filterValues = filterValues.map(function (item) {
+                return item.data.id;
+            }).join(',');
+        }
+
+        return new Ext.util.Filter({
+            operator: "like",
+            type: "string",
+            id: "x-gridfilter-" + dataIndex,
+            property: dataIndex,
+            dataIndex: dataIndex,
+            value: filterValues
+        });
+    },
+
     openParentSearchEditor: function () {
         pimcore.helpers.itemselector(false, function (selection) {
                 this.parentField.setValue(selection.fullpath);

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToManyRelation.js

@@ -76,6 +76,7 @@ pimcore.object.tags.manyToManyRelation = Class.create(pimcore.object.tags.abstra
         return {
             text: t(field.label), width: 150, sortable: false, dataIndex: field.key,
             getEditor: this.getWindowCellEditor.bind(this, field),
+            getRelationFilter: this.getRelationFilter,
             renderer: function (key, value, metaData, record) {
                 this.applyPermissionStyle(key, value, metaData, record);
 
@@ -100,6 +101,26 @@ pimcore.object.tags.manyToManyRelation = Class.create(pimcore.object.tags.abstra
         };
     },
 
+    getRelationFilter: function (dataIndex, editor) {
+        var filterValues = editor.store.getData().items;
+        if (!filterValues || !Array.isArray(filterValues) || !filterValues.length) {
+            filterValues = null;
+        } else {
+            filterValues = filterValues.map(function (item) {
+                return item.data.type + "|" + item.data.id;
+            }).join(',');
+        }
+
+        return new Ext.util.Filter({
+            operator: "like",
+            type: "string",
+            id: "x-gridfilter-" + dataIndex,
+            property: dataIndex,
+            dataIndex: dataIndex,
+            value: filterValues
+        });
+    },
+
     getLayoutEdit: function () {
         var autoHeight = false;
         if (!this.fieldConfig.height) {

bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToOneRelation.js

@@ -55,10 +55,22 @@ pimcore.object.tags.manyToOneRelation = Class.create(pimcore.object.tags.abstrac
 
         return {
             text: t(field.label), sortable: false, dataIndex: field.key, renderer: renderer,
+            getRelationFilter: this.getRelationFilter,
             getEditor: this.getWindowCellEditor.bind(this, field)
         };
     },
 
+    getRelationFilter: function (dataIndex, editor) {
+        var filterValue = editor.data && editor.data.id !== undefined ? editor.data.type + "|" + editor.data.id : null;
+        return new Ext.util.Filter({
+            operator: "=",
+            type: "int",
+            id: "x-gridfilter-" + dataIndex,
+            property: dataIndex,
+            dataIndex: dataIndex,
+            value: filterValue
+        });
+    },
 
     getLayoutEdit: function () {
 

bundles/CoreBundle/Resources/translations/en.json

@@ -952,5 +952,9 @@
     "selected_grid_columns": "Selected grid columns",
     "ungrouped": "ungrouped",
     "reindex_warning": "Changing it from alphabetical sort order to index will reindex all items. Do you want to continue?",
+    "filter_by_relation": "Filter by relation",
+    "filter_by_relation_field": "Filter by relation field",
+    "clear_relation_filter": "Clear active relation filter",
+    "apply_filter": "Apply filter",
     "config_not_writeable": "Not writable, this can have several reasons. For details please have a look into the docs."
-}
+}