Your Items page aware of wanting items

app/controllers/closet_hangers_controller.rb

@@ -3,7 +3,8 @@ class ClosetHangersController < ApplicationController
   before_filter :find_item, :only => [:destroy, :create, :update]
 
   def destroy
-    @closet_hanger = current_user.closet_hangers.find_by_item_id!(@item.id)
+    raise ActiveRecord::RecordNotFound unless params[:closet_hanger]
+    @closet_hanger = current_user.closet_hangers.find_by_item_id_and_owned!(@item.id, owned)
     @closet_hanger.destroy
     respond_to do |format|
       format.html { redirect_after_destroy! }
@@ -13,7 +14,8 @@ class ClosetHangersController < ApplicationController
 
   def index
     @user = User.find params[:user_id]
-    @closet_hangers = @user.closet_hangers.owned_before_wanted.alphabetical_by_item_name.includes(:item)
+    @closet_hangers_by_owned = @user.closet_hangers.owned_before_wanted.
+      alphabetical_by_item_name.includes(:item).group_by(&:owned)
     @public_perspective = params.has_key?(:public) || !user_is?(@user)
   end
 
@@ -28,14 +30,6 @@ class ClosetHangersController < ApplicationController
   # expectations, though, and I can't really think of a genuinely RESTful way
   # to pull this off.
   def update
-    if params[:closet_hanger]
-      owned = case params[:closet_hanger][:owned]
-        when 'true' then true
-        when 'false' then false
-      end
-    end
-    owned ||= true
-
     @closet_hanger = current_user.closet_hangers.find_or_initialize_by_item_id_and_owned(@item.id, owned)
     @closet_hanger.attributes = params[:closet_hanger]
 
@@ -81,6 +75,16 @@ class ClosetHangersController < ApplicationController
     @item = Item.find params[:item_id]
   end
 
+  def owned
+    owned = true
+    if params[:closet_hanger]
+      owned = case params[:closet_hanger][:owned]
+        when 'true', '1' then true
+        when 'false', '0' then false
+      end
+    end
+  end
+
   def redirect_after_destroy!
     flash[:success] = "Success! You do not #{@closet_hanger.verb(:you)} #{@item.name}."
     redirect_back!(@item)

app/helpers/closet_hangers_helper.rb

@@ -1,12 +1,26 @@
 require 'cgi'
 
 module ClosetHangersHelper
+  def closet_hanger_verb(owned)
+    ClosetHanger.verb(closet_hanger_subject, owned)
+  end
+
   def send_neomail_url(user)
     "http://www.neopets.com/neomessages.phtml?type=send&recipient=#{CGI.escape @user.neopets_username}"
   end
 
+  def closet_hanger_subject
+    public_perspective? ? @user.name : :you
+  end
+
   def public_perspective?
     @public_perspective
   end
+
+  def render_closet_hangers(owned)
+    render :partial => 'closet_hanger',
+      :collection => @closet_hangers_by_owned[owned],
+      :locals => {:show_controls => !public_perspective?}
+  end
 end
 

app/models/closet_hanger.rb

@@ -12,8 +12,12 @@ class ClosetHanger < ActiveRecord::Base
   scope :owned_before_wanted, order(arel_table[:owned].desc)
 
   def verb(subject=:someone)
-    base = (owned?) ? 'own' : 'want'
-    base + 's' if subject != :you
+    self.class.verb(subject, owned?)
+  end
+
+  def self.verb(subject, owned)
+    base = (owned) ? 'own' : 'want'
+    base << 's' unless subject == :you
     base
   end
 end

app/stylesheets/closet_hangers/_index.sass

@@ -99,6 +99,18 @@ body.closet_hangers-index
       form
         display: none
 
+  h3
+    border-bottom: 1px solid $soft-border-color
+    cursor: pointer
+    font-size: 250%
+    margin-bottom: .25em
+    padding: .25em 0
+
+  .closet-hangers-group
+    border-top: 1px solid $module-border-color
+    margin-bottom: 2em
+    padding-bottom: 1em
+
   &.current-user
     #closet-hangers
       .object:hover

app/views/closet_hangers/_closet_hanger.html.haml

@@ -6,10 +6,12 @@
     - if show_controls
       = form_for closet_hanger, :url => user_item_closet_hanger_path(current_user, closet_hanger.item), :html => {:class => 'closet-hanger-update'} do |f|
         = return_to_field_tag
+        = f.hidden_field :owned
         = f.number_field :quantity, :min => 0, :required => true, :title => "You own #{pluralize closet_hanger.quantity, closet_hanger.item.name}"
         = f.submit "Save"
   - if show_controls
     = form_tag user_item_closet_hanger_path(current_user, closet_hanger.item), :method => :delete, :class => 'closet-hanger-destroy' do
       = return_to_field_tag
+      = hidden_field_tag 'closet_hanger[owned]', closet_hanger.owned
       = submit_tag "Remove"
 

app/views/closet_hangers/index.html.haml

@@ -29,31 +29,38 @@
         = f.submit "Save"
         %span#cancel-contact-link cancel
 
-#closet-hangers{:class => public_perspective? ? nil : 'current-user'}
-  - if public_perspective?
-    - if @closet_hangers.empty?
-      %p #{@user.name} hasn't tracked any items on Dress to Impress.
-  - else
-    - unless @closet_hangers.empty?
+- unless @closet_hangers_by_owned.empty?
   %p
