Refactor dashboard colors page.

src/uxbox/main/data/colors.cljs

@@ -9,44 +9,82 @@
   (:require [clojure.set :as set]
             [beicon.core :as rx]
             [uxbox.util.uuid :as uuid]
-            [uxbox.main.state :as st]
             [uxbox.util.rstore :as rs]
-            [uxbox.main.state.colors :as stc]
+            [uxbox.util.router :as r]
+            [uxbox.util.color :as color]
+            [uxbox.main.state :as st]
             [uxbox.main.repo :as rp]))
 
+
+;; --- Helpers
+
+(defn- assoc-collection
+  [state coll]
+  (let [id (:id coll)
+        coll (assoc coll :type :own)]
+    (assoc-in state [:colors-by-id id] coll)))
+
+(defn- dissoc-collection
+  "A reduce function for dissoc the color collection
+  to the state map."
+  [state id]
+  (update state :colors-by-id dissoc id))
+
 ;; --- Initialize
 
 (declare fetch-collections)
 (declare collections-fetched?)
 
-(defrecord Initialize []
+(defrecord Initialize [type id]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (let [type (or type :builtin)
+          id (or id (if (= type :builtin) 1 nil))
+          data {:type type :id id :selected #{}
+                :section :dashboard/colors}]
+      (assoc state :dashboard data)))
+
   rs/EffectEvent
   (-apply-effect [_ state]
-    (when-not (seq (:colors-by-id state))
+    (when (nil? (:colors-by-id state))
       (reset! st/loader true)))
 
   rs/WatchEvent
   (-apply-watch [_ state s]
-    (let [colors (seq (:colors-by-id state))]
+    (if (nil? (:colors-by-id state))
-      (if colors
-        (rx/empty)
       (rx/merge
        (rx/of (fetch-collections))
          (->> (rx/filter collections-fetched? s)
               (rx/take 1)
               (rx/do #(reset! st/loader false))
-              (rx/ignore)))))))
+              (rx/ignore)))
+      (rx/empty))))
 
 (defn initialize
-  []
+  [type id]
-  (Initialize.))
+  (Initialize. type id))
+
+;; --- Select a Collection
+
+(defrecord SelectCollection [type id]
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (rx/of (r/navigate :dashboard/colors
+                       {:type type :id id}))))
+
+(defn select-collection
+  ([type]
+   (select-collection type nil))
+  ([type id]
+   {:pre [(keyword? type)]}
+   (SelectCollection. type id)))
 
 ;; --- Collections Fetched
 
 (defrecord CollectionFetched [items]
   rs/UpdateEvent
   (-apply-update [_ state]
-    (reduce stc/assoc-collection state items)))
+    (reduce assoc-collection state items)))
 
 (defn collections-fetched
   [items]
@@ -75,7 +113,7 @@
   rs/UpdateEvent
   (-apply-update [_ state]
     (-> state
-        (stc/assoc-collection item)
+        (assoc-collection item)
         (assoc-in [:dashboard :collection-id] (:id item))
         (assoc-in [:dashboard :collection-type] :own))))
 
@@ -103,13 +141,12 @@
 (defrecord CollectionUpdated [item]
   rs/UpdateEvent
   (-apply-update [_ state]
-    (stc/assoc-collection state item)))
+    (assoc-collection state item)))
 
 (defn collection-updated
   [item]
   (CollectionUpdated. item))
 
