WIP: improve page edition.

frontend/uxbox/data/projects.cljs

@@ -71,6 +71,17 @@
     (-pr-writer [mv writer _]
       (-write writer "#<event:u.s.p/create-page>"))))
 
+(defn update-page-name
+  [pageid name]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (update-in state [:pages-by-id pageid] assoc :name name))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.s.p/update-page-name>"))))
+
 (defn delete-page
   [pageid]
   (reify
@@ -80,7 +91,7 @@
 
     IPrintWithWriter
     (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/create-page>"))))
+      (-write writer "#<event:u.s.p/edit-page>"))))
 
 (defn create-project
   [{:keys [name width height layout] :as data}]

frontend/uxbox/ui/workspace.cljs

@@ -11,6 +11,7 @@
             [uxbox.ui.icons.dashboard :as icons]
             [uxbox.ui.icons :as i]
             [uxbox.ui.lightbox :as lightbox]
+            [uxbox.ui.keyboard :as k]
             [uxbox.ui.users :as ui.u]
             [uxbox.ui.navigation :as nav]
             [uxbox.ui.dom :as dom]))
@@ -143,19 +144,20 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn- project-sidebar-pageitem-render
-  [own page numpages]
+  [own parent page numpages]
-  (let [pageid (:id page)]
+  (letfn [(on-edit [e]
+            (let [data {:edit true :form page}]
+              (reset! parent data)))]
     (html
      [:li.single-page
       {:class "current"
-       :key pageid
        :on-click #(dp/go-to-project (:project page) (:id page))}
       [:div.tree-icon i/page]
       [:span (:name page)]
       [:div.options
-       [:div {:on-click (constantly nil)} i/pencil]
+       [:div {:on-click on-edit} i/pencil]
        [:div {:class (when (= 1 (count @pages-state)) "hide")
-              :on-click #(rs/emit! (dp/delete-page pageid))}
+              :on-click #(rs/emit! (dp/delete-page (:id page)))}
         i/trash]]])))
 
 (def project-sidebar-pageitem
@@ -173,45 +175,56 @@
      [:div.project-bar-inside
       [:span.project-name name]
       [:ul.tree-view
-       (for [page pages] (project-sidebar-pageitem page (count pages)))]
+       (for [page pages]
+         (let [component (project-sidebar-pageitem local page (count pages))]
+           (rum/with-key component (str (:id page)))))]
       [:button.btn-primary.btn-small
        {:on-click #(reset! local {:edit true :form {}})}
        "+ Add new page"]])))
 
 (defn- project-sidebar-form-render
   [own parent]
-  (letfn [(on-change [e]
+  (let [form (:form @parent)
-            (let [value (str/trim (dom/event->value e))]
+        project @project-state]
-              (swap! parent assoc-in [:form :name] value)))
+    (letfn [(on-change [e]
-          (on-save [e]
+              (let [value (dom/event->value e)]
-            (let [project @project-state
+                (swap! parent assoc-in [:form :name] value)))
-                  name (get-in @parent [:form :name])
+            (persist []
-                  data {:project (:id project)
+              (if (nil? (:id form))
-                        :width (:width project)
+                (let [data {:project (:id project)
-                        :height (:height project)
+                            :width (:width project)
-                        :name name}]
+                            :height (:height project)
-              (rs/emit! (dp/create-page data))
+                            :name (:name form)}]
-              (reset! parent {:edit false})))
+                  (rs/emit! (dp/create-page data))
-          (on-cancel [e]
+                  (reset! parent {:edit false}))
-            (reset! parent {:edit false}))]
+                (do
-    (html
+                  (rs/emit! (dp/update-page-name (:id form) (:name form)))
-     [:div.project-bar-inside
+                  (reset! parent {:edit false}))))
-      [:input.input-text
+            (on-save [e]
-       {
+              (persist))
-        :name "test"
+            (on-key-up [e]
-        :auto-focus true
+              (when (k/enter? e)
-        :placeholder "Page title"
+                (persist)))
-        :type "text"
+            (on-cancel [e]
-        :value (get-in @parent [:form :name] "")
+              (reset! parent {:edit false}))]
-        :on-change on-change
+      (html
-        }]
+       [:div.project-bar-inside
-      [:button.btn-primary.btn-small
+        [:input.input-text
-       {:disabled (str/empty? (get-in @parent [:form :name] ""))
+         {:name "test"
-        :on-click on-save}
+          :auto-focus true
-       "Save"]
+          :placeholder "Page title"
-      [:button.btn-primary.btn-small
+          :type "text"
-       {:on-click on-cancel}
+          :value (get-in @parent [:form :name] "")
-       "Cancel"]])))
+          :on-change on-change
+          :on-key-up on-key-up
+          }]
+        [:button.btn-primary.btn-small
+         {:disabled (str/empty? (str/trim (get-in @parent [:form :name] "")))
+          :on-click on-save}
+         "Save"]
+        [:button.btn-primary.btn-small
+         {:on-click on-cancel}
+         "Cancel"]]))))
 
 (def project-sidebar-form
   (util/component