much better sorting.

This commit is contained in:
Bryce Covert
2020-04-25 16:21:36 -07:00
parent a8736f351e
commit d799fc469d
17 changed files with 294 additions and 219 deletions

View File

@@ -3,6 +3,7 @@
[auto-ap.subs :as subs]
[auto-ap.views.utils :refer [date->str dispatch-event delayed-dispatch nf]]
[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]]
[auto-ap.events :as events]
@@ -44,8 +45,9 @@
(defn query [params]
{:venia/queries [[:invoice_page
(assoc params
:client-id (:id @(re-frame/subscribe [::subs/client])))
(-> params
(assoc
:client-id (:id @(re-frame/subscribe [::subs/client]))))
[[:invoices [:id :total :outstanding-balance :invoice-number :date :due :status :client-identifier
[:vendor [:name :id]]
[:expense_accounts [:amount :id :location
@@ -64,19 +66,22 @@
opc (fn [p]
(on-params-change (merge @params p)))]
(fn [{:keys [id invoice-page status on-params-change vendors checked params]}]
(let [{:keys [sort-by asc]} @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%")
]
percentage-size (if selected-client "%50%" "33%")]
[:div
[paginator {:start start :end end :count count :total total
:on-change (fn [p ]
(on-params-change (merge @params p) ))}]
[: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
@@ -86,53 +91,61 @@
(when-not selected-client
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-name "Client"
:sort-key "client"
:sort-by sort-by
:sort sort
:asc asc}
"Client"])
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-name "Vendor"
:sort-key "vendor"
:sort-by sort-by
: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-by sort-by
:sort sort
:asc asc}
"Invoice #"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-name "Date"
:sort-key "date"
:sort-by sort-by
:sort sort
:asc asc}
"Date"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-name "Due"
:sort-key "due"
:sort-by sort-by
:sort sort
:asc asc}
"Due"]
[sorted-column {:on-sort opc
:style {:width "5em" :cursor "pointer"}
:sort-name "Location"
:sort-key "location"
:sort-by sort-by
: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-by sort-by
:sort sort
:asc asc}
"Amount"]
[sorted-column {:on-sort opc
:style {:width "10em" :cursor "pointer"}
:sort-name "Outstanding"
:sort-key "outstanding-balance"
:class "has-text-right"
:sort-by sort-by
:sort sort
:asc asc}
"Outstanding"]

View File

@@ -0,0 +1,21 @@
(ns auto-ap.views.components.sort-by-list
(:require [re-frame.core :as re-frame]
[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 sort-by-list [{:keys [sort on-change]}]
[:div.field.is-grouped.is-grouped-multiline
(for [{:keys [sort-key sort-name asc]} sort]
^{:key sort-key}
[:div.control
[:div.tags.has-addons
[:div.tag.is-medium [:span.icon (if asc
[:i.fa.fa-sort-up]
[:i.fa.fa-sort-down])]
[:span sort-name] ]
[:a.tag.is-medium.is-delete {:on-click (fn []
(on-change {:sort (filter #(not= sort-key (:sort-key %)) sort)}))}]]])])

View File

@@ -5,30 +5,45 @@
[reagent.core :as reagent]
[clojure.string :as str]
[cljs-time.format :as format]))
(defn toggle-sort-by [params key]
(defn toggle-sort-by [params sort-key sort-name asc]
(let [[found? sort] (reduce
(fn [[found? sort] sort-item]
(if (= sort-key (:sort-key sort-item))
[true (conj sort
(update sort-item :asc not))]
[found? (conj sort sort-item)]))
[false []]
(:sort params))
sort (if found?
sort
(conj sort {:sort-key sort-key
:sort-name sort-name
:asc true}))]
(-> params
(assoc :sort-by key)
(update :asc not)))
(-> params
(assoc :sort sort))))
(defn sort-icon [which sort-by asc]
(cond
(and (= sort-by which) asc)
[:span.icon
[:i.fa.fa-sort-up]]
(defn sort-icon [which sort asc]
(let [sort-item (first (filter #(= which (:sort-key %)) sort))]
(cond
(and sort-item (:asc sort-item))
[:span.icon
[:i.fa.fa-sort-up]]
(and (= sort-by which) (not asc))
[:span.icon
[:i.fa.fa-sort-down]]
(and sort-item (not (:asc sort-item)))
[:span.icon
[:i.fa.fa-sort-down]]
:else
[:span.icon
[:i.fa.fa-sort]]))
:else
[:span.icon
[:i.fa.fa-sort]])))
(defn sorted-column [{:keys [on-sort sort-key sort-by asc style class]} & rest]
[:th {:on-click (fn [e] (on-sort (toggle-sort-by {:asc asc} sort-key)))
(defn sorted-column [{:keys [on-sort sort-key sort sort-name asc style class]} & rest]
[:th {:on-click (fn [e]
(on-sort
(toggle-sort-by {:sort sort} sort-key sort-name asc)))
:style style
:class class}
rest
(sort-icon sort-key sort-by asc)])
(sort-icon sort-key sort asc)])

View File

@@ -3,6 +3,7 @@
[auto-ap.views.utils :refer [dispatch-event ->$ with-user]]
[auto-ap.views.pages.admin.rules.form :as form]
[auto-ap.views.components.paginator :refer [paginator]]
[auto-ap.views.components.sort-by-list :refer [sort-by-list]]
[auto-ap.views.pages.admin.rules.results-modal :as results-modal]
[auto-ap.views.components.sorter :refer [sorted-column]]
[re-frame.core :as re-frame]))
@@ -36,58 +37,62 @@
(let [opc (fn [p]
(on-params-change (merge @params p )))]
(fn [{:keys [id rule-page on-params-change params status]}]
(let [{:keys [sort-by asc]} @params
(let [{:keys [sort asc]} @params
{:keys [transaction-rules start end count total]} @rule-page
selected-client @(re-frame/subscribe [::subs/client])]
[:div
[paginator {:start start :end end :count count :total total
:on-change (fn [p ]
(on-params-change (merge @params p)))}]
[: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.compact
[:thead
[:tr
[sorted-column {:on-sort opc
:style {:width "25%" :cursor "pointer"}
:sort-key "client"
:sort-by sort-by
:asc asc}
:sort-name "Client"
:sort sort}
"Client"]
[sorted-column {:on-sort opc
:style {:width "25%" :cursor "pointer"}
:sort-key "bank-account"
:sort-by sort-by
:asc asc}
:sort-name "Bank Account"
:sort sort}
"Bank Account"]
[sorted-column {:on-sort opc
:style {:width "25%" :cursor "pointer"}
:sort-key "description"
:sort-by sort-by
:asc asc}
:sort-name "Description"
:sort sort}
"Description"]
#_[sorted-column {:on-sort opc
:style {:width "8em" :cukjsor "pointer"}
:class "has-text-right"
:sort-key "amount-gte"
:sort-by sort-by
:asc asc}
:sort sort}
"Amount"]
[:th.has-text-right {:style {:width "12em"}} "Amount"]
#_[sorted-column {:on-sort opc
:class "has-text-right"
:style {:width "8em" :cursor "pointer"}
:sort-key "amount-lte"
:sort-by sort-by
:asc asc}
:sort sort}
"<="]
[sorted-column {:on-sort opc
:style {:width "25%" :cursor "pointer"}
:sort-key "note"
:sort-by sort-by
:asc asc}
:sort-name "Note"
:sort sort}
"Note"]
[:th {:style {:width "9em"}}
]]]

View File

@@ -12,6 +12,7 @@
[auto-ap.views.components.layouts :refer [side-bar-layout]]
[auto-ap.views.components.typeahead :refer [typeahead]]
[auto-ap.views.components.paginator :refer [paginator]]
[auto-ap.views.components.sort-by-list :refer [sort-by-list]]
[auto-ap.events :as events]
[auto-ap.views.utils :refer [dispatch-event date->str bind-field nf with-user]]
[auto-ap.utils :refer [by]]
@@ -141,64 +142,70 @@
(on-params-change (merge @params p)))]
(fn [{:keys [id payment-page status on-params-change vendors checked]}]
(let [{:keys [sort-by asc]} @params
(let [{:keys [sort]} @params
{:keys [payments start end count total]} @payment-page
selected-client @(re-frame/subscribe [::subs/client])
percentage-size (if selected-client "50%" "33%")]
[:div
[paginator {:start start :end end :count count :total total
:on-change (fn [p ]
(on-params-change (merge @params p)))}]
[: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-not selected-client
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "client"
:sort-by sort-by
:asc asc}
:sort-name "Client"
:sort sort}
"Client"])
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "vendor"
:sort-by sort-by
:asc asc}
:sort-name "Vendor"
:sort sort}
"Vendor"]
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "vendor"
:sort-by sort-by
:asc asc}
: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-by sort-by
:asc asc}
:sort-name "Check #"
:sort sort}
"Check #"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "date"
:sort-by sort-by
:asc asc}
:sort-name "Date"
:sort sort}
"Date"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:class "has-text-right"
:sort-key "amount"
:sort-by sort-by
:asc asc}
:sort-name "Amount"
:sort sort}
"Amount"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "status"
:sort-by sort-by
:asc asc}
:sort-name "Status"
:sort sort}
"Status"]

View File

@@ -2,6 +2,7 @@
(:require [auto-ap.subs :as subs]
[auto-ap.views.components.paginator :refer [paginator]]
[auto-ap.views.components.sorter :refer [sorted-column]]
[auto-ap.views.components.sort-by-list :refer [sort-by-list]]
[auto-ap.views.utils :refer [date->str dispatch-event nf]]
[goog.string :as gstring]
[re-frame.core :as re-frame]))
@@ -11,14 +12,20 @@
(on-params-change (merge @params p )))]
(fn [{:keys [id ledger-page status on-params-change vendors checked status?]
:or {status? true}}]
(let [{:keys [sort-by asc]} @params
(let [{:keys [sort]} @params
{:keys [journal-entries start end count total]} @ledger-page
selected-client @(re-frame/subscribe [::subs/client])
percentage-size (if selected-client "25%" "33%")]
[:div
[paginator {:start start :end end :count count :total total
:on-change (fn [p ]
(on-params-change (merge @params p)))}]
[: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.compact
@@ -28,25 +35,22 @@
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "client"
:sort-by sort-by
:asc asc}
:sort-name "Client"
:sort sort}
"Client"])
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "vendor"
:sort-by sort-by
:asc asc}
:sort-name "Vendor"
:sort sort}
"Vendor"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "date"
:sort-by sort-by
:asc asc}
:sort-name "Date"
:sort sort}
"Date"]
[:th
{:style {:width percentage-size }}
@@ -54,17 +58,17 @@
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "amount"
:sort-name "Amount"
:class "has-text-right"
:sort-by sort-by
:asc asc}
:sort sort}
"Debit"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "amount"
:sort-name "Amount"
:class "has-text-right"
:sort-by sort-by
:asc asc}
:sort sort}
"Credit"]
@@ -73,8 +77,8 @@
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "status"
:sort-by sort-by
:asc asc}
:sort-name "Status"
:sort sort}
"Status"])]]
[:tbody
(if (:loading @status)

View File

@@ -12,6 +12,7 @@
[auto-ap.views.components.layouts :refer [appearing-side-bar side-bar-layout]]
[auto-ap.views.components.modal :refer [action-modal]]
[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.pages.transactions.form :as edit]
[auto-ap.views.pages.transactions.table :as table]

View File

@@ -1,6 +1,7 @@
(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]]
[auto-ap.views.pages.transactions.form :as edit]
@@ -39,14 +40,21 @@
(let [opc (fn [p]
(on-params-change (merge @params p )))]
(fn [{:keys [id transaction-page status on-params-change vendors checked]}]
(let [{:keys [sort-by asc]} @params
(let [{:keys [sort]} @params
{:keys [transactions start end count total]} @transaction-page
selected-client @(re-frame/subscribe [::subs/client])
percentage-size (if selected-client "25%" "33%")]
[:div
[paginator {:start start :end end :count count :total total
:on-change (fn [p ]
(on-params-change (merge @params p)))}]
[: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
@@ -55,36 +63,36 @@
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "client"
:sort-by sort-by
:asc asc}
:sort-name "Client"
:sort sort}
"Client"])
[sorted-column {:on-sort opc
:style {:width percentage-size :cursor "pointer"}
:sort-key "vendor"
:sort-by sort-by
:asc asc}
:sort-name "Vendor"
:sort sort}
"Vendor"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "date"
:sort-by sort-by
:asc asc}
: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-by sort-by
:asc asc}
:sort sort}
"Amount"]
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "status"
:sort-by sort-by
:asc asc}
:sort-name "Status"
:sort sort}
"Status"]
[:th {:width percentage-size} "Bank account"]
[:th {:style {:width "14em"}} "" ]]]