✨ Adapt to new ux the page creation/renaming on workspace.

frontend/src/uxbox/main/data/projects.cljs

@@ -350,23 +350,26 @@
 
 (declare page-created)
 
-(s/def ::create-page
-  (s/keys :req-un [::name ::file-id]))
+(def default-page-data
+  {:version 1
+   :shapes []
+   :canvas []
+   :options {:grid-x 10
+             :grid-y 10
+             :grid-color "#cccccc"}
+   :shapes-by-id {}})
 
-(defn create-page
-  [{:keys [file-id name] :as data}]
-  (s/assert ::create-page data)
-  (ptk/reify ::create-page
+(def create-empty-page
+  (ptk/reify ::create-empty-page
     ptk/WatchEvent
-    (watch [this state s]
-      (let [ordering (count (get-in state [:files file-id :pages]))
+    (watch [this state stream]
+      (let [file-id (get-in state [:workspace-local :file-id])
+            name (str "Page " (gensym "p"))
+            ordering (count (get-in state [:files file-id :pages]))
             params {:name name
                     :file-id file-id
                     :ordering ordering
-                    :data {:shapes []
-                           :canvas []
-                           :shapes-by-id {}}
-                    :metadata {}}]
+                    :data default-page-data}]
         (->> (rp/mutation :create-project-page params)
              (rx/map page-created))))))
 
@@ -398,8 +401,9 @@
   (s/keys :req-un [::id ::name]))
 
 (defn rename-page
-  [{:keys [id name] :as data}]
-  (s/assert ::rename-page data)
+  [id name]
+  (s/assert ::us/uuid id)
+  (s/assert string? name)
   (ptk/reify ::rename-page
     ptk/UpdateEvent
     (update [_ state]
@@ -411,8 +415,8 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (let [params {:id id :name name}]
-        (->> (rp/mutation :rename-page params)
-             (rx/map #(ptk/data-event ::page-renamed data)))))))
+        (->> (rp/mutation :rename-project-page params)
+             (rx/map #(ptk/data-event ::page-renamed params)))))))
 
 ;; --- Delete Page (by ID)
 

frontend/src/uxbox/main/data/workspace.cljs

@@ -263,7 +263,6 @@
              (rx/finalize #(prn "FINALIZE" %))
              (rx/take-until stoper))))))
 
-
 ;; --- Fetch Workspace Users
 
 (declare users-fetched)

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs

@@ -16,8 +16,8 @@
    [uxbox.main.store :as st]
    [uxbox.main.refs :as refs]
    [uxbox.main.ui.confirm :refer [confirm-dialog]]
+   [uxbox.main.ui.keyboard :as kbd]
    [uxbox.main.ui.modal :as modal]
-   [uxbox.main.ui.workspace.sidebar.sitemap-forms :refer [page-form-dialog]]
    [uxbox.main.ui.workspace.sortable :refer [use-sortable]]
    [uxbox.util.data :refer [classnames enumerate]]
    [uxbox.util.dom :as dom]
@@ -28,12 +28,40 @@
 
 (mf/defc page-item
   [{:keys [page index deletable? selected?] :as props}]
-  (let [on-edit #(modal/show! page-form-dialog {:page page})
+  (let [local (mf/use-state {})
+        on-double-click
+        (fn [event]
+          (dom/prevent-default event)
+          (dom/stop-propagation event)
+          ;; (let [parent (.-parentNode (.-target event))
+          ;;       parent (.-parentNode parent)]
+          ;;   (set! (.-draggable parent) false))
+          (swap! local assoc :edition true))
+
+        on-blur
+        (fn [event]
+          (let [target (dom/event->target event)
+                ;; parent (.-parentNode target)
+                ;; parent (.-parentNode parent)
+                name (dom/get-value target)]
+            ;; (set! (.-draggable parent) true)
+            (st/emit! (dp/rename-page (:id page) name))
+            (swap! local assoc :edition false)))
+
+        on-key-down (fn [event]
+                      (cond
+                        (kbd/enter? event)
+                        (on-blur event)
+
+                        (kbd/esc? event)
+                        (swap! local assoc :edition false)))
+
         delete-fn #(st/emit! (dp/delete-page (:id page)))
         on-delete #(do
                      (dom/prevent-default %)
                      (dom/stop-propagation %)
                      (modal/show! confirm-dialog {:on-accept delete-fn}))
+
         on-drop #(do (prn "TODO"))
         on-hover #(st/emit! (dw/change-page-order {:id (:id page)
                                                    :index index}))
@@ -45,19 +73,24 @@
                                     :on-hover on-hover
                                     :on-drop on-drop})]
     [:li {:ref ref :class (classnames :selected selected?)}
-     [:div.element-list-body
-      {:class (classnames :selected selected?
-                          :dragging (:dragging? dprops))
-       :on-click navigate-fn
-       :on-double-click #(dom/stop-propagation %)
-       :draggable true}
-
+     [:div.element-list-body {:class (classnames
+                                      :selected selected?
+                                      :dragging (:dragging? dprops))
+                              :on-click navigate-fn
+                              :on-double-click on-double-click}
       [:div.page-icon i/page]
-      [:span (:name page)]
-      [:div.page-actions {}
-       [:a {:on-click on-edit} i/pencil]
-       (when deletable?
-         [:a {:on-click on-delete} i/trash])]]]))
+      (if (:edition @local)
+        [:*
+         [:input.element-name {:type "text"
+                               :on-blur on-blur
+                               :on-key-down on-key-down
+                               :auto-focus true
+                               :default-value (:name page "")}]]
+        [:*
+         [:span (:name page)]
+         [:div.page-actions
+          (when deletable?
+            [:a {:on-click on-delete} i/trash])]])]]))
 
 
 ;; --- Page Item Wrapper
