From 6742d585806e5a7782d3a3f3929d6c5a0bb9f9d1 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Mon, 3 Aug 2020 21:16:08 -0700 Subject: [PATCH] Virtual pagination for accounts page --- .../views/components/admin/side_bar.cljs | 4 +- src/cljs/auto_ap/views/components/grid.cljs | 17 ++- .../auto_ap/views/components/layouts.cljs | 8 +- .../auto_ap/views/pages/admin/accounts.cljs | 79 +++++++---- .../views/pages/admin/accounts/form.cljs | 126 +++++++++--------- src/cljs/auto_ap/views/pages/admin/rules.cljs | 3 +- .../views/pages/admin/rules/table.cljs | 4 +- src/cljs/auto_ap/views/utils.cljs | 3 + 8 files changed, 139 insertions(+), 105 deletions(-) diff --git a/src/cljs/auto_ap/views/components/admin/side_bar.cljs b/src/cljs/auto_ap/views/components/admin/side_bar.cljs index 8129dea2..2c5e6ad4 100644 --- a/src/cljs/auto_ap/views/components/admin/side_bar.cljs +++ b/src/cljs/auto_ap/views/components/admin/side_bar.cljs @@ -11,7 +11,7 @@ [auto-ap.subs :as subs] [auto-ap.events :as events])) -(defn admin-side-bar [params & rest] +(defn admin-side-bar [params ] (let [ap @(re-frame/subscribe [::subs/active-page])] [:div [:p.menu-label "General"] @@ -73,4 +73,4 @@ [:i {:class "fa fa-download"}]] [:span {:class "name"} "Excel Invoices"]]]] - [:div rest]])) + (into [:div ] (r/children (r/current-component)))])) diff --git a/src/cljs/auto_ap/views/components/grid.cljs b/src/cljs/auto_ap/views/components/grid.cljs index 1a1a36dc..f167e5ce 100644 --- a/src/cljs/auto_ap/views/components/grid.cljs +++ b/src/cljs/auto_ap/views/components/grid.cljs @@ -141,13 +141,8 @@ (defn cell [params] [:td params - [appearing {:visible? true - :timeout 1000 - :enter-class "appear" - :exit-class "disappear"} - - (into [:span.test ] - (r/children (r/current-component)))]]) + (into [:span.test ] + (r/children (r/current-component)))]) (defn body [] (let [children (r/children (r/current-component))] @@ -207,3 +202,11 @@ (into [:<> ] (r/children (r/current-component)))))) + +(defn virtual-paginate [start xs ] + (take 100 (drop start xs))) + +(defn virtual-paginate-controls [start xs] + {:start start :end (min (+ start 100) + (count xs)) + :total (count xs)}) diff --git a/src/cljs/auto_ap/views/components/layouts.cljs b/src/cljs/auto_ap/views/components/layouts.cljs index 954caaad..79483b61 100644 --- a/src/cljs/auto_ap/views/components/layouts.cljs +++ b/src/cljs/auto_ap/views/components/layouts.cljs @@ -14,7 +14,8 @@ [auto-ap.views.components.modal :as modal] [auto-ap.entities.vendors :as vendor] [auto-ap.views.components.vendor-dialog :as vendor-dialog] - [clojure.string :as str])) + [clojure.string :as str] + [reagent.core :as r])) (defn navbar-drop-down-contents [{:keys [id]} children ] @@ -168,10 +169,11 @@ [:p [:strong "Integreat"] ]]]) -(defn appearing-side-bar [{:keys [visible?]} & children ] +(defn appearing-side-bar [{:keys [visible?]} ] [appearing {:visible? visible? :enter-class "slide-in-right" :exit-class "slide-out-right" :timeout 500} [:aside {:class "column is-4 aside menu" :style {:height "calc(100vh - 46px)" :overflow "auto"}} - (into [:div.sub-main {} ] children )]]) + (into [:div.sub-main {} ] + (r/children (r/current-component)))]]) (defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}] (let [ap @(re-frame/subscribe [::subs/active-page]) diff --git a/src/cljs/auto_ap/views/pages/admin/accounts.cljs b/src/cljs/auto_ap/views/pages/admin/accounts.cljs index cf17a5e7..68500e3b 100644 --- a/src/cljs/auto_ap/views/pages/admin/accounts.cljs +++ b/src/cljs/auto_ap/views/pages/admin/accounts.cljs @@ -3,44 +3,69 @@ [auto-ap.subs :as subs] [auto-ap.utils :refer [replace-by]] [auto-ap.views.components.admin.side-bar :refer [admin-side-bar]] - [auto-ap.views.utils :refer [dispatch-event]] + [auto-ap.views.utils :refer [dispatch-event action-cell-width]] [auto-ap.views.components.layouts :refer [appearing-side-bar side-bar-layout]] [auto-ap.views.pages.admin.accounts.form :as account-form] - [re-frame.core :as re-frame])) + [re-frame.core :as re-frame] + [auto-ap.views.components.grid :as grid] + [auto-ap.status :as status] + [auto-ap.views.components.buttons :as buttons])) (re-frame/reg-event-db ::edit-completed (fn [db [_ edit-account]] (-> db - (update :accounts replace-by :id edit-account)))) + (update :accounts replace-by :id (assoc edit-account :class "live-added"))))) + +(re-frame/reg-event-db + ::params-changed + (fn [db [_ p]] + (assoc db ::params p))) + +(re-frame/reg-sub + ::params + (fn [db] + (-> db ::params))) (defn accounts-table [{:keys [accounts]}] - [:div - (for [[account-set accounts] (group-by :account-set accounts)] - ^{:key (or account-set "blank")} - [:div - [:h2.title.is-4 account-set] - [:table.table.compact.is-fullwidth - [:thead - [:tr - [:th "Code"] - [:th "Name"] - [:th "Type"] - [:th "Location"] - [:th {:style {:width "5em"}}]]] - [:tbody - (for [{:keys [id numeric-code name type location] :as account} (sort-by :numeric-code accounts)] - ^{:key id} - [:tr - [:td numeric-code] - [:td name] - [:td type] - [:td location] - [:td [:a.button {:on-click (dispatch-event [::account-form/editing - account - [::edit-completed]])} [:span [:span.icon [:i.fa.fa-pencil]]]]]])]]])]) + (let [status @(re-frame/subscribe [::status/single ::page]) + opc (fn [p] + (re-frame/dispatch [::params-changed p])) + params @(re-frame/subscribe [::params])] + + [:div + (for [[account-set full-accounts] (group-by :account-set accounts) + :let [full-accounts (sort-by :numeric-code full-accounts) + accounts (grid/virtual-paginate (:start params 0) full-accounts )]] + ^{:key (or account-set "blank")} + [:div + [:h2.title.is-4 account-set] + [grid/grid {:status status + :on-params-change opc + :params params + :column-count 5} + [grid/controls (grid/virtual-paginate-controls (:start params) full-accounts)] + [grid/table {:fullwidth true} + [grid/header + [grid/row {} + [grid/header-cell {} "Code"] + [grid/header-cell {} "Name"] + [grid/header-cell {} "Type"] + [grid/header-cell {} "Location"] + [grid/header-cell {:style {:width (action-cell-width 1)}} ]]] + [grid/body + (for [{:keys [id numeric-code name type location class] :as account} accounts] + ^{:key id} + [grid/row {:class (:class account)} + [grid/cell {} numeric-code] + [grid/cell {} name] + [grid/cell {} type] + [grid/cell {} location] + [grid/cell {} + [buttons/fa-icon {:event [::account-form/editing account [::edit-completed]] + :icon "fa-pencil"}]]])]]]])])) (defn admin-accounts-content [] [:div diff --git a/src/cljs/auto_ap/views/pages/admin/accounts/form.cljs b/src/cljs/auto_ap/views/pages/admin/accounts/form.cljs index 2a903c97..37b9b0f6 100644 --- a/src/cljs/auto_ap/views/pages/admin/accounts/form.cljs +++ b/src/cljs/auto_ap/views/pages/admin/accounts/form.cljs @@ -4,6 +4,7 @@ [clojure.spec.alpha :as s] [auto-ap.subs :as subs] [auto-ap.entities.account :as entity] + [auto-ap.views.components.layouts :refer [side-bar]] [auto-ap.views.utils :refer [bind-field dispatch-event]] [auto-ap.views.components.typeahead :refer [typeahead-entity]] [re-frame.core :as re-frame])) @@ -86,73 +87,74 @@ change-event [::forms/change ::form]] ^{:key (:id account)} - [form {:title (if (:id account) + [side-bar {:on-close (dispatch-event [::forms/form-closing ::form])} + [form {:title (if (:id account) "Edit account" "Add account")} - [field "Account Set" - [:input.input {:type "text" - :field :account-set - :disabled (boolean (:id account)) - :spec ::entity/account-set}]] - + [field "Account Set" + [:input.input {:type "text" + :field :account-set + :disabled (boolean (:id account)) + :spec ::entity/account-set}]] + - [field "Code" - [:input.input {:type "text" - :field :numeric-code - :disabled (boolean (:id account)) - :spec ::entity/numeric-code}]] - + [field "Code" + [:input.input {:type "text" + :field :numeric-code + :disabled (boolean (:id account)) + :spec ::entity/numeric-code}]] + - [field "Name" - [:input.input {:type "text" - :field :name - :spec ::entity/name}]] + [field "Name" + [:input.input {:type "text" + :field :name + :spec ::entity/name}]] - - [field-holder "Account Type" - [:div.select - [raw-field - [:select {:type "select" - :field :type - :spec (set types)} - (map (fn [l] - [:option {:value (name l)} (str/capitalize (name l))]) types)]]]] - - - [field "Location" - [:input.input.known-field.location {:type "text" - :field :location - :spec ::entity/location}]] - - [:h2.subtitle "Client"] - [field-holder "Applicability" - [:div.select - [raw-field - [:select {:type "select" - :field :applicability - :spec (set applicabilities)} - (map (fn [l] - [:option {:value (name l)} (str/capitalize (name l))]) applicabilities)]]]] - [field-holder "Customizations" - [:div.field.has-addons - [:p.control - ^{:key (count (:client-overrides account))} ;; resets after adding + + [field-holder "Account Type" + [:div.select [raw-field - [typeahead-entity {:matches @(re-frame/subscribe [::subs/clients]) - :match->text :name - :type "typeahead" - :field [:new-client-override :client]}]]] - [:p.control - [raw-field - [:input.input {:type "text" - :placeholder "Bubblegum" - :field [:new-client-override :name]}]]] - [:p.control [:button.button.is-primary {:on-click (dispatch-event [::add-client-override])} "Add"]]]] - [:ul - (for [client-override (:client-overrides account)] - ^{:key (:name client-override)} - [:li (:name (:client client-override)) "-" (:name client-override)])] - [error-notification] + [:select {:type "select" + :field :type + :spec (set types)} + (map (fn [l] + [:option {:value (name l)} (str/capitalize (name l))]) types)]]]] - [submit-button "Save"]])) + + [field "Location" + [:input.input.known-field.location {:type "text" + :field :location + :spec ::entity/location}]] + + [:h2.subtitle "Client"] + [field-holder "Applicability" + [:div.select + [raw-field + [:select {:type "select" + :field :applicability + :spec (set applicabilities)} + (map (fn [l] + [:option {:value (name l)} (str/capitalize (name l))]) applicabilities)]]]] + [field-holder "Customizations" + [:div.field.has-addons + [:p.control + ^{:key (count (:client-overrides account))} ;; resets after adding + [raw-field + [typeahead-entity {:matches @(re-frame/subscribe [::subs/clients]) + :match->text :name + :type "typeahead" + :field [:new-client-override :client]}]]] + [:p.control + [raw-field + [:input.input {:type "text" + :placeholder "Bubblegum" + :field [:new-client-override :name]}]]] + [:p.control [:button.button.is-primary {:on-click (dispatch-event [::add-client-override])} "Add"]]]] + [:ul + (for [client-override (:client-overrides account)] + ^{:key (:name client-override)} + [:li (:name (:client client-override)) "-" (:name client-override)])] + [error-notification] + + [submit-button "Save"]]])) diff --git a/src/cljs/auto_ap/views/pages/admin/rules.cljs b/src/cljs/auto_ap/views/pages/admin/rules.cljs index 3370eeeb..15a44632 100644 --- a/src/cljs/auto_ap/views/pages/admin/rules.cljs +++ b/src/cljs/auto_ap/views/pages/admin/rules.cljs @@ -136,8 +136,7 @@ (defn admin-rules-page [] (let [{:keys [active?]} @(re-frame/subscribe [::forms/form ::form/form])] [side-bar-layout {:side-bar [admin-side-bar {} - [:<> - [side-bar/rule-side-bar]]] + [side-bar/rule-side-bar]] :main [rules-content] :right-side-bar [appearing-side-bar {:visible? active?} [form/form {:rule-saved [::edit-completed]}]] diff --git a/src/cljs/auto_ap/views/pages/admin/rules/table.cljs b/src/cljs/auto_ap/views/pages/admin/rules/table.cljs index d4cc0d58..75855ebb 100644 --- a/src/cljs/auto_ap/views/pages/admin/rules/table.cljs +++ b/src/cljs/auto_ap/views/pages/admin/rules/table.cljs @@ -1,6 +1,6 @@ (ns auto-ap.views.pages.admin.rules.table (:require [auto-ap.subs :as subs] - [auto-ap.views.utils :refer [dispatch-event ->$ with-user]] + [auto-ap.views.utils :refer [dispatch-event ->$ with-user action-cell-width]] [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]] @@ -133,7 +133,7 @@ :sort-name "Note"} "Note"] - [grid/header-cell {:style {:width (str (inc (* 3 44)) "px")}}]]] + [grid/header-cell {:style {:width (action-cell-width 3)}}]]] [grid/body (for [{:keys [client bank-account description amount-lte amount-gte note id] :as r} transaction-rules] ^{:key id} diff --git a/src/cljs/auto_ap/views/utils.cljs b/src/cljs/auto_ap/views/utils.cljs index 2743b794..c8cfc9fa 100644 --- a/src/cljs/auto_ap/views/utils.cljs +++ b/src/cljs/auto_ap/views/utils.cljs @@ -371,3 +371,6 @@ (re-frame/enrich (fn [db event] (loading db)))) + +(defn action-cell-width [cnt] + (str (inc (* cnt 51)) "px"))