ui: wizards: allow adding tags in the qemu/lxc create wizard

[pve-manager.git] / www / manager6 / form / TagEdit.js

diff --git a/www/manager6/form/TagEdit.js b/www/manager6/form/TagEdit.js
index e1cd4af6761cde0a67352fbf7618939b7fa9e0f3..7d5b19ec32a38c6ed08a33e07bc91a1478858681 100644 (file)
--- a/www/manager6/form/TagEdit.js
+++ b/www/manager6/form/TagEdit.js
@@ -9,6 +9,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 
     // set to false to hide the 'no tags' field and the edit button
     canEdit: true,
+    editOnly: false,
 
     controller: {
        xclass: 'Ext.app.ViewController',
@@ -41,7 +42,7 @@ Ext.define('PVE.panel.TagEditContainer', {
        onRender: function(v) {
            let me = this;
            let view = me.getView();
-           view.toggleCls('hide-handles', PVE.Utils.shouldSortTags());
+           view.toggleCls('hide-handles', PVE.UIOptions.shouldSortTags());
 
            view.dragzone = Ext.create('Ext.dd.DragZone', v.getEl(), {
                getDragData: function(e) {
@@ -53,7 +54,7 @@ Ext.define('PVE.panel.TagEditContainer', {
                    let cmp = Ext.getCmp(sourceId);
                    let ddel = document.createElement('div');
                    ddel.classList.add('proxmox-tags-full');
-                   ddel.innerHTML = Proxmox.Utils.getTagElement(cmp.tag, PVE.Utils.tagOverrides);
+                   ddel.innerHTML = Proxmox.Utils.getTagElement(cmp.tag, PVE.UIOptions.tagOverrides);
                    let repairXY = Ext.fly(source).getXY();
                    cmp.setDisabled(true);
                    ddel.id = Ext.id();
@@ -141,7 +142,7 @@ Ext.define('PVE.panel.TagEditContainer', {
 
            // get a current tag list for editing
            if (editMode) {
-               PVE.Utils.updateUIOptions();
+               PVE.UIOptions.update();
            }
 
            me.forEachTag((tag) => {
@@ -192,7 +193,7 @@ Ext.define('PVE.panel.TagEditContainer', {
            let view = me.getView();
            let vm = me.getViewModel();
            let index = view.items.length - 5;
-           if (PVE.Utils.shouldSortTags() && !isNew) {
+           if (PVE.UIOptions.shouldSortTags() && !isNew) {
                index = view.items.findIndexBy(tagField => {
                    if (tagField.reference === 'noTagsField') {
                        return false;
@@ -216,6 +217,9 @@ Ext.define('PVE.panel.TagEditContainer', {
                        me.tagsChanged();
                    },
                    keypress: function(key) {
+                       if (vm.get('hideFinishButtons')) {
+                           return;
+                       }
                        if (key === 'Enter') {
                            me.editClick();
                        } else if (key === 'Escape') {
@@ -253,20 +257,40 @@ Ext.define('PVE.panel.TagEditContainer', {
                me.loadTags(view.tags);
            }
            me.getViewModel().set('canEdit', view.canEdit);
+           me.getViewModel().set('editOnly', view.editOnly);
 
            me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
-               view.toggleCls('hide-handles', PVE.Utils.shouldSortTags());
-               me.loadTags(me.oldTags, true); // refresh tag colors and order
+               let vm = me.getViewModel();
+               view.toggleCls('hide-handles', PVE.UIOptions.shouldSortTags());
+               me.loadTags(me.oldTags, !vm.get('editMode')); // refresh tag colors and order
            });
+
+           if (view.editOnly) {
+               me.toggleEdit();
+           }
        },
     },
 
+    getTags: function() {
+       let me =this;
+       let controller = me.getController();
+       let tags = [];
+           controller.forEachTag((cmp) => {
+               if (cmp.tag.length) {
+                   tags.push(cmp.tag);
+               }
+           });
+
+       return tags;
+    },
+
     viewModel: {
        data: {
            tagCount: 0,
            editMode: false,
            canEdit: true,
            isDirty: false,
+           editOnly: true,
        },
 
        formulas: {
@@ -276,6 +300,9 @@ Ext.define('PVE.panel.TagEditContainer', {
            hideEditBtn: function(get) {
                return get('editMode') || !get('canEdit');
            },
+           hideFinishButtons: function(get) {
+               return !get('editMode') || get('editOnly');
+           },
        },
     },
 
@@ -311,7 +338,7 @@ Ext.define('PVE.panel.TagEditContainer', {
            xtype: 'tbseparator',
            ui: 'horizontal',
            bind: {
-               hidden: '{!editMode}',
+               hidden: '{hideFinishButtons}',
            },
            hidden: true,
        },
@@ -320,7 +347,7 @@ Ext.define('PVE.panel.TagEditContainer', {
            iconCls: 'fa fa-times',
            tooltip: gettext('Cancel Edit'),
            bind: {
-               hidden: '{!editMode}',
+               hidden: '{hideFinishButtons}',
            },
            hidden: true,
            margin: '0 5 0 0',
@@ -332,7 +359,7 @@ Ext.define('PVE.panel.TagEditContainer', {
            iconCls: 'fa fa-check',
            tooltip: gettext('Finish Edit'),
            bind: {
-               hidden: '{!editMode}',
+               hidden: '{hideFinishButtons}',
                disabled: '{!isDirty}',
            },
            hidden: true,