From 22cd61fd989adc1ed5b1e6f9319bb3d2fccf62ae Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Fri, 26 Dec 2014 15:17:59 +0100 Subject: [PATCH] Add modal form view --- .../src/main/coffee/common/modals.coffee | 43 --------------- .../coding-rules-custom-rule-creation.hbs | 1 + .../coding-rules-custom-rule-creation.hbs | 1 + .../rule/custom-rule-creation-view.js | 37 ++++++------- .../src/main/js/common/modal-form.js | 38 +++++++++++++ server/sonar-web/src/main/js/common/modals.js | 54 +++++++++++++++++++ 6 files changed, 113 insertions(+), 61 deletions(-) delete mode 100644 server/sonar-web/src/main/coffee/common/modals.coffee create mode 100644 server/sonar-web/src/main/js/common/modal-form.js create mode 100644 server/sonar-web/src/main/js/common/modals.js diff --git a/server/sonar-web/src/main/coffee/common/modals.coffee b/server/sonar-web/src/main/coffee/common/modals.coffee deleted file mode 100644 index c9e7c4adce2..00000000000 --- a/server/sonar-web/src/main/coffee/common/modals.coffee +++ /dev/null @@ -1,43 +0,0 @@ -define [ - 'backbone.marionette' -], ( - Marionette -) -> - - $ = jQuery - EVENT_SCOPE = 'modal' - - - class extends Marionette.ItemView - className: 'modal' - overlayClassName: 'modal-overlay' - - - events: -> - 'click .js-modal-close': 'close' - - - onRender: -> - @$el.detach().appendTo $('body') - @renderOverlay() - key 'escape', (=> @close()) - - - onClose: -> - @removeOverlay() - - - renderOverlay: -> - overlay = $(".#{@overlayClassName}") - if overlay.length == 0 - overlay = $("
").appendTo $('body') - - - removeOverlay: -> - $('.modal-overlay').remove() - - - attachCloseEvents: -> - $('body').on "click.#{EVENT_SCOPE}", => - $('body').off "click.#{EVENT_SCOPE}" - @close() diff --git a/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs b/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs index c1244ff82e6..94323fa40cf 100644 --- a/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs +++ b/server/sonar-web/src/main/hbs/coding-rules-old/coding-rules-custom-rule-creation.hbs @@ -8,6 +8,7 @@
+
{{t 'coding_rules.reactivate.help'}}
diff --git a/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs b/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs index 24638406c30..fe89c48d2d5 100644 --- a/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs +++ b/server/sonar-web/src/main/hbs/coding-rules/rule/coding-rules-custom-rule-creation.hbs @@ -8,6 +8,7 @@
+
{{t 'coding_rules.reactivate.help'}}
diff --git a/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js b/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js index 0e8f6a8529a..06b3e9e3d95 100644 --- a/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js +++ b/server/sonar-web/src/main/js/coding-rules/rule/custom-rule-creation-view.js @@ -1,27 +1,29 @@ define([ - 'common/modals', + 'common/modal-form', 'templates/coding-rules' -], function (Modal, Templates) { +], function (ModalFormView, Templates) { var $ = jQuery; - return Modal.extend({ + return ModalFormView.extend({ template: Templates['coding-rules-custom-rule-creation'], - ui: { - customRuleCreationKey: '#coding-rules-custom-rule-creation-key', - customRuleCreationName: '#coding-rules-custom-rule-creation-name', - customRuleCreationHtmlDescription: '#coding-rules-custom-rule-creation-html-description', - customRuleCreationSeverity: '#coding-rules-custom-rule-creation-severity', - customRuleCreationStatus: '#coding-rules-custom-rule-creation-status', - customRuleCreationParameters: '[name]', - customRuleCreationCreate: '#coding-rules-custom-rule-creation-create', - customRuleCreationReactivate: '#coding-rules-custom-rule-creation-reactivate', - modalFoot: '.modal-foot' + ui: function () { + return _.extend(ModalFormView.prototype.ui.apply(this, arguments), { + customRuleCreationKey: '#coding-rules-custom-rule-creation-key', + customRuleCreationName: '#coding-rules-custom-rule-creation-name', + customRuleCreationHtmlDescription: '#coding-rules-custom-rule-creation-html-description', + customRuleCreationSeverity: '#coding-rules-custom-rule-creation-severity', + customRuleCreationStatus: '#coding-rules-custom-rule-creation-status', + customRuleCreationParameters: '[name]', + customRuleCreationCreate: '#coding-rules-custom-rule-creation-create', + customRuleCreationReactivate: '#coding-rules-custom-rule-creation-reactivate', + modalFoot: '.modal-foot' + }); }, events: function () { - return _.extend(Modal.prototype.events.apply(this, arguments), { + return _.extend(ModalFormView.prototype.events.apply(this, arguments), { 'input @ui.customRuleCreationName': 'generateKey', 'keydown @ui.customRuleCreationName': 'generateKey', 'keyup @ui.customRuleCreationName': 'generateKey', @@ -52,7 +54,7 @@ define([ }, onRender: function () { - Modal.prototype.onRender.apply(this, arguments); + ModalFormView.prototype.onRender.apply(this, arguments); this.keyModifiedByUser = false; @@ -148,8 +150,7 @@ define([ that.$('.modal-warning').show(); that.ui.modalFoot.html(Templates['coding-rules-custom-rule-reactivation']()); } else { - jQuery.ajaxSettings.error(jqXHR, textStatus, errorThrown); - that.ui.modalFoot.html(origFooter); + that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings); } }); }, @@ -171,7 +172,7 @@ define([ }; }); - return _.extend(Modal.prototype.serializeData.apply(this, arguments), { + return _.extend(ModalFormView.prototype.serializeData.apply(this, arguments), { change: this.model && this.model.has('key'), params: params, severities: ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO'], diff --git a/server/sonar-web/src/main/js/common/modal-form.js b/server/sonar-web/src/main/js/common/modal-form.js new file mode 100644 index 00000000000..39fac08a706 --- /dev/null +++ b/server/sonar-web/src/main/js/common/modal-form.js @@ -0,0 +1,38 @@ +define(['common/modals'], function (ModalView) { + + return ModalView.extend({ + + ui: function () { + return { + messagesContainer: '.js-modal-messages' + }; + }, + + events: function () { + return _.extend(ModalView.prototype.events.apply(this, arguments), { + 'submit form': 'onFormSubmit' + }); + }, + + onFormSubmit: function (e) { + e.preventDefault(); + }, + + showErrors: function (errors, warnings) { + var container = this.ui.messagesContainer.empty(); + if (_.isArray(errors)) { + errors.forEach(function (error) { + var html = '
' + error.msg + '
'; + container.append(html); + }); + } + if (_.isArray(warnings)) { + warnings.forEach(function (warn) { + var html = '
' + warn.msg + '
'; + container.append(html); + }); + } + } + }); + +}); diff --git a/server/sonar-web/src/main/js/common/modals.js b/server/sonar-web/src/main/js/common/modals.js new file mode 100644 index 00000000000..99917d9e090 --- /dev/null +++ b/server/sonar-web/src/main/js/common/modals.js @@ -0,0 +1,54 @@ +define(['backbone.marionette'], function (Marionette) { + + var $ = jQuery, + EVENT_SCOPE = 'modal'; + + return Marionette.ItemView.extend({ + className: 'modal', + overlayClassName: 'modal-overlay', + + events: function () { + return { + 'click .js-modal-close': 'close' + }; + }, + + onRender: function () { + var that = this; + this.$el.detach().appendTo($('body')); + this.renderOverlay(); + this.keyScope = key.getScope(); + key.setScope('modal'); + key('escape', 'modal', function () { + that.close(); + return false; + }); + }, + + onClose: function () { + this.removeOverlay(); + key.deleteScope('modal'); + key.setScope(this.keyScope); + }, + + renderOverlay: function () { + var overlay = $('.' + this.overlayClassName); + if (overlay.length === 0) { + $('
').appendTo($('body')); + } + }, + + removeOverlay: function () { + $('.' + this.overlayClassName).remove(); + }, + + attachCloseEvents: function () { + var that = this; + $('body').on('click.' + EVENT_SCOPE, function () { + $('body').off('click.' + EVENT_SCOPE); + that.close(); + }); + } + }); + +}); -- 2.39.5