From 40a4271112d4cfc2e98dfedf122b0323ae26e55a Mon Sep 17 00:00:00 2001
From: Gabriela Navarro <navarro1703@gmail.com>
Date: Mon, 18 Aug 2014 16:23:46 -0300
Subject: [PATCH] more_inst_for_users: Now add the institutions on a unordered list

---
 lib/mpog_software_plugin.rb            |  8 +++++---
 public/mpog-institution-validations.js | 52 ++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/lib/mpog_software_plugin.rb b/lib/mpog_software_plugin.rb
index 9fcfab0..e624d89 100644
--- a/lib/mpog_software_plugin.rb
+++ b/lib/mpog_software_plugin.rb
@@ -42,15 +42,17 @@ class MpogSoftwarePlugin < 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'
diff --git a/public/mpog-institution-validations.js b/public/mpog-institution-validations.js
index f349be1..0c6ad33 100644
--- a/public/mpog-institution-validations.js
+++ b/public/mpog-institution-validations.js
@@ -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);
--
libgit2 0.21.2