Implement search feaature in dashboard

frontend/src/uxbox/main/data/dashboard.cljs

@@ -55,6 +55,23 @@
 ;; Initialization
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(declare search-files)
+
+(defn initialize-search
+  [team-id search-term]
+  (ptk/reify ::initialize-search
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :dashboard-local assoc
+              :search-result nil))
+
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (let [local (:dashboard-local state)]
+        (when-not (empty? search-term)
+          (rx/of (search-files team-id search-term)))))))
+
+
 (declare fetch-files)
 (declare fetch-projects)
 (declare fetch-recent-files)
@@ -135,6 +152,29 @@
       (let [assoc-project #(assoc-in %1 [:projects (:id %2)] %2)]
         (reduce assoc-project state projects)))))
 
+;; --- Search Files
+
+(declare files-searched)
+
+(defn search-files
+  [team-id search-term]
+  (us/assert ::us/uuid team-id)
+  (us/assert ::us/string search-term)
+  (ptk/reify ::search-files
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (->> (rp/query :search-files {:team-id team-id :search-term search-term})
+           (rx/map files-searched)))))
+
+(defn files-searched
+  [files]
+  (us/verify (s/every ::file) files)
+  (ptk/reify ::files-searched
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :dashboard-local assoc
+              :search-result files))))
+
 ;; --- Fetch Files
 
 (declare files-fetched)

frontend/src/uxbox/main/repo.cljs

@@ -47,7 +47,7 @@
         request {:method method
                  :url url
                  :headers headers
-                 :query-string (when query (encode-query query))
+                 :query query
                  :body (if (map? body) (t/encode body) body)}
         options {:response-type response-type
                  :credentials? true}]

frontend/src/uxbox/main/ui.cljs

@@ -58,8 +58,11 @@
     ["/password" :settings-password]]
 
    ["/dashboard"
-    ["/:team-id" :dashboard-team]
-    ["/:team-id/:project-id" :dashboard-project]]
+    ["/team/:team-id"
+     ["/" :dashboard-team]
+     ["/search" :dashboard-search]
+     ["/project/:project-id" :dashboard-project]
+     ["/library" :dashboard-library]]]
 
    ["/workspace/:file-id" :workspace]])
 
