From c3199fb4cbdd6f798e3fb420b446d53b191c31a1 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Thu, 11 Apr 2019 08:14:51 -0700 Subject: [PATCH] more separation of concerns. --- src/cljc/auto_ap/utils.cljc | 9 ++ .../auto_ap/views/pages/transactions.cljs | 137 +++--------------- .../views/pages/transactions/table.cljs | 94 ++++++++++++ 3 files changed, 125 insertions(+), 115 deletions(-) create mode 100644 src/cljs/auto_ap/views/pages/transactions/table.cljs diff --git a/src/cljc/auto_ap/utils.cljc b/src/cljc/auto_ap/utils.cljc index 32fdadba..f62f327b 100644 --- a/src/cljc/auto_ap/utils.cljc +++ b/src/cljc/auto_ap/utils.cljc @@ -17,3 +17,12 @@ (conj xs x))) [] existing)) + +(defn replace-by [xs f x] + (mapv + (fn [t] + (if (= (f t) (f x)) + x + t)) + xs)) + diff --git a/src/cljs/auto_ap/views/pages/transactions.cljs b/src/cljs/auto_ap/views/pages/transactions.cljs index 36489a8c..ab859841 100644 --- a/src/cljs/auto_ap/views/pages/transactions.cljs +++ b/src/cljs/auto_ap/views/pages/transactions.cljs @@ -8,6 +8,8 @@ [auto-ap.views.components.paginator :refer [paginator]] [auto-ap.views.components.sorter :refer [sorted-column]] [auto-ap.views.pages.transactions.form :as edit] + [auto-ap.views.pages.transactions.table :as table] + [auto-ap.utils :refer [replace-by]] [auto-ap.views.pages.transactions.manual :as manual] [auto-ap.views.utils :refer [bind-field date->str dispatch-event nf]] [goog.string :as gstring] @@ -28,20 +30,13 @@ (re-frame/reg-event-db ::edit-completed (fn [db [_ edit-transaction]] - (-> db (update-in [::transaction-page :transactions] - (fn [ts] - (mapv (fn [t] - (if (= (:id t) (:id edit-transaction)) - (assoc edit-transaction :class "live-added") - t)) - ts)))))) + replace-by :id (assoc edit-transaction :class "live-added"))))) (re-frame/reg-event-fx ::manual-import-completed (fn [{:keys [db]} [_ {:keys [imported errors]}]] - (println "MANUAL FINISHED") {:dispatch [::params-change {}] :db (-> db (assoc-in [::notification :message] (str "Successfully imported " imported " transactions")) @@ -80,8 +75,6 @@ (assoc ::transaction-page (first (:transaction-page data))) (assoc-in [:status :loading] false)))) - - (re-frame/reg-event-fx ::invalidated (fn [cofx [_ params]] @@ -100,94 +93,6 @@ (assoc-in updated [::params :bank-account-id] value)) updated)))) -(defn transaction-table [{:keys [id transaction-page status on-params-change vendors params check-boxes checked on-check-changed expense-event]}] - (let [opc (fn [p] - (on-params-change (merge @params p )))] - (fn [{:keys [id transaction-page status on-params-change vendors checked]}] - (let [{:keys [sort-by asc]} @params - {:keys [transactions start end count total]} @transaction-page - selected-client @(re-frame/subscribe [::subs/client]) - percentage-size (if selected-client "25%" "33%")] - [:div - [paginator {:start start :end end :count count :total total - :on-change (fn [p ] - (on-params-change (merge @params p)))}] - "Showing " (inc start) "-" end "/" total - - [:table.table.is-fullwidth - [:thead - [:tr - (when-not selected-client - [sorted-column {:on-sort opc - :style {:width percentage-size :cursor "pointer"} - :sort-key "client" - :sort-by sort-by - :asc asc} - "Client"]) - - [sorted-column {:on-sort opc - :style {:width percentage-size :cursor "pointer"} - :sort-key "description-original" - :sort-by sort-by - :asc asc} - "Vendor"] - - [sorted-column {:on-sort opc - :style {:width percentage-size :cursor "pointer"} - :sort-key "description-original" - :sort-by sort-by - :asc asc} - "Description"] - - - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "date" - :sort-by sort-by - :asc asc} - "Date"] - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "amount" - :class "has-text-right" - :sort-by sort-by - :asc asc} - "Amount"] - - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "status" - :sort-by sort-by - :asc asc} - "Status"] - [:th {:width percentage-size} "Bank account"] - [:th {:style {:width "10em"}} "" ]]] - [:tbody - (if (:loading @status) - [:tr - [:td {:col-span 5} - [:i.fa.fa-spin.fa-spinner]]] - (for [{:keys [client vendor check status bank-account description-original date amount id ] :as i} (:transactions @transaction-page)] - ^{:key id} - [:tr {:class (:class i)} - (when-not selected-client - [:td (:name client)]) - [:td (if vendor - (:name vendor) - (str "Merchant '" "Hello" "'"))] - [:td description-original] - [:td (date->str date) ] - [:td.has-text-right (nf amount )] - [:td status] - [:td (:name bank-account )] - [:td - [:a.button {:on-click (dispatch-event [::edit/editing i])} [:span [:span.icon [:i.fa.fa-pencil]]]] - (when check - [:a.tag {:href (:s3-url check) :target "_new"} [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str " " (:check-number check) " (" (gstring/format "$%.2f" amount ) ")")])] - ]))]]])))) - - - (re-frame/reg-sub ::notification (fn [db] @@ -207,8 +112,7 @@ (when (:message @notification) (list [:div.notification - (:message @notification) - ] + (:message @notification)] (when (seq (:errors @notification)) [:div.notification.is-danger [:h3 (count (:errors @notification)) " errors:"] @@ -222,24 +126,27 @@ "Manage Rules"] [:button.button.is-danger {:on-click (dispatch-event [::manual/opening])} "Manual Yodlee Import"]]])) - [transaction-table {:id :transactions - :params (re-frame/subscribe [::params]) - :transaction-page (re-frame/subscribe [::transaction-page]) - :status (re-frame/subscribe [::subs/status]) - :on-params-change (fn [params] - (re-frame/dispatch [::params-change params]))}] + [table/table {:id :transactions + :params (re-frame/subscribe [::params]) + :transaction-page (re-frame/subscribe [::transaction-page]) + :status (re-frame/subscribe [::subs/status]) + :on-params-change (fn [params] + (re-frame/dispatch [::params-change params]))}] [manual/modal {:import-completed [::manual-import-completed ]}]])) {:component-will-mount #(re-frame/dispatch-sync [::params-change {}]) })) (defn transactions-page [] (let [{transaction-bar-active? :active?} @(re-frame/subscribe [::forms/form ::edit/edit-transaction])] - [side-bar-layout {:side-bar [:div - [:p.menu-label "Bank Account"] - - [:div - [bank-account-filter {:on-change-event [::change-selected-bank-account] - :value (:bank-acount-filter @(re-frame/subscribe [::transaction-page])) - :bank-accounts @(re-frame/subscribe [::subs/bank-accounts])}]]] - :main [transactions-content] - :right-side-bar [appearing-side-bar {:visible? transaction-bar-active?} [edit/form {:edit-completed [::edit-completed]}]]}])) + [side-bar-layout + {:side-bar [:div + [:p.menu-label "Bank Account"] + [:div + [bank-account-filter + {:on-change-event [::change-selected-bank-account] + :value (:bank-acount-filter @(re-frame/subscribe [::transaction-page])) + :bank-accounts @(re-frame/subscribe [::subs/bank-accounts])}]]] + :main [transactions-content] + :right-side-bar [appearing-side-bar + {:visible? transaction-bar-active?} + [edit/form {:edit-completed [::edit-completed]}]]}])) diff --git a/src/cljs/auto_ap/views/pages/transactions/table.cljs b/src/cljs/auto_ap/views/pages/transactions/table.cljs new file mode 100644 index 00000000..a7f355cf --- /dev/null +++ b/src/cljs/auto_ap/views/pages/transactions/table.cljs @@ -0,0 +1,94 @@ +(ns auto-ap.views.pages.transactions.table + (:require [auto-ap.subs :as subs] + [auto-ap.views.components.paginator :refer [paginator]] + [auto-ap.views.components.sorter :refer [sorted-column]] + [auto-ap.views.pages.transactions.form :as edit] + [auto-ap.views.utils :refer [date->str dispatch-event nf]] + [goog.string :as gstring] + [re-frame.core :as re-frame])) + +(defn table [{:keys [id transaction-page status on-params-change vendors params check-boxes checked on-check-changed expense-event]}] + (let [opc (fn [p] + (on-params-change (merge @params p )))] + (fn [{:keys [id transaction-page status on-params-change vendors checked]}] + (let [{:keys [sort-by asc]} @params + {:keys [transactions start end count total]} @transaction-page + selected-client @(re-frame/subscribe [::subs/client]) + percentage-size (if selected-client "25%" "33%")] + [:div + [paginator {:start start :end end :count count :total total + :on-change (fn [p ] + (on-params-change (merge @params p)))}] + "Showing " (inc start) "-" end "/" total + + [:table.table.is-fullwidth + [:thead + [:tr + (when-not selected-client + [sorted-column {:on-sort opc + :style {:width percentage-size :cursor "pointer"} + :sort-key "client" + :sort-by sort-by + :asc asc} + "Client"]) + + [sorted-column {:on-sort opc + :style {:width percentage-size :cursor "pointer"} + :sort-key "description-original" + :sort-by sort-by + :asc asc} + "Vendor"] + + [sorted-column {:on-sort opc + :style {:width percentage-size :cursor "pointer"} + :sort-key "description-original" + :sort-by sort-by + :asc asc} + "Description"] + + + [sorted-column {:on-sort opc + :style {:width "8em" :cursor "pointer"} + :sort-key "date" + :sort-by sort-by + :asc asc} + "Date"] + [sorted-column {:on-sort opc + :style {:width "8em" :cursor "pointer"} + :sort-key "amount" + :class "has-text-right" + :sort-by sort-by + :asc asc} + "Amount"] + + [sorted-column {:on-sort opc + :style {:width "8em" :cursor "pointer"} + :sort-key "status" + :sort-by sort-by + :asc asc} + "Status"] + [:th {:width percentage-size} "Bank account"] + [:th {:style {:width "10em"}} "" ]]] + [:tbody + (if (:loading @status) + [:tr + [:td {:col-span 5} + [:i.fa.fa-spin.fa-spinner]]] + (for [{:keys [client vendor check status bank-account description-original date amount id ] :as i} (:transactions @transaction-page)] + ^{:key id} + [:tr {:class (:class i)} + (when-not selected-client + [:td (:name client)]) + [:td (if vendor + (:name vendor) + (str "Merchant '" "Hello" "'"))] + [:td description-original] + [:td (date->str date) ] + [:td.has-text-right (nf amount )] + [:td status] + [:td (:name bank-account )] + [:td + [:a.button {:on-click (dispatch-event [::edit/editing i])} [:span [:span.icon [:i.fa.fa-pencil]]]] + (when check + [:a.tag {:href (:s3-url check) :target "_new"} [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str " " (:check-number check) " (" (gstring/format "$%.2f" amount ) ")")])] + ]))]]]))))