[pbs-devel] [PATCH widget-toolkit v4 3/7] form: add support for multiline textarea

[Gabriel Goller]

This adds support for a editable multiline textarea in the ObjectGrid.
Now we can add a textarea row, which will open a textarea popup, and
encode the multi-line text into an base64 string (with utf8 support).

Signed-off-by: Gabriel Goller <g.goller at proxmox.com>
---
 src/Makefile              |  1 +
 src/form/TextAreaField.js | 60 +++++++++++++++++++++++++++++++++++++++
 src/grid/ObjectGrid.js    | 29 +++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 src/form/TextAreaField.js

diff --git a/src/Makefile b/src/Makefile
index 3c2fd4b0eb81..aa81bef17c84 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -31,6 +31,7 @@ JSSRC=					\
 	form/ExpireDate.js		\
 	form/IntegerField.js		\
 	form/TextField.js		\
+	form/TextAreaField.js		\
 	form/VlanField.js		\
 	form/DateTimeField.js		\
 	form/Checkbox.js		\
diff --git a/src/form/TextAreaField.js b/src/form/TextAreaField.js
new file mode 100644
index 000000000000..3182e4c863be
--- /dev/null
+++ b/src/form/TextAreaField.js
@@ -0,0 +1,60 @@
+Ext.define('Proxmox.form.field.Textareafield', {
+    extend: 'Ext.form.field.TextArea',
+    alias: ['widget.proxmoxtextareafield'],
+
+    config: {
+        skipEmptyText: false,
+        deleteEmpty: false,
+        trimValue: false,
+        editable: true,
+        width: 600,
+        height: 400,
+        scrollable: 'y',
+    },
+
+    setValue: function(value) {
+        // We want to edit the decoded version of the text
+        this.callParent([Proxmox.Utils.base64ToUtf8(value)]);
+    },
+
+    processRawValue: function(value) {
+        // The field could contain multi-line values
+        return Proxmox.Utils.utf8ToBase64(value);
+    },
+
+    getSubmitData: function() {
+        let me = this,
+            data = null,
+            val;
+        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
+            val = me.getSubmitValue();
+            if (val !== null) {
+                data = {};
+                data[me.getName()] = val;
+            } else if (me.getDeleteEmpty()) {
+                data = {};
+                data.delete = me.getName();
+            }
+        }
+        return data;
+    },
+
+    getSubmitValue: function() {
+        let me = this;
+
+        let value = this.processRawValue(this.getRawValue());
+        if (me.getTrimValue() && typeof value === 'string') {
+            value = value.trim();
+        }
+        if (value !== '') {
+            return value;
+        }
+
+        return me.getSkipEmptyText() ? null: value;
+    },
+
+    setAllowBlank: function(allowBlank) {
+        this.allowBlank = allowBlank;
+        this.validate();
+    },
+});
diff --git a/src/grid/ObjectGrid.js b/src/grid/ObjectGrid.js
index b355d6dee2be..30e4ce4b01b6 100644
--- a/src/grid/ObjectGrid.js
+++ b/src/grid/ObjectGrid.js
@@ -182,6 +182,35 @@ Ext.define('Proxmox.grid.ObjectGrid', {
 	};
     },
 
+    add_textareafield_row: function(name, text, opts) {
+	let me = this;
+
+	opts = opts || {};
+	me.rows = me.rows || {};
+
+	me.rows[name] = {
+	    required: true,
+	    defaultValue: "",
+	    header: text,
+	    renderer: function(value) {
+		return Ext.htmlEncode(Proxmox.Utils.base64ToUtf8(value));
+	    },
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		subject: text,
+		onlineHelp: opts.onlineHelp,
+		fieldDefaults: {
+		    labelWidth: opts.labelWidth || 600,
+		},
+		items: {
+		    xtype: 'proxmoxtextareafield',
+		    name: name,
+		},
+	    },
+	};
+    },
+
+
     editorConfig: {}, // default config passed to editor
 
     run_editor: function() {
-- 
2.39.2