@@ -69,7 +102,7 @@
 
 (mf/defc page-item-wrapper
   [{:keys [page-id index deletable? selected?] :as props}]
-  (let [page-ref (mf/use-memo {:deps #js [page-id]
+  (let [page-ref (mf/use-memo {:deps (mf/deps page-id)
                                :fn #(make-page-ref page-id)})
         page (mf/deref page-ref)]
     [:& page-item {:page page
@@ -85,22 +118,20 @@
         deletable? (> (count pages) 1)]
     [:ul.element-list
      (for [[index page-id] pages]
-       [:& page-item-wrapper
-        {:page-id page-id
-         :index index
-         :deletable? deletable?
-         :selected? (= page-id (:id current-page))
-         :key page-id}])]))
+       [:& page-item-wrapper {:page-id page-id
+                              :index index
+                              :deletable? deletable?
+                              :selected? (= page-id (:id current-page))
+                              :key page-id}])]))
 
 ;; --- Sitemap Toolbox
 
 (mf/defc sitemap-toolbox
   [{:keys [file page] :as props}]
-  (let [create-fn #(modal/show! page-form-dialog {:page {:file-id (:file-id page)}})
-        close-fn  #(st/emit! (dw/toggle-layout-flag :sitemap))]
+  (let [on-create-click #(st/emit! dp/create-empty-page)]
     [:div.sitemap.tool-window
      [:div.tool-window-bar
-      [:span (tr "ds.settings.sitemap")]
-      [:div.add-page {:on-click create-fn} i/close]]
+      [:span (tr "workspace.sidebar.sitemap")]
+      [:div.add-page {:on-click on-create-click} i/close]]
      [:div.tool-window-content
       [:& pages-list {:file file :current-page page}]]]))

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap_forms.cljs

@@ -1,72 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2015-2019 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-(ns uxbox.main.ui.workspace.sidebar.sitemap-forms
-  (:require
-   [rumext.alpha :as mf]
-   [cljs.spec.alpha :as s]
-   [uxbox.builtins.icons :as i]
-   [uxbox.main.constants :as c]
-   [uxbox.main.data.projects :as dp]
-   [uxbox.main.data.workspace :as udw]
-   [uxbox.main.store :as st]
-   [uxbox.main.ui.modal :as modal]
-   [uxbox.util.dom :as dom]
-   [uxbox.util.spec :as us]
-   [uxbox.util.forms :as fm]
-   [uxbox.util.i18n :refer [tr]]))
-
-(s/def ::id ::us/uuid)
-(s/def ::file-id ::us/uuid)
-(s/def ::name ::us/not-empty-string)
-
-(s/def ::page-form
-  (s/keys :req-un [::file-id ::name]
-          :opt-un [::id]))
-
-(defn- on-submit
-  [event form]
-  (dom/prevent-default event)
-  (modal/hide!)
-  (let [data (:clean-data form)]
-    (if (nil? (:id data))
-      (st/emit! (dp/create-page data))
-      (st/emit! (dp/rename-page data)))))
-
-(defn- initial-data
-  [page]
-  (merge {:name ""}
-         (select-keys page [:name :id :file-id])))
-
-(mf/defc page-form
-  [{:keys [page] :as props}]
-  (let [{:keys [data] :as form} (fm/use-form ::page-form #(initial-data page))]
-    [:form {:on-submit #(on-submit % form)}
-     [:input.input-text
-      {:placeholder (tr "ds.page.placeholder")
-       :type "text"
-       :name "name"
-       :class (fm/error-class form :name)
-       :on-blur (fm/on-input-blur form :name)
-       :on-change (fm/on-input-change form :name)
-       :value (:name data)
-       :auto-focus true}]
-     [:input.btn-primary
-      {:value (tr "ds.go")
-       :type "submit"
-       :class (when-not (:valid form) "btn-disabled")
-       :disabled (not (:valid form))}]]))
-
-(mf/defc page-form-dialog
-  [{:keys [page] :as props}]
-  [:div.lightbox-body
-   (if (nil? (:id page))
-     [:h3 (tr "ds.page.new")]
-     [:h3 (tr "ds.page.edit")])
-   [:& page-form {:page page}]
-   [:a.close {:on-click modal/hide!} i/close]])
-