Virtual pagination for accounts page

2020-08-03 21:16:08 -07:00
parent 283cbece9a
commit 6742d58580
8 changed files with 139 additions and 105 deletions
--- 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)))]))
--- 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)})
--- 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])
--- 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
--- 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"]]]))
--- 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]}]]
--- 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}
--- 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"))