Add Dedicated ManyToManyAssetRelation

public/css/icons.css

@@ -1262,6 +1262,10 @@
     background: url(/bundles/pimcoreadmin/img/flat-color-icons/multihref.svg) center center no-repeat !important;
 }
 
+.pimcore_icon_manyToManyAssetRelation {
+    background: url(/bundles/pimcoreadmin/img/flat-color-icons/asset.svg) center center no-repeat !important;
+}
+
 .pimcore_icon_table {
     background: url(/bundles/pimcoreadmin/img/flat-color-icons/grid.svg) center center no-repeat !important;
 }

public/js/pimcore/object/classes/data/manyToManyAssetRelation.js

@@ -0,0 +1,114 @@
+/**
+* This source file is available under the terms of the
+* Pimcore Open Core License (POCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.com)
+*  @license    Pimcore Open Core License (POCL)
+*/
+
+pimcore.registerNS("pimcore.object.classes.data.manyToManyAssetRelation");
+/**
+ * @private
+ */
+pimcore.object.classes.data.manyToManyAssetRelation = Class.create(pimcore.object.classes.data.manyToManyRelation, {
+
+    type: "manyToManyAssetRelation",
+    /**
+     * define where this datatype is allowed
+     */
+    allowIn: {
+        object: true,
+        objectbrick: true,
+        fieldcollection: true,
+        localizedfield: true,
+        classificationstore : false,
+        block: true
+    },
+
+    initialize: function ($super, treeNode, initData) {
+        $super(treeNode, initData);
+
+        this.type = "manyToManyAssetRelation";
+        this.datax.fieldtype = this.getType();
+        this.datax.objectsAllowed = false;
+        this.datax.documentsAllowed = false;
+        this.datax.assetsAllowed = true;
+
+        pimcore.helpers.sanitizeAllowedTypes(this.datax, "assetTypes");
+
+        this.availableSettingsFields = ["name","title","tooltip","mandatory","noteditable","invisible",
+                                        "visibleGridView","visibleSearch","style"];
+
+        this.treeNode = treeNode;
+    },
+
+    getTypeName: function () {
+        return t("many_to_many_asset_relation");
+    },
+
+    getGroup: function () {
+        return "relation";
+    },
+
+    getIconClass: function () {
+        return "pimcore_icon_manyToManyAssetRelation";
+    },
+
+    getLayout: function ($super) {
+        $super();
+
+        this.datax.assetsAllowed = true;
+        this.datax.objectsAllowed = false;
+        this.datax.documentsAllowed = false;
+
+        if (!this.isInCustomLayoutEditor()) {
+            const removeItems = [];
+            this.specificPanel.items.each(function(item) {
+                if (item.down && (item.down('checkbox[name=documentsAllowed]') || item.down('checkbox[name=objectsAllowed]'))) {
+                    removeItems.push(item);
+                }
+            }.bind(this));
+
+            removeItems.forEach(function(item) {
+                this.specificPanel.remove(item, true);
+            }.bind(this));
+
+            const assetsAllowedField = this.specificPanel.down('checkbox[name=assetsAllowed]');
+            if (assetsAllowedField) {
+                assetsAllowedField.setValue(true);
+                assetsAllowedField.setDisabled(true);
+            }
+        }
+
+        const visibleFieldsInput = {
+            xtype: "textfield",
+            width: 600,
+            fieldLabel: t("objectsMetadata_visible_fields"),
+            name: "visibleFields",
+            value: this.datax.visibleFields
+        };
+
+        const layoutFieldset = this.specificPanel.items.first();
+        if (layoutFieldset) {
+            layoutFieldset.add(visibleFieldsInput);
+        } else {
+            this.specificPanel.add(visibleFieldsInput);
+        }
+
+        return this.layout;
+    },
+
+    applySpecialData: function($super, source) {
+        $super(source);
+
+        if (source.datax) {
+            this.datax.visibleFields = source.datax.visibleFields;
+            this.datax.assetsAllowed = true;
+            this.datax.objectsAllowed = false;
+            this.datax.documentsAllowed = false;
+        }
+    }
+
+});

public/js/pimcore/object/tags/manyToManyAssetRelation.js

