Add aspect list to contact page

app/controllers/aspects_controller.rb

@@ -106,12 +106,21 @@ class AspectsController < ApplicationController
 
   def add_to_aspect
     begin current_user.add_person_to_aspect( params[:person_id], params[:aspect_id])
+
+      @aspect = current_user.aspects.find(params[:aspect_id])
+      @aspect_id = @aspect.id
       @person_id = params[:person_id]
-      @aspect_id = params[:aspect_id]
+
       flash.now[:notice] =  I18n.t 'aspects.add_to_aspect.success'
 
       respond_to do |format|
-        format.js { render :status => 200 }
+        format.js { render :json => {
+          :button_html => render_to_string(:partial => 'aspects/add_to_aspect',
+                           :locals => {:aspect_id => @aspect_id,
+                                       :person_id => @person_id}),
+          :badge_html =>  render_to_string(:partial => 'aspects/aspect_badge',
+                              :locals => {:aspect => @aspect})
+          }}
         format.html{ redirect_to aspect_path(@aspect_id)}
       end
     rescue Exception => e
@@ -130,7 +139,12 @@ class AspectsController < ApplicationController
       flash.now[:notice] = I18n.t 'aspects.remove_from_aspect.success'
 
       respond_to do |format|
-        format.js { render :status => 200 }
+        format.js { render :json => {:button_html =>
+          render_to_string(:partial => 'aspects/remove_from_aspect',
+                           :locals => {:aspect_id => @aspect_id,
+                                       :person_id => @person_id}),
+          :aspect_id => @aspect_id
+        }}
         format.html{ redirect_to aspect_path(@aspect_id)}
       end
     rescue Exception => e

app/views/aspects/_aspect_contacts.haml

@@ -21,6 +21,9 @@
     - for contact in contacts
       = person_image_link(contact[:person])
 
+    %br
+    %br
+    %br
     .section
       %h3= t('shared.invitations.invites')
       = render "shared/invitations", :invites => @invites

app/views/people/_profile_sidebar.html.haml

@@ -16,25 +16,24 @@
 
 #profile
   .profile_photo
-    = person_image_link(person, :to => :photos)
+    = person_image_link(person, :size => :thumb_large, :to => :photos)
 
   %p
-    = action_link(person, is_contact)
+    = action_link(person, contact)
 
   %hr{:style=>"width:300px;"}
 
   %ul
-    - if is_contact
+    - if contact
       %li
-        %ul#aspects_for_person
+        = render :partial => 'aspect_list',
-          %b= t('.in_aspects')
+          :locals => {:contact => contact,
-          %br
+                      :aspects_with_person => @aspects_with_person,
-          - for aspect in @aspects_with_person
+                      :aspects_without_person => @aspects.reject{ |aspect| @aspects_with_person.include?(aspect)}}
-            %li
+      %br
-              = link_to aspect.name, aspect
+      %hr{:style=>"width:300px;"}
-              = link_to "x", {:controller => "aspects", :action => "remove_from_aspect", :person_id => person.id, :aspect_id => aspect.id}, :confirm => t('.remove_from', :name => person.name, :aspect => aspect), :remote => true, :class => "delete"
 
-  -if is_contact || person == current_user.person
+  -if contact || person == current_user.person
     %ul#profile_information
       %li
         %h3 #{t('.bio')}

app/views/people/show.html.haml

@@ -19,7 +19,7 @@
         = link_to t('_photos'), person_photos_path(@person)
 
 .span-8.append-1.last
-  = render :partial => 'people/profile_sidebar', :locals => {:person => @person, :is_contact => @contact}
+  = render :partial => 'people/profile_sidebar', :locals => {:person => @person, :contact => @contact}
 
 .span-15.last
   - unless @contact || current_user.person == @person

app/views/shared/_stream_element.html.haml

@@ -3,7 +3,7 @@
 -#   the COPYRIGHT file.
 
 %li.message{:data=>{:guid=>post.id}}
-  =person_image_link(person)
+  =person_image_link(person, :size => :thumb_small)
 
   .content
     .from

public/javascripts/contact-list.js

@@ -5,7 +5,7 @@
 
 
 $(document).ready( function(){
-  var ContactList = {
+  var List = {
     initialize: function(){
       $(".contact_list_search").keyup(function(e){
         var search = $(this);
@@ -23,32 +23,25 @@ $(document).ready( function(){
           }
         });
       });
-    },
-
-    refreshContactCount: function(){
-      var contactCountElement = $(".aspect_contact_count"),
-          contactCount = $(".contact_pictures")[0].childElementCount,
-          newHTML = contactCountElement.html().replace(/\d+/,contactCount);
-
-      contactCountElement.html(newHTML);
     }
   };
 
-  $('.added').live('ajax:loading', function(data, html, xhr) {
+  $('.added').live('ajax:loading', function() {
     $(this).fadeTo(200,0.4);
   });
 
-  $('.added').live('ajax:success', function(data, html, xhr) {
+  $('.added').live('ajax:success', function(data, json, xhr) {
-    var person_id = $(this).closest("li").find(".avatar").attr("data-person_id");
+    var json = $.parseJSON(json);
-    $(".contact_pictures").find("img[data-person_id='"+person_id+"']").parent().remove();
+    var contactPictures = $(".contact_pictures");
 
-    $(this).parent().html(html);
+    if( contactPictures.length > 0 ) {
-    ContactList.refreshContactCount();
+      if( contactPictures[0].childElementCount == 0 ) {
-
+        $("#no_contacts").fadeIn(200);
-    if( $(".contact_pictures")[0].childElementCount == 0 ) {
+      }
-      $("#no_contacts").fadeIn(200);
     }
 
+    $(".aspect_badge[guid='"+json['aspect_id']+"']", ".aspects").remove();
+    $(this).parent().html(json['button_html']);
     $(this).fadeTo(200,1);
   });
 
@@ -57,21 +50,18 @@ $(document).ready( function(){
     $(this).fadeTo(200,1);
   });
 
-  $('.add').live('ajax:loading', function(data, html, xhr) {
+  $('.add').live('ajax:loading', function() {
     $(this).fadeTo(200,0.4);
   });
 
-  $('.add').live('ajax:success', function(data, html, xhr) {
+  $('.add').live('ajax:success', function(data, json, xhr) {
-    var person_image = $(this).closest("li").find(".avatar")
+    var json = $.parseJSON(json);
-    person_image.parent().clone().appendTo(".contact_pictures");
-
-    $(this).parent().html(html);
-    ContactList.refreshContactCount();
-
     if( $("#no_contacts").is(':visible') ) {
       $("#no_contacts").fadeOut(200);
     }
 
+    $(".badges").prepend(json['badge_html']);
+    $(this).parent().html(json['button_html']);
     $(this).fadeTo(200,1);
   });
 
@@ -83,5 +73,5 @@ $(document).ready( function(){
     $(this).children("img").attr("src","/images/icons/monotone_check_yes.png");
   });
 
-  ContactList.initialize();
+  List.initialize();
 });

public/stylesheets/sass/application.sass

@@ -2003,6 +2003,24 @@ h3,h4
     &:hover
       :color #eee
 
+.aspects
+  :position relative
+
+  .right
+    :right 12px
+
+  .contact_list
+    :height auto
+    :max-height auto
+    :width 298px
+  
+  .edit
+    :display none
+
+.aspects .aspect_badge
+  :font
+    :size 1em
+
 .aspect_badge.public
   :background
     :color #C0E76C
@@ -2023,3 +2041,4 @@ h3,h4
     :top -0.1em
   .aspect_badge
     :top -0.2em
+