[pve-devel] [PATCH widget-toolkit v5 3/5] toolkit: refactor markdown based NotesView and NotesEdit

[Stefan Sterz <s.sterz@proxmox.com>]

refactor them to make them more flexible and, thus, usable in pbs.
adds parameters for enabling the TBar, setting the help section in the
editing dialog and cleans up the code in some places

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/panel/NotesView.js  | 135 +++++++++++++++++++++++-----------------
 src/window/NotesEdit.js |   4 +-
 2 files changed, 81 insertions(+), 58 deletions(-)

diff --git a/src/panel/NotesView.js b/src/panel/NotesView.js
index 7c8299d..21dbdeb 100644
--- a/src/panel/NotesView.js
+++ b/src/panel/NotesView.js
@@ -1,12 +1,15 @@
-Ext.define('PVE.panel.NotesView', {
+Ext.define('Proxmox.panel.NotesView', {
     extend: 'Ext.panel.Panel',
-    xtype: 'pveNotesView',
+    xtype: 'pmxNotesView',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     title: gettext("Notes"),
     bodyPadding: 10,
     scrollable: true,
     animCollapse: false,
     maxLength: 64 * 1024,
+    enableTBar: false,
+    onlineHelp: 'markdown_basics',
 
     tbar: {
 	itemId: 'tbar',
@@ -22,11 +25,55 @@ Ext.define('PVE.panel.NotesView', {
 	],
     },
 
+    cbindData: function(initalConfig) {
+	let me = this;
+	let type = '';
+
+	if (me.node) {
+	    me.url = `/api2/extjs/nodes/${me.node}/config`;
+	} else if (me.pveSelNode?.data?.id === 'root') {
+	    me.url = '/api2/extjs/cluster/options';
+	    type = me.pveSelNode?.data?.type;
+	} else {
+	    const nodename = me.pveSelNode?.data?.node;
+	    type = me.pveSelNode?.data?.type;
+
+	    if (!nodename) {
+		throw "no node name specified";
+	    }
+
+	    if (!Ext.Array.contains(['node', 'qemu', 'lxc'], type)) {
+		throw 'invalid type specified';
+	    }
+
+	    const vmid = me.pveSelNode?.data?.vmid;
+
+	    if (!vmid && type !== 'node') {
+		throw "no VM ID specified";
+	    }
+
+	    me.url = `/api2/extjs/nodes/${nodename}/`;
+
+	    // add the type specific path if qemu/lxc and set the backend's maxLen
+	    if (type === 'qemu' || type === 'lxc') {
+		me.url += `${type}/${vmid}/`;
+		me.maxLength = 8 * 1024;
+	    }
+
+	    me.url += 'config';
+	}
+
+	me.pveType = type;
+
+	me.load();
+	return {};
+    },
+
     run_editor: function() {
 	let me = this;
-	Ext.create('PVE.window.NotesEdit', {
-	    pveSelNode: me.pveSelNode,
+	Ext.create('Proxmox.window.NotesEdit', {
 	    url: me.url,
+	    onlineHelp: me.onlineHelp,
 	    listeners: {
 		destroy: () => me.load(),
 	    },
@@ -34,32 +81,34 @@ Ext.define('PVE.panel.NotesView', {
 	}).setMaxLength(me.maxLength);
     },
 
+    setNotes: function(value = '') {
+	let me = this;
+
+	let mdHtml = Proxmox.Markdown.parse(value);
+	me.update(mdHtml);
+
+	if (me.collapsible && me.collapseMode === 'auto') {
+	    me.setCollapsed(!value);
+	}
+    },
+
     load: function() {
-	var me = this;
+	let me = this;
 
 	Proxmox.Utils.API2Request({
 	    url: me.url,
 	    waitMsgTarget: me,
-	    failure: function(response, opts) {
+	    failure: (response, opts) => {
 		me.update(gettext('Error') + " " + response.htmlStatus);
 		me.setCollapsed(false);
 	    },
-	    success: function(response, opts) {
-		var data = response.result.data.description || '';
-
-		let mdHTML = Proxmox.Markdown.parse(data);
-		me.update(mdHTML);
-
-		if (me.collapsible && me.collapseMode === 'auto') {
-		    me.setCollapsed(data === '');
-		}
-	    },
+	    success: ({ result }) => me.setNotes(result.data.description),
 	});
     },
 
     listeners: {
 	render: function(c) {
-	    var me = this;
+	    let me = this;
 	    me.getEl().on('dblclick', me.run_editor, me);
 	},
 	afterlayout: function() {
@@ -71,49 +120,24 @@ Ext.define('PVE.panel.NotesView', {
 	},
     },
 
-    tools: [{
-	type: 'gear',
-	handler: function() {
-	    let view = this.up('panel');
-	    view.run_editor();
+    tools: [
+	{
+	    type: 'gear',
+	    handler: function() {
+		let view = this.up('panel');
+		view.run_editor();
+	    },
 	},
-    }],
+    ],
 
     initComponent: function() {
-	const me = this;
-	const type = me.pveSelNode.data.type;
-
-	if (me.pveSelNode.data.id === 'root') {
-	    me.url = '/api2/extjs/cluster/options';
-	} else {
-	    const nodename = me.pveSelNode.data.node;
-	    if (!nodename) {
-		throw "no node name specified";
-	    }
-
-	    if (!Ext.Array.contains(['node', 'qemu', 'lxc'], type)) {
-		throw 'invalid type specified';
-	    }
-
-	    const vmid = me.pveSelNode.data.vmid;
-	    if (!vmid && type !== 'node') {
-		throw "no VM ID specified";
-	    }
-
-	    me.url = `/api2/extjs/nodes/${nodename}/`;
-
-	    // add the type specific path if qemu/lxc and set the backend's maxLen
-	    if (type === 'qemu' || type === 'lxc') {
-		me.url += `${type}/${vmid}/`;
-		me.maxLength = 8 * 1024;
-	    }
-	    me.url += 'config';
-	}
-
+	let me = this;
 	me.callParent();
-	if (type === 'node' || type === '') { // '' is for datacenter
+
+	// '' is for datacenter
+	if (me.enableTBar === true || me.pveType === 'node' || me.pveType === '') {
 	    me.down('#tbar').setVisible(true);
-	} else if (me.pveSelNode.data.template !== 1) {
+	} else if (me.pveSelNode?.data?.template !== 1) {
 	    me.setCollapsible(true);
 	    me.collapseDirection = 'right';
 
@@ -124,6 +148,5 @@ Ext.define('PVE.panel.NotesView', {
 		me.setCollapsed(true);
 	    }
 	}
-	me.load();
     },
 });
diff --git a/src/window/NotesEdit.js b/src/window/NotesEdit.js
index 4649843..2de88f9 100644
--- a/src/window/NotesEdit.js
+++ b/src/window/NotesEdit.js
@@ -1,11 +1,11 @@
-Ext.define('PVE.window.NotesEdit', {
+Ext.define('Proxmox.window.NotesEdit', {
     extend: 'Proxmox.window.Edit',
 
     title: gettext('Notes'),
     onlineHelp: 'markdown_basics',
 
     width: 800,
-    height: '600px',
+    height: 600,
 
     resizable: true,
     layout: 'fit',
-- 
2.30.2