Better UX for bank account balances

src/cljs/auto_ap/views/components/bank_account_filter.cljs

@@ -3,17 +3,35 @@
    [clojure.spec.alpha :as s]
    [auto-ap.entities.invoice :as invoice]
    [auto-ap.views.components.typeahead :refer [typeahead]]
-   [auto-ap.views.utils :refer [bind-field]]))
+   [auto-ap.views.utils :refer [bind-field ->$]]
+   [auto-ap.subs :as subs]
+   [re-frame.core :as re-frame]))
 
-(defn bank-account-filter [{:keys [value on-change-event bank-accounts]}]
-  [:div.field
-   [:div.control 
-    [bind-field
-     [typeahead {:matches (map (fn [x] [(:id x) (:name x)]) bank-accounts)
-                 :type "typeahead"
-                 :auto-focus true
-                 :field [:id]
-                 :text-field [:name]
-                 :event on-change-event
-                 :spec (s/nilable ::invoice/vendor-id)
-                 :subscription value}]]]])
+(defn bank-account-filter [{:keys [on-change-event value bank-accounts]}]
+  (let [is-power-user? (or @(re-frame/subscribe [::subs/is-power-user?])
+                           @(re-frame/subscribe [::subs/is-admin?]))]
+    [:nav.panel
+     (for [ba bank-accounts
+           :when (not= :cash (:type ba))]
+       ^{:key (:id ba)}
+       [:a.panel-block {:class (when (= (:id value)
+                                        (:id ba))
+                                 "is-active")
+                        :on-click (fn []
+                                    (if (= (:id value)
+                                           (:id ba))
+                                      (re-frame/dispatch (conj on-change-event nil ))
+                                      (re-frame/dispatch (conj on-change-event (select-keys ba #{:name :id})))))}
+        [:span.panel-icon
+         (cond 
+           (#{:check ":check"} (:type ba)) [:span.icon-check-payment-sign]
+
+           (#{:credit ":credit"} (:type ba))
+           [:span.icon-credit-card-1]
+
+           :else
+           [:i.fa.fa-icon-check])
+         ]
+        (:name ba) (when (and (:current-balance ba)
+                              is-power-user?)
+                     (str ": " (->$ (:current-balance ba))))])]))