more separation of concerns.

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