-
 ;; --- Update Collection
 
 (defrecord UpdateCollection [id]
@@ -144,7 +181,7 @@
 (defrecord DeleteCollection [id]
   rs/UpdateEvent
   (-apply-update [_ state]
-    (stc/dissoc-collection state id))
+    (dissoc-collection state id))
 
   rs/WatchEvent
   (-apply-watch [_ state s]
@@ -188,3 +225,42 @@
   "Remove color in a collection."
   [id colors]
   (RemoveColors. id colors))
+
+;; --- Select color
+
+(defrecord SelectColor [color]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (update-in state [:dashboard :selected] conj color)))
+
+(defrecord DeselectColor [color]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (update-in state [:dashboard :selected] disj color)))
+
+(defrecord ToggleColorSelection [color]
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (let [selected (get-in state [:dashboard :selected])]
+      (rx/of
+       (if (selected color)
+         (DeselectColor. color)
+         (SelectColor. color))))))
+
+(defn toggle-color-selection
+  [color]
+  {:pre [(color/hex? color)]}
+  (ToggleColorSelection. color))
+
+;; --- Delete Selected Colors
+
+(defrecord DeleteSelectedColors []
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (let [{:keys [id selected]} (get state :dashboard)]
+      (rx/of (remove-colors id selected)
+             #(assoc-in % [:dashboard :selected] #{})))))
+
+(defn delete-selected-colors
+  []
+  (DeleteSelectedColors.))

src/uxbox/main/ui.cljs

@@ -6,16 +6,12 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui
-  (:require [sablono.core :as html :refer-macros [html]]
+  (:require [promesa.core :as p]
-            [promesa.core :as p]
             [beicon.core :as rx]
-            [goog.dom :as gdom]
-            [rum.core :as rum]
             [lentes.core :as l]
+            [cuerdas.core :as str]
+            [bide.core :as bc]
             [uxbox.main.state :as st]
-            [uxbox.util.router :as rt]
-            [uxbox.util.rstore :as rs]
-            [uxbox.util.i18n :refer (tr)]
             [uxbox.main.data.projects :as dp]
             [uxbox.main.data.users :as udu]
             [uxbox.main.data.auth :as dauth]
@@ -27,6 +23,11 @@
             [uxbox.main.ui.dashboard :as dashboard]
             [uxbox.main.ui.settings :as settings]
             [uxbox.main.ui.workspace :refer (workspace)]
+            [uxbox.util.router :as rt]
+            [uxbox.util.rstore :as rs]
+            [uxbox.util.i18n :refer (tr)]
+            [uxbox.util.data :refer (parse-int uuid-str?)]
+            [uxbox.util.dom :as dom]
             [uxbox.util.mixins :as mx]
             [uxbox.main.ui.shapes]))
 
@@ -99,7 +100,13 @@
         :dashboard/elements (dashboard/elements-page)
         :dashboard/icons (dashboard/icons-page)
         :dashboard/images (dashboard/images-page)
-        :dashboard/colors (dashboard/colors-page)
+        :dashboard/colors (let [{:keys [id type]} params
+                                type (when (str/alpha? type) (keyword type))
+                                id (cond
+                                     (str/digits? id) (parse-int id)
+                                     (uuid-str? id) (uuid id)
+                                     :else nil)]
+                            (dashboard/colors-page type id))
         :settings/profile (settings/profile-page)
         :settings/password (settings/password-page)
         :settings/notifications (settings/notifications-page)
@@ -122,6 +129,8 @@
    ["/dashboard/icons" :dashboard/icons]
    ["/dashboard/images" :dashboard/images]
    ["/dashboard/colors" :dashboard/colors]
+   ["/dashboard/colors/:type/:id" :dashboard/colors]
+   ["/dashboard/colors/:type" :dashboard/colors]
    ["/workspace/:project/:page" :workspace/page]])
 
 (extend-protocol bc/IPathRepr

src/uxbox/main/ui/dashboard/colors.cljs

@@ -29,239 +29,256 @@
             [uxbox.util.lens :as ul]
             [uxbox.util.color :refer (hex->rgb)]))
 
-;; --- Lenses
+;; --- Refs
 
 (def ^:private dashboard-ref
   (-> (l/key :dashboard)
       (l/derive st/state)))
 
-(def ^:private collections-by-id-ref
+(def ^:private collections-map-ref
   (-> (comp (l/key :colors-by-id)
             (ul/merge library/+color-collections-by-id+))
       (l/derive st/state)))
 
+(def ^:private collections-ref
+  (-> (l/lens vals)
+      (l/derive collections-map-ref)))
+
 (defn- focus-collection
-  [collid]
+  [id]
-  (-> (l/key collid)
+  (-> (l/key id)
-      (l/derive collections-by-id-ref)))
+      (l/derive collections-map-ref)))
 
 ;; --- Page Title
 
