more_inst_for_users: Now add the institutions on a unordered list

Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com>

more_inst_for_users: Now add the institutions on a unordered list
Signed-off-by: Fabio Teixeira <fabio1079@gmail.com> Signed-off-by: Gabriela Navarro <navarro1703@gmail.com>
Gabriela Navarro · Parley
1 parent 3ae1972b
Showing 2 changed files with 43 additions and 17 deletions Show diff stats
lib/mpog_software_plugin.rb
public/mpog-institution-validations.js
@@ -42,15 +42,17 @@ class MpogSoftwarePlugin &lt; Noosfero::Plugin
         labelled_form_field(
           _('Institution'),
           content_tag(:div,
-            text_field(:institution, :name, :class=>"input_institution"),
+            text_field(:institution, :name, :id=>"input_institution"),
           :class => 'institution_container')+
           content_tag(
             :small, _('Fill with your institution') ,:class => 'signup-form', :id =>'institution-balloon'
           ) +
-          content_tag(:div, _("The searched institution does not exist"), :id=>"institution_empty_ajax_message", :class=>"errorExplanation hide-field") +
-          link_to(_("Add new institution"), "#", :class=>'button with-text icon-add add_new_institution') +
+          content_tag(:div, _("The searched institution does not exist"), :id=>"institution_empty_ajax_message", :class=>"errorExplanation hide-field")+
+          link_to(_("Add new institution"), "#", :class=>'button with-text icon-add', :id => 'add_new_institution') +
           link_to(_("Create new institution"), "#", :id=>"create_institution_link", :class=>'button with-text icon-add')+
           hidden_field_tag("user[institutions][]", "", :class => 'user_institutions')+
+          hidden_field_tag("institution_selected", "")+
+          content_tag("ul", "",:class=>"institutions_added")+
           content_tag(:div, "", :id=>"institution_dialog")
         ),
        :id => 'signup-institution'
@@ -113,9 +113,15 @@
       }
     }
+  function get_clone_institution_data(value) {
+    var user_institutions = jQuery(".user_institutions").first().clone();
+    user_institutions.val(value);
+
+    return user_institutions;
+  }
   function institution_autocomplete() {
-    jQuery(".input_institution").autocomplete({
+    jQuery("#input_institution").autocomplete({
       source : function(request, response){
         jQuery.ajax({
           type: "GET",
@@ -139,22 +145,43 @@
       minLength: 2,
       select : function (event, selected) {
-        var user_institutions = jQuery(".user_institutions").first().clone();
-        user_institutions.val(selected.item.id);
+        jQuery("#institution_selected").val(selected.item.id).attr("data-name", selected.item.label);
-        jQuery(".institution_container").append(user_institutions);
       }
     });
   }
+  function add_selected_institution_to_list(id, name) {
+    var selected_institution = "<li data-institution='"+id+"'>"+name;
+        selected_institution += "<a href='#' class='button without-text icon-remove remove-institution'></a></li>";
+
+    jQuery(".institutions_added").append(selected_institution);
+  }
+
   function add_new_institution(evt) {
     evt.preventDefault();
-    var institution_input_field = jQuery(".institution_container .input_institution").first().clone();
+    var selected = jQuery("#institution_selected");
+    var institution_already_added = jQuery(".institutions_added li[data-institution='"+selected.val()+"']").length;
-    institution_input_field.val("");
+    if(selected.val().length > 0 && institution_already_added == 0) {
+      //field that send the institutions to the server
+      jQuery(".institution_container").append(get_clone_institution_data(selected.val()));
-    jQuery(".institution_container").append(institution_input_field);
-    institution_autocomplete();
+      // Visualy add the selected institution to the list
+      add_selected_institution_to_list(selected.val(), selected.attr("data-name"));
+
+      // clean the institution flag
+      selected.val("").attr("data-name", "");
+      jQuery("#input_institution").val("");
+
+      jQuery(".remove-institution").click(remove_institution);
+    }
+  }
+
+  function remove_institution(evt) {
+    evt.preventDefault();
+
+    jQuery(this).parent().remove();
   }
   function set_events() {
@@ -168,14 +195,11 @@
     jQuery("#community_name").keyup(institution_already_exists);
-    jQuery(".add_new_institution").click(add_new_institution);
+    jQuery("#add_new_institution").click(add_new_institution);
-    institution_autocomplete();
+    jQuery(".remove-institution").click(remove_institution);
-    jQuery(".input_institution").blur(function(){
-      if( this.value == "" )
-        jQuery("#user_institution_id").val("");
-    });
+    institution_autocomplete();
   }
   jQuery(document).ready(set_events);