From 1d07d61a1807700a7eb985ff3f4d50bcfa243732 Mon Sep 17 00:00:00 2001
From: Gabriel Goller <g.goller@proxmox.com>
Date: Fri, 13 Sep 2024 15:10:29 +0200
Subject: [PATCH] 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              |  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 d3138df..33fcf5e 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 0000000..267b40c
--- /dev/null
+++ b/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();
+    },
+});
diff --git a/src/grid/ObjectGrid.js b/src/grid/ObjectGrid.js
index b355d6d..fa5fb92 100644
--- a/src/grid/ObjectGrid.js
+++ b/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() {