transactions work good.

2020-08-10 08:03:45 -07:00
parent 583f3b7bed
commit 8f491de902
3 changed files with 97 additions and 127 deletions
--- a/src/cljs/auto_ap/views/components/buttons.cljs
+++ b/src/cljs/auto_ap/views/components/buttons.cljs
@@ -5,7 +5,8 @@
  [:a.button {:class class
              :on-click (dispatch-event event)} [:span.icon [:i.fa {:class icon}]]])

-(defn sl-icon [{:keys [event icon class]}]
-  [:a.button  {:class class
-               :on-click (dispatch-event event)}
+(defn sl-icon [{:keys [event icon class] :as params}]
+  [:a.button  (-> params
+                  (dissoc :event :icon)
+                  (assoc :on-click (dispatch-event event)))
   [:span.icon [:span  {:class icon :style {:font-weight "400"}}]]])
--- a/src/cljs/auto_ap/views/pages/transactions.cljs
+++ b/src/cljs/auto_ap/views/pages/transactions.cljs
@@ -24,7 +24,9 @@
            [goog.string :as gstring]
            [re-frame.core :as re-frame]
            [auto-ap.views.pages.transactions.side-bar :as side-bar]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [auto-ap.status :as status]
+            [vimsical.re-frame.fx.track :as track]))



@@ -48,34 +50,24 @@
 (fn [db]
   (-> db ::transaction-page)))

