X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=window%2FEdit.js;h=c165141129f7e725d18a04a17a0b02ed8f683be8;hb=c898b490c713f8aad9085836e519c76157af55ac;hp=b736a85c1fe3c71bc59a13ef55b826183339afdd;hpb=42a9df8b1fa672e64a16c19f20bfbff55aadbbe0;p=proxmox-widget-toolkit.git diff --git a/window/Edit.js b/window/Edit.js index b736a85..c165141 100644 --- a/window/Edit.js +++ b/window/Edit.js @@ -1,5 +1,4 @@ // fixme: how can we avoid those lint errors? -/*jslint confusion: true */ Ext.define('Proxmox.window.Edit', { extend: 'Ext.window.Window', alias: 'widget.proxmoxWindowEdit', @@ -34,28 +33,38 @@ Ext.define('Proxmox.window.Edit', { defaultButton: 'submitbutton', // finds the first form field - defaultFocus: 'field', + defaultFocus: 'field[disabled=false][hidden=false]', showProgress: false, + showTaskViewer: false, + + // gets called if we have a progress bar or taskview and it detected that + // the task finished. function(success) + taskDone: Ext.emptyFn, + + // gets called when the api call is finished, right at the beginning + // function(success, response, options) + apiCallDone: Ext.emptyFn, + // assign a reference from docs, to add a help button docked to the // bottom of the window. If undefined we magically fall back to the // onlineHelp of our first item, if set. onlineHelp: undefined, isValid: function() { - var me = this; + let me = this; - var form = me.formPanel.getForm(); + let form = me.formPanel.getForm(); return form.isValid(); }, getValues: function(dirtyOnly) { - var me = this; + let me = this; - var values = {}; + let values = {}; - var form = me.formPanel.getForm(); + let form = me.formPanel.getForm(); form.getFields().each(function(field) { if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) { @@ -71,18 +80,21 @@ Ext.define('Proxmox.window.Edit', { }, setValues: function(values) { - var me = this; - - var form = me.formPanel.getForm(); - - Ext.iterate(values, function(fieldId, val) { - var field = form.findField(fieldId); - if (field && !field.up('inputpanel')) { - field.setValue(val); - if (form.trackResetOnLoad) { - field.resetOriginalValue(); - } - } + let me = this; + + let form = me.formPanel.getForm(); + let formfields = form.getFields(); + + Ext.iterate(values, function(id, val) { + let fields = formfields.filterBy((f) => + (f.id === id || f.name === id || f.dataIndex === id) && !f.up('inputpanel'), + ); + fields.each((field) => { + field.setValue(val); + if (form.trackResetOnLoad) { + field.resetOriginalValue(); + } + }); }); Ext.Array.each(me.query('inputpanel'), function(panel) { @@ -90,15 +102,19 @@ Ext.define('Proxmox.window.Edit', { }); }, + setSubmitText: function(text) { + this.lookup('submitbutton').setText(text); + }, + submit: function() { - var me = this; + let me = this; - var form = me.formPanel.getForm(); + let form = me.formPanel.getForm(); - var values = me.getValues(); + let values = me.getValues(); Ext.Object.each(values, function(name, val) { - if (values.hasOwnProperty(name)) { - if (Ext.isArray(val) && !val.length) { + if (Object.prototype.hasOwnProperty.call(values, name)) { + if (Ext.isArray(val) && !val.length) { values[name] = ''; } } @@ -112,7 +128,7 @@ Ext.define('Proxmox.window.Edit', { values.background_delay = me.backgroundDelay; } - var url = me.url; + let url = me.url; if (me.method === 'DELETE') { url = url + "?" + Ext.Object.toQueryString(values); values = undefined; @@ -124,55 +140,62 @@ Ext.define('Proxmox.window.Edit', { method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'), params: values, failure: function(response, options) { + me.apiCallDone(false, response, options); + if (response.result && response.result.errors) { form.markInvalid(response.result.errors); } Ext.Msg.alert(gettext('Error'), response.htmlStatus); }, success: function(response, options) { - var hasProgressBar = (me.backgroundDelay || me.showProgress) && - response.result.data ? true : false; + let hasProgressBar = + (me.backgroundDelay || me.showProgress || me.showTaskViewer) && + response.result.data; + + me.apiCallDone(true, response, options); if (hasProgressBar) { // stay around so we can trigger our close events // when background action is completed me.hide(); - var upid = response.result.data; - var win = Ext.create('Proxmox.window.TaskProgress', { + let upid = response.result.data; + let viewerClass = me.showTaskViewer ? 'Viewer' : 'Progress'; + Ext.create('Proxmox.window.Task' + viewerClass, { + autoShow: true, upid: upid, + taskDone: me.taskDone, listeners: { - destroy: function () { + destroy: function() { me.close(); - } - } + }, + }, }); - win.show(); } else { me.close(); } - } + }, }); }, load: function(options) { - var me = this; + let me = this; - var form = me.formPanel.getForm(); + let form = me.formPanel.getForm(); options = options || {}; - var newopts = Ext.apply({ - waitMsgTarget: me + let newopts = Ext.apply({ + waitMsgTarget: me, }, options); - var createWrapper = function(successFn) { + let createWrapper = function(successFn) { Ext.apply(newopts, { url: me.url, method: 'GET', success: function(response, opts) { form.clearInvalid(); - me.digest = response.result.data.digest; + me.digest = response.result.digest || response.result.data.digest; if (successFn) { successFn(response, opts); } else { @@ -187,7 +210,7 @@ Ext.define('Proxmox.window.Edit', { Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() { me.close(); }); - } + }, }); }; @@ -196,8 +219,8 @@ Ext.define('Proxmox.window.Edit', { Proxmox.Utils.API2Request(newopts); }, - initComponent : function() { - var me = this; + initComponent: function() { + let me = this; if (!me.url) { throw "no url specified"; @@ -205,7 +228,7 @@ Ext.define('Proxmox.window.Edit', { if (me.create) {throw "deprecated parameter, use isCreate";} - var items = Ext.isArray(me.items) ? me.items : [ me.items ]; + let items = Ext.isArray(me.items) ? me.items : [me.items]; me.items = undefined; @@ -213,23 +236,23 @@ Ext.define('Proxmox.window.Edit', { url: me.url, method: me.method || 'PUT', trackResetOnLoad: true, - bodyPadding: 10, + bodyPadding: me.bodyPadding !== undefined ? me.bodyPadding : 10, border: false, - defaults: { - border: false - }, + defaults: Ext.apply({}, me.defaults, { + border: false, + }), fieldDefaults: Ext.apply({}, me.fieldDefaults, { labelWidth: 100, - anchor: '100%' + anchor: '100%', }), - items: items + items: items, }); - var inputPanel = me.formPanel.down('inputpanel'); + let inputPanel = me.formPanel.down('inputpanel'); - var form = me.formPanel.getForm(); + let form = me.formPanel.getForm(); - var submitText; + let submitText; if (me.isCreate) { if (me.submitText) { submitText = me.submitText; @@ -244,58 +267,96 @@ Ext.define('Proxmox.window.Edit', { submitText = me.submitText || gettext('OK'); } - var submitBtn = Ext.create('Ext.Button', { + let submitBtn = Ext.create('Ext.Button', { reference: 'submitbutton', text: submitText, disabled: !me.isCreate, handler: function() { me.submit(); - } + }, }); - var resetBtn = Ext.create('Ext.Button', { + let resetBtn = Ext.create('Ext.Button', { text: 'Reset', disabled: true, - handler: function(){ + handler: function() { form.reset(); - } + }, }); - var set_button_status = function() { - var valid = form.isValid(); - var dirty = form.isDirty(); + let set_button_status = function() { + let valid = form.isValid(); + let dirty = form.isDirty(); submitBtn.setDisabled(!valid || !(dirty || me.isCreate)); resetBtn.setDisabled(!dirty); + + if (inputPanel && inputPanel.hasAdvanced) { + // we want to show the advanced options + // as soon as some of it is not valid + let advancedItems = me.down('#advancedContainer').query('field'); + let allAdvancedValid = true; + advancedItems.forEach(function(field) { + if (!field.isValid()) { + allAdvancedValid = false; + } + }); + + if (!allAdvancedValid) { + inputPanel.setAdvancedVisible(true); + me.down('#advancedcb').setValue(true); + } + } }; form.on('dirtychange', set_button_status); form.on('validitychange', set_button_status); - var colwidth = 300; + let colwidth = 300; if (me.fieldDefaults && me.fieldDefaults.labelWidth) { colwidth += me.fieldDefaults.labelWidth - 100; } - var twoColumn = inputPanel && - (inputPanel.column1 || inputPanel.column2); + let twoColumn = inputPanel && (inputPanel.column1 || inputPanel.column2); if (me.subject && !me.title) { me.title = Proxmox.Utils.dialog_title(me.subject, me.isCreate, me.isAdd); } if (me.isCreate) { - me.buttons = [ submitBtn ] ; + me.buttons = [submitBtn]; } else { - me.buttons = [ submitBtn, resetBtn ]; + me.buttons = [submitBtn, resetBtn]; } - var onlineHelp = me.onlineHelp; + if (inputPanel && inputPanel.hasAdvanced) { + let sp = Ext.state.Manager.getProvider(); + let advchecked = sp.get('proxmox-advanced-cb'); + inputPanel.setAdvancedVisible(advchecked); + me.buttons.unshift( + { + xtype: 'proxmoxcheckbox', + itemId: 'advancedcb', + boxLabelAlign: 'before', + boxLabel: gettext('Advanced'), + stateId: 'proxmox-advanced-cb', + value: advchecked, + listeners: { + change: function(cb, val) { + inputPanel.setAdvancedVisible(val); + sp.set('proxmox-advanced-cb', val); + }, + }, + }, + ); + } + + let onlineHelp = me.onlineHelp; if (!onlineHelp && inputPanel && inputPanel.onlineHelp) { onlineHelp = inputPanel.onlineHelp; } if (onlineHelp) { - var helpButton = Ext.create('Proxmox.button.Help'); + let helpButton = Ext.create('Proxmox.button.Help'); me.buttons.unshift(helpButton, '->'); Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp); } @@ -304,7 +365,7 @@ Ext.define('Proxmox.window.Edit', { modal: true, width: twoColumn ? colwidth*2 : colwidth, border: false, - items: [ me.formPanel ] + items: [me.formPanel], }); me.callParent(); @@ -324,5 +385,5 @@ Ext.define('Proxmox.window.Edit', { if (me.autoLoad) { me.load(); } - } + }, });