Make nested watcher form more user friendly

Jared Pace
1 parent 76ea5e7a
Showing 5 changed files with 53 additions and 8 deletions Show diff stats
app/models/app.rb
app/models/watcher.rb
app/views/apps/_fields.html.haml
public/javascripts/form.js
public/stylesheets/application.css
@@ -16,9 +16,10 @@ class App
   validates_presence_of :name, :api_key
   validates_uniqueness_of :name, :allow_blank => true
   validates_uniqueness_of :api_key, :allow_blank => true
+  validates_associated :watchers
  
   accepts_nested_attributes_for :watchers, :allow_destroy => true,
-    :reject_if => proc { |attrs| attrs.all? { |k, v| v.blank? } }
+    :reject_if => proc { |attrs| attrs[:user_id].blank? && attrs[:email].blank? }
  
   # Mongoid Bug: find(id) on association proxies returns an Enumerator
   def self.find_by_id!(app_id)
@@ -9,6 +9,14 @@ class Watcher
  
   validate :ensure_user_or_email
  
+  before_validation :clear_unused_watcher_type
+  
+  attr_accessor :watcher_type
+  
+  def watcher_type
+    @watcher_type ||= email.present? ? 'email' : 'user'
+  end
+  
   def label
     user ? user.name : email
   end
@@ -22,5 +30,14 @@ class Watcher
     def ensure_user_or_email
       errors.add(:base, "You must specify either a user or an email address") unless user.present? || email.present?
     end
+    
+    def clear_unused_watcher_type
+      case watcher_type
+      when 'user'
+        self.email = nil
+      when 'email'
+        self.user = self.user_id = nil
+      end
+    end
  
 end
@@ -11,11 +11,13 @@
 %fieldset.nested-wrapper
   %legend Watchers
   - f.fields_for :watchers do |w|
-    %div.nested
-      %div
-        = w.label :user
+    %div.watcher.nested
+      %div.choose
+        = w.radio_button :watcher_type, :user
+        = label_tag :watcher_type_user, 'User'
+        = w.radio_button :watcher_type, :email
+        = label_tag :watcher_type_email, 'Email Address'
+      %div.user{:class => w.object.email.blank? ? 'choosen' : nil}
         = w.select :user_id, User.all.map{|u| [u.name,u.id.to_s]}, :include_blank => '-- Select a User --'
-      %strong.option - OR -
-      %div
-        = w.label :email
+      %div.email{:class => w.object.email.present? ? 'choosen' : nil}
         = w.text_field :email
 \ No newline at end of file
 $(function(){
   activateNestedForms();
+  
+  if($('div.watcher.nested').length)
+    activateWatcherTypeSelector();
 });
  
 function activateNestedForms() {
@@ -33,7 +36,8 @@ function appendNestedItem() {
     timestamp = timestamp.valueOf();
     input.attr('id', input.attr('id').replace(/([_\[])\d+([\]_])/,'$1'+timestamp+'$2'));
     input.attr('name', input.attr('name').replace(/([_\[])\d+([\]_])/,'$1'+timestamp+'$2'));
-    input.val('');
+    if(input.attr('type') != 'radio')
+      input.val('');
   });
   addLink.before(nestedItem);
 }
@@ -49,4 +53,13 @@ function removeNestedItem() {
     $("input[name='"+idFieldName+"']").after(destroyFlag);
   }
   nestedItem.hide();
+}
+
+function activateWatcherTypeSelector() {
+  $('div.watcher input[name*=watcher_type]').live('click', function(){
+    var choosen = $(this).val();
+    var wrapper = $(this).closest('.nested');
+    wrapper.find('div.choosen').removeClass('choosen');
+    wrapper.find('div.'+choosen).addClass('choosen');
+  });
 }
 \ No newline at end of file
@@ -486,6 +486,18 @@ a.button.active {
   margin-right: 14px;
 }
  
+/* Watchers Form */
+div.nested.watcher .user, div.nested.watcher .email {
+  display: none;
+}
+div.nested.watcher .choosen {
+  display: block;
+}
+div.nested.watcher .choose {
+  margin-bottom: 0.5em;
+}
+
+
 /* Apps Table */
 table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;}
...	...	@@ -16,9 +16,10 @@ class App
16	16	validates_presence_of :name, :api_key
17	17	validates_uniqueness_of :name, :allow_blank => true
18	18	validates_uniqueness_of :api_key, :allow_blank => true
	19	+ validates_associated :watchers
