form: add support for multiline textarea

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@proxmox.com>
 [ TL: various style, naming fixes and add fieldOps to allow passing,
   e.g., an empty text]
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

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		\

src/form/TextAreaField.js

@@ -0,0 +1,60 @@
+Ext.define('Proxmox.form.field.Base64TextArea', {
+    extend: 'Ext.form.field.TextArea',
+    alias: ['widget.proxmoxBase64TextArea'],
+
+    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();
+    },
+});

src/grid/ObjectGrid.js

@@ -182,6 +182,35 @@ Ext.define('Proxmox.grid.ObjectGrid', {
 	};
     },
 
+    // adds a row that allows editing in a full TextArea that transparently de/encodes as Base64
+    add_textareafield_row: function(name, text, opts) {
+	let me = this;
+
+	opts = opts || {};
+	me.rows = me.rows || {};
+	let fieldOpts = opts.fieldOpts || {};
+
+	me.rows[name] = {
+	    required: true,
+	    defaultValue: "",
+	    header: text,
+	    renderer: value => Ext.htmlEncode(Proxmox.Utils.base64ToUtf8(value)),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		subject: text,
+		onlineHelp: opts.onlineHelp,
+		fieldDefaults: {
+		    labelWidth: opts.labelWidth || 600,
+		},
+		items: {
+		    xtype: 'proxmoxBase64TextArea',
+		    ...fieldOpts,
+		    name,
+		},
+	    },
+	};
+    },
+
     editorConfig: {}, // default config passed to editor
 
     run_editor: function() {