Gridfilter on relation fields

pimcore · Sep 3, 2021 · 4bf464c · 4bf464c
1 parent c580eb9
commit 4bf464c
Show file tree

Hide file tree

Showing 15 changed files with 241 additions and 4 deletions.
diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/element/helpers/gridColumnConfig.js b/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.getRelationFilterCondition === "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,95 @@ 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;
+            }
+
+            if (fieldInfo.layout.layout.noteditable) {
+                Ext.MessageBox.alert(t('error'), t('this_element_cannot_be_edited'));
+                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.getRelationFilterCondition === "function") {
+                            this.grid.filters.getStore().addFilter(
+                                new Ext.util.Filter({
+                                    operator: "like",
+                                    type: "string",
+                                    id: "x-gridfilter-" + fieldInfo.dataIndex,
+                                    property: fieldInfo.dataIndex,
+                                    value: fieldInfo.getRelationFilterCondition(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();

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/helpers/gridTabAbstract.js b/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();
@@ -313,6 +316,7 @@ pimcore.object.helpers.gridTabAbstract = Class.create({
                     "change": function (field, checked) {
                         this.grid.getStore().setRemoteFilter(false);
                         this.grid.filters.clearFilters();
+                        this.grid.getStore().clearFilter()
 
                         this.store.getProxy().setExtraParam("only_direct_children", checked);
 

diff --git a/...s/AdminBundle/Resources/public/js/pimcore/object/tags/advancedManyToManyObjectRelation.js b/...s/AdminBundle/Resources/public/js/pimcore/object/tags/advancedManyToManyObjectRelation.js
@@ -601,6 +601,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),
+            getRelationFilterCondition: this.getRelationFilterCondition,
             renderer: pimcore.object.helpers.grid.prototype.advancedRelationGridRenderer.bind(this, field, "fullpath")
         };
     },

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/advancedManyToManyRelation.js b/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/advancedManyToManyRelation.js
@@ -943,10 +943,23 @@ 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")
+            getRelationFilterCondition: this.getRelationFilterCondition,
+            renderer: pimcore.object.helpers.grid.prototype.advancedRelationGridRenderer.bind(this, field, "path"),
         };
     },
 
+    getRelationFilterCondition: function (editor) {
+        var filterResult = [];
+        editor.store.getData().items.forEach(
+            function (item) {
+                 filterResult.push(item.data.type + "|" + item.data.id);
+            }
+        );
+        filterResult = filterResult.join(',');
+
+        return filterResult;
+    },
+
     getCellEditValue: function () {
         return this.getValue();
     }

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/hotspotimage.js b/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/hotspotimage.js
@@ -54,6 +54,10 @@ 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),
+            getRelationFilterCondition: function(editor) {
+                var filterResult = editor.data ? editor.data.id : null;
+                return filterResult;
+            },
             renderer: function (key, value, metaData, record, rowIndex, colIndex, store, view) {
                 this.applyPermissionStyle(key, value, metaData, record);
 

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/image.js b/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/image.js
@@ -32,6 +32,10 @@ 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),
+            getRelationFilterCondition: function(editor) {
+                var filterResult = editor.data ? editor.data.id : null;
+                return filterResult;
+            },
             renderer: function (key, value, metaData, record, rowIndex, colIndex, store, view) {
                 this.applyPermissionStyle(key, value, metaData, record);
 

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToManyObjectRelation.js b/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToManyObjectRelation.js
@@ -88,10 +88,22 @@ pimcore.object.tags.manyToManyObjectRelation = Class.create(pimcore.object.tags.
                         return result.join("<br />");
                     }
                 }.bind(this, field.key),
+            getRelationFilterCondition: this.getRelationFilterCondition,
             getEditor: this.getWindowCellEditor.bind(this, field)
         };
     },
 
