From 95efd54a624dadd3ff627169c6da6308418fb40f Mon Sep 17 00:00:00 2001 From: Gary Paige Date: Thu, 25 Sep 2014 11:13:55 -0500 Subject: [PATCH] adding edit name and value of environment parameters --- CHANGELOG.md | 6 ++ app/assets/javascripts/init.js | 10 +++ .../javascripts/jquery.edit_parameter.js | 65 +++++++++++++++++++ .../stylesheets/panamax/service_details.scss | 21 ++++++ .../services/_environment_variables.html.haml | 19 ++++-- .../fixtures/edit-parameter.html.haml | 11 ++++ .../javascripts/jquery.edit_parameter_spec.js | 42 ++++++++++++ 7 files changed, 168 insertions(+), 6 deletions(-) create mode 100644 app/assets/javascripts/jquery.edit_parameter.js create mode 100644 spec/javascripts/fixtures/edit-parameter.html.haml create mode 100644 spec/javascripts/jquery.edit_parameter_spec.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 072e9c30..4376f2fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ # Changelog All notable changes to this project will be documented in this file. +LATEST +------------------ +### Added +- Edit name and value of environment variables + + 0.2.1 - 2014-09-18 ------------------ diff --git a/app/assets/javascripts/init.js b/app/assets/javascripts/init.js index 6996b0e0..83780afe 100644 --- a/app/assets/javascripts/init.js +++ b/app/assets/javascripts/init.js @@ -81,6 +81,16 @@ $('.port-bindings').appendablePortBindings(); + $('.environment-variables dl.entries').editParameter({ + fieldSelector: 'dt.variable-name label', + inputKey: 'input[data-index=name_%]' + }); + + $('.environment-variables dl.entries').editParameter({ + fieldSelector: 'dd.variable-value span', + editSelector: 'dd.variable-value a.edit-action', + inputKey: 'input[data-index=value_%]' + }); $('.journal-output').journalLoader(); $('.journal-toggle').journalToggle(); diff --git a/app/assets/javascripts/jquery.edit_parameter.js b/app/assets/javascripts/jquery.edit_parameter.js new file mode 100644 index 00000000..bc40ea71 --- /dev/null +++ b/app/assets/javascripts/jquery.edit_parameter.js @@ -0,0 +1,65 @@ +(function($) { + $.PMX.EditParameter = function($el, options) { + var base = this; + + base.$el = $el; + base.xhr = null; + + base.defaultOptions = { + fieldSelector: 'dt.variable-name label', + editSelector: 'dt.variable-name a.edit-action', + formSelector: 'dd.actions', + inputKey: 'input[data-index=name_%]', + submitButton: '.service-details form input[type=submit]' + }; + + base.init = function () { + base.options = $.extend({}, base.defaultOptions, options); + base.bindEvents(); + }; + + base.bindEvents = function () { + base.$el.on('click', base.options.editSelector, base.handleEdit); + }; + + base.handleEdit = function(e) { + var $target = $(e.currentTarget), + $parent = $target.parent(); + + e.preventDefault(); + $parent.css('display', 'none'); + + (new $.PMX.ContentEditable(base.$el.find(base.options.fieldSelector), + { + identifier: $parent.val(), + onRevert: base.handleRevert, + editorPromise: base.completeEdit + })).init(); + }; + + base.handleRevert = function(e) { + (base.$el.find(base.options.editSelector).parent())[0].style.cssText = ''; + }; + + base.completeEdit = function(data) { + var transaction = $.Deferred(), + index = base.$el.find(base.options.fieldSelector).attr('data-index'), + field = base.$el.find(base.options.formSelector).find(base.options.inputKey.replace('%', index)).first(); + + field.val(data.text); + $(base.options.submitButton).removeAttr('disabled'); + + transaction.resolve(); + + return transaction.promise(); + }; + + }; + + $.fn.editParameter = function(options){ + return this.each(function(){ + (new $.PMX.EditParameter($(this), options)).init(); + }); + }; + +})(jQuery); diff --git a/app/assets/stylesheets/panamax/service_details.scss b/app/assets/stylesheets/panamax/service_details.scss index 5fbcc2f2..58e04d46 100644 --- a/app/assets/stylesheets/panamax/service_details.scss +++ b/app/assets/stylesheets/panamax/service_details.scss @@ -339,6 +339,27 @@ input[type="text"] { width: 100%; } + + + &:hover .actions { + display: inline-block; + + > .edit-action { + visibility: visible; + + &:after { + left: 2px; + top: 0; + } + } + } + + .actions { + float: none; + display: none; + width: 10px; + height: 10px; + } } dt { diff --git a/app/views/services/_environment_variables.html.haml b/app/views/services/_environment_variables.html.haml index 7655dbbc..7a5e9729 100644 --- a/app/views/services/_environment_variables.html.haml +++ b/app/views/services/_environment_variables.html.haml @@ -12,18 +12,25 @@ = f.fields_for :environment do |env_var| - index = env_var.options[:child_index] - %dl - %dt.variable-name= env_var.label(:value, env_var.object.variable) + + %dl.entries + %dt.variable-name + = env_var.label(:value, env_var.object.variable, data: { index: "#{index}" }) + .actions + %a{ class: 'edit-action' } %dd.variable-value - if env_var.object.value.blank? - = env_var.text_field :value, placeholder: 'enter a value', class: 'empty' + = env_var.text_field :value, placeholder: 'enter a value', class: 'empty', data: { index: "#{index}" } - else - = env_var.object.value + %span{ data: { index: "#{index}" } } + = env_var.object.value + .actions + %a{ class: 'edit-action' } %dd.actions - checkbox_id = "select_environment_variable_#{index}" = env_var.check_box :_deleted, { id: checkbox_id } - = env_var.hidden_field :variable - = env_var.hidden_field :value unless env_var.object.value.blank? + = env_var.hidden_field :variable, data: { index: "name_#{index}" } + = env_var.hidden_field :value, data: { index: "value_#{index}" } %a{class: 'delete-action', title: 'remove', data: { checkbox: { selector: "##{checkbox_id}" } } } remove .additional-entries diff --git a/spec/javascripts/fixtures/edit-parameter.html.haml b/spec/javascripts/fixtures/edit-parameter.html.haml new file mode 100644 index 00000000..f316a5a9 --- /dev/null +++ b/spec/javascripts/fixtures/edit-parameter.html.haml @@ -0,0 +1,11 @@ +.service-details + %dl.entries + %dt.variable-name + %label{ data: { index: '0' } } + Variable + .actions + %a{ class: 'edit-action' } + %dd.actions + %input{ type: 'hidden', value: 'test', data: { index: 'name_0' } } + %form + %input{ type: 'submit', disabled: true } diff --git a/spec/javascripts/jquery.edit_parameter_spec.js b/spec/javascripts/jquery.edit_parameter_spec.js new file mode 100644 index 00000000..3c88629f --- /dev/null +++ b/spec/javascripts/jquery.edit_parameter_spec.js @@ -0,0 +1,42 @@ +describe('$.fn.editParameter', function() { + var subject, element; + + beforeEach(function() { + fixture.load('edit-parameter.html'); + element = $('dl.entries'); + subject = new $.PMX.EditParameter(element); + subject.init(); + }); + + describe('on click', function() { + it('prevents default', function() { + var edit_button = $('.edit-action'), + clickEvent = $.Event('click'); + + edit_button.trigger(clickEvent); + expect(clickEvent.isDefaultPrevented()).toBeTruthy(); + }); + + it('initializes content editable', function() { + var clickEvent = $.Event('click'); + + $('.edit-action').trigger(clickEvent); + expect($('.content-editable').length).toEqual(1); + }); + }); + + describe('on edit', function() { + it('sets edited value on hidden field', function() { + subject.completeEdit({text: 'New Value'}); + + expect($('input[data-index=name_0]').val()).toBe('New Value') + }); + + it('enabled the submit button', function() { + $('form input').attr('disabled', true); + subject.completeEdit({text: 'New Value'}); + + expect($('form input').attr('disabled')).toBeUndefined() + }) + }); +});