New JavaScript class that allows dynamically adding and removing form…

… fields for editing attendee information.
metaskills · Sep 28, 2009 · 71baf9c · 71baf9c
1 parent e110120
commit 71baf9c
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 4 deletions.
diff --git a/app/controllers/rsvps_controller.rb b/app/controllers/rsvps_controller.rb
@@ -64,7 +64,7 @@ def find_rsvp_id
 
   def update_rsvp_attributes
     @rsvp.update_attributes!(params[:rsvp])
-    flash[:good] = 'Updated reservation info.'
+    flash[:good] = 'Successfully updated reservation and attendee information.'
   end
 
   def not_found

diff --git a/app/stylesheets/site.sass b/app/stylesheets/site.sass
@@ -310,6 +310,7 @@ table.data_table
       td
         padding: 5px
       input
+        margin: 0
         font-size: 16px
         width: 250px
 

diff --git a/app/views/rsvps/_edit.html.haml b/app/views/rsvps/_edit.html.haml
@@ -13,9 +13,14 @@
     %th{:class => 'vtop pt10'} Additional Attendee Names:
     %td{:id => 'attendee_names'}
       - @rsvp.attendee_names.each_with_index do |name,index|
-        %div.attendee_name
-          = text_field_tag 'rsvp[attendee_names][]', name
+        %div{:class => 'attendee_name vmiddle_all pb10'}
+          = text_field_tag 'rsvp[attendee_names][]', name, :id => nil
   %tr
     %td
-    %td= submit_tag 'Update Registration', :style => 'width:auto;'
+    %td
+      = submit_tag 'Update Registration', :style => 'width:auto;'
+      = button_to_link 'Cancel', mine_rsvp_path(:id => @rsvp.slug), :style => 'width:auto;'
+
+
+= dom_loaded 'window.reservationForm = new ReservationForm();'
 
diff --git a/public/images/layout/add.png b/public/images/layout/add.png
diff --git a/public/images/layout/delete.png b/public/images/layout/delete.png
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -101,5 +101,78 @@ document.observe('dom:loaded', function(){
 
 
 
+var ReservationForm = Class.create({
+
+  initialize: function() {
+    this.form = $('edit_rsvp_form');
+    this.attendeeNamesTd = $('attendee_names');
+    this._initEvents();
+  },
+
+  nameDivs: function() {
+    return this.attendeeNamesTd.select('div.attendee_name');
+  },
+
+  addImage: function() {
+    return this.attendeeNamesTd.down('img.addImg');
+  },
+
+  deleteImages: function() {
+    return this.attendeeNamesTd.select('img.delImg');
+  },
+
+  addDelImages: function() {
+    return this.attendeeNamesTd.select('img.addDelImg');
+  },
+
+  addAttendee: function(event) {
+    var newFieldDiv = DIV({className:'attendee_name vmiddle_all pb10'},[INPUT({name:'rsvp[attendee_names][]',type:'text',value:''}),SPAN(' ')]);
+    this.attendeeNamesTd.insert({bottom:newFieldDiv});
+    this._buildAttendeeImages();
+  },
+
+  deleteAttendee: function(event) {
+    var fieldDiv = event.element().up('div.attendee_name');
+    var field = fieldDiv.down('input');
+    var lastOne = this.nameDivs().size() == 1;
+    if (lastOne) {
+      field.clear();
+    } else {
+      fieldDiv.remove();
+      this._buildAttendeeImages();
+    };
+  },
+
+  _buildAttendeeImages: function() {
+    this._destroyAttendeeImages();
+    var nameDivs = this.nameDivs();
+    var lastIndex = nameDivs.size()-1;
+    var addImg = IMG({src:'/images/layout/add.png',className:'p5 pointer addDelImg addImg'});
+    nameDivs.each(function(field,index){
+      var delImg = IMG({src:'/images/layout/delete.png',className:'p5 pointer addDelImg delImg'});
+      field.insert({bottom:delImg});
+      if (index == lastIndex) { field.insert({bottom:addImg}); };
+    });
+    this._initAttendeeImages();
+  },
+
+  _destroyAttendeeImages: function() {
+    this.addDelImages().invoke('remove');
+  },
+
+  _initAttendeeImages: function() {
+    this.addImage().observe('click',this.addAttendee.bindAsEventListener(this));
+    this.deleteImages().each(function(delImg){
+      delImg.observe('click',this.deleteAttendee.bindAsEventListener(this));
+    }.bind(this));
+  },
+
+  _initEvents: function() {
+    this._buildAttendeeImages();
+  }
+
+});
+
+