Added multi-line code editor for property values in backend app

webmatch · Dec 21, 2018 · 645468c · 645468c
1 parent ddcddc0
commit 645468c
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [3.2.2]
 - Filter smarty syntax before compiling and strip json induced escapes
+- Added multi-line code editor for property values in backend app
 
 ## [3.2.1]
 - Use PostDispatchSecure events for controller forwards

diff --git a/Resources/views/backend/wbm_tag_manager/app.js b/Resources/views/backend/wbm_tag_manager/app.js
@@ -20,7 +20,7 @@ Ext.define('Shopware.apps.WbmTagManager', {
     loadPath: '{url action=load}',
     controllers: ['Main'],
     models: [ 'Property', 'Modules' ],
-    views: [ 'main.Window', 'main.Panel', 'import.Window' ],
+    views: [ 'main.Window', 'main.Panel', 'main.CodemirrorPrompt', 'import.Window' ],
     stores: [ 'Property', 'Modules' ],
 
     /** Main Function

diff --git a/Resources/views/backend/wbm_tag_manager/view/main/codemirror_prompt.js b/Resources/views/backend/wbm_tag_manager/view/main/codemirror_prompt.js
@@ -0,0 +1,57 @@
+/**
+ * Tag Manager
+ * Copyright (c) Webmatch GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ */
+
+//{namespace name=backend/plugins/wbm/tagmanager}
+//
+Ext.define('Shopware.apps.WbmTagManager.view.main.CodemirrorPrompt', {
+    extend: 'Ext.window.MessageBox',
+    alias: 'widget.codemirrorprompt',
+    presetValue: '',
+    initComponent: function() {
+        var me = this;
+
+        me.callParent();
+        var index = me.promptContainer.items.indexOf(me.textField);
+
+        me.promptContainer.remove(me.textField);
+        me.textField = me._createCodemirrorPrompt();
+        me.promptContainer.insert(index, me.textField);
+    },
+
+    _createCodemirrorPrompt: function() {
+        var me = this,
+            codemirrorfield = Ext.create('Shopware.form.field.CodeMirror', {
+            id: me.id + '-textfield',
+            anchor: '100%',
+            enableKeyEvents: true,
+            mode: 'smarty',
+            listeners: {
+                    keydown: me.onPromptKey,
+                    scope: me
+                }
+            });
+
+        codemirrorfield.focus = Ext.emptyFn;
+        codemirrorfield.on('editorready', function(editorField, editor) {
+            editor.setValue(me.presetValue);
+            editor.setOption('lineWrapping', true);
+            codemirrorfield.focus = function() {
+                codemirrorfield.editor.focus();
+            };
+        });
+
+        return codemirrorfield;
+    }
+});
diff --git a/Resources/views/backend/wbm_tag_manager/view/main/panel.js b/Resources/views/backend/wbm_tag_manager/view/main/panel.js
@@ -21,6 +21,7 @@ Ext.define('Shopware.apps.WbmTagManager.view.main.Panel', {
     alias:'widget.tag-manager-panel',
     region:'center',
     autoScroll:true,
+    requires: ['Shopware.apps.WbmTagManager.view.main.CodemirrorPrompt'],
     initComponent:function () {
         var me = this;
         me.store = Ext.create('Shopware.apps.WbmTagManager.store.Property', {
@@ -131,6 +132,40 @@ Ext.define('Shopware.apps.WbmTagManager.view.main.Panel', {
                             xtype: 'textfield',
                             editable: true
                         }
+                    },
+                    {
+                        xtype: 'actioncolumn',
+                        width: 40,
+                        items: [
+                            {
+                                iconCls: 'x-action-col-icon sprite-pencil',
+                                getClass: function(value, metadata, record) {
+                                    if (!record.get("id")) {
+                                        return 'x-hidden';
+                                    }
+                                },
+                                handler: function (view, rowIndex) {
+                                    var rec = view.getStore().getAt(rowIndex),
+                                        messagePrompt = Ext.create('Shopware.apps.WbmTagManager.view.main.CodemirrorPrompt');
+
+                                    messagePrompt.presetValue = rec.get('value');
+                                    messagePrompt.prompt(
+                                        '',
+                                        '',
+                                        function (button, value) {
+                                            if (button === 'ok') {
+                                                rec.set('value', value);
+                                                rec.save();
+                                            }
+                                        }
+                                    );
+                                    messagePrompt.setWidth(600);
+                                    messagePrompt.setHeight(350);
+                                    messagePrompt.promptContainer.setHeight(320);
+                                    messagePrompt.center();
+                                }
+                            }
+                        ]
                     }
                 ],
                 listeners: {