notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination.

Browse Source
This commit is contained in:
Bryce Covert
2018-04-13 15:16:37 -07:00
parent 330a276f60
commit 121a38f20d
5 changed files with 139 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/cljs/auto_ap/views/components/invoice_table.cljs
View File

@@ -3,6 +3,7 @@
[auto-ap.subs :as subs]
[auto-ap.views.utils :refer [date->str]]
[reagent.core :as reagent]
[clojure.string :as str]
[cljs-time.format :as format]))
(defn toggle-sort-by [params key]
@@ -26,39 +27,90 @@
[:i.fa.fa-sort]]))
(defn query [params]
{:venia/queries [[:invoice
{:venia/queries [[:invoice_page
(assoc params
:company-id (:id @(re-frame/subscribe [::subs/company])))
[:id :total :invoice-number :date [:vendor [:name :id]] [:company [:name :id]]]]]})
[[:invoices [:id :total :invoice-number :date [:vendor [:name :id]] [:company [:name :id]]]]
:total
:start
:end]]]})
(defn invoice-table [{:keys [id invoices status on-params-change vendors params]}]
(defn bound [x y z]
(cond
(< z x)
x
(< y x)
x
(> y z)
z
:else
y))
(defn buttons-for [start end count total on-params-change state]
(let [per-page 20
max-buttons 5
buttons-before (Math/floor (/ max-buttons 2))
total-pages (Math/ceil (/ total per-page))
current-page (Math/floor (/ start per-page))
first-page-button (bound 0 (- current-page buttons-before) (- total-pages max-buttons))
all-buttons (into [] (for [x (range total-pages)]
^{:key x} [:button.button {:class (str/join " " [(when (= current-page x)
"is-active")])
:on-click (fn [e] (on-params-change (swap! state assoc :start (* x per-page))))} (inc x)]))
last-page-button (Math/min total-pages (+ max-buttons first-page-button))
extended-last-page-button (when (not= last-page-button total-pages)
[:span "..." [:button.button {:on-click (fn [e] (on-params-change (swap! state assoc :start (* (dec total-pages) per-page))))} total-pages]])
extended-first-page-button (when (not= first-page-button 0)
[:span [:button.button {:on-click (fn [e] (on-params-change (swap! state assoc :start 0)))} 1] "..."])
]
[:div.is-pulled-right
[:div
extended-first-page-button
(apply list (subvec all-buttons first-page-button last-page-button))
extended-last-page-button]]
))
(defn invoice-table [{:keys [id invoice-page status on-params-change vendors params]}]
(let [state (reagent/atom (or @params {}))]
(fn [{:keys [id invoices status on-params-change vendors]}]
(let [{:keys [sort-by asc]} @state]
[:table.table.is-fullwidth
[:thead
[:tr
[:th {:on-click (fn [e]
(on-params-change (swap! state toggle-sort-by "vendor"))) :style {:width "25%" :cursor "pointer"}} "Vendor"
(sort-icon "vendor" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "company"))) :style {:width "25%" :cursor "pointer"}} "Company"
(sort-icon "company" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "invoice-number"))) :style {:width "18%" :cursor "pointer"}} "Invoice #"
(sort-icon "invoice-number" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "date"))) :style {:width "16%" :cursor "pointer"}} "Date"
(sort-icon "date" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "total"))) :style {:width "16%" :cursor "pointer"}} "Amount"
(sort-icon "total" sort-by asc)]]]
[:tbody
(if (:loading @status)
[:tr
[:td {:col-span 5}
[:i.fa.fa-spin.fa-spinner]]]
(for [{:keys [company invoice-number date total id vendor] :as i} @invoices]
^{:key id}
[:tr
[:td (:name vendor)]
[:td (:name company)]
[:td invoice-number]
[:td (date->str date) ]
[:td total]]))]]))))
(fn [{:keys [id invoice-page status on-params-change vendors]}]
(let [{:keys [sort-by asc]} @state
{:keys [invoices start end count total]} @invoice-page]
[:div
[buttons-for start end count total on-params-change state]
"Showing " (inc start) "-" end "/" total
[:table.table.is-fullwidth
[:thead
[:tr
[:th {:on-click (fn [e]
(on-params-change (swap! state toggle-sort-by "vendor"))) :style {:width "25%" :cursor "pointer"}} "Vendor"
(sort-icon "vendor" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "company"))) :style {:width "25%" :cursor "pointer"}} "Company"
(sort-icon "company" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "invoice-number"))) :style {:width "18%" :cursor "pointer"}} "Invoice #"
(sort-icon "invoice-number" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "date"))) :style {:width "16%" :cursor "pointer"}} "Date"
(sort-icon "date" sort-by asc)]
[:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "total"))) :style {:width "16%" :cursor "pointer"}} "Amount"
(sort-icon "total" sort-by asc)]]]
[:tbody
(if (:loading @status)
[:tr
[:td {:col-span 5}
[:i.fa.fa-spin.fa-spinner]]]
(for [{:keys [company invoice-number date total id vendor] :as i} (:invoices @invoice-page)]
^{:key id}
[:tr
[:td (:name vendor)]
[:td (:name company)]
[:td invoice-number]
[:td (date->str date) ]
[:td total]]))]]]))))