diff --git a/src/uxbox/data/dashboard.cljs b/src/uxbox/data/dashboard.cljs index 7b3de1501..3f88a8c48 100644 --- a/src/uxbox/data/dashboard.cljs +++ b/src/uxbox/data/dashboard.cljs @@ -73,6 +73,28 @@ (-pr-writer [mv writer _] (-write writer "#")))) +(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 "#")))) + +(defn clear-project-filtering + [] + (reify + rs/UpdateEvent + (-apply-update [_ state] + (assoc-in state [:dashboard :project-filter] "")) + + IPrintWithWriter + (-pr-writer [mv writer _] + (-write writer "#")))) + (defn set-collection-type [type] {:pre [(contains? #{:builtin :own} type)]} diff --git a/src/uxbox/data/projects.cljs b/src/uxbox/data/projects.cljs index 883c3ad2d..e7cc4a2ba 100644 --- a/src/uxbox/data/projects.cljs +++ b/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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/src/uxbox/state.cljs b/src/uxbox/state.cljs index b27c87be4..2d0b290fe 100644 --- a/src/uxbox/state.cljs +++ b/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 {} diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index aa35fc26e..d7ac9a910 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/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