Project search, needs UX/UI review

src/uxbox/data/dashboard.cljs

@@ -73,6 +73,28 @@
     (-pr-writer [mv writer _]
       (-write writer "#<event:u.d.d/set-project-ordering>"))))
 
+(defn set-project-filtering
+  [term]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (assoc-in state [:dashboard :project-filter] term))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.d/set-project-filtering>"))))
+
+(defn clear-project-filtering
+  []
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (assoc-in state [:dashboard :project-filter] ""))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.d/clear-project-filtering>"))))
+
 (defn set-collection-type
   [type]
   {:pre [(contains? #{:builtin :own} type)]}

src/uxbox/data/projects.cljs

@@ -1,5 +1,6 @@
 (ns uxbox.data.projects
   (:require [bouncer.validators :as v]
+            [cuerdas.core :as str]
             [uxbox.rstore :as rs]
             [uxbox.router :as r]
             [uxbox.state :as st]
@@ -64,6 +65,16 @@
     :created (reverse (sort-by :created projs))
     projs))
 
+(defn contains-term?
+  [phrase term]
+  (str/contains? (str/lower phrase) (str/lower term)))
+
+(defn filter-projects-by
+  [term projs]
+  (if (= term "")
+    projs
+    (filter #(contains-term? (:name %) term) projs)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Events
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

src/uxbox/state.cljs

@@ -7,7 +7,8 @@
 (defonce stream
   (rs/init {:user {:fullname "Cirilla Fiona"
                    :avatar "http://lorempixel.com/50/50/"}
-            :dashboard {:project-ordering :name}
+            :dashboard {:project-order :name
+                        :project-filter ""}
             :workspace {}
             :shapes-by-id {}
             :elements-by-id {}

src/uxbox/ui/dashboard/projects.cljs

@@ -155,7 +155,11 @@
     (l/focus-atom $ s/state)))
 
 (def ^:static project-ordering-l
-  (as-> (l/in [:dashboard :project-ordering]) $
+  (as-> (l/in [:dashboard :project-order]) $
+    (l/focus-atom $ s/state)))
+
+(def ^:static project-filtering-l
+  (as-> (l/in [:dashboard :project-filter]) $
     (l/focus-atom $ s/state)))
 
 (defn project-sort-render
@@ -176,12 +180,32 @@
             :value option-value}
            option-text])]])))
 
-(def project-sort-selector
+(def project-sorting
   (mx/component
    {:render project-sort-render
     :name "project-sort-order"
     :mixins [rum/reactive]}))
 
+(defn project-search-render
+  []
+  (html
+    [:form
+     [:input
+      {:type "text"
+       :on-change #(rs/emit! (dd/set-project-filtering (.-value (.-target %))))
+       :auto-focus true
+       :value (rum/react project-filtering-l)}]
+     [:input
+      {:type "button"
+       :on-click #(rs/emit! (dd/clear-project-filtering))
+       :value "X"}]]))
+
+(def project-search
+  (mx/component
+   {:render project-search-render
+    :name "project-search"
+    :mixins [rum/reactive]}))
+
 (defn menu-render
   []
   (let [projects (rum/react menu-l)
@@ -190,7 +214,8 @@
      [:section#dashboard-bar.dashboard-bar
       [:div.dashboard-info
        [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))]
-       (project-sort-selector)]
+       (project-sorting)
+       (project-search)]
       [:div.dashboard-search
        i/search]])))
 
@@ -254,14 +279,16 @@
             (dom/prevent-default e)
             (lightbox/open! :new-project))]
     (let [state (rum/react grid-l)
-          ordering (rum/react project-ordering-l)]
+          ordering (rum/react project-ordering-l)
+          filtering (rum/react project-filtering-l)
+          projects (dp/filter-projects-by filtering (vals (:projects-by-id state)))]
       (html
        [:section.dashboard-grid
         [:h2 "Your projects"]
          [:div.dashboard-grid-content
           [:div.grid-item.add-project {:on-click on-click}
            [:span "+ New project"]]
-          (for [item (dp/sort-projects-by ordering (vals (:projects-by-id state)))]
+          (for [item (dp/sort-projects-by ordering projects)]
             (rum/with-key (project-item item) (:id item)))]]))))
 
 (def grid