[Object editing] Relational fields' grid: remember column widths (#664)

* relational fields' grid: save column width * Save column width of advancedManyToManyRelation, manyToManyObjectRelation, manyToManyRelation * relation fields grid: remember column widths --------- Co-authored-by: dmytroderkachblackbit <[email protected]>
pimcore · Sep 3, 2024 · 80498ed · 80498ed
1 parent e3c2e43
commit 80498ed
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 7 deletions.
diff --git a/public/js/pimcore/object/tags/abstractRelations.js b/public/js/pimcore/object/tags/abstractRelations.js
@@ -205,5 +205,22 @@ pimcore.object.tags.abstractRelations = Class.create(pimcore.object.tags.abstrac
             subtype = "object";
         }
         pimcore.helpers.openElement(record.get('id'), record.get('type'), subtype);
+    },
+
+    getColumnWidthLocalStorageKey: function (column) {
+        let context = this.context;
+        delete context.objectId;
+        context.column = column;
+
+        return Object.values(context).join('_');
+    },
+
+    getColumnWidth: function (column) {
+        let width = parseInt(localStorage.getItem(this.getColumnWidthLocalStorageKey(column)));
+
+        if (width > 0) {
+            return width;
+        }
+        return null;
     }
 });
diff --git a/public/js/pimcore/object/tags/advancedManyToManyObjectRelation.js b/public/js/pimcore/object/tags/advancedManyToManyObjectRelation.js
@@ -141,7 +141,13 @@ pimcore.object.tags.advancedManyToManyObjectRelation = Class.create(pimcore.obje
 
                 let fc = pimcore.object.tags[layout.fieldtype].prototype.getGridColumnConfig(field);
 
-                fc.flex = 1;
+                let columnWidth = this.getColumnWidth(visibleFields[i]);
+                if (columnWidth > 0) {
+                    fc.width = columnWidth;
+                } else {
+                    fc.flex = 1;
+                }
+
                 fc.hidden = false;
                 fc.layout = field;
                 fc.editor = null;
@@ -174,11 +180,16 @@ pimcore.object.tags.advancedManyToManyObjectRelation = Class.create(pimcore.obje
             let width = 100;
             if (this.fieldConfig.columns[i].width) {
                 width = this.fieldConfig.columns[i].width;
+            } else {
+                let columnWidth = this.getColumnWidth(this.fieldConfig.columns[i].key);
+                if(columnWidth > 0) {
+                    width = columnWidth;
+                }
             }
 
             let cellEditor = null;
             let renderer = null;
-            let listeners = null;
+            let listeners = {};
 
             let filterType = 'list';
             if (this.fieldConfig.columns[i].type == "number") {
@@ -300,6 +311,16 @@ pimcore.object.tags.advancedManyToManyObjectRelation = Class.create(pimcore.obje
             columns.push(columnConfig);
         }
 
+        columns = Ext.Array.map(columns, function(column) {
+            if(typeof column.listeners === "undefined") {
+                column.listeners = {};
+            }
+            column.listeners.resize = function (columnKey, column, width) {
+                localStorage.setItem(this.getColumnWidthLocalStorageKey(columnKey), width);
+            }.bind(this, column.dataIndex);
+
+            return column;
+        }.bind(this));
 
         if (!readOnly) {
             columns.push({
@@ -648,6 +669,5 @@ pimcore.object.tags.advancedManyToManyObjectRelation = Class.create(pimcore.obje
 
     getCellEditValue: function () {
         return this.getValue();
-    },
-
+    }
 });
diff --git a/public/js/pimcore/object/tags/advancedManyToManyRelation.js b/public/js/pimcore/object/tags/advancedManyToManyRelation.js
@@ -126,7 +126,7 @@ pimcore.object.tags.advancedManyToManyRelation = Class.create(pimcore.object.tag
 
             var cellEditor = null;
             var renderer = null;
-            var listeners = null;
+            var listeners = {};
 
             filterType = 'list';
 
@@ -251,6 +251,25 @@ pimcore.object.tags.advancedManyToManyRelation = Class.create(pimcore.object.tag
         columns.push({text: t("type"), dataIndex: 'type', width: 100});
         columns.push({text: t("subtype"), dataIndex: 'subtype', width: 100});
 
+        columns = Ext.Array.map(columns, function(column) {
+            let columnWidth = this.getColumnWidth(column.dataIndex);
+            if (columnWidth > 0) {
+                column.width = columnWidth;
+            }
+
+            if(typeof column.width !== "undefined") {
+                delete column.flex;
+            }
+
+            if(typeof column.listeners === "undefined") {
+                column.listeners = {};
+            }
+            column.listeners.resize = function (columnKey, column, width) {
+                localStorage.setItem(this.getColumnWidthLocalStorageKey(columnKey), width);
+            }.bind(this, column.dataIndex);
+
+            return column;
+        }.bind(this));
 
         if (!readOnly) {
             columns.push({

diff --git a/public/js/pimcore/object/tags/manyToManyObjectRelation.js b/public/js/pimcore/object/tags/manyToManyObjectRelation.js
@@ -371,7 +371,6 @@ pimcore.object.tags.manyToManyObjectRelation = Class.create(pimcore.object.tags.
 
                 var fc = pimcore.object.tags[layout.fieldtype].prototype.getGridColumnConfig(field);
 
-                fc.width = 100;
                 fc.flex = 100;
                 fc.hidden = false;
                 fc.layout = field;
@@ -403,6 +402,26 @@ pimcore.object.tags.manyToManyObjectRelation = Class.create(pimcore.object.tags.
             }
         }
 
+        columns = Ext.Array.map(columns, function(column) {
+            let columnWidth = this.getColumnWidth(column.dataIndex);
+            if (columnWidth > 0) {
+                column.width = columnWidth;
+            }
+
+            if (typeof column.width !== "undefined") {
+                delete column.flex;
+            }
+
+            if(typeof column.listeners === "undefined") {
+                column.listeners = {};
+            }
+            column.listeners.resize = function (columnKey, column, width) {
+                localStorage.setItem(this.getColumnWidthLocalStorageKey(columnKey), width);
+            }.bind(this, column.dataIndex);
+
+            return column;
+        }.bind(this));
+
         return columns;
     },
 

diff --git a/public/js/pimcore/object/tags/manyToManyRelation.js b/public/js/pimcore/object/tags/manyToManyRelation.js
@@ -450,8 +450,21 @@ pimcore.object.tags.manyToManyRelation = Class.create(pimcore.object.tags.abstra
             column.filter = {
                 type: 'list'
             }
+
+            let columnWidth = this.getColumnWidth(column.dataIndex);
+            if (columnWidth > 0) {
+                column.width = columnWidth;
+            }
+
+            if(typeof column.listeners === "undefined") {
+                column.listeners = {};
+            }
+            column.listeners.resize = function (columnKey, column, width) {
+                localStorage.setItem(this.getColumnWidthLocalStorageKey(columnKey), width);
+            }.bind(this, column.dataIndex);
+
             return column;
-        });
+        }.bind(this));
 
         return columns;
     },