APTRepositories: change updating button text/state to viewcontroller

[proxmox-widget-toolkit.git] / src / node / APTRepositories.js

diff --git a/src/node/APTRepositories.js b/src/node/APTRepositories.js
index 43297c93f33dae52199c907523892c355af6dcdf..bb2bde0cdd8fca7f2b2c4aecfce547758dc56d81 100644 (file)
--- a/src/node/APTRepositories.js
+++ b/src/node/APTRepositories.js
@@ -110,6 +110,8 @@ Ext.define('Proxmox.node.APTRepositoriesErrors', {
 
     store: {},
 
+    border: false,
+
     viewConfig: {
        stripeRows: false,
        getRowClass: () => 'proxmox-invalid-row',
@@ -138,6 +140,8 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
 
     cls: 'proxmox-apt-repos', // to allow applying styling to general components with local effect
 
+    border: false,
+
     tbar: [
        {
            text: gettext('Reload'),
@@ -184,6 +188,9 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
            altText: gettext('Disable'),
            id: 'repoEnableButton',
            disabled: true,
+           bind: {
+               text: '{enableButtonText}',
+           },
            handler: function(button, event, record) {
                let me = this;
                let panel = me.up('proxmoxNodeAPTRepositories');
@@ -300,7 +307,16 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
        {
            header: gettext('Origin'),
            dataIndex: 'Origin',
-           width: 100,
+           width: 120,
+           renderer: (value, meta, rec) => {
+               let cls = 'fa fa-fw fa-question-circle-o';
+               if (value.match(/^\s*Proxmox\s*$/i)) {
+                   cls = 'pmx-itype-icon pmx-itype-icon-proxmox-x';
+               } else if (value.match(/^\s*Debian\s*$/i)) {
+                   cls = 'pmx-itype-icon pmx-itype-icon-debian-swirl';
+               }
+               return `<i class='${cls}'></i> ${value}`;
+           },
        },
        {
            header: gettext('Comment'),
@@ -393,19 +409,6 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
 
        me.callParent();
     },
-
-    listeners: {
-       selectionchange: function() {
-           let me = this;
-
-           if (me.onSelectionChange) {
-               let sm = me.getSelectionModel();
-               let rec = sm.getSelection()[0];
-
-               me.onSelectionChange(rec, sm);
-           }
-       },
-    },
 });
 
 Ext.define('Proxmox.node.APTRepositories', {
@@ -417,6 +420,20 @@ Ext.define('Proxmox.node.APTRepositories', {
 
     product: 'Proxmox VE', // default
 
+    controller: {
+       xclass: 'Ext.app.ViewController',
+
+       selectionChange: function(grid, selection) {
+           let me = this;
+           if (!selection || selection.length < 1) {
+               return;
+           }
+           let rec = selection[0];
+           let vm = me.getViewModel();
+           vm.set('selectionenabled', rec.get('Enabled'));
+       },
+    },
+
     viewModel: {
        data: {
            product: 'Proxmox VE', // default
@@ -424,9 +441,12 @@ Ext.define('Proxmox.node.APTRepositories', {
            subscriptionActive: '',
            noSubscriptionRepo: '',
            enterpriseRepo: '',
+           selectionenabled: false,
        },
        formulas: {
            noErrors: (get) => get('errorCount') === 0,
+           enableButtonText: (get) => get('selectionenabled')
+               ? gettext('Disable') : gettext('Enable'),
            mainWarning: function(get) {
                // Not yet initialized
                if (get('subscriptionActive') === '' ||
@@ -455,20 +475,33 @@ Ext.define('Proxmox.node.APTRepositories', {
        },
     },
 
+    scrollable: true,
+    layout: {
+       type: 'vbox',
+       align: 'stretch',
+    },
+
     items: [
        {
-           title: gettext('Warning'),
-           name: 'repositoriesMainWarning',
-           xtype: 'panel',
+           xtype: 'header',
+           baseCls: 'x-panel-header',
            bind: {
+               hidden: '{!mainWarning}',
                title: '{mainWarning}',
+           },
+       },
+       {
+           xtype: 'box',
+           bind: {
                hidden: '{!mainWarning}',
            },
+           height: 5,
        },
        {
            xtype: 'proxmoxNodeAPTRepositoriesErrors',
            name: 'repositoriesErrors',
            hidden: true,
+           padding: '0 0 5 0',
            bind: {
                hidden: '{noErrors}',
            },
@@ -480,12 +513,8 @@ Ext.define('Proxmox.node.APTRepositories', {
                nodename: '{nodename}',
            },
            majorUpgradeAllowed: false, // TODO get release information from an API call?
-           onSelectionChange: function(rec, sm) {
-               let me = this;
-               if (rec) {
-                   let btn = me.up('proxmoxNodeAPTRepositories').down('#repoEnableButton');
-                   btn.setText(rec.get('Enabled') ? gettext('Disable') : gettext('Enable'));
-               }
+           listeners: {
+               selectionchange: 'selectionChange',
            },
        },
     ],