adding edit name and value of environment parameters

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
 ------------------
 

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();

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);

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 {

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

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 }

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()
+    })
+  });
+});