From 9453f78e0eeb0ceb44108470b945290190e2b953 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Wed, 29 Jul 2020 06:49:44 -0700 Subject: [PATCH] supports typeahead for client search --- .../auto_ap/views/components/layouts.cljs | 53 ++++++++++- .../auto_ap/views/pages/admin/yodlee.cljs | 87 +++++++------------ 2 files changed, 80 insertions(+), 60 deletions(-) diff --git a/src/cljs/auto_ap/views/components/layouts.cljs b/src/cljs/auto_ap/views/components/layouts.cljs index e4c88b25..1fb6229a 100644 --- a/src/cljs/auto_ap/views/components/layouts.cljs +++ b/src/cljs/auto_ap/views/components/layouts.cljs @@ -7,12 +7,13 @@ [auto-ap.routes :as routes] [auto-ap.subs :as subs] [auto-ap.events :as events] - [auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event appearing css-transition-group]] + [auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event appearing css-transition-group bind-field]] [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]] [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]] [auto-ap.entities.vendors :as vendor] - [auto-ap.views.components.vendor-dialog :as vendor-dialog])) + [auto-ap.views.components.vendor-dialog :as vendor-dialog] + [clojure.string :as str])) (defn navbar-drop-down-contents [{:keys [id]} children ] @@ -53,12 +54,43 @@ [:a.navbar-item {:on-click (fn [e] (.preventDefault e) (re-frame/dispatch [::events/logout]))} "Logout"]]] [:a.navbar-item {:href login-url} "Login"]))) +(re-frame/reg-sub + ::client-search + (fn [db] + (::client-search db))) + +(re-frame/reg-sub + ::matching-clients + :<- [::subs/clients] + :<- [::client-search] + (fn [[clients {client-search :value}]] + (if (empty? client-search) + clients + (if-let [exact-match (first (filter + (fn [client] + (= (str/lower-case (:code client)) (str/lower-case client-search))) + clients))] + [exact-match] + (filter + (fn [client] + (or + (str/includes? (str/lower-case (:code client)) (str/lower-case client-search)) + (str/includes? (str/lower-case (:name client)) (str/lower-case client-search)))) + clients))))) + +(re-frame/reg-event-db + ::client-search-changed + [(re-frame/path [::client-search])] + (fn [client-search [_ path value]] + (assoc-in client-search path value))) (defn navbar [ap] (let [user (re-frame/subscribe [::subs/user]) client (re-frame/subscribe [::subs/client]) clients (re-frame/subscribe [::subs/clients]) - menu (re-frame/subscribe [::subs/menu])] + matching-clients @(re-frame/subscribe [::matching-clients]) + menu (re-frame/subscribe [::subs/menu]) + client-search @(re-frame/subscribe [::client-search])] [:nav {:class "navbar has-shadow is-fixed-top"} [:div {:class "container"} [:div {:class "navbar-brand"} @@ -103,7 +135,20 @@ :on-click (fn [] (re-frame/dispatch [::events/swap-client nil]))} "All" ] [:hr {:class "navbar-divider"}] - (for [{:keys [name id] :as client} @clients] + [bind-field + [:input.input.navbar-item {:placeholder "Client name" + :auto-focus true + :field [:value] + :on-key-up (fn [k] + (when (= 13 (.-which k)) + (do + (re-frame/dispatch [::events/swap-client (first matching-clients)]) + (re-frame/dispatch [::events/toggle-menu ::select-client]) + (re-frame/dispatch [::client-search-changed [:value] nil]))) + ) + :event [::client-search-changed] + :subscription client-search}]] + (for [{:keys [name id] :as client} matching-clients] ^{:key id } [:a {:class "navbar-item" :on-click (fn [] diff --git a/src/cljs/auto_ap/views/pages/admin/yodlee.cljs b/src/cljs/auto_ap/views/pages/admin/yodlee.cljs index feba564e..01cd2f51 100644 --- a/src/cljs/auto_ap/views/pages/admin/yodlee.cljs +++ b/src/cljs/auto_ap/views/pages/admin/yodlee.cljs @@ -198,32 +198,15 @@ [with-user ] (fn [{:keys [user db]} [_ provider-account-id ]] {:db (forms/loading db [::mfa-form provider-account-id]) - :http {:token user - :method :post - :headers {"Content-Type" "application/edn"} - :uri (str "/api/yodlee/reauthenticate/" provider-account-id ) - :body {"field" - (mapv (fn [[k v]] - {"id" k - "value" v}) - (:data (get-in db [::forms/forms [::mfa-form provider-account-id]])))} - - :on-success [::authenticated] - :on-error [::forms/save-error [::mfa-form provider-account-id] ]}})) - -(re-frame/reg-event-fx - ::reauthenticate - [with-user ] - (fn [{:keys [user db]} [_ provider-account-id ]] - {:db (forms/loading db [::login-form provider-account-id]) :http {:token user :method :post :headers {"Content-Type" "application/edn"} :uri (str "/api/yodlee/reauthenticate/" provider-account-id ) :body {"loginForm" {"row" - (->> (get-in db [::forms/forms [::login-form provider-account-id]]) + (->> (get-in db [::forms/forms [::mfa-form provider-account-id]]) :data + :login (sort-by (fn [[k v]] k)) (map second) (map (fn [row] @@ -231,10 +214,15 @@ (mapv (fn [[k v]] {"id" k "value" v}) - row)})))}} + row)})))} + "field" + (mapv (fn [[k v]] + {"id" k + "value" v}) + (:mfa (:data (get-in db [::forms/forms [::mfa-form provider-account-id]]))))} :on-success [::authenticated] - :on-error [::forms/save-error [::login-form provider-account-id]]}})) + :on-error [::forms/save-error [::mfa-form provider-account-id] ]}})) (defn yodlee-provider-accounts-table [] @@ -283,41 +271,28 @@ "This provider account's status is '" (-> account :dataset first :additionalStatus) "'. If this is in error, it might help to try reauthenticating by filling out the form below."]]]] - (if (:field account) - (for [f (:field account)] - (let [{error :error account-data :data } @(re-frame/subscribe [::forms/form [::mfa-form (:id account)]]) - change-event [::forms/change [::mfa-form (:id account)]] - {:keys [form-inline field field-holder raw-field error-notification submit-button]} (forms/vertical-form {:can-submit [::can-submit] - :change-event change-event - :submit-event [::reauthenticate-mfa (:id account)] - :id [::mfa-form (:id account)]} )] - (form-inline {:title "Reauthenticate (mfa)"} - [:<> - (error-notification) - (doall - (for [f (-> account :field)] - ^{:key (:id f)} - (field (:label f) - [:input.input {:type "text" :field [(:id f)] :value (-> f :field first :value)}]))) - (submit-button "Reauthenticate")]))) - (let [{error :error account-data :data } @(re-frame/subscribe [::forms/form [::login-form (:id account)]]) - change-event [::forms/change [::login-form (:id account)]] - {:keys [form-inline field field-holder raw-field error-notification submit-button]} (forms/vertical-form {:can-submit [::can-submit] - :change-event change-event - :submit-event [::reauthenticate (:id account)] - :id [::login-form (:id account)]} )] - (form-inline {:title "Reauthenticate (login)"} - [:<> - - (error-notification) - (doall - (for [[row i] (map vector (-> account :loginForm last :row) (range)) - f (:field row)] - ^{:key (:id f)} - [:div - (field (:label row) - [:input.input {:type "text" :field [i (:id f)]}])])) - (submit-button "Reauthenticate")])))])]]))]])) + (let [{error :error account-data :data } @(re-frame/subscribe [::forms/form [::mfa-form (:id account)]]) + change-event [::forms/change [::mfa-form (:id account)]] + {:keys [form-inline field field-holder raw-field error-notification submit-button]} (forms/vertical-form {:can-submit [::can-submit] + :change-event change-event + :submit-event [::reauthenticate-mfa (:id account)] + :id [::mfa-form (:id account)]} )] + (form-inline {:title "Reauthenticate"} + [:<> + (error-notification) + (doall + (for [[row i] (map vector (-> account :loginForm last :row) (range)) + f (:field row)] + ^{:key (:id f)} + [:div + (field (:label row) + [:input.input {:type "text" :field [:login i (:id f)]}])])) + (doall + (for [f (-> account :field)] + ^{:key (:id f)} + (field (:label f) + [:input.input {:type "text" :mfa [:form (:id f)] :value (-> f :field first :value)}]))) + (submit-button "Reauthenticate")]))])]]))]])) (defn admin-yodlee-content []