Clicking done button finishes new recipe/recipe editing

project.clj

@@ -21,7 +21,7 @@
   :cljsbuild {:builds {:dev {:source-paths ["src/cljs"]
                              :compiler {:output-dir "out"
                                         :output-to "public/js/grub_dev.js"
-                                        :source-map "public/js/grub_dev.js.map"
+                                        ;:source-map "public/js/grub_dev.js.map"
                                         :optimizations :whitespace
                                         :pretty-print false}}
                        :prod {:source-paths ["src/cljs"]

public/css/styles.css

@@ -10,10 +10,18 @@ h3 {
     margin-top: 10px;
 }
 
+.recipes-title {
+    clear: right;
+}
+
 .hidden {
     display: none;
 }
 
+.leftmost-column {
+    margin-bottom: 45px;
+}
+
 .grub-close {
     display: none;
 }
@@ -76,12 +84,9 @@ tr:hover .grub-close {
     color: default;
 }
 
-#clear-all-btn {
-    float: right;
-}
-
 .recipe-panel {
     padding: 0px;
+    margin-bottom: -1px;
 }
 
 .recipe-header {
@@ -106,9 +111,7 @@ tr:hover .grub-close {
 }
 
 .recipe-done-btn {
-    margin-left: 290px;
     margin-top: 10px;
-    margin-bottom: 10px;
 }
 
 .recipe-steps {
@@ -128,3 +131,7 @@ tr:hover .grub-close {
     transition: none;
     border-bottom: none;
 }
+
+#new-recipe {
+    margin-bottom: 20px;
+}

src/cljs/grub/dom.cljs

@@ -32,7 +32,9 @@
   (node [:button.btn.btn-primary {:id "add-grub-btn" :type "button"} "Add"]))
 
 (def clear-all-btn
-  (node [:button.btn.hidden {:id "clear-all-btn" :type "button"} "Clear all"]))
+  (node [:button.btn.hidden.pull-right 
+         {:id "clear-all-btn" :type "button"}
+         "Clear all"]))
 
 (defn make-grub-node [grub]
   (node [:li.list-group-item.grub-item 
@@ -60,12 +62,13 @@
            [:textarea.form-control.recipe-steps-input
             {:id "recipe-steps"
              :rows 3 
-             :placeholder "2 grubs"
+             :placeholder "2 grubs"}
-             :value steps}]]
+            steps]
-          [:button.btn.btn-primary.recipe-done-btn.hidden {:type "button"} "Done"]]))
+           [:button.btn.btn-primary.recipe-done-btn.hidden.pull-right 
+            {:type "button"} "Done"]]]))
 
 (defn add-new-recipe [id name steps]
-  (log "add new recipe:" name)
+  (log "add new recipe:" name "steps:" steps)
   (let [node (make-recipe-node id name steps)
         recipe-list (sel1 :#recipe-list)]
     (logs "node:" node)
@@ -78,11 +81,13 @@
 (defn recipes-selector []
   [(sel1 :#recipe-list) :.recipe-panel])
 
+(defn recipe-done-btns-selector []
+  [(sel1 :body) :.recipe-done-btn])
+
 (deftemplate main-template []
   [:div.container
-   [:div.row.show-grid
+   [:div.row
-    [:div.col-lg-2]
+    [:div.col-sm-6.leftmost-column
-    [:div.col-lg-4
      [:h3 "Grub List"]
      [:div.input-group 
       add-grub-text
@@ -90,11 +95,10 @@
        add-grub-btn]]
      [:ul#grub-list.list-group]
      clear-all-btn]
-    [:div.col-lg-4
+    [:div.col-sm-6
-     [:h3 "Recipes"]
+     [:h3.recipes-title "Recipes"]
      new-recipe
-     [:ul#recipe-list.list-group.recipe-list]]
+     [:ul#recipe-list.list-group.recipe-list]]]])
-    [:div.col-lg-2]]])
 
 (defn render-body []
   (dommy/prepend! (sel1 :body) (main-template)))

src/cljs/grub/view.cljs

@@ -56,7 +56,12 @@
 
 (defn get-edit-recipe-clicks []
   (->> (:chan (dom/listen (dom/recipes-selector) :click))
-      (a/map< (fn [e] (log "edit-recipe-click:" (.-selectedTarget e)) {:elem (.-selectedTarget e)}))))
+      (a/map< (fn [e] {:elem (.-selectedTarget e)}))))
+
+(defn get-recipe-done-btn-clicks []
+  (->> (:chan (dom/listen (dom/recipe-done-btns-selector) :click))
+       (a/map< (fn [e] (log "done button click:" (.-selectedTarget e)) 
+                 {:elem (.-selectedTarget e)}))))
 
 (defn parse-completed-event [event]
   (let [target (.-selectedTarget event)
@@ -209,13 +214,17 @@
       state)))
 
 (defmethod handle-event [:new-recipe :body-click] [state event]
-  (log "new-recipe body click")
+  (let [clicked-elem (.-target (:data event))]
-  (let [clicked-elem (.-target (:data event))
+    (if (dommy/descendant? clicked-elem dom/new-recipe)
-        recipe-panel (sel1 ".recipe-panel")]
-    (if (dommy/descendant? clicked-elem recipe-panel)
       state
       (transition state :default))))
 
+(defmethod handle-event [:new-recipe :recipe-done-btn-click] [state event]
+  (log "handle new recipe done btn click")
+  (if (dommy/descendant? (:elem event) dom/new-recipe)
+    (transition state :default)
+    state))
+
 
 (defmethod enter-state :edit-recipe [old-state new-state-name [elem]]
   (dom/-expand! elem)
@@ -238,6 +247,11 @@
       state
       (transition state :default))))
 
+(defmethod handle-event [:edit-recipe :recipe-done-btn-click] [state event]
+  (if (dommy/descendant? (:elem event) (:edit-elem state))
+    (transition state :default)
+    state))
+
 
 
 
@@ -267,7 +281,8 @@
    :edit (chan)
    :enter (get-enters)
    :new-recipe-click (get-new-recipe-clicks)
-   :edit-recipe-click (get-edit-recipe-clicks)})
+   :edit-recipe-click (get-edit-recipe-clicks)
+   :recipe-done-btn-click (get-recipe-done-btn-clicks)})
 
 (defn append-event-name-to-channel-events [channels]
   (into {}