diff --git a/src/cljs/auto_ap/views/pages/payments.cljs b/src/cljs/auto_ap/views/pages/payments.cljs index 0b8c8423..1179e34f 100644 --- a/src/cljs/auto_ap/views/pages/payments.cljs +++ b/src/cljs/auto_ap/views/pages/payments.cljs @@ -18,7 +18,9 @@ [auto-ap.views.pages.payments.side-bar :as side-bar] [auto-ap.views.pages.payments.table :as table] [auto-ap.views.pages.check :as check] - [auto-ap.subs :as subs])) + [auto-ap.subs :as subs] + [auto-ap.status :as status] + [vimsical.re-frame.fx.track :as track])) @@ -28,48 +30,35 @@ (fn [db] (-> db ::payment-page))) -(re-frame/reg-sub - ::last-params - (fn [db] - (-> db ::last-params))) (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 ::params]}[_ ]] - (when (not= (::last-params db) params) - {:db (-> db - (assoc-in [:status :loading] true) - (assoc-in [::last-params] params)) - :graphql {:token user - :query-obj {:venia/queries [[:payment_page - params - [[:payments [:id :status :amount :type :check_number :s3_url - [:bank-account [:name]] - :date [:vendor [:name :id]] [:client [:name :id]] - [:invoices [:invoice-id [:invoice [:invoice-number]]]]]] - :total - :start - :end]]]} - :on-success [::received] - :on-error [::events/page-failed]} - :set-uri-params (dissoc params - :client-id)}))) + [with-user] + (fn [{:keys [user db ]}[_ params]] + {:graphql {:token user + :owns-state {:single ::page} + :query-obj {:venia/queries [[:payment_page + params + [[:payments [:id :status :amount :type :check_number :s3_url + [:bank-account [:name]] + :date [:vendor [:name :id]] [:client [:name :id]] + [:invoices [:invoice-id [:invoice [:invoice-number]]]]]] + :total + :start + :end]]]} + :on-success [::received]} + :set-uri-params (dissoc params :client-id)})) (re-frame/reg-event-fx ::void-check @@ -105,21 +94,30 @@ (re-frame/reg-event-fx ::unmounted (fn [{:keys [db]} _] - {:db (dissoc db ::last-params ::table/table-params ::side-bar/filters ::side-bar/settled-filters ::payment-page)})) + {:db (dissoc db ::last-params ::table/table-params ::side-bar/filters ::side-bar/settled-filters ::payment-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])}})) (defn content [] (let [params @(re-frame/subscribe [::params])] [:div [:h1.title "Payments"] [table/table {:id :payments - :payment-page (re-frame/subscribe [::payment-page]) - :status (re-frame/subscribe [::subs/status]) + :payment-page @(re-frame/subscribe [::payment-page]) + :status @(re-frame/subscribe [::status/single ::page]) :void-event [::void-check]}]])) (defn payments-page [] (reagent/create-class {:display-name "payments-page" :component-will-unmount #(re-frame/dispatch [::unmounted]) + :component-did-mount #(re-frame/dispatch [::mounted]) :reagent-render (fn [] [side-bar-layout {:side-bar [side-bar/side-bar] diff --git a/src/cljs/auto_ap/views/pages/payments/table.cljs b/src/cljs/auto_ap/views/pages/payments/table.cljs index 2d040b5b..931cd119 100644 --- a/src/cljs/auto_ap/views/pages/payments/table.cljs +++ b/src/cljs/auto_ap/views/pages/payments/table.cljs @@ -11,7 +11,9 @@ [auto-ap.views.components.dropdown :refer [drop-down drop-down-contents]] [auto-ap.events :as events] [goog.string :as gstring] - [re-frame.core :as re-frame])) + [re-frame.core :as re-frame] + [auto-ap.views.components.grid :as grid] + [auto-ap.views.components.buttons :as buttons])) (re-frame/reg-sub ::specific-table-params @@ -36,27 +38,27 @@ void-event :void-event }] (let [{:keys [client s3-url bank-account payments type check-number date amount id vendor status invoices] :as check} check] - [:tr {:class (:class check)} + [grid/row {:class (:class check)} (when-not selected-client - [:td (:name client)]) - [:td (:name vendor)] - [:td (:name bank-account)] - [:td (cond + [grid/cell {} (:name client)]) + [grid/cell {} (:name vendor)] + [grid/cell {} (:name bank-account)] + [grid/cell {} (cond (= :cash type) "Cash" (= :debit type) "Debit" :else (if s3-url [:a {:href s3-url :target "_new"} [:a.button [:span.icon [:i.fa.fa-share-square-o]] [:span (str " " check-number )]]] check-number))] - [:td (date->str date) ] - [:td.has-text-right (nf amount )] - [:td status] - [:td.expandable - [:div.buttons + [grid/cell {} (date->str date) ] + [grid/cell {:class "has-text-right"} (nf amount )] + [grid/cell {} status] + [grid/cell {:style {:overflow "visible"}} + [:div.buttons (when (seq invoices) [drop-down {:id [::invoices id] :header [:button.button.badge {:data-badge (str (clojure.core/count invoices)) - :aria-haspopup true + :aria-haspopup true? :tab-index "0" :on-click (dispatch-event [::events/toggle-menu [::invoices id]]) } "Invoices"]} @@ -75,82 +77,32 @@ (when (or (= :pending status) (and (#{":cash" :cash ":debit" :debit} type) (not= :voided status))) - [:button.button.is-warning.is-outlined {:on-click (dispatch-event (conj void-event check))} [:span [:span.icon [:i.fa.fa-minus-circle]]]])]]])) + [buttons/sl-icon {:event (conj void-event check) :icon :icon-bin-2}])]]])) (defn table [{:keys [id payment-page status void-event]}] - (let [{:keys [sort]} @(re-frame/subscribe [::table-params]) - {:keys [payments start end count total]} @payment-page - selected-client @(re-frame/subscribe [::subs/client]) - percentage-size (if selected-client "50%" "33%") - opc (fn [e] - (re-frame/dispatch [::params-changed e]))] - [: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]) + percentage-size (if selected-client "50%" "33%")] + [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 7 8)} + [grid/controls payment-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"]) - - [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 percentage-size :cursor "pointer"} - :sort-key "bank-account" - :sort-name "Bank Account" - :sort sort} - "Bank Account"] - [sorted-column {:on-sort opc - :style {:width percentage-size :cursor "pointer"} - :sort-key "check-number" - :sort-name "Check #" - :sort sort} - "Check #"] - [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"} - :class "has-text-right" - :sort-key "amount" - :sort-name "Amount" - :sort sort} - "Amount"] - - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "status" - :sort-name "Status" - :sort sort} - "Status"] - [:th {:style {:width "15em"}} "" ]]] - [:tbody - (if (:loading @status) - [:tr - [:td {:col-span 5} - [:i.fa.fa-spin.fa-spinner]]] - (for [check (:payments @payment-page)] - ^{:key (:id check)} - [row {:check check - :selected-client selected-client - :void-event void-event}]))]]])) + [grid/sortable-header-cell {:sort-key "client" :sort-name "Client"} "Client"]) + [grid/sortable-header-cell {:sort-key "vendor" :sort-name "Vendor"} "Vendor"] + [grid/sortable-header-cell {:sort-key "bank-account" :sort-name "Bank Account"} "Bank Account"] + [grid/sortable-header-cell {:sort-key "check-number" :sort-name "Check Number"} "Check Number"] + [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 "12em"}}]]] + [grid/body + (for [check (:payments payment-page)] + ^{:key (:id check)} + [row {:check check + :selected-client selected-client + :void-event void-event}])]]]))