19	20
20	21	accepts_nested_attributes_for :watchers, :allow_destroy => true,
21		- :reject_if => proc { \|attrs\| attrs.all? { \|k, v\| v.blank? } }
	22	+ :reject_if => proc { \|attrs\| attrs[:user_id].blank? && attrs[:email].blank? }
22	23
23	24	# Mongoid Bug: find(id) on association proxies returns an Enumerator
24	25	def self.find_by_id!(app_id)
...	...
...	...	@@ -9,6 +9,14 @@ class Watcher
9	9
10	10	validate :ensure_user_or_email
11	11
	12	+ before_validation :clear_unused_watcher_type
	13	+
	14	+ attr_accessor :watcher_type
	15	+
	16	+ def watcher_type
	17	+ @watcher_type \|\|= email.present? ? 'email' : 'user'
	18	+ end
	19	+
12	20	def label
13	21	user ? user.name : email
14	22	end
...	...	@@ -22,5 +30,14 @@ class Watcher
22	30	def ensure_user_or_email
23	31	errors.add(:base, "You must specify either a user or an email address") unless user.present? \|\| email.present?
24	32	end
	33	+
	34	+ def clear_unused_watcher_type
	35	+ case watcher_type
	36	+ when 'user'
	37	+ self.email = nil
	38	+ when 'email'
	39	+ self.user = self.user_id = nil
	40	+ end
	41	+ end
25	42
26	43	end
...	...
...	...	@@ -11,11 +11,13 @@
11	11	%fieldset.nested-wrapper
12	12	%legend Watchers
13	13	- f.fields_for :watchers do \|w\|
14		- %div.nested
15		- %div
16		- = w.label :user
	14	+ %div.watcher.nested
	15	+ %div.choose
	16	+ = w.radio_button :watcher_type, :user
	17	+ = label_tag :watcher_type_user, 'User'
	18	+ = w.radio_button :watcher_type, :email
	19	+ = label_tag :watcher_type_email, 'Email Address'
	20	+ %div.user{:class => w.object.email.blank? ? 'choosen' : nil}
17	21	= w.select :user_id, User.all.map{\|u\| [u.name,u.id.to_s]}, :include_blank => '-- Select a User --'
18		- %strong.option - OR -
19		- %div
20		- = w.label :email
	22	+ %div.email{:class => w.object.email.present? ? 'choosen' : nil}
21	23	= w.text_field :email
22	24	\ No newline at end of file
...	...
1	1	$(function(){
2	2	activateNestedForms();
	3	+
	4	+ if($('div.watcher.nested').length)
	5	+ activateWatcherTypeSelector();
3	6	});
4	7
5	8	function activateNestedForms() {
...	...	@@ -33,7 +36,8 @@ function appendNestedItem() {
33	36	timestamp = timestamp.valueOf();
34	37	input.attr('id', input.attr('id').replace(/([_\[])\d+([\]_])/,'$1'+timestamp+'$2'));
35	38	input.attr('name', input.attr('name').replace(/([_\[])\d+([\]_])/,'$1'+timestamp+'$2'));
36		- input.val('');
	39	+ if(input.attr('type') != 'radio')
	40	+ input.val('');
37	41	});
38	42	addLink.before(nestedItem);
39	43	}
...	...	@@ -49,4 +53,13 @@ function removeNestedItem() {
49	53	$("input[name='"+idFieldName+"']").after(destroyFlag);
50	54	}
51	55	nestedItem.hide();
	56	+}
	57	+
	58	+function activateWatcherTypeSelector() {
	59	+ $('div.watcher input[name*=watcher_type]').live('click', function(){
	60	+ var choosen = $(this).val();
	61	+ var wrapper = $(this).closest('.nested');
	62	+ wrapper.find('div.choosen').removeClass('choosen');
	63	+ wrapper.find('div.'+choosen).addClass('choosen');
	64	+ });
52	65	}
53	66	\ No newline at end of file
...	...
...	...	@@ -486,6 +486,18 @@ a.button.active {
486	486	margin-right: 14px;
487	487	}
488	488
	489	+/* Watchers Form */
	490	+div.nested.watcher .user, div.nested.watcher .email {
	491	+ display: none;
	492	+}
	493	+div.nested.watcher .choosen {
	494	+ display: block;
	495	+}
	496	+div.nested.watcher .choose {
	497	+ margin-bottom: 0.5em;
	498	+}
	499	+
	500	+
489	501	/* Apps Table */
490	502	table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;}
491	503
...	...