From 5266a33bc22469f4d172823670d4caa672e5504a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 15 Jun 2020 09:15:16 +0200 Subject: [PATCH] :sparkles: Auto edit the new project created --- frontend/src/uxbox/main/data/dashboard.cljs | 23 +++++++++++--- frontend/src/uxbox/main/refs.cljs | 5 +++ .../src/uxbox/main/ui/dashboard/sidebar.cljs | 31 ++++++++++++++----- frontend/src/uxbox/util/dom.cljs | 4 +++ 4 files changed, 52 insertions(+), 11 deletions(-) diff --git a/frontend/src/uxbox/main/data/dashboard.cljs b/frontend/src/uxbox/main/data/dashboard.cljs index c15148679..1be7d2394 100644 --- a/frontend/src/uxbox/main/data/dashboard.cljs +++ b/frontend/src/uxbox/main/data/dashboard.cljs @@ -81,6 +81,7 @@ (update [_ state] (let [profile (:profile state)] (update state :dashboard-local assoc + :project-for-edit nil :team-id (:default-team-id profile) :project-id (:default-project-id profile)))) @@ -98,6 +99,7 @@ ptk/UpdateEvent (update [_ state] (update state :dashboard-local assoc + :project-for-edit nil :project-id nil :team-id team-id)) @@ -116,6 +118,7 @@ ptk/UpdateEvent (update [_ state] (update state :dashboard-local assoc + :project-for-edit nil :team-id team-id :project-id project-id)) @@ -242,7 +245,7 @@ (def create-project (ptk/reify ::create-project ptk/WatchEvent - (watch [this state stream] + (watch [_ state stream] (let [name (str "New Project " (gensym "p")) team-id (get-in state [:dashboard-local :team-id])] (->> (rp/mutation! :create-project {:name name :team-id team-id}) @@ -253,8 +256,20 @@ (us/verify ::project data) (ptk/reify ::project-created ptk/UpdateEvent - (update [this state] - (update state :projects assoc (:id data) data)))) + (update [_ state] + (-> state + (update :projects assoc (:id data) data) + (update :dashboard-local assoc :project-for-edit (:id data)))) + + ptk/WatchEvent + (watch [_ state stream] + (rx/of (rt/nav :dashboard-project {:team-id (:team-id data) :project-id (:id data)}))))) + +(def clear-project-for-edit + (ptk/reify ::clear-project-for-edit + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:dashboard-local :project-for-edit] nil)))) ;; --- Rename Project @@ -343,7 +358,7 @@ (us/verify ::file data) (ptk/reify ::file-created ptk/UpdateEvent - (update [this state] + (update [_ state] (let [project-id (:project-id data) file-id (:id data) recent-project-files (get-in state [:recent-file-ids project-id] [])] diff --git a/frontend/src/uxbox/main/refs.cljs b/frontend/src/uxbox/main/refs.cljs index 85dd108c9..091fb0b9e 100644 --- a/frontend/src/uxbox/main/refs.cljs +++ b/frontend/src/uxbox/main/refs.cljs @@ -32,6 +32,11 @@ (def profile (l/derived :profile st/state)) +;; ---- Dashboard refs + +(def dashboard-local + (l/derived :dashboard-local st/state)) + ;; ---- Workspace refs (def workspace-local diff --git a/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs b/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs index e8e8ad25c..68d7a0d17 100644 --- a/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/sidebar.cljs @@ -33,30 +33,47 @@ (mf/defc sidebar-project [{:keys [id name selected? team-id] :as props}] - (let [local (mf/use-state {:name name}) + (let [dashboard-local @refs/dashboard-local + project-for-edit (:project-for-edit dashboard-local) + local (mf/use-state {:name name + :editing (= id project-for-edit)}) editable? (not (nil? id)) + edit-input-ref (mf/use-ref) + on-click #(st/emit! (rt/nav :dashboard-project {:team-id team-id :project-id id})) - on-dbl-click #(when editable? (swap! local assoc :edit true)) + on-dbl-click #(when editable? (swap! local assoc :editing true)) on-input #(as-> % $ (dom/get-target $) (dom/get-value $) (swap! local assoc :name $)) - on-cancel #(swap! local assoc :edit false :name name) + on-cancel #(do + (st/emit! dsh/clear-project-for-edit) + (swap! local assoc :editing false :name name)) on-keyup #(cond (kbd/esc? %) (on-cancel) (kbd/enter? %) (let [name (-> % dom/get-target dom/get-value)] + (st/emit! dsh/clear-project-for-edit) (st/emit! (dsh/rename-project id name)) - (swap! local assoc :edit false)))] + (swap! local assoc :editing false)))] + + (mf/use-effect + (mf/deps (:editing @local)) + #(when (:editing @local) + (let [edit-input (mf/ref-val edit-input-ref)] + (dom/focus! edit-input) + (dom/select-text! edit-input)) + nil)) [:li {:on-click on-click :on-double-click on-dbl-click :class-name (when selected? "current")} - (if (:edit @local) + (if (:editing @local) [:div.edit-wrapper [:input.element-title {:value (:name @local) + :ref edit-input-ref :on-change on-input :on-key-down on-keyup}] [:span.close {:on-click on-cancel} i/close]] @@ -143,7 +160,7 @@ (fn [event] (let [target (dom/get-target event) value (dom/get-value target)] - (.select target) + (dom/select-text! target) (if (empty? value) (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {})) (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value}))))) @@ -158,7 +175,7 @@ (fn [event] (let [search-input (dom/get-element "search-input")] (dom/clean-value! search-input) - (.focus search-input) + (dom/focus! search-input) (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {}))))] [:div.library-bar diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs index 3eac0c630..a5d9947ca 100644 --- a/frontend/src/uxbox/util/dom.cljs +++ b/frontend/src/uxbox/util/dom.cljs @@ -104,6 +104,10 @@ [node] (set! (.-value node) "")) +(defn select-text! + [node] + (.select node)) + (defn ^boolean equals? [node-a node-b] (.isEqualNode node-a node-b))