Autocompletion

src/day8/re_frame/trace/events.cljs

@@ -187,6 +187,14 @@
                 (assoc-in [:app-db :search-string] "")))
         db))))
 
+(rf/reg-event-db
+  :app-db/add-autocomplete
+  [(rf/path :app-db :search-string)]
+  (fn [search-string [_ k]]
+    (if (str/blank? search-string)
+      (prn-str k)
+      (str (str/trim search-string) " " (prn-str k) " "))))
+
 (rf/reg-event-db
   :app-db/search-string
   (fn [db [_ search-string]]

src/day8/re_frame/trace/panels/app_db.cljs

@@ -11,6 +11,7 @@
   (let [subtree-input (r/atom "")
         subtree-paths (rf/subscribe [:app-db/paths])
         search-string (rf/subscribe [:app-db/search-string])
+        autocomplete  (rf/subscribe [:app-db/autocomplete-keys])
         input-error   (r/atom false)]
     (fn []
       [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
@@ -22,6 +23,16 @@
          :change-on-blur? false
          :placeholder ":path :into :app-db"]
 
+        (js/console.log "Autocomplete" @autocomplete)
+
+
+        [re-com/h-box
+         :children (map (fn [k] [:button.label
+                                 {:key (prn-str k)
+                                  :on-click #(rf/dispatch [:app-db/add-autocomplete k])}
+                                 (prn-str k)])
+                        @autocomplete)]
+
         ;; TODO: check for input errors
         ; (if @input-error
         ;   [:div.input-error {:style {:color "red" :margin-top 5}}

src/day8/re_frame/trace/styles.cljs

@@ -115,6 +115,7 @@
 (def label-mixin {:color      text-color
                   :background background-gray-hint
                   :border     [[(px 1) "solid" light-gray]]
+                  :flex       [[0 0 "auto"]]
                   :font-size  (em 0.9)
                   :margin     [[(px 10) (px 5)]]})
 
@@ -295,7 +296,7 @@
    [:.filter-items-count
     {:cursor "auto"}
     [(s/& ".active") {:background yellow
-                      :cursor "pointer"}
+                      :cursor     "pointer"}
      [(s/& ":hover") {:text-decoration "line-through"}]]]
    [:.filter-fields {:margin-top "10px"}]
    [:.filter-category {:display    "inline-block"

src/day8/re_frame/trace/subs.cljs

@@ -1,5 +1,7 @@
 (ns day8.re-frame.trace.subs
-  (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
+  (:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
+            [re-frame.db]
+            [clojure.string :as str]))
 
 (rf/reg-sub
   :settings/root
@@ -31,6 +33,32 @@
   (fn [db _]
     (get db :app-db)))
 
+(rf/reg-sub
+  :app-db/re-frame-db
+  (fn []
+    [])
+  (fn [_ _]
+    @re-frame.db/app-db))
+
+(rf/reg-sub
+  :app-db/autocomplete-keys
+  :<- [:app-db/root]
+  :<- [:app-db/re-frame-db]
+  (fn [[app-db-settings re-frame-db] _]
+    (let [search-string (:search-string app-db-settings)]
+      (take 20
+            (try
+              (if (str/blank? search-string)
+                (keys re-frame-db)
+                (let [path (try
+                             (cljs.reader/read-string (str "[" search-string "]"))
+                             (catch :default e
+                               nil))]
+                  (when (some? path)
+                    (keys (get-in re-frame-db path)))))
+              (catch :default e
+                nil))))))
+
 (rf/reg-sub
   :app-db/paths
   :<- [:app-db/root]

src/day8/re_frame/trace/utils/re_com.cljs

@@ -200,7 +200,7 @@
                       :style (flex-child-style "auto")}
                      [(if (= input-type :password) :input input-type)
                       (merge
-                        {:class       (str "form-control " class)
+                        {:class       class
                          :type        (case input-type
                                         :input "text"
                                         :password "password"