first step of page abstraction.

src/cljs/auto_ap/views/pages/admin/accounts/side_bar.cljs

@@ -0,0 +1,81 @@
+(ns auto-ap.views.pages.admin.accounts.side-bar
+  (:require
+   [re-frame.core :as re-frame]
+   [auto-ap.subs :as subs]
+   [auto-ap.views.utils :refer [active-when dispatch-value-change]]
+   [auto-ap.views.components.typeahead :refer [typeahead-entity]]))
+
+
+(re-frame/reg-sub
+ ::specific-filters
+ (fn [db ]
+   (::filters db nil)))
+
+(re-frame/reg-sub
+ ::filters
+ :<- [::specific-filters]
+ :<- [::subs/vendors-by-id]
+ :<- [::subs/query-params]
+ (fn [[specific-filters vendors-by-id query-params] ]
+   (let [url-filters (-> query-params
+                         (select-keys #{:name-like :code-like})
+                         (update :name-like #(some-> % str))
+                         (update :code-like #(some-> % str)))]
+     (merge url-filters specific-filters ))))
+
+(re-frame/reg-sub
+ ::filter
+ :<- [::filters]
+ (fn [filters [_ which]]
+   (get filters which)))
+
+(re-frame/reg-sub
+ ::settled-filters
+ (fn [db ]
+   (::settled-filters db)))
+
+(re-frame/reg-sub
+ ::filter-params
+ :<- [::settled-filters]
+ :<- [::filters]
+ :<- [::subs/active-page]
+ (fn [[settled-filters filters ap ]]
+   (let [filters (or settled-filters filters)]
+     {:name-like (:name-like filters)
+      :code-like (:code-like filters)})))
+
+(re-frame/reg-event-fx
+ ::filters-settled
+ (fn [{:keys [db]} [_ & params]]
+   {:db (assoc db ::settled-filters @(re-frame/subscribe [::filters]))}))
+
+(re-frame/reg-event-fx
+ ::filter-changed
+ (fn [{:keys [db]} [_ & params]]
+   (let [[a b c] params
+         [which val] (if (= 3 (count params))
+                       [(into [a] b) c]
+                       [[a] b])]
+     {:db (assoc-in db (into [::filters] which) val)
+      :dispatch-debounce {:event [::filters-settled]
+                          :time 800
+                          :key ::filters}})))
+
+
+(defn accounts-side-bar []
+  [:div
+   [:p.menu-label "Name"]
+
+   [:div.field
+    [:div.control [:input.input {:placeholder "Food Cost"
+                                 :value @(re-frame/subscribe [::filter :name-like])
+                                 :on-change (dispatch-value-change [::filter-changed :name-like])} ]]]
+
+   [:p.menu-label "Code"]
+
+   [:div.field
+    [:div.control [:input.input {:placeholder "11000"
+                                 :value @(re-frame/subscribe [::filter :code-like])
+                                 :on-change (dispatch-value-change [::filter-changed :code-like])}]]]]) 
+
+