closet hangers page has nice remove button

app/controllers/closet_hangers_controller.rb

@@ -1,5 +1,15 @@
 class ClosetHangersController < ApplicationController
-  before_filter :authorize_user!, :only => [:set_quantity]
+  before_filter :authorize_user!, :only => [:destroy, :update]
+  before_filter :find_item, :only => [:destroy, :update]
+
+  def destroy
+    @closet_hanger = current_user.closet_hangers.find_by_item_id!(@item.id)
+    @closet_hanger.destroy
+    respond_to do |format|
+      format.html { redirect_after_destroy! }
+      format.js { render :json => true }
+    end
+  end
 
   def index
     @user = User.find params[:user_id]
@@ -10,13 +20,13 @@ class ClosetHangersController < ApplicationController
   # quantity of an item they own, the user would expect a create form to work
   # even after the record already exists, and an update form to work even after
   # the record is deleted. So, create and update are aliased, and both find
-  # the record if it exists or create a new one if it does not.
+  # the record if it exists or create a new one if it does not. They will even
+  # delete the record if quantity is zero.
   #
   # This is kinda a violation of REST. It's not worth breaking user
   # expectations, though, and I can't really think of a genuinely RESTful way
   # to pull this off.
   def update
-    @item = Item.find params[:item_id]
     @closet_hanger = current_user.closet_hangers.find_or_initialize_by_item_id(@item.id)
     @closet_hanger.attributes = params[:closet_hanger]
 
@@ -43,10 +53,7 @@ class ClosetHangersController < ApplicationController
     else # delete the hanger since the user doesn't want it
       @closet_hanger.destroy
       respond_to do |format|
-        format.html {
+        format.html { redirect_after_destroy! }
-          flash[:success] = "Success! You do not own #{@item.name}."
-          redirect_back!
-        }
 
         format.json { render :json => true }
       end
@@ -61,6 +68,15 @@ class ClosetHangersController < ApplicationController
     raise AccessDenied unless user_signed_in? && current_user.id == params[:user_id].to_i
   end
 
+  def find_item
+    @item = Item.find params[:item_id]
+  end
+
+  def redirect_after_destroy!
+    flash[:success] = "Success! You do not own #{@item.name}."
+    redirect_back!
+  end
+
   def redirect_back!
     redirect_to params[:return_to] || @item
   end

app/helpers/application_helper.rb

@@ -86,6 +86,10 @@ module ApplicationHelper
     hidden_field_tag 'origin', value, :id => nil
   end
 
+  def return_to_field_tag
+    hidden_field_tag :return_to, request.fullpath
+  end
+
   def show_title_header?
     params[:controller] != 'items'
   end

app/stylesheets/closet_hangers/_index.sass

@@ -1,3 +1,5 @@
+@import "partials/context_button"
+
 body.closet_hangers-index
   #title
     float: left
@@ -28,15 +30,27 @@ body.closet_hangers-index
         text-align: left
         top: $object-img-size - 20px
 
-        form
-          display: none
-
         span, input[type=number]
           font-size: 16px
           font-weight: bold
 
+      form
+        display: none
+
     &.current-user
-      .object:hover .quantity
+      .object:hover
+        form
+          display: inline
+
+        .closet-hanger-destroy
+          position: absolute
+          right: ($object-width - $object-img-size) / 2 + $object-padding
+          top: 0
+
+          input
+            +context-button
+
+        .quantity
           +opacity(1)
           background: transparent
           top: $object-img-size - 24px
@@ -45,9 +59,6 @@ body.closet_hangers-index
           span
             display: none
 
-        form
-          display: inline
-
           input[type=number]
             padding: 2px
             width: 2em

app/stylesheets/outfits/_edit.sass

@@ -1,6 +1,7 @@
 @import ../shared/jquery.jgrowl
 @import partials/wardrobe
 
+@import "partials/context_button"
 @import "partials/icon"
 @import star
 
@@ -400,10 +401,7 @@ body.outfits-edit
       li
         margin-bottom: .25em
         a
-          +awesome-button
+          +context-button
-          +awesome-button-color(#aaaaaa)
-          +opacity(0.9)
-          font-size: 80%
     &:hover
       ul, .object-info
         display: block

app/stylesheets/partials/_context_button.sass

@@ -0,0 +1,6 @@
+=context-button
+  +awesome-button
+  +awesome-button-color(#aaaaaa)
+  +opacity(0.9)
+  font-size: 80%
+

app/views/closet_hangers/_closet_hanger.html.haml

@@ -1,10 +1,15 @@
+- show_controls ||= false # we could do user check here, but may as well do it once
 .object
   = render :partial => 'items/item_link', :locals => {:item => closet_hanger.item}
   .quantity
     %span= closet_hanger.quantity
-    - if user_is?(closet_hanger.user)
+    - if show_controls
-      = form_for closet_hanger, :url => user_item_closet_hanger_path(current_user, closet_hanger.item) do |f|
+      = form_for closet_hanger, :url => user_item_closet_hanger_path(current_user, closet_hanger.item), :html => {:class => 'closet-hanger-update'} do |f|
-        = hidden_field_tag :return_to, request.fullpath
+        = return_to_field_tag
         = 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
+      = submit_tag "Remove"
 

app/views/closet_hangers/index.html.haml

@@ -11,7 +11,7 @@
       %p
         These are the items you own. Hover over an item to remove it from the
         list or to change the quantity.
-    = render @closet_hangers
+    = render :partial => 'closet_hanger', :collection => @closet_hangers, :locals => {:show_controls => user_is?(@user)}
   - else
     - if user_is?(@user)
       %p You haven't tracked any items on Dress to Impress.

config/routes.rb

@@ -40,7 +40,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
     resources :closet_hangers, :only => [:index], :path => 'closet'
 
     resources :items, :only => [] do
-      resource :closet_hanger, :only => [:create, :update]
+      resource :closet_hanger, :only => [:create, :update, :destroy]
     end
   end
 

public/javascripts/closet_hangers/index.js

@@ -54,7 +54,7 @@
     }
   }
 
-  hangersEl.find('form').submit(function (e) {
+  hangersEl.find('form.closet-hanger-update').submit(function (e) {
     e.preventDefault();
     submitForm($(this));
   });
@@ -64,7 +64,7 @@
   }).storeValue();
 
   hangersEl.find('div.object').mouseleave(function () {
-    submitForm($(this).find('form'));
+    submitForm($(this).find('form.closet-hanger-update'));
   });
 })();