From 8f491de902a1d2a84d4948ff52581a0c1b6a0c2b Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Mon, 10 Aug 2020 08:03:45 -0700 Subject: [PATCH] transactions work good. --- .../auto_ap/views/components/buttons.cljs | 7 +- .../auto_ap/views/pages/transactions.cljs | 47 ++--- .../views/pages/transactions/table.cljs | 170 +++++++----------- 3 files changed, 97 insertions(+), 127 deletions(-) diff --git a/src/cljs/auto_ap/views/components/buttons.cljs b/src/cljs/auto_ap/views/components/buttons.cljs index f56fe31a..240839fc 100644 --- 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"}}]]]) diff --git a/src/cljs/auto_ap/views/pages/transactions.cljs b/src/cljs/auto_ap/views/pages/transactions.cljs index 1a7f5578..69e6cadc 100644 --- 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]) diff --git a/src/cljs/auto_ap/views/pages/transactions/table.cljs b/src/cljs/auto_ap/views/pages/transactions/table.cljs index 5f682c3b..273bece0 100644 --- 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 ) ")")])]]])]]]))