+    getRelationFilterCondition: function (editor) {
+        var filterResult = [];
+            editor.store.getData().items.forEach(
+                function (item) {
+                     filterResult.push(item.data.id);
+                });
+            filterResult = filterResult.join(',');
+
+         return filterResult;
+    },
+
     openParentSearchEditor: function () {
         pimcore.helpers.itemselector(false, function (selection) {
                 this.parentField.setValue(selection.fullpath);

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToManyRelation.js b/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),
+            getRelationFilterCondition: this.getRelationFilterCondition,
             renderer: function (key, value, metaData, record) {
                 this.applyPermissionStyle(key, value, metaData, record);
 
@@ -100,6 +101,17 @@ pimcore.object.tags.manyToManyRelation = Class.create(pimcore.object.tags.abstra
         };
     },
 
+    getRelationFilterCondition: function (editor) {
+        var filterResult = [];
+            editor.store.getData().items.forEach(
+                function (item) {
+                     filterResult.push(item.data.type + "|" + item.data.id);
+                });
+            filterResult = filterResult.join(',');
+
+         return filterResult;
+    },
+
     getLayoutEdit: function () {
         var autoHeight = false;
         if (!this.fieldConfig.height) {

diff --git a/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToOneRelation.js b/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/manyToOneRelation.js
@@ -55,6 +55,10 @@ pimcore.object.tags.manyToOneRelation = Class.create(pimcore.object.tags.abstrac
 
         return {
             text: t(field.label), sortable: false, dataIndex: field.key, renderer: renderer,
+            getRelationFilterCondition: function(editor) {
+                var filterResult = editor.data ? editor.data.id : null;
+                return filterResult;
+            },
             getEditor: this.getWindowCellEditor.bind(this, field)
         };
     },

diff --git a/bundles/CoreBundle/Resources/translations/en.json b/bundles/CoreBundle/Resources/translations/en.json
@@ -953,4 +953,8 @@
     "ungrouped": "ungrouped",
     "reindex_warning": "Changing it from alphabetical sort order to index will reindex all items. Do you want to continue?",
     "config_not_writeable": "Not writable, this can have several reasons. For details please have a look into the docs."
-}
+    "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"
+}
diff --git a/models/DataObject/ClassDefinition/Data/Hotspotimage.php b/models/DataObject/ClassDefinition/Data/Hotspotimage.php
@@ -29,6 +29,8 @@ class Hotspotimage extends Data implements ResourcePersistenceAwareInterface, Qu
     use ImageTrait;
     use DataObject\Traits\SimpleComparisonTrait;
     use Extension\QueryColumnType;
+    use DataObject\ClassDefinition\NullablePhpdocReturnTypeTrait;
+    use DataObject\ClassDefinition\Data\Extension\RelationFilterConditionParser;
 
     /**
      * Static type of this element
@@ -685,4 +687,19 @@ public function denormalize($value, $params = [])
             return $image;
         }
     }
+
+    /**
+     * Filter by relation feature
+     * @param array|string $value
+     * @param string       $operator
+     * @param array        $params
+     * @return string
+     */
+    public function getFilterConditionExt($value, $operator, $params = [])
+    {
+        $name = $params['name'] ?: $this->name;
+        $name .= '__image';
+        return $this->getRelationFilterCondition($value, $operator, $name);
+    }
+
 }
diff --git a/models/DataObject/ClassDefinition/Data/Image.php b/models/DataObject/ClassDefinition/Data/Image.php
@@ -26,6 +26,8 @@ class Image extends Data implements ResourcePersistenceAwareInterface, QueryReso
     use Extension\ColumnType;
     use ImageTrait;
     use Extension\QueryColumnType;
+    use Model\DataObject\ClassDefinition\NullablePhpdocReturnTypeTrait;
+    use Data\Extension\RelationFilterConditionParser;
 
     /**
      * Static type of this element
@@ -374,4 +376,17 @@ public function denormalize($value, $params = [])
             return Asset\Image::getById($value['id']);
         }
     }
+
+    /**
+     * Filter by relation feature
+     * @param array|string $value
+     * @param string       $operator
+     * @param array        $params
+     * @return string
+     */
+    public function getFilterConditionExt($value, $operator, $params = [])
+    {
+        $name = $params['name'] ?: $this->name;
+        return $this->getRelationFilterCondition($value, $operator, $name);
+    }
 }
diff --git a/models/DataObject/ClassDefinition/Data/ManyToManyObjectRelation.php b/models/DataObject/ClassDefinition/Data/ManyToManyObjectRelation.php
@@ -28,7 +28,7 @@ class ManyToManyObjectRelation extends AbstractRelations implements QueryResourc
     use Extension\QueryColumnType;
     use DataObject\ClassDefinition\Data\Relations\AllowObjectRelationTrait;
     use DataObject\ClassDefinition\Data\Relations\ManyToManyRelationTrait;
-
+    use DataObject\ClassDefinition\Data\Extension\RelationFilterConditionParser;
     /**
      * Static type of this element
      *
@@ -897,4 +897,17 @@ public function addListingFilter(DataObject\Listing $listing, $data, $operator =
 
         return parent::addListingFilter($listing, $data, $operator);
     }
+
+    /**
+     * Filter by relation feature
+     * @param array|string $value
+     * @param string       $operator
+     * @param array        $params
+     * @return string
+     */
+    public function getFilterConditionExt($value, $operator, $params = [])
+    {
+        $name = $params['name'] ?: $this->name;
+        return $this->getRelationFilterCondition($value, $operator, $name);
+    }
 }