Delete individual grubs

public/css/styles.css

@@ -66,6 +66,10 @@ tr:hover .grub-close {
   background-color: rgb(71, 73, 73);
 }
 
+.grub-item.edit {
+  padding-right: 40px;
+}
+
 .grub-item .input-span {
   display: block;
   overflow: hidden;
@@ -80,11 +84,23 @@ tr:hover .grub-close {
 }
 
 .grub-item.edit .grub-input {
+  margin-right: 10px;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: lightgray;
 }
 
+.grub-item .glyphicon-remove {
+  position: absolute;
+  right: 14px;
+  margin-top: 14px;
+  color: #5c5c5c;
+}
+
+.grub-item .glyphicon-remove:hover, .grub-item .glyphicon-remove:focus, .grub-item .glyphicon-remove:active {
+  color: #000000;
+}
+
 .completed {
   text-decoration: line-through;
   color: #a9a9a9;

src/clj/grub/db.clj

@@ -52,6 +52,9 @@
 (defmethod handle-event :clear-all-grubs [event]
   (clear-grubs))
 
+(defmethod handle-event :remove-grub [event]
+  (mc/remove-by-id @db grub-collection (:id event)))
+
 (defmethod handle-event :add-recipe [event]
   (let [recipe (-> event
                    (select-keys [:id :name :grubs])

src/cljs/grub/state.cljs

@@ -40,6 +40,9 @@
 (defmethod handle-event :clear-all-grubs [event state]
   (assoc state :grubs {})) 
 
+(defmethod handle-event :remove-grub [event state]
+  (assoc state :grubs (dissoc (:grubs state) (:id event)))) 
+
 (defn new-recipe [id name grubs]
   {:id id :name name :grubs grubs})
 

src/cljs/grub/view/app.cljs

@@ -29,10 +29,12 @@
   (let [grub-add (chan)
         grub-update (chan)
         grub-clear-all (chan)
+        grub-remove (chan)
         recipe-add (chan)
         recipe-add-grubs (chan)
         recipe-update (chan)
-        out (a/merge [grub-add grub-update grub-clear-all recipe-add recipe-add-grubs recipe-update])
+        out (a/merge [grub-add grub-update grub-clear-all grub-remove
+                      recipe-add recipe-add-grubs recipe-update])
         >events (chan)
         <events (a/pub >events :type)]
     (om/root app-view 
@@ -41,6 +43,7 @@
               :shared {:grub-add grub-add
                        :grub-update grub-update
                        :grub-clear-all grub-clear-all
+                       :grub-remove grub-remove
                        :recipe-add recipe-add
                        :recipe-add-grubs recipe-add-grubs
                        :recipe-update recipe-update

src/cljs/grub/view/grub.cljs

@@ -29,6 +29,10 @@
    :id id
    :completed (not completed)})
 
+(defn remove-event [id]
+  {:event :remove-grub
+   :id id})
+
 (def transitions
   {:waiting {:mouse-down :pressed
              :touch-start :pressed}
@@ -88,7 +92,10 @@
           :ref :grub-input
           :value (:grub state)
           :on-change #(om/set-state! owner :grub (.. % -target -value))
-          :on-key-up #(when (dom/enter-pressed? %) (transition-state owner :enter))}]]))
+          :on-key-up #(when (dom/enter-pressed? %) (transition-state owner :enter))}]
+         (when (= edit-state :editing) 
+           [:span.glyphicon.glyphicon-remove.pull-right
+            {:on-click #(put! (om/get-shared owner :grub-remove) (remove-event id))}])]))
 
     om/IDidMount
     (did-mount [_]