WIP

frontend/uxbox/router.cljs

@@ -14,10 +14,17 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn update-location
-  [{:keys [handler route-params]}]
+  [{:keys [handler route-params] :as params}]
   (reify
+    IPrintWithWriter
+    (-pr-writer [mv writer x]
+      (-write writer "#<event:router/update-location ")
+      (-pr-writer params writer x)
+      (-write writer ">"))
+
     rs/UpdateEvent
     (-apply-update [_ state]
+      (println "-apply-update" handler route-params)
       (merge state
              {:location handler}
              (when route-params
@@ -28,6 +35,10 @@
   ([name params]
    {:pre [(keyword? name)]}
    (reify
+     IPrintWithWriter
+     (-pr-writer [mv writer _]
+       (-write writer "#<event:router/navigate>"))
+
      rs/EffectEvent
      (-apply-effect [_ state]
        (let [loc (merge {:handler name}
@@ -60,7 +71,7 @@
 
 (defonce +router+
   (bidi.router/start-router! routes {:on-navigate on-navigate
-                                     :default-location {:handler :login}}))
+                                     :default-location {:handler :auth/login}}))
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Public Api
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/uxbox/rstore.cljs

@@ -51,6 +51,7 @@
   "Emits an event or a collection of them.
   The order of events does not matters."
   ([event]
+   (println "emit! " event)
    (rx/push! bus event))
   ([event & events]
    (run! #(rx/push! bus %) (into [event] events))))
@@ -73,13 +74,16 @@
   the provided value."
   [state]
   (reify
+    IPrintWithWriter
+    (-pr-writer [_ writer x]
+      (-write writer "#<event:rstore/reset-state ")
+      (-pr-writer state writer x)
+      (-write writer ">"))
+
     UpdateEvent
     (-apply-update [_ _]
-      state)
+      state)))
 
-    IPrintWithWriter
-    (-pr-writer [mv writer _]
-      (-write writer "#<event:rstore/reset-state>"))))
 
 (defn init
   "Initializes the stream event loop and

frontend/uxbox/state.cljs

@@ -3,12 +3,15 @@
             [beicon.core :as rx]))
 
 (defonce stream
-  (rs/init {}))
+  (rs/init {:location :auth/login
+            :location-params nil
+            :projects-by-id {}
+            :pages-by-id {}}))
 
 (defonce state (atom {}))
 (rx/to-atom stream state)
 
-(rs/emit! (rs/reset-state {:location :auth/login
-                           :location-params nil
-                           :projects-by-id {}
-                           :pages-by-id {}}))
+;; (rs/emit! (rs/reset-state {:location :auth/login
+;;                            :location-params nil
+;;                            :projects-by-id {}
+;;                            :pages-by-id {}}))

frontend/uxbox/ui.cljs

@@ -3,7 +3,8 @@
             [cats.labs.lens :as l]
             [uxbox.state :as s]
             [uxbox.util :as util]
-            [uxbox.ui.users :as u]))
+            [uxbox.ui.users :as ui.u]
+            [uxbox.ui.dashboard :as ui.d]))
 
 (def ^:private ^:static state
   (as-> (l/select-keys [:location]) $
@@ -11,15 +12,16 @@
 
 (defn app-render
   [own]
+  (println "KAKA: " @state)
   (let [{:keys [location location-params]} (rum/react state)]
-    (println @state)
     (case location
-      :auth/login (u/login)
+      :auth/login (ui.u/login)
       ;; :auth/register (u/register)
       ;; :auth/recover (u/recover-password)
-      ;; :main/dashboard (d/dashboard)
+      :main/dashboard (ui.d/dashboard)
       ;; :main/project (w/workspace conn location-params)
       ;; :main/page (w/workspace conn location-params))))
+      nil
       )))
 
 (def app

frontend/uxbox/ui/dashboard.cljs

@@ -0,0 +1,241 @@
+(ns uxbox.ui.dashboard
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [cuerdas.core :refer [trim]]
+            [uxbox.util :as util]
+            [uxbox.router :as r]
+            [uxbox.ui.navigation :as nav]
+            ;; [uxbox.ui.mixins :as mx]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.users :as ui.u]
+            ;; [uxbox.ui.lightbox :refer [lightbox
+            ;;                            render-lightbox
+            ;;                            set-lightbox!
+            ;;                            close-lightbox!]]
+            ;; [uxbox.ui.activity :refer [timeline]]
+            [uxbox.ui.icons.dashboard :as icons]
+            ;; [uxbox.projects.queries :as q]
+            ;; [uxbox.projects.actions :as actions]
+            [uxbox.time :refer [ago]]))
+
+(def lightbox (constantly nil))
+(def render-lightbox (constantly nil))
+(def set-lightbox! (constantly nil))
+(def close-lightbox! (constantly nil))
+
+;; Config
+;; TODO: i18nized names
+(def project-orderings {:project/name "name"
+                        :project/last-updated "date updated"
+                        :project/created "date created"})
+
+(def project-layouts {:mobile {:name "Mobile"
+                               :id "mobile"
+                               :width 320
+                               :height 480}
+                      :tablet {:name "Tablet"
+                               :id "tablet"
+                               :width 1024
+                               :height 768}
+                      :notebook {:name "Notebook"
+                                 :id "notebook"
+                                 :width 1366
+                                 :height 768}
+                      :desktop {:name "Desktop"
+                                :id "desktop"
+                                :width 1920
+                                :height 1080}})
+
+(def new-project-defaults {:name ""
+                           :width 1920
+                           :height 1080
+                           :layout :desktop})
+
+(def name->order (into {} (for [[k v] project-orderings] [v k])))
+
+;; Views
+
+(defn layout-input
+  [layout new-project]
+  (let [human-name (get-in project-layouts [layout :name])
+        id (str "project-" (get-in project-layouts [layout :id]))
+        tag (str "input#" id)
+        tag (keyword tag)]
+    [[tag
+       {:type "radio"
+        :key id
+        :name "project-layout"
+        :value human-name
+        :checked (= layout (:layout @new-project))
+        :on-change #(swap! new-project merge {:layout layout
+                                              :width (get-in project-layouts [layout :width])
+                                              :height (get-in project-layouts [layout :height])})}]
+      [:label
+        {:value name
+         :for id}
+         human-name]]))
+
+(rum/defc layout-selector
+  [new-project]
+  (vec (cons :div.input-radio.radio-primary
+             (mapcat #(layout-input % new-project) (keys project-layouts)))))
+
+(rum/defcs new-project-lightbox < (rum/local new-project-defaults :new-project)
+  [{:keys [new-project]} conn]
+  (let [{:keys [name width height layout]} @new-project]
+    [:div.lightbox-body
+     [:h3 "New project"]
+     [:form
+      {:on-submit (fn [e]
+                    (.preventDefault e)
+                    (let [new-project-attributes {:name (trim name)
+                                                  :width (int width)
+                                                  :height (int height)
+                                                  :layout layout}]
+                     ;; (actions/create-project conn new-project-attributes)
+                     (close-lightbox!)))}
+      [:input#project-name.input-text
+       {:placeholder "New project name"
+        :type "text"
+        :value name
+        :auto-focus true
+        :on-change #(swap! new-project assoc :name (.-value (.-target %)))}]
+      [:div.project-size
+       [:input#project-witdh.input-text
+        {:placeholder "Width"
+         :type "number"
+         :min 0 ;;TODO check this value
+         :max 666666 ;;TODO check this value
+         :value width
+         :on-change #(swap! new-project assoc :width (.-value (.-target %)))}]
+       [:a.toggle-layout
+        {:href "#"
+         :on-click #(swap! new-project assoc :width height :height width)}
+        i/toggle]
+       [:input#project-height.input-text
+        {:placeholder "Height"
+         :type "number"
+         :min 0 ;;TODO check this value
+         :max 666666 ;;TODO check this value
+         :value height
+         :on-change #(swap! new-project assoc :height (.-value (.-target %)))}]]
+      ;; Layout selector
+      (layout-selector new-project)
+      ;; Submit
+      (when-not (empty? (trim name))
+        [:input#project-btn.btn-primary
+         {:value "Go go go!"
+          :type "submit"}])]
+     [:a.close
+      {:href "#"
+       :on-click #(close-lightbox!)}
+      i/close]]))
+
+;; (defmethod render-lightbox :new-project
+;;   [_ conn]
+;;   (new-project-lightbox conn))
+
+(rum/defc header
+  []
+  [:header#main-bar.main-bar
+   [:div.main-logo
+    (nav/link "/" i/logo)]
+   (ui.u/user)])
+
+(rum/defc project-count < rum/static
+  [n]
+  [:span.dashboard-projects n " projects"])
+
+(rum/defc project-sort-selector < rum/reactive
+  [sort-order]
+  (let [sort-name (get project-orderings (rum/react sort-order))]
+    [:select.input-select
+     {:on-change #(reset! sort-order (name->order (.-value (.-target %))))
+      :value sort-name}
+     (for [order (keys project-orderings)
+           :let [name (get project-orderings order)]]
+       [:option {:key name} name])]))
+
+(rum/defc dashboard-bar
+  []
+  [:section#dashboard-bar.dashboard-bar
+    [:div.dashboard-info
+     (project-count 0)
+     [:span "Sort by"]
+     (project-sort-selector (atom :name))]
+    [:div.dashboard-search
+     icons/search]])
+
+(rum/defc project-card < rum/static
+  [conn
+   {uuid :project/uuid
+    last-update :project/last-updated
+    name :project/name
+    pages :project/pages
+    comment-count :project/comment-count}]
+  [:div.grid-item.project-th
+   {:on-click #(r/go :project {:project-uuid uuid})
+    :key uuid}
+   [:h3
+    name]
+   [:span.project-th-update "Updated " (ago last-update)]
+   [:div.project-th-actions
+    [:div.project-th-icon.pages
+     icons/page
+     [:span pages]]
+    [:div.project-th-icon.comments
+     i/chat
+     [:span comment-count]]
+    [:div.project-th-icon.delete
+     {:on-click #(do (.stopPropagation %)
+                     ;; (actions/delete-project conn uuid)
+                     %)}
+     icons/trash]]])
+
+(rum/defc new-project < rum/static
+  []
+  [:div.grid-item.add-project
+   {:on-click #(set-lightbox! :new-project)}
+   [:span "+ New project"]])
+
+;; (defn sorted-projects
+;;   [projects sort-order]
+;;   (let [project-cards (map (partial project-card conn) (sort-by sort-order projects))]
+;;     (if (= sort-order :project/name)
+;;       project-cards
+;;       (reverse project-cards))))
+
+(rum/defc dashboard-grid < rum/reactive
+  [projects sort-order]
+  [:section.dashboard-grid
+    [:h2 "Your projects"]
+   [:div.dashboard-grid-content
+    (vec
+     (concat [:div.dashboard-grid-content
+              (new-project)]
+             #_(sorted-projects projects
+                              (rum/react sort-order))))]])
+
+(defn dashboard-render
+  [own]
+  (println "2222")
+  (html
+   [:main.dashboard-main
+    (header)
+    [:section.dashboard-content
+     #_(dashboard-bar sort-order @project-count)
+     (dashboard-bar)
+     (dashboard-grid [] (atom :name))]
+    #_(timeline conn)]))
+
+
+(def dashboard
+  (util/component {:render dashboard-render
+                   :mixins [rum/reactive]
+                   :name "dashboard"}))
+
+;; (rum/defc dashboard
+;;   [conn]
+;;   [:div
+;;    (dashboard* conn)
+;;    #_(lightbox conn)])

frontend/uxbox/ui/users.cljs

@@ -1,5 +1,6 @@
 (ns uxbox.ui.users
   (:require [rum.core :as rum]
+            [uxbox.router :as r]
             ;; [uxbox.users.queries :as q]
             ;; [uxbox.ui.mixins :as mx]
             [uxbox.ui.icons :as icons]
@@ -25,8 +26,13 @@
        icons/exit
        [:span "Save & Exit"]]])
 
+;; FIXME this is a temporal
+(def current-user (atom {:user/fullname "Cirilla"
+                         :user/avatar "http://lorempixel.com/50/50/"}))
+(def menu-open? (atom false))
+
 (rum/defcs user < (rum/local false :menu-open?)
-  [{:keys [menu-open? current-user]} conn]
+  [own]
   (let [usr @current-user]
     [:div.user-zone {:on-mouse-enter #(reset! menu-open? true)
                      :on-mouse-leave #(reset! menu-open? false)}
@@ -54,10 +60,10 @@
     {:name "login"
      :value "Continue"
      :type "submit"
-     :on-click #(nav/navigate! :dashboard)}]
+     :on-click #(r/go :main/dashboard)}]
    [:div.login-links
     [:a
-     {:on-click #(nav/navigate! :login)}
+     {:on-click #(r/go :auth/login)}
      "You already have an account?"]]])
 
 (rum/defc register < rum/static
@@ -78,13 +84,13 @@
     {:name "login"
      :value "Continue"
      :type "submit"
-     :on-click #(nav/navigate! :dashboard)}]
+     :on-click #(r/go :main/dashboard)}]
    [:div.login-links
     [:a
-     {:on-click #(nav/navigate! :login)}
+     {:on-click #(r/go :auth/login)}
      "You have remembered your password?"]
     [:a
-     {:on-click #(nav/navigate! :register)}
+     {:on-click #(r/go :auth/register)}
      "Don't have an account?"]]])
 
 (rum/defc recover-password < rum/static
@@ -113,10 +119,10 @@
     {:name "login"
      :value "Continue"
      :type "submit"
-     :on-click #(nav/navigate! :dashboard)}]
+     :on-click #(r/go :main/dashboard)}]
    [:div.login-links
-    [:a {:on-click #(nav/navigate! :recover-password)} "Forgot your password?"]
-    [:a {:on-click #(nav/navigate! :register)} "Don't have an account?"]]])
+    [:a {:on-click #(r/go :auth/recover-password)} "Forgot your password?"]
+    [:a {:on-click #(r/go :auth/register)} "Don't have an account?"]]])
 
 (rum/defc login
   []