Refactor in tasks.js to create a singleton 'Task', show success icon after save …

…each tag and tasks.css changes

Refactor in tasks.js to create a singleton 'Task', show success icon after save …
…each tag and tasks.css changes
Michel Felipe
1 parent f5aeac9a
Showing 6 changed files with 140 additions and 53 deletions Show diff stats
app/controllers/my_profile/tasks_controller.rb
app/views/tasks/index.html.erb
public/images/ok.png
public/javascripts/tasks.js
public/stylesheets/tasks.css
test/functional/tasks_controller_test.rb
@@ -94,7 +94,6 @@ class TasksController &lt; MyProfileController
   end
   def save_tags
-
     if request.post? && params[:tag_list]
       result = {
         success: false,
@@ -103,7 +102,7 @@ class TasksController &lt; MyProfileController
       ActsAsTaggableOn.remove_unused_tags = true
-      task = profile.tasks.find_by_id params[:task_id]
+      task = Task.to(profile).find_by_id params[:task_id]
       save = user.tag(task, with: params[:tag_list], on: :tags)
       if save
@@ -114,15 +113,22 @@ class TasksController &lt; MyProfileController
     render json: result
   end
-  #FIXME make this test
+  # FIXME make this test
   # Should not search for article tasks
   # Should not search for other profile tags
   # Should search only task tags
   # Should check the permissions
+
   def search_tags
+
     arg = params[:term].downcase
+
     result = ActsAsTaggableOn::Tag.find(:all, :conditions => ['LOWER(name) LIKE ?', "%#{arg}%"])
+
     render :text => prepare_to_token_input_by_label(result).to_json, :content_type => 'application/json'
+
   end
+ end
+
 end
@@ -94,53 +94,7 @@
 <%= javascript_include_tag 'tasks' %>
 <script type="text/javascript">
-
-  jQuery('.filter-tags').inputosaurus({
-    hideInput: true
-  });
-
-  $('#filter-add-tag').change(function(){
-
-    if($(this).val() != ''){
-      jQuery('.filter-tags').inputosaurus('addTags',$(this).children(':selected').text());
-    }
-  });
-
-  jQuery('.tag-list').inputosaurus({
-    autoCompleteSource: <%= "'/myprofile/#{profile.identifier}/tasks/search_tags'," %>
-    activateFinalResult: true,
-    submitTags: {
-      url: <%= "'/myprofile/#{profile.identifier}/tasks/save_tags'" %>,
-      beforeSend: function(){
-        this.element.parents('.task_box')
-                    .prev('.fg-state-error')
-                    .remove();
-      },
-      success: function(response){
-
-        this.element.parents('.task_box')
-                    .prev('.fg-state-error')
-                    .remove();
-
-        if(!response.success){
-
-          var errorIcon = $('<span/>',{
-            'class':'ui-icon ui-icon-alert',
-            style:'float: left; margin-right: .3em;'
-          });
-
-          var content = $('<p/>',{
-            html:'<strong>'+response.message+'</strong>'
-          }).prepend(errorIcon);
-
-          var div = $('<div/>',{
-              'class':'alert fg-state-error ui-state-error'
-          }).append(content);
-
-          this.element.parents('.task_box').before(div);
-        }
-
-      }
-    }
+  Task.showTags({
+    profileIdentifier: <%= "'#{profile.identifier}'" %>
   })
 </script>
 (function($) {
+  /**
+  * @class Task singleton created with module pattern
+  */
+  Task = (function(){
+
+    var _showError = function(context,response){
+
+      var errorIcon = $('<span/>',{
+        'class':'ui-icon ui-icon-alert',
+        style:'float: left; margin-right: .3em;'
+      });
+
+      var content = $('<p/>',{
+        html:'<strong>'+response.message+'</strong>'
+      }).prepend(errorIcon);
+
+      var div = $('<div/>',{
+          'class':'alert fg-state-error ui-state-error'
+      }).append(content);
+
+      context.element.parents('.task_box').before(div);
+
+    };
+
+    var _showSuccess = function(context,response){
+      _addIcon(context,'ok');
+
+      setTimeout(function(){
+        $('.ok').parent().remove();
+      },1000);
+    };
+
+    var _addIcon = function(context,className){
+      $('.'+className).parent().remove();
+
+      var item = $('<li/>',{
+        'class':'inputosaurus-input tag-saved',
+        html:'<i class="'+className+'"></i>'
+      });
+
+      if(className == 'ok'){
+        $('.loading').parent().remove();
+      }
+      context.elements.input.parent().before(item);
+    }
+
+    return {
+
+      /**
+      * @see inputosaurus#_sendTags The 'this' context here is the jquery ui widget component
+      */
+      onAddTag: function(response){
+        this.element.parents('.task_box')
+                    .prev('.fg-state-error')
+                    .remove();
+
+        if(response.success){
+
+          _showSuccess(this,response);
+        }else{
+
+          _showError(this,response);
+        }
+      },
+      showTags: function(cfg){
+
+        jQuery('.filter-tags').inputosaurus({
+          hideInput: true
+        });
+
+        $('#filter-add-tag').change(function(){
+
+          if($(this).val() != ''){
+            jQuery('.filter-tags').inputosaurus('addTags',$(this).children(':selected').text());
+          }
+        });
+
+        jQuery('.tag-list').inputosaurus({
+          autoCompleteSource: '/myprofile/'+cfg.profileIdentifier+'/tasks/search_tags',
+          activateFinalResult: true,
+          submitTags: {
+            url:  '/myprofile/'+cfg.profileIdentifier+'/tasks/save_tags',
+            beforeSend: function(){
+
+              $('.ok').parent().remove();
+
+              this.element.parents('.task_box')
+                          .prev('.fg-state-error')
+                          .remove();
+
+              _addIcon(this,'loading');
+
+              //Add loading here!
+            },
+            success: this.onAddTag
+          }
+        });
+
+      }
+
+    };
+
+  })();
+
   $("input.task_accept_radio").click(function(){
     task_id = this.getAttribute("task_id");
     $('#on-accept-information-' + task_id).show('fast');
@@ -62,4 +166,3 @@ function change_task_responsible(el) {
     }
   });
 }
-
@@ -61,8 +61,9 @@
   margin: 0 5px 0 10px;
 }
-.formfieldline .inputosaurus-container {
+.inputosaurus-container {
   vertical-align: middle;
+  margin-top: -2px;
 }
 .tag-list-fields input {
@@ -73,3 +74,23 @@
   background: url('/images/loading-small.gif') right center no-repeat !important;
   background-color: #fff !important;
 }
+
+.tag-saved {
+  width: 24px;
+  height: 24px;
+  background: none !important;
+}
+
+.ok {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: url('/images/ok.png') right center no-repeat
+}
+
+.loading {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: url('/images/loading-small.gif') right center no-repeat
+}
@@ -684,6 +684,9 @@ class TasksControllerTest &lt; ActionController::TestCase
     assert_not_includes task_one.tags_from(nil), 'test'
   end
+#region_validators_controller_test.rb:    give_permission('ze', 'manage_environment_validators', environment)
+#profile_editor_controller_test.rb:    user2.stubs(:has_permission?).with('edit_profile', anything).returns(true)
+#profile_editor_controller_test.rb:    user2.expects(:has_permission?).with(:manage_friends, anything).returns(true)
   should 'not tag task with permission but another user' do
     requestor = fast_create(Person)
	@@ -94,53 +94,7 @@		@@ -94,53 +94,7 @@
94	<%= javascript_include_tag 'tasks' %>	94	<%= javascript_include_tag 'tasks' %>
95		95
96	<script type="text/javascript">	96	<script type="text/javascript">
97	-
98	- jQuery('.filter-tags').inputosaurus({
99	- hideInput: true
100	- });
101	-
102	- $('#filter-add-tag').change(function(){
103	-
104	- if($(this).val() != ''){
105	- jQuery('.filter-tags').inputosaurus('addTags',$(this).children(':selected').text());
106	- }
107	- });
108	-
109	- jQuery('.tag-list').inputosaurus({
110	- autoCompleteSource: <%= "'/myprofile/#{profile.identifier}/tasks/search_tags'," %>
111	- activateFinalResult: true,
112	- submitTags: {
113	- url: <%= "'/myprofile/#{profile.identifier}/tasks/save_tags'" %>,
114	- beforeSend: function(){
115	- this.element.parents('.task_box')
116	- .prev('.fg-state-error')
117	- .remove();
118	- },
119	- success: function(response){
120	-
121	- this.element.parents('.task_box')
122	- .prev('.fg-state-error')
123	- .remove();
124	-
125	- if(!response.success){
126	-
127	- var errorIcon = $('<span/>',{
128	- 'class':'ui-icon ui-icon-alert',
129	- style:'float: left; margin-right: .3em;'
130	- });
131	-
132	- var content = $('<p/>',{
133	- html:'<strong>'+response.message+'</strong>'
134	- }).prepend(errorIcon);
135	-
136	- var div = $('<div/>',{
137	- 'class':'alert fg-state-error ui-state-error'
138	- }).append(content);
139	-
140	- this.element.parents('.task_box').before(div);
141	- }
142	-
143	- }
144	- }	97	+ Task.showTags({
		98	+ profileIdentifier: <%= "'#{profile.identifier}'" %>
145	})	99	})
146	</script>	100	</script>
1	(function($) {	1	(function($) {
2		2
		3	+ /**
		4	+ * @class Task singleton created with module pattern
		5	+ */
		6	+ Task = (function(){
		7	+
		8	+ var _showError = function(context,response){
		9	+
		10	+ var errorIcon = $('<span/>',{
		11	+ 'class':'ui-icon ui-icon-alert',
		12	+ style:'float: left; margin-right: .3em;'
		13	+ });
		14	+
		15	+ var content = $('<p/>',{
		16	+ html:'<strong>'+response.message+'</strong>'
		17	+ }).prepend(errorIcon);
		18	+
		19	+ var div = $('<div/>',{
		20	+ 'class':'alert fg-state-error ui-state-error'
		21	+ }).append(content);
		22	+
		23	+ context.element.parents('.task_box').before(div);
		24	+
		25	+ };
		26	+
		27	+ var _showSuccess = function(context,response){
		28	+ _addIcon(context,'ok');
		29	+
		30	+ setTimeout(function(){
		31	+ $('.ok').parent().remove();
		32	+ },1000);
		33	+ };
		34	+
		35	+ var _addIcon = function(context,className){
		36	+ $('.'+className).parent().remove();
		37	+
		38	+ var item = $('<li/>',{
		39	+ 'class':'inputosaurus-input tag-saved',
		40	+ html:'<i class="'+className+'"></i>'
		41	+ });
		42	+
		43	+ if(className == 'ok'){
		44	+ $('.loading').parent().remove();
		45	+ }
		46	+ context.elements.input.parent().before(item);
		47	+ }
		48	+
		49	+ return {
		50	+
		51	+ /**
		52	+ * @see inputosaurus#_sendTags The 'this' context here is the jquery ui widget component
		53	+ */
		54	+ onAddTag: function(response){
		55	+ this.element.parents('.task_box')
		56	+ .prev('.fg-state-error')
		57	+ .remove();
		58	+
		59	+ if(response.success){
		60	+
		61	+ _showSuccess(this,response);
		62	+ }else{
		63	+
		64	+ _showError(this,response);
		65	+ }
		66	+ },
		67	+ showTags: function(cfg){
		68	+
		69	+ jQuery('.filter-tags').inputosaurus({
		70	+ hideInput: true
		71	+ });
		72	+
		73	+ $('#filter-add-tag').change(function(){
		74	+
		75	+ if($(this).val() != ''){
		76	+ jQuery('.filter-tags').inputosaurus('addTags',$(this).children(':selected').text());
		77	+ }
		78	+ });
		79	+
		80	+ jQuery('.tag-list').inputosaurus({
		81	+ autoCompleteSource: '/myprofile/'+cfg.profileIdentifier+'/tasks/search_tags',
		82	+ activateFinalResult: true,
		83	+ submitTags: {
		84	+ url: '/myprofile/'+cfg.profileIdentifier+'/tasks/save_tags',
		85	+ beforeSend: function(){
		86	+
		87	+ $('.ok').parent().remove();
		88	+
		89	+ this.element.parents('.task_box')
		90	+ .prev('.fg-state-error')
		91	+ .remove();
		92	+
		93	+ _addIcon(this,'loading');
		94	+
		95	+ //Add loading here!
		96	+ },
		97	+ success: this.onAddTag
		98	+ }
		99	+ });
		100	+
		101	+ }
		102	+
		103	+ };
		104	+
		105	+ })();
		106	+
3	$("input.task_accept_radio").click(function(){	107	$("input.task_accept_radio").click(function(){
4	task_id = this.getAttribute("task_id");	108	task_id = this.getAttribute("task_id");
5	$('#on-accept-information-' + task_id).show('fast');	109	$('#on-accept-information-' + task_id).show('fast');
	@@ -62,4 +166,3 @@ function change_task_responsible(el) {		@@ -62,4 +166,3 @@ function change_task_responsible(el) {
62	}	166	}
63	});	167	});
64	}	168	}
65	-
	@@ -61,8 +61,9 @@		@@ -61,8 +61,9 @@
61	margin: 0 5px 0 10px;	61	margin: 0 5px 0 10px;
62	}	62	}
63		63
64	-.formfieldline .inputosaurus-container {	64	+.inputosaurus-container {
65	vertical-align: middle;	65	vertical-align: middle;
		66	+ margin-top: -2px;
66	}	67	}
67		68
68	.tag-list-fields input {	69	.tag-list-fields input {
	@@ -73,3 +74,23 @@		@@ -73,3 +74,23 @@
73	background: url('/images/loading-small.gif') right center no-repeat !important;	74	background: url('/images/loading-small.gif') right center no-repeat !important;
74	background-color: #fff !important;	75	background-color: #fff !important;
75	}	76	}
		77	+
		78	+.tag-saved {
		79	+ width: 24px;
		80	+ height: 24px;
		81	+ background: none !important;
		82	+}
		83	+
		84	+.ok {
		85	+ position: absolute;
		86	+ width: 24px;
		87	+ height: 24px;
		88	+ background: url('/images/ok.png') right center no-repeat
		89	+}
		90	+
		91	+.loading {
		92	+ position: absolute;
		93	+ width: 24px;
		94	+ height: 24px;
		95	+ background: url('/images/loading-small.gif') right center no-repeat
		96	+}