-(defn page-title-render
+(mx/defcs page-title
-  [own coll]
+  {:mixins [(rum/local {}) mx/static mx/reactive]}
+  [own {:keys [id] :as coll}]
   (let [local (:rum/local own)
         dashboard (mx/react dashboard-ref)
-        own? (:builtin coll false)]
+        own? (= :builtin (:type coll))
-    (letfn [(on-title-save [e]
+        edit? (:edit @local)]
-              (rs/emit! (dc/rename-collection (:id coll) (:coll-name @local)))
+    (letfn [(save []
+              (let [dom (mx/ref-node own "input")
+                    name (.-innerText dom)]
+                (rs/emit! (dc/rename-collection id (str/trim name)))
+                (swap! local assoc :edit false)))
+            (cancel []
               (swap! local assoc :edit false))
-            (on-title-edited [e]
+            (edit []
+              (swap! local assoc :edit true))
+            (on-input-keydown [e]
               (cond
-                (k/esc? e) (swap! local assoc :edit false)
+                (k/esc? e) (cancel)
-                (k/enter? e) (on-title-save e)
+                (k/enter? e)
-                :else (let [content (dom/event->inner-text e)]
+                (do
-                        (swap! local assoc :coll-name content))))
+                  (dom/prevent-default e)
-            (on-title-edit [e]
+                  (dom/stop-propagation e)
-              (swap! local assoc :edit true :coll-name (:name coll)))
+                  (save))))
-            (on-delete [e]
+            (delete-collection []
               (rs/emit! (dc/delete-collection (:id coll))))]
-      (html
+      [:div.dashboard-title
-       [:div.dashboard-title {}
+       [:h2
-        [:h2 {}
+        (if edit?
-         (if (:edit @local)
           [:div.dashboard-title-field
            [:span.edit
-             {:content-editable ""
+            {:content-editable true
-              :on-key-up on-title-edited}
+             :ref "input"
+             :on-key-down on-input-keydown}
             (:name coll)]
-            [:span.close
+           [:span.close {:on-click cancel} i/close]]
-             {:on-click #(swap! local assoc :edit false)}
-             i/close]]
           [:span.dashboard-title-field
+           {:on-double-click edit}
            (:name coll)])]
        (if (and (not own?) coll)
          [:div.edition
-           (if (:edit @local)
+          (if edit?
-             [:span {:on-click on-title-save} i/save]
+            [:span {:on-click save} i/save]
-             [:span {:on-click on-title-edit} i/pencil])
+            [:span {:on-click edit} i/pencil])
-           [:span {:on-click on-delete} i/trash]])]))))
+          [:span {:on-click delete-collection} i/trash]])])))
-
-(def ^:private page-title
-  (mx/component
-   {:render page-title-render
-    :name "page-title"
-    :mixins [(rum/local {}) mx/static mx/reactive]}))
-
-;; --- Nav
-
-(defn nav-render
-  [own]
-  (let [dashboard (mx/react dashboard-ref)
-        collections-by-id (mx/react collections-by-id-ref)
-        collid (:collection-id dashboard)
-        own? (= (:collection-type dashboard) :own)
-        builtin? (= (:collection-type dashboard) :builtin)
-        collections (as-> (vals collections-by-id) $
-                      (if own?
-                        (filter (comp not :builtin) $)
-                        (filter :builtin $)))]
-    (html
-     [:div.library-bar
-      [:div.library-bar-inside
-       [:ul.library-tabs
-        [:li {:class-name (when builtin? "current")
-              :on-click #(rs/emit! (dd/set-collection-type :builtin))}
-         "STANDARD"]
-        [:li {:class-name (when own? "current")
-              :on-click #(rs/emit! (dd/set-collection-type :own))}
-         "YOUR LIBRARIES"]]
-       [:ul.library-elements
-        (if own?
-          [:li
-           [:a.btn-primary
-            {:on-click #(rs/emit! (dc/create-collection))}
-            "+ New library"]])
-        (for [props collections
-              :let [num (count (:data props))]]
-          [:li {:key (str (:id props))
-                :on-click #(rs/emit! (dd/set-collection (:id props)))
-                :class-name (when (= (:id props) collid) "current")}
-           [:span.element-title (:name props)]
-           [:span.element-subtitle
-            (tr "ds.num-elements" (t/c num))]])]]])))
-
-(def ^:private nav
-  (mx/component
-   {:render nav-render
-    :name "nav"
-    :mixins [mx/reactive]}))
 
 ;; --- Grid
 
-(defn grid-render
+(mx/defc grid-item
-  [own]
+  [color selected?]
-  (let [local (:rum/local own)
+  (let [color-rgb (hex->rgb color)]
-        dashboard (mx/react dashboard-ref)
+    (letfn [(toggle-selection [event]
-        coll-type (:collection-type dashboard)
+              (rs/emit! (dc/toggle-color-selection color)))
-        coll-id (:collection-id dashboard)
+            (toggle-selection-shifted [event]
-        own? (= coll-type :own)
+              (when (k/shift? event)
-        coll (mx/react (focus-collection coll-id))
+                (toggle-selection event)))]
-        toggle-color-check (fn [color]
-                             (swap! local update :selected #(if (% color) (disj % color) (conj % color))))
-        delete-selected #(rs/emit! (dc/remove-colors (:id coll) (:selected @local)))]
-    (when coll
-      (html
-       [:section.dashboard-grid.library
-        (page-title coll)
-        [:div.dashboard-grid-content
-          [:div.dashboard-grid-row
-           (if own?
-             [:div.grid-item.small-item.add-project
-              {:on-click #(udl/open! :color-form {:coll coll})}
-              [:span "+ New color"]])
-           (for [color (remove nil? (:data coll))
-                 :let [color-rgb (hex->rgb color)]]
       [:div.grid-item.small-item.project-th
-              {:key color :on-click #(when (k/shift? %) (toggle-color-check color))}
+       {:on-click toggle-selection-shifted}
        [:span.color-swatch {:style {:background-color color}}]
        [:div.input-checkbox.check-primary
         [:input {:type "checkbox"
                  :id color
-                        :on-click #(toggle-color-check color)
+                 :on-click toggle-selection
-                        :checked ((:selected @local) color)}]
+                 :checked selected?}]
         [:label {:for color}]]
        [:span.color-data color]
-              [:span.color-data (apply str "RGB " (interpose ", " color-rgb))]])]]
+       [:span.color-data (apply str "RGB " (interpose ", " color-rgb))]])))
 
-        (when (not (empty? (:selected @local)))
+(mx/defc grid-options
+  [coll]
+  (let [own? (= (:type coll) :own)]
+    (letfn [(on-delete [event]
+              (rs/emit! (dc/delete-selected-colors)))]
       ;; MULTISELECT OPTIONS BAR
       [:div.multiselect-bar
        (if own?
          [:div.multiselect-nav
-              [:span.move-item.tooltip.tooltip-top
+          #_[:span.move-item.tooltip.tooltip-top
              {:alt "Move to"}
              i/organize]
           [:span.delete.tooltip.tooltip-top
-               {:alt "Delete" :on-click delete-selected}
+           {:alt "Delete"
+            :on-click on-delete}
            i/trash]]
          [:div.multiselect-nav
           [:span.move-item.tooltip.tooltip-top
            {:alt "Copy to"}
-               i/organize]])])]))))
+           i/organize]])])))
 
-(def ^:private grid
+(mx/defc grid
-  (mx/component
+  {:mixins [mx/static]}
-   {:render grid-render
+  [selected coll]
-    :name "grid"
+  (let [own? (= (:type coll) :own)]
-    :mixins [(rum/local {:selected #{}})
+    [:div.dashboard-grid-content
-             mx/static
+     [:div.dashboard-grid-row
-             mx/reactive]}))
+      (when own?
+        [:div.grid-item.small-item.add-project
+         {:on-click #(udl/open! :color-form {:coll coll})}
+         [:span "+ New color"]])
+      (for [color (remove nil? (:data coll))
+            :let [selected? (contains? selected color)]]
+        (-> (grid-item color selected?)
+            (mx/with-key (str color))))]]))
 
-;; --- Menu
+(mx/defc content
-
+  {:mixins [mx/static mx/reactive]}
-(defn menu-render
   []
   (let [dashboard (mx/react dashboard-ref)
-        coll-id (:collection-id dashboard)
+        selected (:selected dashboard)
+        coll-type (:type dashboard)
+        coll-id (:id dashboard)
         coll (mx/react (focus-collection coll-id))
-        ccount (count (:data coll)) ]
+        own? (= coll-type :own)]
-    (html
+    (when coll
-     [:section.dashboard-bar.library-gap
+      [:section.dashboard-grid.library
-      [:div.dashboard-info
+       (page-title coll)
-       [:span.dashboard-colors (tr "ds.num-colors" (t/c ccount))]]])))
+       (grid selected coll)
+       (when (and (seq selected))
+         (grid-options coll))])))
 
-(def menu
+;; --- Nav
-  (mx/component
-   {:render menu-render
-    :name "menu"
-    :mixins [mx/reactive mx/static]}))
 
+(mx/defc nav-collection
+  {:mixins [mx/static]}
+  [collection selected?]
+  (letfn [(on-click [event]
+            (let [type (:type collection)
+                  id (:id collection)]
+              (rs/emit! (dc/select-collection type id))))]
+    (let [colors (count (:data collection))]
+      [:li {:on-click on-click
+            :class-name (when selected? "current")}
+       [:span.element-title (:name collection)]
+       [:span.element-subtitle
+        (tr "ds.num-elements" (t/c colors))]])))
+
+(mx/defc nav-collections
+  {:mixins [mx/static mx/reactive]}
+  [type selected]
+  (let [own? (= type :own)
+        builtin? (= type :builtin)
+        collections (cond->> (rum/react collections-ref)
+                      own? (filter #(= :own (:type %)))
+                      builtin? (filter #(= :builtin (:type %)))
+                      own? (sort-by :id))]
+    [:ul.library-elements
+     (when own?
+       [:li
+        [:a.btn-primary
+         {:on-click #(rs/emit! (dc/create-collection))}
+         "+ New library"]])
+     (for [coll collections
+           :let [selected? (= (:id coll) selected)
+                 key (str (:id coll))]]
+       (-> (nav-collection coll selected?)
+           (mx/with-key key)))]))
+
+(mx/defc nav
+  {:mixins [mx/static mx/reactive]}
+  []
+  (let [dashboard (mx/react dashboard-ref)
+        collections (rum/react collections-ref)
+        selected (:id dashboard)
+        type (:type dashboard)
+        own? (= type :own)
+        builtin? (= type :builtin)]
+    (letfn [(select-tab [type]
+              (let [xf (filter #(= type (:type %)))
+                    colls (sequence xf collections)]
+                (if-let [item (first colls)]
+                  (rs/emit! (dc/select-collection type (:id item)))
+                  (rs/emit! (dc/select-collection type)))))]
+      [:div.library-bar
+       [:div.library-bar-inside
+        [:ul.library-tabs
+         [:li {:class-name (when builtin? "current")
+               :on-click (partial select-tab :builtin)}
+          "STANDARD"]
+         [:li {:class-name (when own? "current")
+               :on-click (partial select-tab :own)}
+          "YOUR LIBRARIES"]]
+        (nav-collections type selected)]])))
 
 ;; --- Colors Page
 
-(defn colors-page-render
+(defn- colors-page-will-mount
   [own]
-  (html
+  (let [[type id] (:rum/args own)]
+    (rs/emit! (dc/initialize type id))
+    own))
+
+(defn- colors-page-did-remount
+  [old-own own]
+  (let [[old-type old-id] (:rum/args old-own)
+        [new-type new-id] (:rum/args own)]
+    (when (or (not= old-type new-type)
+              (not= old-id new-id))
+      (rs/emit! (dc/initialize new-type new-id)))
+    own))
+
+(mx/defc colors-page
+  {:will-mount colors-page-will-mount
+   :did-remount colors-page-did-remount
+   :mixins [mx/static]}
+  [type id]
   [:main.dashboard-main
    (header)
    [:section.dashboard-content
     (nav)
-     (menu)
+    (content)]])
-     (grid)]]))
 
-(defn colors-page-will-mount
+;; --- Colors Lightbox (Component)
-  [own]
-  (rs/emit! (dd/initialize :dashboard/colors)
-            (dc/initialize))
-  own)
 
-(defn colors-page-did-remount
+(mx/defcs color-lightbox
-  [old-state state]
+  {:mixins [(rum/local {}) mx/static]}
-  (rs/emit! (dd/initialize :dashboard/colors))
-  state)
-
-(def colors-page
-  (mx/component
-   {:render colors-page-render
-    :will-mount colors-page-will-mount
-    :did-remount colors-page-did-remount
-    :name "colors"
-    :mixins [mx/static]}))
-
-;; --- Colors Create / Edit Lightbox
-
-(defn- color-lightbox-render
   [own {:keys [coll color]}]
-  (html
   (let [local (:rum/local own)]
-    (letfn [(submit [e]
+    (letfn [(on-submit [event]
-              (let [params {:id (:id coll) :from color :to (:hex @local)}]
+              (let [params {:id (:id coll)
+                            :from color
+                            :to (:hex @local)}]
                 (rs/emit! (dc/replace-color params))
                 (udl/close!)))
-            (on-change [e]
+            (on-change [event]
-              (let [value (str/trim (dom/event->value e))]
+              (let [value (str/trim (dom/event->value event))]
-                (swap! local assoc :hex value)))]
+                (swap! local assoc :hex value)))
-      (html
+            (on-close [event]
+              (udl/close!))]
       [:div.lightbox-body
        [:h3 "New color"]
        [:form
@@ -272,17 +289,9 @@
 
         [:input#project-btn.btn-primary
          {:value "+ Add color"
-           :on-click submit
+          :on-click on-submit
           :type "button"}]]
-        [:a.close {:on-click #(udl/close!)}
+       [:a.close {:on-click on-close} i/close]])))
-       i/close]])))))
-
-(def color-lightbox
-  (mx/component
-   {:render color-lightbox-render
-    :name "color-lightbox"
-    :mixins [(rum/local {})
-             mx/static]}))
 
 (defmethod lbx/render-lightbox :color-form
   [params]

src/uxbox/main/ui/dashboard/header.cljs

@@ -6,9 +6,7 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.dashboard.header
-  (:require [sablono.core :as html :refer-macros [html]]
+  (:require [lentes.core :as l]
-            [rum.core :as rum]
-            [lentes.core :as l]
             [uxbox.util.i18n :refer (tr)]
             [uxbox.util.router :as r]
             [uxbox.util.rstore :as rs]
@@ -20,24 +18,23 @@
             [uxbox.util.mixins :as mx]))
 
 (def header-ref
-  (as-> (l/in [:dashboard]) $
+  (-> (l/in [:dashboard])
-    (l/derive $ s/state)))
+      (l/derive s/state)))
 
-(defn- header-link
+(mx/defc header-link
   [section content]
   (let [link (r/route-for section)]
-    (html
+    [:a {:href (str "/#" link)} content]))
-     [:a {:href (str "/#" link)} content])))
 
-(defn header-render
+(mx/defc header
-  [own]
+  {:mixins [mx/static mx/reactive]}
+  []
   (let [local (mx/react header-ref)
         projects? (= (:section local) :dashboard/projects)
         elements? (= (:section local) :dashboard/elements)
         icons? (= (:section local) :dashboard/icons)
         images? (= (:section local) :dashboard/images)
         colors? (= (:section local) :dashboard/colors)]
-    (html
     [:header#main-bar.main-bar
      [:div.main-logo
       (header-link :dashboard/projects i/logo)]
@@ -52,11 +49,6 @@
        (header-link :dashboard/images (tr "ds.images"))]
       [:li {:class (when colors? "current")}
        (header-link :dashboard/colors (tr "ds.colors"))]]
-      (ui.u/user)])))
+     (ui.u/user)]))
+
 
-(def header
-  (mx/component
-   {:render header-render
-    :name "header"
-    :mixins [rum/static
-             mx/reactive]}))