From: Stefan Sterz <s.sterz@proxmox.com>
Date: Tue, 12 Apr 2022 10:34:21 +0000 (+0200)
Subject: toolkit: refactor markdown based NotesView and NotesEdit
X-Git-Url: https://git.proxmox.com/?a=commitdiff_plain;h=11d4f4de44c33b93768875f069f3d46fa5b77915;p=proxmox-widget-toolkit.git

toolkit: refactor markdown based NotesView and NotesEdit

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>
---

diff --git a/src/panel/NotesView.js b/src/panel/NotesView.js
index 04b6117..21dbdeb 100644
--- a/src/panel/NotesView.js
+++ b/src/panel/NotesView.js
@@ -1,12 +1,15 @@
 Ext.define('Proxmox.panel.NotesView', {
     extend: 'Ext.panel.Panel',
     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('Proxmox.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('Proxmox.window.NotesEdit', {
-	    pveSelNode: me.pveSelNode,
 	    url: me.url,
+	    onlineHelp: me.onlineHelp,
 	    listeners: {
 		destroy: () => me.load(),
 	    },
@@ -34,32 +81,34 @@ Ext.define('Proxmox.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('Proxmox.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('Proxmox.panel.NotesView', {
 		me.setCollapsed(true);
 	    }
 	}
-	me.load();
     },
 });
diff --git a/src/window/NotesEdit.js b/src/window/NotesEdit.js
index ab5254d..2de88f9 100644
--- a/src/window/NotesEdit.js
+++ b/src/window/NotesEdit.js
@@ -5,7 +5,7 @@ Ext.define('Proxmox.window.NotesEdit', {
     onlineHelp: 'markdown_basics',
 
     width: 800,
-    height: '600px',
+    height: 600,
 
     resizable: true,
     layout: 'fit',