toolkit: add NotesView panel and NotesEdit window

move them here from pve so we can maintain them across several
products

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
[ T: also rename class/xtypes to avoid temporary breakage ]
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/src/Makefile b/src/Makefile
index abafc2c87d7bfc05c0e104832834acc407931146..dd7729e60424aa711fc204b8c08ce4b7902e6607 100644 (file)
--- a/src/Makefile
+++ b/src/Makefile
@@ -66,6 +66,7 @@ JSSRC=                                        \
        panel/ACMEDomains.js            \
        panel/StatusView.js             \
        panel/TfaView.js                \
+       panel/NotesView.js              \
        window/Edit.js                  \
        window/PasswordEdit.js          \
        window/SafeDestroy.js           \
@@ -87,6 +88,7 @@ JSSRC=                                        \
        window/AddWebauthn.js           \
        window/AddYubico.js             \
        window/TfaEdit.js               \
+       window/NotesEdit.js             \
        node/APT.js                     \
        node/APTRepositories.js         \
        node/NetworkEdit.js             \

diff --git a/src/panel/NotesView.js b/src/panel/NotesView.js
new file mode 100644 (file)
index 0000000..04b6117
--- /dev/null
+++ b/src/panel/NotesView.js
@@ -0,0 +1,129 @@
+Ext.define('Proxmox.panel.NotesView', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pmxNotesView',
+
+    title: gettext("Notes"),
+    bodyPadding: 10,
+    scrollable: true,
+    animCollapse: false,
+    maxLength: 64 * 1024,
+
+    tbar: {
+       itemId: 'tbar',
+       hidden: true,
+       items: [
+           {
+               text: gettext('Edit'),
+               handler: function() {
+                   let view = this.up('panel');
+                   view.run_editor();
+               },
+           },
+       ],
+    },
+
+    run_editor: function() {
+       let me = this;
+       Ext.create('Proxmox.window.NotesEdit', {
+           pveSelNode: me.pveSelNode,
+           url: me.url,
+           listeners: {
+               destroy: () => me.load(),
+           },
+           autoShow: true,
+       }).setMaxLength(me.maxLength);
+    },
+
+    load: function() {
+       var me = this;
+
+       Proxmox.Utils.API2Request({
+           url: me.url,
+           waitMsgTarget: me,
+           failure: function(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 === '');
+               }
+           },
+       });
+    },
+
+    listeners: {
+       render: function(c) {
+           var me = this;
+           me.getEl().on('dblclick', me.run_editor, me);
+       },
+       afterlayout: function() {
+           let me = this;
+           if (me.collapsible && !me.getCollapsed() && me.collapseMode === 'always') {
+               me.setCollapsed(true);
+               me.collapseMode = ''; // only once, on initial load!
+           }
+       },
+    },
+
+    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';
+       }
+
+       me.callParent();
+       if (type === 'node' || type === '') { // '' is for datacenter
+           me.down('#tbar').setVisible(true);
+       } else if (me.pveSelNode.data.template !== 1) {
+           me.setCollapsible(true);
+           me.collapseDirection = 'right';
+
+           let sp = Ext.state.Manager.getProvider();
+           me.collapseMode = sp.get('guest-notes-collapse', 'never');
+
+           if (me.collapseMode === 'auto') {
+               me.setCollapsed(true);
+           }
+       }
+       me.load();
+    },
+});

diff --git a/src/window/NotesEdit.js b/src/window/NotesEdit.js
new file mode 100644 (file)
index 0000000..ab5254d
--- /dev/null
+++ b/src/window/NotesEdit.js
@@ -0,0 +1,38 @@
+Ext.define('Proxmox.window.NotesEdit', {
+    extend: 'Proxmox.window.Edit',
+
+    title: gettext('Notes'),
+    onlineHelp: 'markdown_basics',
+
+    width: 800,
+    height: '600px',
+
+    resizable: true,
+    layout: 'fit',
+
+    autoLoad: true,
+    defaultButton: undefined,
+
+    setMaxLength: function(maxLength) {
+       let me = this;
+
+       let area = me.down('textarea[name="description"]');
+       area.maxLength = maxLength;
+       area.validate();
+
+       return me;
+    },
+
+    items: {
+       xtype: 'textarea',
+       name: 'description',
+       height: '100%',
+       value: '',
+       hideLabel: true,
+       emptyText: gettext('You can use Markdown for rich text formatting.'),
+       fieldStyle: {
+           'white-space': 'pre-wrap',
+           'font-family': 'monospace',
+       },
+    },
+});