-        These are the items you own. Hover over an item to remove it from the
-        list or to change the quantity.
-    - else
-      %p You haven't tracked any items on Dress to Impress.
-      %p
-        Here you can keep track of what items you already own, so that as you
-        design fancy outfits you can know what you have and what you still
-        need. And, who knows? Maybe some day this page will include wishlists
-        and up-for-trade items. We'll see what happens.
-      %p
-        It's easy to get started!
-        = link_to "Just import your Neopets closet in a few quick steps.", new_closet_page_path
-        Have fun!
+    These are the items you are tracking on Dress to Impress. Hover over an
+    item to remove it from the list or to change the quantity.
+
   %p
     You can share
     = link_to "this page", request.fullpath
     with the world, and they'll be able to see what items you own.
-  = render :partial => 'closet_hanger', :collection => @closet_hangers, :locals => {:show_controls => user_is?(@user)}
+
+#closet-hangers{:class => public_perspective? ? nil : 'current-user'}
+  - [true, false].each do |owned|
+    .closet-hangers-group{'data-owned' => owned.to_s}
+      %h3 Items #{closet_hanger_subject} #{closet_hanger_verb(owned)}
+      .closet-hangers-group-content
+        - if public_perspective?
+          - unless @closet_hangers_by_owned[owned]
+            %p #{@user.name} hasn't tracked any items on Dress to Impress.
+        - else
+          - unless @closet_hangers_by_owned[owned]
+            %p
+              You haven't tracked any #{closet_hanger_verb(owned)} items on Dress
+              to Impress. It's worth doing, since you can share this list with your
+              friends and keep track of what items you still need as you create new
+              outfits.
+            %p
+              It's easy to get started!
+              = link_to "Just import your Neopets closet in a few quick steps.", new_closet_page_path
+              You can also add an item from its
+              = link_to 'Infinite Closet', items_path
+              page. Have fun!
+        = render_closet_hangers(owned)
 
 - content_for :stylesheets do
   = stylesheet_link_tag 'south-street/jquery-ui'

public/javascripts/closet_hangers/index.js

@@ -102,7 +102,7 @@
   $(hangersElQuery + " form.closet-hanger-destroy").live("submit", function (e) {
     e.preventDefault();
     var form = $(this);
-    var button = form.children("input").val("Removing…");
+    var button = form.children("input[type=submit]").val("Removing…");
     var objectWrapper = form.closest(".object").addClass("loading");
     var data = form.serialize(); // get data before disabling inputs
     objectWrapper.addClass("loading").disableForms();
@@ -216,5 +216,10 @@
 	  });
 	  e.preventDefault();
 	});
+
+
+	$('div.closet-hangers-group h3').click(function () {
+	  $(this).next().toggle();
+	});
 })();
 

public/stylesheets/compiled/screen.css

@@ -627,7 +627,7 @@ body.closet_hangers-index #closet-hangers-contact {
 }
 /* line 38, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index #closet-hangers-contact a {
-  background-image: url('/images/neomail.png?1311362308');
+  background-image: url('/images/neomail.png?1311369565');
   background-position: left center;
   background-repeat: no-repeat;
   padding-left: 18px;
@@ -703,17 +703,31 @@ body.closet_hangers-index #closet-hangers .object .quantity span, body.closet_ha
 body.closet_hangers-index #closet-hangers .object form {
   display: none;
 }
-/* line 105, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 102, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index h3 {
+  border-bottom: 1px solid #aaddaa;
+  cursor: pointer;
+  font-size: 250%;
+  margin-bottom: 0.25em;
+  padding: 0.25em 0;
+}
+/* line 109, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index .closet-hangers-group {
+  border-top: 1px solid #006600;
+  margin-bottom: 2em;
+  padding-bottom: 1em;
+}
+/* line 117, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover form {
   display: inline;
 }
-/* line 108, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 120, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy {
   position: absolute;
   right: 18px;
   top: 0;
 }
-/* line 113, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 125, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -754,7 +768,7 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-han
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
   background-color: #999999;
 }
-/* line 116, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 128, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   -moz-opacity: 1;
   -webkit-opacity: 1;
@@ -764,49 +778,49 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   top: 56px;
   padding: 0;
 }
-/* line 122, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 134, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span {
   display: none;
 }
-/* line 125, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 137, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] {
   padding: 2px;
   width: 2em;
 }
-/* line 129, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 141, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] {
   font-size: 85%;
 }
-/* line 135, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 147, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] {
   width: 2.5em;
 }
-/* line 138, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 150, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] {
   display: none;
 }
-/* line 141, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 153, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading {
   background: #eeffee;
   outline: 1px solid #006600;
 }
-/* line 145, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 157, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after {
   content: "…";
 }
-/* line 149, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 161, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact form {
   display: none;
 }
-/* line 152, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 164, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact #edit-contact-link, body.closet_hangers-index.current-user.js #closet-hangers-contact #cancel-contact-link {
   display: inline;
 }
-/* line 156, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 168, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form {
   display: block;
 }
-/* line 159, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 171, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact.editing #edit-contact-link {
   display: none;
 }
@@ -1812,7 +1826,7 @@ body.outfits-edit .object:hover ul, body.outfits-edit .object:hover .object-info
 }
 /* line 418, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .nc-icon {
-  background: url('/images/nc.png?1311362308') no-repeat;
+  background: url('/images/nc.png?1311369565') no-repeat;
   height: 16px;
   position: absolute;
   right: 16px;