ui: use some icons from widget-toolkit

[pve-manager.git] / www / manager6 / panel / NotesView.js

diff --git a/www/manager6/panel/NotesView.js b/www/manager6/panel/NotesView.js
index add9e5e30786ae65cf7326f81f1f70dd8e8a6ea9..18dd8876bf6bb93e2f7131a7bf12fd4fd91565ee 100644 (file)
--- a/www/manager6/panel/NotesView.js
+++ b/www/manager6/panel/NotesView.js
@@ -1,23 +1,81 @@
 Ext.define('PVE.panel.NotesView', {
     extend: 'Ext.panel.Panel',
+    xtype: 'pveNotesView',
+
+    title: gettext("Notes"),
+    bodyStyle: 'white-space:pre',
+    bodyPadding: 10,
+    scrollable: true,
+    animCollapse: false,
+
+    tbar: {
+       itemId: 'tbar',
+       hidden: true,
+       items: [
+           {
+               text: gettext('Edit'),
+               handler: function() {
+                   var me = this.up('panel');
+                   me.run_editor();
+               },
+           },
+       ],
+    },
+
+    run_editor: function() {
+       var me = this;
+       var win = Ext.create('PVE.window.NotesEdit', {
+           pveSelNode: me.pveSelNode,
+           url: me.url,
+       });
+       win.show();
+       win.on('destroy', me.load, me);
+    },
 
     load: function() {
        var me = this;
-       
-       PVE.Utils.API2Request({
+
+       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 || '';
                me.update(Ext.htmlEncode(data));
-           }
+
+               if (me.collapsible && me.collapseMode === 'auto') {
+                   me.setCollapsed(data === '');
+               }
+           },
        });
     },
 
-    initComponent : function() {
+    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() {
+           var me = this.up('panel');
+           me.run_editor();
+       },
+    }],
+
+    initComponent: function() {
        var me = this;
 
        var nodename = me.pveSelNode.data.node;
@@ -25,42 +83,39 @@ Ext.define('PVE.panel.NotesView', {
            throw "no node name specified";
        }
 
+       var type = me.pveSelNode.data.type;
+       if (!Ext.Array.contains(['node', 'qemu', 'lxc'], type)) {
+           throw 'invalid type specified';
+       }
+
        var vmid = me.pveSelNode.data.vmid;
-       if (!vmid) {
+       if (!vmid && type !== 'node') {
            throw "no VM ID specified";
        }
 
-       var vmtype = me.pveSelNode.data.type;
-       var url;
+       me.url = '/api2/extjs/nodes/' + nodename + '/';
 
-       if (vmtype === 'qemu') {
-           me.url = '/api2/extjs/nodes/' + nodename + '/qemu/' + vmid + '/config';
-       } else if (vmtype === 'lxc') {
-           me.url = '/api2/extjs/nodes/' + nodename + '/lxc/' + vmid + '/config';
-       } else {
-           throw "unknown vm type '" + vmtype + "'";
+       // add the type specific path if qemu/lxc
+       if (type === 'qemu' || type === 'lxc') {
+           me.url += type + '/' + vmid + '/';
        }
 
-       Ext.apply(me, {
-           title: gettext("Notes"),
-           style: 'padding-left:10px',
-           bodyStyle: 'white-space:pre',
-           bodyPadding: 10,
-           autoScroll: true,
-           listeners: {
-               render: function(c) {
-                   c.el.on('dblclick', function() { 
-                       var win = Ext.create('PVE.window.NotesEdit', {
-                           pveSelNode: me.pveSelNode,
-                           url: me.url
-                       });
-                       win.show();
-                       win.on('destroy', me.load, me);
-                   });
-               }
-           }
-       });
+       me.url += 'config';
 
        me.callParent();
-    }
+       if (type === 'node') {
+           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();
+    },
 });