cleaning up invoice pagination.
This commit is contained in:
Bryce Covert
@@ -41,8 +41,6 @@
|
||||
(fn [db]
|
||||
(::visible-expense-accounts db)))
|
||||
|
||||
|
||||
|
||||
(defn query [params]
|
||||
{:venia/queries [[:invoice_page
|
||||
(-> params
|
||||
@@ -59,174 +57,191 @@
|
||||
:start
|
||||
:end]]]})
|
||||
|
||||
(defn invoice-table [{:keys [id invoice-page status on-params-change vendors params check-boxes checked on-check-changed on-edit-invoice on-void-invoice on-unvoid-invoice expense-event overrides]}]
|
||||
(let [visible-checks @(re-frame/subscribe [::visible-checks])
|
||||
(re-frame/reg-sub
|
||||
::table-params
|
||||
(fn [db]
|
||||
(::table-params db)))
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::params-changed
|
||||
[(re-frame/path [::table-params])]
|
||||
(fn [{table-params :db} [_ params :as z]]
|
||||
{:db (merge table-params params)
|
||||
:dispatch [:auto-ap.views.pages.unpaid-invoices/params-change]}))
|
||||
|
||||
(defn row [{:keys [invoice check-boxes checked on-check-changed selected-client overrides expense-event on-edit-invoice on-void-invoice on-unvoid-invoice]}]
|
||||
(let [{:keys [client payments expense-accounts invoice-number date due total outstanding-balance id vendor] :as i} invoice]
|
||||
[:tr {:class (:class i)}
|
||||
(when check-boxes
|
||||
[:td [:input.checkbox {:type "checkbox"
|
||||
:checked (if (get checked id)
|
||||
"checked"
|
||||
"")
|
||||
:on-change (fn [x e] (when on-check-changed
|
||||
(on-check-changed id i)))} ]])
|
||||
(when-not selected-client
|
||||
[:td (if-let [client-override (:client overrides)]
|
||||
(client-override i)
|
||||
(:name client))])
|
||||
[:td (:name vendor)]
|
||||
[:td invoice-number]
|
||||
[:td (date->str date) ]
|
||||
[:td (date->str due) ]
|
||||
[:td (str/join ", " (set (map :location expense-accounts)))]
|
||||
|
||||
[:td.has-text-right (nf total )]
|
||||
[:td.has-text-right (nf outstanding-balance )]
|
||||
[:td.expandable
|
||||
[:div.buttons
|
||||
(when (seq expense-accounts)
|
||||
[drop-down {:id [::expense-accounts id ]
|
||||
:header [:a.button.badge {:data-badge (str (clojure.core/count expense-accounts))
|
||||
:aria-haspopup true
|
||||
:on-click (dispatch-event [::events/toggle-menu [::expense-accounts id]])
|
||||
:tab-index "0"
|
||||
} "Accounts"]}
|
||||
[drop-down-contents
|
||||
[:div
|
||||
(for [e expense-accounts]
|
||||
^{:key (:id e)}
|
||||
[:span.dropdown-item (:name (:account e)) " " (gstring/format "$%.2f" (:amount e) ) ])
|
||||
|
||||
[:hr.dropdown-divider]
|
||||
|
||||
(when expense-event
|
||||
[:a.dropdown-item.is-primary {:on-click (dispatch-event (conj expense-event i))} "Change"])]]])
|
||||
[:span {:style {:margin-left "1em"}}]
|
||||
(when (and on-edit-invoice (not= ":voided" (:status i)))
|
||||
[:a.button {:on-click (fn [] (on-edit-invoice i))} [:span.icon [:i.fa.fa-pencil]]])
|
||||
(when (and on-void-invoice (= (:outstanding-balance i) (:total i)) (not= ":voided" (:status i)))
|
||||
[:a.button {:on-click (fn [] (on-void-invoice i))} [:span.icon [:span.icon-bin-2 {:style {:font-weight "400"}}]]])
|
||||
(when (and on-unvoid-invoice (= ":voided" (:status i)))
|
||||
[:a.button {:on-click (fn [] (on-unvoid-invoice i))} [:span [:span.icon [:i.fa.fa-undo]]]])
|
||||
(when (seq payments)
|
||||
[drop-down {:id [::payments id]
|
||||
:header [:button.button.badge {:data-badge (str (clojure.core/count payments))
|
||||
:aria-haspopup true
|
||||
:tab-index "0"
|
||||
:on-click (dispatch-event [::events/toggle-menu [::payments id]])
|
||||
} "Payments"]}
|
||||
[:div
|
||||
(for [payment payments]
|
||||
(if (:s3-url (:payment payment))
|
||||
^{:key (:id payment)}
|
||||
[:a.dropdown-item {:href (:s3-url (:payment payment))
|
||||
:target "_new"}
|
||||
[:i.fa.fa-money-check]
|
||||
[:span.icon [:i.fa.fa-money]]
|
||||
(str " " (:check-number (:payment payment)) " (" (gstring/format "$%.2f" (:amount payment) ) ")")]
|
||||
|
||||
^{:key (:id payment)}
|
||||
[:span.dropdown-item [:span.icon {:class [(when (= :cleared (:status (:payment payment)))
|
||||
"has-text-success")]}
|
||||
[:i.fa.fa-money]] (str " " (:check-number (:payment payment)) " (" (gstring/format "$%.2f" (:amount payment) ) ") "
|
||||
(when (= :cleared (:status (:payment payment)))
|
||||
(str " - " (:post-date (:transaction (:payment payment))))))]))]])]]]))
|
||||
|
||||
(defn invoice-table [{:keys [id invoice-page status vendors check-boxes checked on-check-changed on-edit-invoice on-void-invoice on-unvoid-invoice expense-event overrides]}]
|
||||
(let [opc (fn [p]
|
||||
(re-frame/dispatch [::params-changed p]))
|
||||
visible-checks @(re-frame/subscribe [::visible-checks])
|
||||
visible-expense-accounts @(re-frame/subscribe [::visible-expense-accounts])
|
||||
selected-client @(re-frame/subscribe [::subs/client])
|
||||
opc (fn [p]
|
||||
(on-params-change (merge @params p)))]
|
||||
(fn [{:keys [id invoice-page status on-params-change vendors checked params]}]
|
||||
(let [{:keys [sort asc]} @params
|
||||
{:keys [invoices start end count total]} @invoice-page
|
||||
visible-checks @(re-frame/subscribe [::visible-checks])
|
||||
visible-expense-accounts @(re-frame/subscribe [::visible-expense-accounts])
|
||||
selected-client @(re-frame/subscribe [::subs/client])
|
||||
percentage-size (if selected-client "%50%" "33%")]
|
||||
[:div
|
||||
[:div.level
|
||||
[:div.level-left
|
||||
[:div.level-item
|
||||
[paginator {:start start :end end :count count :total total
|
||||
:on-change (fn [p ]
|
||||
(on-params-change (merge @params p) ))}]]
|
||||
[:div.level-item
|
||||
[sort-by-list {:sort sort
|
||||
:on-change opc}]]]]
|
||||
[:table.table.is-fullwidth
|
||||
[:thead
|
||||
[:tr
|
||||
(when check-boxes
|
||||
[:th {:style {"width" "20px"}}])
|
||||
|
||||
(when-not selected-client
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width percentage-size :cursor "pointer"}
|
||||
:sort-name "Client"
|
||||
:sort-key "client"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Client"])
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width percentage-size :cursor "pointer"}
|
||||
:sort-name "Vendor"
|
||||
:sort-key "vendor"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Vendor"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width percentage-size :cursor "pointer"}
|
||||
:sort-name "Invoice Number"
|
||||
:sort-key "invoice-number"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Invoice #"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "8em" :cursor "pointer"}
|
||||
:sort-name "Date"
|
||||
:sort-key "date"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Date"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "8em" :cursor "pointer"}
|
||||
:sort-name "Due"
|
||||
:sort-key "due"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Due"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "5em" :cursor "pointer"}
|
||||
:sort-name "Location"
|
||||
:sort-key "location"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Loc"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "8em" :cursor "pointer"}
|
||||
:sort-name "Total"
|
||||
:sort-key "total"
|
||||
:class "has-text-right"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Amount"]
|
||||
{:keys [sort]} @(re-frame/subscribe [::table-params])
|
||||
{:keys [invoices start end count total]} @invoice-page
|
||||
visible-checks @(re-frame/subscribe [::visible-checks])
|
||||
visible-expense-accounts @(re-frame/subscribe [::visible-expense-accounts])
|
||||
selected-client @(re-frame/subscribe [::subs/client])
|
||||
percentage-size (if selected-client "%50%" "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
|
||||
(when check-boxes
|
||||
[:th {:style {"width" "20px"}}])
|
||||
(when-not selected-client
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width percentage-size :cursor "pointer"}
|
||||
:sort-name "Client"
|
||||
:sort-key "client"
|
||||
:sort sort}
|
||||
"Client"])
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width percentage-size :cursor "pointer"}
|
||||
:sort-name "Vendor"
|
||||
:sort-key "vendor"
|
||||
:sort sort}
|
||||
"Vendor"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width percentage-size :cursor "pointer"}
|
||||
:sort-name "Invoice Number"
|
||||
:sort-key "invoice-number"
|
||||
:sort sort}
|
||||
"Invoice #"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "8em" :cursor "pointer"}
|
||||
:sort-name "Date"
|
||||
:sort-key "date"
|
||||
:sort sort}
|
||||
"Date"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "8em" :cursor "pointer"}
|
||||
:sort-name "Due"
|
||||
:sort-key "due"
|
||||
:sort sort}
|
||||
"Due"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "5em" :cursor "pointer"}
|
||||
:sort-name "Location"
|
||||
:sort-key "location"
|
||||
:sort sort}
|
||||
"Loc"]
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "8em" :cursor "pointer"}
|
||||
:sort-name "Total"
|
||||
:sort-key "total"
|
||||
:class "has-text-right"
|
||||
:sort sort}
|
||||
"Amount"]
|
||||
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "10em" :cursor "pointer"}
|
||||
:sort-name "Outstanding"
|
||||
:sort-key "outstanding-balance"
|
||||
:class "has-text-right"
|
||||
:sort sort
|
||||
:asc asc}
|
||||
"Outstanding"]
|
||||
|
||||
[:th {
|
||||
:style {:width "20rem" :cursor "pointer"}
|
||||
|
||||
|
||||
}
|
||||
""]]]
|
||||
[:tbody
|
||||
|
||||
(if (:loading @status)
|
||||
[:tr
|
||||
[:td {:col-span 5}
|
||||
[:i.fa.fa-spin.fa-spinner]]]
|
||||
|
||||
(for [{:keys [client payments expense-accounts invoice-number date due total outstanding-balance id vendor] :as i} (:invoices @invoice-page)]
|
||||
^{:key id}
|
||||
[:tr {:class (:class i)}
|
||||
(when check-boxes
|
||||
[:td [:input.checkbox {:type "checkbox"
|
||||
:checked (if (get checked id)
|
||||
"checked"
|
||||
"")
|
||||
:on-change (fn [x e] (when on-check-changed
|
||||
|
||||
(on-check-changed id i)))} ]])
|
||||
(when-not selected-client
|
||||
[:td (if-let [client-override (:client overrides)]
|
||||
(client-override i)
|
||||
(:name client))])
|
||||
[:td (:name vendor)]
|
||||
[:td invoice-number]
|
||||
[:td (date->str date) ]
|
||||
[:td (date->str due) ]
|
||||
[:td (str/join ", " (set (map :location expense-accounts)))]
|
||||
|
||||
[:td.has-text-right (nf total )]
|
||||
[:td.has-text-right (nf outstanding-balance )]
|
||||
[:td.expandable
|
||||
[:div.buttons
|
||||
(when (seq expense-accounts)
|
||||
[drop-down {:id [::expense-accounts id ]
|
||||
:header [:a.button.badge {:data-badge (str (clojure.core/count expense-accounts))
|
||||
:aria-haspopup true
|
||||
:on-click (dispatch-event [::events/toggle-menu [::expense-accounts id]])
|
||||
:tab-index "0"
|
||||
} "Accounts"]}
|
||||
[drop-down-contents
|
||||
[:div
|
||||
(for [e expense-accounts]
|
||||
^{:key (:id e)}
|
||||
[:span.dropdown-item (:name (:account e)) " " (gstring/format "$%.2f" (:amount e) ) ])
|
||||
|
||||
[:hr.dropdown-divider]
|
||||
|
||||
(when expense-event
|
||||
[:a.dropdown-item.is-primary {:on-click (dispatch-event (conj expense-event i))} "Change"])]]])
|
||||
[:span {:style {:margin-left "1em"}}]
|
||||
(when (and on-edit-invoice (not= ":voided" (:status i)))
|
||||
[:a.button {:on-click (fn [] (on-edit-invoice i))} [:span.icon [:i.fa.fa-pencil]]])
|
||||
(when (and on-void-invoice (= (:outstanding-balance i) (:total i)) (not= ":voided" (:status i)))
|
||||
[:a.button {:on-click (fn [] (on-void-invoice i))} [:span.icon [:span.icon-bin-2 {:style {:font-weight "400"}}]]])
|
||||
(when (and on-unvoid-invoice (= ":voided" (:status i)))
|
||||
[:a.button {:on-click (fn [] (on-unvoid-invoice i))} [:span [:span.icon [:i.fa.fa-undo]]]])
|
||||
(when (seq payments)
|
||||
[drop-down {:id [::payments id]
|
||||
:header [:button.button.badge {:data-badge (str (clojure.core/count payments))
|
||||
:aria-haspopup true
|
||||
:tab-index "0"
|
||||
:on-click (dispatch-event [::events/toggle-menu [::payments id]])
|
||||
} "Payments"]}
|
||||
[:div
|
||||
(for [payment payments]
|
||||
(if (:s3-url (:payment payment))
|
||||
^{:key (:id payment)}
|
||||
[:a.dropdown-item {:href (:s3-url (:payment payment)) :target "_new"} [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str " " (:check-number (:payment payment)) " (" (gstring/format "$%.2f" (:amount payment) ) ")")]
|
||||
|
||||
^{:key (:id payment)}
|
||||
[:span.dropdown-item [:span.icon {:class [(when (= :cleared (:status (:payment payment)))
|
||||
"has-text-success")]}
|
||||
[:i.fa.fa-money]] (str " " (:check-number (:payment payment)) " (" (gstring/format "$%.2f" (:amount payment) ) ") "
|
||||
(when (= :cleared (:status (:payment payment)))
|
||||
(str " - " (:post-date (:transaction (:payment payment))))))]))]])]]]))]]]))))
|
||||
[sorted-column {:on-sort opc
|
||||
:style {:width "10em" :cursor "pointer"}
|
||||
:sort-name "Outstanding"
|
||||
:sort-key "outstanding-balance"
|
||||
:class "has-text-right"
|
||||
:sort sort}
|
||||
"Outstanding"]
|
||||
|
||||
[:th {
|
||||
:style {:width "20rem" :cursor "pointer"}
|
||||
|
||||
|
||||
}
|
||||
""]]]
|
||||
[:tbody
|
||||
|
||||
(if (:loading @status)
|
||||
[:tr
|
||||
[:td {:col-span 5}
|
||||
[:i.fa.fa-spin.fa-spinner]]]
|
||||
|
||||
(for [{:keys [client payments expense-accounts invoice-number date due total outstanding-balance id vendor] :as i} (:invoices @invoice-page)]
|
||||
^{:key id}
|
||||
[row {:invoice i
|
||||
:check-boxes check-boxes
|
||||
:checked checked
|
||||
:on-check-changed on-check-changed
|
||||
:selected-client selected-client
|
||||
:overrides overrides
|
||||
:expense-event expense-event
|
||||
:on-edit-invoice on-edit-invoice
|
||||
:on-void-invoice on-void-invoice
|
||||
:on-unvoid-invoice on-unvoid-invoice}]))]]]))
|
||||
|
||||
@@ -7,11 +7,75 @@
|
||||
[goog.string :as gstring]
|
||||
[bidi.bidi :as bidi]
|
||||
[auto-ap.routes :as routes]
|
||||
[auto-ap.views.components.date-range-filter :refer [date-range-filter]]
|
||||
[auto-ap.views.components.typeahead :refer [typeahead-entity]]
|
||||
[auto-ap.views.utils :refer [active-when dispatch-event bind-field horizontal-field date->str str->date pretty standard]]
|
||||
[auto-ap.subs :as subs]
|
||||
[auto-ap.events :as events]))
|
||||
|
||||
(defn invoices-side-bar [params & rest]
|
||||
|
||||
(re-frame/reg-sub
|
||||
::filters
|
||||
(fn [db ]
|
||||
(::filters db {})))
|
||||
|
||||
(re-frame/reg-sub
|
||||
::filter
|
||||
:<- [::filters]
|
||||
(fn [filters [_ which]]
|
||||
(filters which)))
|
||||
|
||||
(re-frame/reg-sub
|
||||
::filter-params
|
||||
:<- [::filters]
|
||||
:<- [::subs/active-page]
|
||||
(fn [[filters ap]]
|
||||
(println (:invoice-number-like filters))
|
||||
{:vendor-id (:id (:vendor filters))
|
||||
:date-range (:date-range filters)
|
||||
:invoice-number-like (:settled (:invoice-number-like filters))
|
||||
:status (condp = ap
|
||||
:invoices nil
|
||||
:unpaid-invoices :unpaid
|
||||
:paid-invoices :paid
|
||||
:voided-invoices :voided)}))
|
||||
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::filter-changed
|
||||
(fn [{:keys [db]} [_ & params]]
|
||||
(let [[a b c] params
|
||||
[which val] (if (= 3 (count params))
|
||||
[(into [a] b) c]
|
||||
[[a] b])]
|
||||
{:dispatch [:auto-ap.views.pages.unpaid-invoices/params-change]
|
||||
:db (assoc-in db (into [::filters] which) val)})))
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::invoice-number-like-settled
|
||||
[(re-frame/path [::filters :invoice-number-like])]
|
||||
(fn [{:keys [db]} [_ invoice-number-like]]
|
||||
{:db (assoc db :settled invoice-number-like)
|
||||
:dispatch [::filter-changed :invoice-number-like [:settled] invoice-number-like]}))
|
||||
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::invoice-number-like-changed
|
||||
[(re-frame/path [::filters :invoice-number-like])]
|
||||
(fn [{:keys [db]} [_ invoice-number-like]]
|
||||
{:dispatch-debounce {:event [::invoice-number-like-settled invoice-number-like]
|
||||
:time 500
|
||||
:key ::invoice-number-like}
|
||||
:db (assoc db :raw invoice-number-like)}))
|
||||
|
||||
(defn invoice-number-filter []
|
||||
[:div.field
|
||||
[:div.control [:input.input {:placeholder "AP-123"
|
||||
:value (:raw @(re-frame/subscribe [::filter :invoice-number-like]))
|
||||
:on-change (fn [x]
|
||||
(re-frame/dispatch [::invoice-number-like-changed (.. x -target -value) ]))} ]]])
|
||||
|
||||
(defn invoices-side-bar [params]
|
||||
(let [ap @(re-frame/subscribe [::subs/active-page])
|
||||
user @(re-frame/subscribe [::subs/user])]
|
||||
[:div
|
||||
@@ -49,5 +113,20 @@
|
||||
[:span {:class "icon icon-accounting-document" :style {:font-size "25px"}}]
|
||||
|
||||
[:span {:class "name"} "Import Invoices"]]])]]
|
||||
[:div
|
||||
rest]]))
|
||||
(when (not= ap :import-invoices)
|
||||
[:div
|
||||
[:p.menu-label "Vendor"]
|
||||
[:div
|
||||
[typeahead-entity {:matches @(re-frame/subscribe [::subs/vendors])
|
||||
:on-change #(re-frame/dispatch [::filter-changed :vendor %])
|
||||
:match->text :name
|
||||
:type "typeahead-entity"
|
||||
:value @(re-frame/subscribe [::filter :vendor])}]]
|
||||
[:p.menu-label "Date Range"]
|
||||
[:div
|
||||
[date-range-filter
|
||||
{:on-change-event [::filter-changed :date-range]
|
||||
:value @(re-frame/subscribe [::filter :date-range])}]]
|
||||
[:p.menu-label "Invoice #"]
|
||||
[:div
|
||||
[invoice-number-filter]]])]))
|
||||
|
||||
Reference in New Issue
Block a user