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 04b6117eebdb58294322d4993f61049bf1e23122..21dbdebdb935027ea2a0120a3b698578b955fbe5 100644 (file)
--- 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 ab5254df99ecd5caec7bb26c58698abf06166927..2de88f9179776397193c87b5a3d6f31425b639b1 100644 (file)
--- 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',