@@ -0,0 +1,130 @@
+/**
+* This source file is available under the terms of the
+* Pimcore Open Core License (POCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.com)
+*  @license    Pimcore Open Core License (POCL)
+*/
+
+pimcore.registerNS("pimcore.object.tags.manyToManyAssetRelation");
+/**
+ * @private
+ */
+pimcore.object.tags.manyToManyAssetRelation = Class.create(pimcore.object.tags.manyToManyRelation, {
+
+    type: "manyToManyAssetRelation",
+    idProperty: "id",
+
+    initialize: function ($super, data, fieldConfig) {
+        $super(data, fieldConfig);
+
+        let visibleFields = [];
+        if (Ext.isString(fieldConfig.visibleFields)) {
+            visibleFields = fieldConfig.visibleFields.split(",").map(function (field) {
+                return field.trim();
+            });
+        } else if (Ext.isArray(fieldConfig.visibleFields)) {
+            visibleFields = fieldConfig.visibleFields;
+        }
+
+        this.visibleFields = visibleFields.filter(function (field) {
+            return field.length > 0;
+        });
+    },
+
+    getVisibleColumns: function () {
+        var visibleFields = this.visibleFields || [];
+
+        if (visibleFields.length === 0) {
+            return pimcore.object.tags.manyToManyRelation.prototype.getVisibleColumns.call(this);
+        }
+
+        var columns = [];
+
+        for (var i = 0; i < visibleFields.length; i++) {
+            var key = visibleFields[i];
+            var layout = (this.fieldConfig.visibleFieldDefinitions || {})[key] || {fieldtype: "input", title: key, name: key};
+
+            var field = {
+                key: key,
+                label: layout.title === "fullpath" ? t("reference") : layout.title,
+                layout: layout
+            };
+
+            var tagClass = pimcore.object.tags[field.layout.fieldtype];
+            if (!tagClass) {
+                continue;
+            }
+
+            var fc = tagClass.prototype.getGridColumnConfig(field);
+
+            fc.flex = 100;
+            fc.hidden = false;
+            fc.layout = field;
+            fc.editor = null;
+            fc.sortable = false;
+
+            if (fc.layout.key === "fullpath") {
+                fc.renderer = this.fullPathRenderCheck.bind(this);
+            }
+
+            fc.filter = {
+                type: 'list',
+                labelField: field.key,
+                idField: field.key,
+                store: this.getSortedStore(this.store, field.key)
+            };
+
+            var columnWidth = this.getColumnWidth(fc.dataIndex);
+            if (columnWidth > 0) {
+                fc.width = columnWidth;
+                delete fc.flex;
+            }
+
+            if(typeof fc.listeners === "undefined") {
+                fc.listeners = {};
+            }
+            fc.listeners.resize = function (columnKey, column, width) {
+                localStorage.setItem(this.getColumnWidthLocalStorageKey(columnKey), width);
+            }.bind(this, fc.dataIndex);
+
+            columns.push(fc);
+        }
+
+        return columns;
+    },
+
+    requestNicePathData: function (targets) {
+        if (!this.object) {
+            return;
+        }
+
+        var context = this.getContext();
+        var fields = this.visibleFields || [];
+        var loadEditModeData = fields.length > 0;
+
+        pimcore.helpers.requestNicePathData(
+            {
+                type: "object",
+                id: this.object.id
+            },
+            targets,
+            {
+                idProperty: this.idProperty,
+                pathProperty: this.pathProperty,
+                loadEditModeData: loadEditModeData
+            },
+            this.fieldConfig,
+            context,
+            pimcore.helpers.requestNicePathDataGridDecorator.bind(this, this.component.getView()),
+            pimcore.helpers.getNicePathHandlerStore.bind(this, this.store, {
+                idProperty: this.idProperty,
+                pathProperty: this.pathProperty,
+                loadEditModeData: loadEditModeData,
+                fields: fields
+            }, this.component.getView())
+        );
+    }
+});

templates/admin/index/index.html.twig

@@ -420,6 +420,7 @@
     "pimcore/object/classes/data/consent.js",
     "pimcore/object/classes/data/slider.js",
     "pimcore/object/classes/data/manyToManyRelation.js",
+    "pimcore/object/classes/data/manyToManyAssetRelation.js",
     "pimcore/object/classes/data/table.js",
     "pimcore/object/classes/data/structuredTable.js",
     "pimcore/object/classes/data/country.js",
@@ -544,6 +545,7 @@
     "pimcore/object/tags/wysiwyg.js",
     "pimcore/object/tags/slider.js",
     "pimcore/object/tags/manyToManyRelation.js",
+    "pimcore/object/tags/manyToManyAssetRelation.js",
     "pimcore/object/tags/table.js",
     "pimcore/object/tags/structuredTable.js",
     "pimcore/object/tags/country.js",

translations/admin_ext.en.yaml

@@ -3,6 +3,7 @@ encrypt_data: Encrypt Data
 encrypt_data_description: Data-at-Rest/Tablespace Encryption needs to be enabled on your Database Server
 many_to_one_relation: Many-To-One Relation
 many_to_many_relation: Many-To-Many Relation
+many_to_many_asset_relation: Many-To-Many Asset Relation
 many_to_many_object_relation: Many-To-Many Object Relation
 advanced_many_to_many_relation: Advanced Many-To-Many Relation
 advanced_many_to_many_object_relation: Advanced Many-To-Many Object Relation