@@ -84,7 +87,8 @@
        :settings-password)
       (mf/element settings/settings #js {:route route})
 
-      (:dashboard-team
+      (:dashboard-search
+       :dashboard-team
        :dashboard-project)
       (mf/element dashboard #js {:route route})
 

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

@@ -18,6 +18,7 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.ui.dashboard.header :refer [header]]
    [uxbox.main.ui.dashboard.sidebar :refer [sidebar]]
+   [uxbox.main.ui.dashboard.search :refer [search-page]]
    [uxbox.main.ui.dashboard.project :refer [project-page]]
    [uxbox.main.ui.dashboard.recent-files :refer [recent-files-page]]
    [uxbox.main.ui.dashboard.profile :refer [profile-section]]
@@ -30,9 +31,12 @@
 
 (defn- parse-params
   [route profile]
-  (let [team-id (get-in route [:params :path :team-id])
+  (let [search-term (get-in route [:params :query :search-term])
+        team-id (get-in route [:params :path :team-id])
         project-id (get-in route [:params :path :project-id])]
-    (cond-> {}
+    (cond->
+      {:search-term search-term}
+
       (uuid-str? team-id)
       (assoc :team-id (uuid team-id))
 
@@ -51,7 +55,7 @@
   [{:keys [route] :as props}]
   (let [profile (mf/deref refs/profile)
         section (get-in route [:data :name])
-        {:keys [team-id project-id]} (parse-params route profile)]
+        {:keys [search-term team-id project-id]} (parse-params route profile)]
     [:main.dashboard-main
      [:& messages-widget]
      [:section.dashboard-layout
@@ -59,10 +63,14 @@
       [:& profile-section {:profile profile}]
       [:& sidebar {:team-id team-id
                    :project-id project-id
+                   :search-term search-term
                    :section section}]
       [:div.dashboard-content
        [:& header]
        (case section
+         :dashboard-search
+         (mf/element search-page #js {:team-id team-id :search-term search-term})
+
          :dashboard-team
          (mf/element recent-files-page #js {:team-id team-id})
 

frontend/src/uxbox/main/ui/dashboard/search.cljs

@@ -0,0 +1,51 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+
+(ns uxbox.main.ui.dashboard.search
+  (:require
+   [lentes.core :as l]
+   [rumext.alpha :as mf]
+   [uxbox.main.store :as st]
+   [uxbox.main.data.dashboard :as dsh]
+   [uxbox.util.i18n :as i18n :refer [t]]
+   [uxbox.main.ui.dashboard.grid :refer [grid]]))
+
+;; --- Component: Search
+
+(def search-result-ref
+  (-> (l/in [:dashboard-local :search-result])
+      (l/derive st/state)))
+
+(mf/defc search-page
+  [{:keys [team-id search-term] :as props}]
+  (let [search-result (mf/deref search-result-ref)
+        locale (i18n/use-locale)]
+    (mf/use-effect
+     {:fn #(st/emit! (dsh/initialize-search team-id search-term))
+      :deps (mf/deps search-term)})
+    [:section.search-page
+      [:section.dashboard-grid
+       [:div.dashboard-grid-content
+        (cond
+          (empty? search-term)
+          [:div.grid-files-empty
+           [:div.grid-files-desc (t locale "dashboard.search.type-something")]]
+
+          (nil? search-result)
+          [:div.grid-files-empty
+           [:div.grid-files-desc (t locale "dashboard.search.searching-for" search-term)]]
+
+          (empty? search-result)
+          [:div.grid-files-empty
+           [:div.grid-files-desc (t locale "dashboard.search.no-matches-for" search-term)]]
+
+          :else
+          [:& grid { :files search-result :hide-new? true}])]]]))
+

frontend/src/uxbox/main/ui/dashboard/sidebar.cljs

@@ -13,6 +13,7 @@
    [cuerdas.core :as str]
    [lentes.core :as l]
    [rumext.alpha :as mf]
+   [goog.functions :as f]
    [uxbox.builtins.icons :as i]
    [uxbox.main.constants :as c]
    [uxbox.main.data.dashboard :as dsh]
@@ -84,7 +85,7 @@
         :team-id team-id
         }])))
 
-(mf/defc sidear-team
+(mf/defc sidebar-team
   [{:keys [profile
            team-id
            selected-section
@@ -125,21 +126,61 @@
        :selected-project-id selected-project-id
        :team-id team-id}]]))
 
+
+(def debounced-emit! (f/debounce st/emit! 500))
+
 (mf/defc sidebar
-  [{:keys [section team-id project-id] :as props}]
+  [{:keys [section team-id project-id search-term] :as props}]
   (let [locale (i18n/use-locale)
-        profile (mf/deref refs/profile)]
+        profile (mf/deref refs/profile)
+        search-term-not-nil (or search-term "")
+
+        on-search-focus
+        (fn [event]
+          (let [target (dom/get-target event)
+                value (dom/get-value target)]
+            (.select 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})))))
+
+        on-search-blur
+        (fn [event]
+          (let [target (dom/get-target event)]
+            (dom/clean-value! target)
+            (debounced-emit! (rt/nav :dashboard-team {:team-id team-id}))))
+
+        on-search-change
+        (fn [event]
+          (let [value (-> (dom/get-target event)
+                          (dom/get-value))]
+            (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value}))))
+
+        on-clear-click
+        (fn [event]
+          (let [search-input (dom/get-element "search-input")]
+            (dom/clean-value! search-input)
+            (.focus search-input)
+            (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {}))))]
+
     [:div.library-bar
      [:div.library-bar-inside
       [:form.dashboard-search
        [:input.input-text
         {:key :images-search-box
+         :id "search-input"
          :type "text"
-         :auto-focus true
-         :placeholder (t locale "ds.search.placeholder")}]
-       [:div.clear-search i/close]]
-      [:& sidear-team {:selected-team-id team-id
-                       :selected-project-id project-id
-                       :selected-section section
-                       :profile profile
-                       :team-id "self"}]]]))
+         :placeholder (t locale "ds.search.placeholder")
+         :default-value search-term-not-nil
+         :autoComplete "off"
+         :on-focus on-search-focus
+         :on-blur on-search-blur
+         :on-change on-search-change}]
+       [:div.clear-search
+        {:on-click on-clear-click}
+        i/close]]
+      [:& sidebar-team {:selected-team-id team-id
+                        :selected-project-id project-id
+                        :selected-section section
+                        :profile profile
+                        :team-id "self"}]]]))