more separation of concerns.

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))
+

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]
+                  replace-by :id  (assoc edit-transaction :class "live-added")))))
-                    (mapv (fn [t]
-                            (if (= (:id t) (:id edit-transaction))
-                              (assoc edit-transaction :class "live-added")
-                              t))
-                          ts))))))
 
 (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,7 +126,7 @@
                "Manage Rules"]
               [:button.button.is-danger {:on-click (dispatch-event [::manual/opening])}
                "Manual Yodlee Import"]]]))
-         [transaction-table {:id :transactions
+         [table/table {:id :transactions
                        :params (re-frame/subscribe [::params])
                        :transaction-page (re-frame/subscribe [::transaction-page])
                        :status (re-frame/subscribe [::subs/status])
@@ -233,13 +137,16 @@
 
 (defn transactions-page []
   (let [{transaction-bar-active? :active?} @(re-frame/subscribe [::forms/form ::edit/edit-transaction])]
-    [side-bar-layout {:side-bar [:div
+    [side-bar-layout
+     {:side-bar [:div
                  [:p.menu-label "Bank Account"]
-
                  [:div 
-                                  [bank-account-filter {:on-change-event [::change-selected-bank-account]
+                  [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]}]]}]))
+      :right-side-bar [appearing-side-bar
+                       {:visible? transaction-bar-active?}
+                       [edit/form {:edit-completed [::edit-completed]}]]}]))
 

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 ) ")")])]
+                ]))]]]))))