-(re-frame/reg-sub
- ::last-params
- (fn [db]
-   (::last-params db)))

 (re-frame/reg-sub
 ::params
- :<- [::last-params]
 :<- [::subs/client]
 :<- [::side-bar/filter-params]
 :<- [::table/table-params]
- (fn [[last-params client filter-params table-params]]
-   (let [params (cond-> {}
-                  client (assoc :client-id (:id client))
-                  (seq filter-params) (merge filter-params)
-                  (seq table-params) (merge table-params))]
-     (when (not= last-params params)
-       (re-frame/dispatch [::params-change]))
-     params)))
+ (fn [[client filter-params table-params]]
+   (cond-> {}
+     client (assoc :client-id (:id client))
+     (seq filter-params) (merge filter-params)
+     (seq table-params) (merge table-params))))

 (re-frame/reg-event-fx
 ::params-change
- [with-user (re-frame/inject-cofx ::inject/sub [::params])]
- (fn [{:keys [user db ] ::keys [params]} _]
-   {:db (-> db
-            (assoc-in [:status :loading] true)
-            (assoc-in [::last-params] params))
-    :graphql {:token user
+ [with-user]
+ (fn [{:keys [user db ]} [_ params]]
+   {:graphql {:token user
+              :owns-state {:single ::page}
              :query-obj {:venia/queries [[:transaction_page
                                           params 
                                           [[:transactions transaction-read]
@@ -107,7 +99,15 @@
 (re-frame/reg-event-fx
 ::unmounted
 (fn [{:keys [db]} _]
-   {:db (dissoc db ::last-params ::table/table-params ::side-bar/filters ::side-bar/settled-filters ::transaction-page)}))
+   {:db (dissoc db ::table/table-params ::side-bar/filters ::side-bar/settled-filters ::transaction-page)
+    ::track/dispose {:id ::params}}))
+
+(re-frame/reg-event-fx
+ ::mounted
+ (fn [{:keys [db]} _]
+   {::track/register {:id ::params
+                      :subscription [::params]
+                      :event-fn (fn [params] [::params-change params])}}))

 (re-frame/reg-event-db
 ::received
@@ -149,14 +149,15 @@
          [:button.button.is-outlined.is-danger {:on-click (dispatch-event [::unapprove-all])}
           "Unapprove all"]]]])
     [table/table {:id :transactions
-                   :transaction-page (re-frame/subscribe [::transaction-page])
-                   :status (re-frame/subscribe [::subs/status])}]]))
+                   :transaction-page @(re-frame/subscribe [::transaction-page])
+                   :status @(re-frame/subscribe [::status/single ::page])}]]))


 (defn transactions-page [{:keys [approval-status]}]
  (reagent/create-class
   {:display-name "transaction-page"
    :component-will-unmount #(re-frame/dispatch [::unmounted])
+    :component-did-mount #(re-frame/dispatch [::mounted])
    :reagent-render
    (fn []
      (let [{transaction-bar-active? :active?} @(re-frame/subscribe [::forms/form ::edit/form])
--- a/src/cljs/auto_ap/views/pages/transactions/table.cljs
+++ b/src/cljs/auto_ap/views/pages/transactions/table.cljs
@@ -1,14 +1,19 @@
 (ns auto-ap.views.pages.transactions.table
-  (:require [auto-ap.subs :as subs]
-            [auto-ap.views.components.paginator :refer [paginator]]
-            [auto-ap.views.components.sort-by-list :refer [sort-by-list]]
-            [auto-ap.views.components.sorter :refer [sorted-column]]
-            [auto-ap.views.components.dropdown :refer [drop-down drop-down-contents]]
+  (:require [auto-ap.events :as events]
+            [auto-ap.subs :as subs]
+            [auto-ap.views.components.dropdown
+             :refer
+             [drop-down drop-down-contents]]
+            [auto-ap.views.components.grid :as grid]
            [auto-ap.views.pages.transactions.form :as edit]
-            [auto-ap.events :as events]
-            [auto-ap.views.utils :refer [date->str dispatch-event nf]]
+            [auto-ap.views.utils
+             :refer
+             [action-cell-width date->str dispatch-event nf]]
            [goog.string :as gstring]
-            [re-frame.core :as re-frame]))
+            [re-frame.core :as re-frame]
+            [auto-ap.views.components.buttons :as buttons]
+            [auto-ap.status :as status]))
+
 (re-frame/reg-event-fx
 ::editing-matches-found
 (fn [{:keys [db]} [_ which matches]]
@@ -26,6 +31,8 @@
 (fn [{:keys [db]} [_ which]]
   {:graphql
    {:token (-> db :user)
+     :owns-state {:multi ::edits
+                  :which (:id which)}
     :query-obj {:venia/queries (into [{:query/data [:potential-payment-matches
                                                     {:transaction_id (:id which)}
                                                     [:id :memo :check-number [:vendor [:name]]]]}]
@@ -34,7 +41,7 @@
                                                       {:transaction_id (:id which)}
                                                       [:id :note]]}]))}
     :on-success [::editing-matches-found which]
-     :on-error [::editing-matches-failed which]}}   ))
+     :on-error [::editing-matches-failed which]}}))

 (re-frame/reg-sub
 ::table-params
@@ -48,97 +55,58 @@
   {:db (merge table-params params)}))

 (defn table [{:keys [id transaction-page status]}]
-  (let [{:keys [sort]} @(re-frame/subscribe [::table-params])
-        {:keys [transactions start end count total]} @transaction-page
-        opc (fn [e] (re-frame/dispatch [::params-changed e]))
-        selected-client @(re-frame/subscribe [::subs/client])
-        percentage-size (if selected-client "25%" "33%")]
-    [:div
-     [:div.level
-      [:div.level-left
-       [:div.level-item 
-        [paginator {:start start :end end :count count :total total
-                    :on-change opc}]]
-       [:div.level-item
-        [sort-by-list {:sort sort 
-                       :on-change opc}]]]]
-     
-     [:table.table.is-fullwidth 
-      [:thead  
-       [:tr  
+  (let [selected-client @(re-frame/subscribe [::subs/client])
+        states @(re-frame/subscribe [::status/multi ::edits])]
+    [grid/grid {:on-params-change (fn [e]
+                                    (re-frame/dispatch [::params-changed e]))
+                :params @(re-frame/subscribe [::table-params])
+                :status status
+                :column-count (if selected-client 6 7)}
+     [grid/controls transaction-page]
+     [grid/table {:fullwidth true}
+      [grid/header {}
+       [grid/row {}
        (when-not selected-client
-          [sorted-column {:on-sort opc
-                          :style {:width percentage-size :cursor "pointer"}
-                          :sort-key "client"
-                          :sort-name "Client"
-                          :sort sort}
-           "Client"])
+          [grid/sortable-header-cell {:sort-key "client" :sort-name "Client"} "Client"])
+        [grid/sortable-header-cell {:sort-key "bank-account" :sort-name "Bank Account"} "Bank Account"]
+        [grid/sortable-header-cell {:sort-key "vendor" :sort-name "Vendor"} "Vendor"]
+        [grid/sortable-header-cell {:sort-key "date" :sort-name "Date" :style {:width "8em"}} "Date"]
+        [grid/sortable-header-cell {:sort-key "amount" :sort-name "Amount" :class "has-text-right" :style {:width "8em"}} "Amount"]
+        [grid/sortable-header-cell {:sort-key "status" :sort-name "Status" :style {:width "7em"}} "Status"]
+        [grid/header-cell {:style {:width (action-cell-width 3)}}]]]
+      [grid/body
+       (for [{:keys [client account vendor approval-status payment status bank-account description-original date amount id yodlee-merchant ] :as i} (:transactions transaction-page)]
+            ^{:key id}
+         [grid/row {:class (:class i)}
+          (when-not selected-client
+            [grid/cell {} (:name client)])
+          
+          #_[:td description-original]
+          [grid/cell {} (:name bank-account )]
+          [grid/cell  {} (cond vendor
+                           (:name vendor)
+                           yodlee-merchant
+                           [:i.has-text-grey (str "Merchant '" (:name yodlee-merchant)  "'")]

-        [sorted-column {:on-sort opc
-                        :style {:width percentage-size :cursor "pointer"}
-                        :sort-key "vendor"
-                        :sort-name "Vendor"
-                        :sort sort}
-         "Vendor"]
-
-        [sorted-column {:on-sort opc
-                        :style {:width "8em" :cursor "pointer"}
-                        :sort-key "date"
-                        :sort-name "Date"
-                        :sort sort}
-         "Date"]
-        [sorted-column {:on-sort opc
-                        :style {:width "8em" :cursor "pointer"}
-                        :sort-key "amount"
-                        :sort-name "Amount"
-                        :class "has-text-right"
-                        :sort sort}
-         "Amount"]
-
-        [sorted-column {:on-sort opc
-                        :style {:width "8em" :cursor "pointer"}
-                        :sort-key "status"
-                        :sort-name "Status"
-                        :sort sort}
-         "Status"]
-        [:th {:width percentage-size} "Bank account"]
-        [:th {:style {:width "14em"}} "" ]]]
-      [:tbody
-       (if (:loading @status)
-         [:tr 
-          [:td {:col-span 5}
-           [:i.fa.fa-spin.fa-spinner]]]
-         (for [{:keys [client account vendor approval-status payment status bank-account description-original date amount id yodlee-merchant ] :as i} (:transactions @transaction-page)]
-           ^{:key id}
-           [:tr {:class (:class i)}
-            (when-not selected-client
-              [:td (:name client)])
-            [:td (cond vendor
-                       (:name vendor)
-                       yodlee-merchant
-                       [:i.has-text-grey (str "Merchant '" (:name yodlee-merchant)  "'")]
-
-                       :else
-                       [:i.has-text-grey (str description-original)])]
-            #_[:td description-original]
-            [:td (date->str date) ]
-            [:td.has-text-right (nf amount )]
-            [:td status]
-            [:td (:name bank-account )]
-            [:td.expandable
-             [:div.buttons 
-              [drop-down {:id [::expense-accounts id  ]
-                          :header [:a.button {:aria-haspopup true
-                                              :on-click (dispatch-event [::events/toggle-menu [::expense-accounts id]])
-                                              :tab-index "0"}
-                                   [:span.icon-saving-bank-1]]}
-               [drop-down-contents
-                [:div
-                 [:span.dropdown-item description-original ]]]]
-              [:a.button {:on-click (dispatch-event [::intend-to-edit i])} [:span [:span.icon [:i.fa.fa-pencil]]]]
-              (when payment
-                [:a.tag {:href (:s3-url payment) :target "_new"}
-                 #_[:i.fa.fa-money-check]
-                 [:span.icon [:i.fa.fa-money]]
-                 (str  " " (:check-number payment) " (" (gstring/format "$%.2f" amount ) ")")])]]
-            ]))]]]))
+                           :else
+                           [:i.has-text-grey (str description-original)])]
+          [grid/cell {} (date->str date) ]
+          [grid/cell {:class "has-text-right"} (nf amount )]
+          [grid/cell {} status]
+          [grid/cell {:style {:overflow "visible"}}
+           [:div.buttons 
+            [drop-down {:id [::expense-accounts id  ]
+                        :header [buttons/sl-icon {:aria-haspopup true
+                                                  :event [::events/toggle-menu [::expense-accounts id]]
+                                                  :tab-index "0"
+                                                  :icon "icon-saving-bank-1"}]}
+             [drop-down-contents
+              [:div
+               [:span.dropdown-item description-original ]]]]
+            [buttons/fa-icon {:event [::intend-to-edit i]
+                              :class (status/class-for (get states id))
+                              :icon "fa-pencil"}]
+            (when payment
+              [:a.tag {:href (:s3-url payment) :target "_new"}
+               [:span.icon [:i.fa.fa-money]]
+               (str  " " (:check-number payment) " (" (gstring/format "$%.2f" amount ) ")")])]]])]]]))