From 45ff1deed6268216363cae7acb96e684c8cf86a4 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Sun, 2 Aug 2020 21:13:49 -0700 Subject: [PATCH] uses context, better loading experience --- resources/public/css/main.css | 26 +++ resources/public/index.html | 2 +- src/cljs/auto_ap/views/components/grid.cljs | 166 ++++++++++++------ .../views/pages/admin/rules/table.cljs | 105 +++++------ 4 files changed, 183 insertions(+), 116 deletions(-) diff --git a/resources/public/css/main.css b/resources/public/css/main.css index 6d2f8ba6..e165b886 100644 --- a/resources/public/css/main.css +++ b/resources/public/css/main.css @@ -359,6 +359,7 @@ nav.navbar .navbar-item.is-active { .table { table-layout: fixed } .table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; height: 60px; vertical-align: middle; } .table td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; height: 60px; vertical-align: middle; } + .table th.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; height: 60px; vertical-align: middle; } .table td.no-border { border: none; } .table.compact td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; height: 40px; vertical-align: middle; } .table.compact td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; height: 40px; vertical-align: middle; } @@ -495,3 +496,28 @@ table.balance-sheet th.total { border-right-color: transparent; border-top-color: transparent; } + + +.ph-item { + border: 0px !important; + padding: 0px !important; + margin-bottom: 0px !important; + opacity: 1.0 !important; + border-radius: 12px !important; +} + +.ph-row { + margin-bottom: 0px !important; + padding: 9px 0px 9px 0px !important; + height: 32px !important; +} +.ph-row .ph-col-12 { + border-radius: 12px !important; + height: 32px !important; + margin-right:100px; +} + +.test { + opacity: 1.0; + animation: appear 0.75s ease both; +} diff --git a/resources/public/index.html b/resources/public/index.html index e86a1157..4faf93cf 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -14,7 +14,7 @@ - +
diff --git a/src/cljs/auto_ap/views/components/grid.cljs b/src/cljs/auto_ap/views/components/grid.cljs index 1a856cea..8885f3e9 100644 --- a/src/cljs/auto_ap/views/components/grid.cljs +++ b/src/cljs/auto_ap/views/components/grid.cljs @@ -1,5 +1,11 @@ (ns auto-ap.views.components.grid - (:require [reagent.core :as r])) + (:require [reagent.core :as r] + [auto-ap.views.utils :refer [appearing]] + [react :as react])) + +(defonce grid-context (react/createContext "default")) +(def Provider (.-Provider grid-context)) +(def Consumer (.-Consumer grid-context)) (defn toggle-sort-by [params sort-key sort-name] (let [[found? sort] (reduce @@ -94,61 +100,105 @@ [:a.tag.is-medium.is-delete {:on-click (fn [] (on-change {:sort (filter #(not= sort-key (:sort-key %)) sort)}))}]]])]) -(defn grid [{:keys [on-params-change params status column-count]}] - {:grid-container (fn grid-container [{:keys [start end count total]}] - (into [:div - [:div.level - [:div.level-left - [:div.level-item - [paginator {:start start :end end :count count :total total - :on-change on-params-change}]] - [:div.level-item - [sort-by-list {:sort (:sort @params) - :on-change on-params-change}]]]]] - (r/children (r/current-component)))) - :table (fn table [] - (r/create-class {:reagent-render - (fn [{:keys [fullwidth]}] - (into - [:table.table.compact {:class (if fullwidth - ["is-fullwidth"])}] - (r/children (r/current-component))))})) - :table-header (fn table-head [] - (r/create-class {:reagent-render - (fn [{:keys []}] - (into - [:thead] - (r/children (r/current-component))))})) - :table-header-cell (fn table-header-cell [{:keys [style class]}] - (into [:th {:style style - :class class}] - (r/children (r/current-component)))) +(defn controls [{:keys [start end count total] :as para}] + (let [children (r/children (r/current-component))] + [:> Consumer {} + (fn [consume] + (let [{:strs [on-params-change params] :as consume} (js->clj consume)] + (r/as-element (into + [:div + [:div.level + [:div.level-left + [:div.level-item + [paginator {:start start :end end :count count :total total + :on-change on-params-change}]] + [:div.level-item + [sort-by-list {:sort (:sort params) + :on-change on-params-change}]]]]] + children))))])) - :table-row (fn table-row [{:keys [class]}] - (into [:tr {:class class}] - (r/children (r/current-component)))) - :table-cell (fn table-cell [params] - (into [:td params] - (r/children (r/current-component)))) - :table-body (fn table-body [] - (if (:loading @status) - [:tbody - [:tr - [:td {:col-span column-count} - [:div.container - [:div.columns.is-centered - [:div.column.is-narrow - [:div.loader.is-loading.is-active.is-table-loader.is-centered]]]]] - ]] - (into [:tbody] - (r/children (r/current-component))))) - :table-sortable-header-cell (fn table-sortable-header-cell [{:keys [style class sort-key sort-name asc]}] - (conj (into - [:th {:on-click (fn [e] - (on-params-change - (toggle-sort-by {:sort (:sort @params)} sort-key sort-name))) - :style (assoc style - :cursor "pointer") - :class class}] - (r/children (r/current-component))) - (sort-icon sort-key (:sort @params))))}) +(defn table [] + (r/create-class {:reagent-render + (fn [{:keys [fullwidth]}] + (into + [:table.table.compact {:class (if fullwidth + ["is-fullwidth"])}] + (r/children (r/current-component))))})) + +(defn header [] + (into + [:thead] + (r/children (r/current-component)))) + +(defn header-cell [{:keys [style class]}] + (into [:th {:style style + :class class}] + (r/children (r/current-component)))) + +(defn row [{:keys [class]}] + (into [:tr {:class class}] + (r/children (r/current-component)))) + +(defn cell [params] + [:td params + [appearing {:visible? true + :timeout 1000 + :enter-class "appear" + :exit-class "disappear"} + + (into [:span] + (r/children (r/current-component)))]]) + +(defn body [] + (let [children (r/children (r/current-component))] + [:> Consumer {} + (fn [consume] + (let [{:strs [column-count status]} (js->clj consume)] + (r/as-element + (if (:loading status) + [:tbody + (for [i (range 40)] + ^{:key i} + [:tr + (for [x (range column-count)] + ^{:key x} + [:td #_{:col-span column-count} + [appearing {:visible? true + :timeout 1000 + :enter-class "appear" + :exit-class "disappear"} + [:div.test + + [:div.ph-item + [:div.ph-row + [:div.ph-col-12.big]]]]]]) + ])] + (into [:tbody] + + children)))))])) + +(defn sortable-header-cell [{:keys [style class sort-key sort-name asc]}] + (let [children (r/children (r/current-component))] + [:> Consumer {} + (fn [consume] + (let [{:strs [on-params-change params] :as consume} (js->clj consume)] + (r/as-element (conj (into + [:th {:on-click (fn [e] + (on-params-change + (toggle-sort-by {:sort (:sort params)} sort-key sort-name))) + :style (assoc style + :cursor "pointer") + :class class}] + children) + (sort-icon sort-key (:sort params))))))])) + +(defn grid [{:keys [on-params-change params status column-count]}] + (r/create-element Provider + #js {:value #js {:on-params-change on-params-change + :params params + :status status + :column-count column-count}} + (r/as-element + (into + [:<> ] + (r/children (r/current-component)))))) 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 6f132e67..94839229 100644 --- a/src/cljs/auto_ap/views/pages/admin/rules/table.cljs +++ b/src/cljs/auto_ap/views/pages/admin/rules/table.cljs @@ -6,7 +6,7 @@ [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 toggle-sort-by sort-icon]] - [auto-ap.views.components.grid :refer [grid]] + [auto-ap.views.components.grid :as grid] [re-frame.core :as re-frame] [reagent.core :as reagent] [reagent.core :as r])) @@ -57,67 +57,58 @@ (defn table [{:keys [id rule-page on-params-change params status]}] - (let [opc (fn [p] - (re-frame/dispatch [::params-changed p])) - {:keys [table-sortable-header-cell - table - table-header - table-row - table-header-cell - table-body - table-cell - grid-container]} - (grid {:on-params-change opc - :params (re-frame/subscribe [::table-params]) - :status status - :column-count 5})] - (fn [{:keys [id rule-page on-params-change params status]}] - (let [{:keys [sort asc]} @params - {:keys [transaction-rules start end count total]} @rule-page - selected-client @(re-frame/subscribe [::subs/client])] - [grid-container {:start start :end end :count count :total total} - [table {:fullwidth true } - [table-header - [table-row {} - [table-sortable-header-cell {:sort-key "client" - :sort-name "Client"} - "Client"] + (let [{:keys [sort asc]} @params + {:keys [transaction-rules start end count total]} @rule-page + selected-client @(re-frame/subscribe [::subs/client]) + opc (fn [p] + (re-frame/dispatch [::params-changed p]))] + [grid/grid {:on-params-change opc + :params @(re-frame/subscribe [::table-params]) + :status @status + :column-count 6} + [grid/controls {:start start :end end :count count :total total}] + [grid/table {:fullwidth true } + [grid/header + [grid/row {} + [grid/sortable-header-cell {:sort-key "client" + :sort-name "Client"} + "Client"] - [table-sortable-header-cell {:sort-key "bank-account" - :sort-name "Bank Account"} - "Bank Account"] + [grid/sortable-header-cell {:sort-key "bank-account" + :sort-name "Bank Account"} + "Bank Account"] - [table-sortable-header-cell {:sort-key "description" - :sort-name "Description"} - "Description"] + [grid/sortable-header-cell {:sort-key "description" + :sort-name "Description"} + "Description"] - [table-header-cell {:style {:width "12em"}} "Amount"] + [grid/header-cell {:style {:width "12em"}} "Amount"] - [table-sortable-header-cell {:sort-key "note" - :sort-name "Note"} - "Note"] + [grid/sortable-header-cell {:sort-key "note" + :sort-name "Note"} + "Note"] - [table-header-cell {:style {:width "9em"}}]]] - [table-body - (for [{:keys [client bank-account description amount-lte amount-gte note id] :as r} transaction-rules] - ^{:key id} - [table-row {:class (:class r)} - [table-cell {} (:name client)] - [table-cell {} (:name bank-account)] - [table-cell {} description] - [table-cell {:class "has-text-right"} - (cond (and amount-gte amount-lte) - (str (->$ amount-gte) " - " (->$ amount-lte)) + [grid/header-cell {}]]] + [grid/body + (for [{:keys [client bank-account description amount-lte amount-gte note id] :as r} transaction-rules] + ^{:key id} + [grid/row {:class (:class r)} + [grid/cell {} (:name client)] + [grid/cell {} (:name bank-account)] + [grid/cell {} description] + [grid/cell {:class "has-text-right"} + (cond (and amount-gte amount-lte) + (str (->$ amount-gte) " - " (->$ amount-lte)) - amount-gte - (str ">=" (->$ amount-gte)) + amount-gte + (str ">=" (->$ amount-gte)) - amount-lte - (str "<=" (->$ amount-lte)) + amount-lte + (str "<=" (->$ amount-lte)) - :else - "")] - [table-cell {} note] - [table-cell {} [:div.buttons - [:a.button {:on-click (dispatch-event [::run-clicked r])} [:span.icon [:i.fa.fa-play]]] - [:a.button {:on-click (dispatch-event [::form/editing r])} [:span.icon [:i.fa.fa-pencil]]]]]])]]])))) + :else + "")] + [grid/cell {} note] + [grid/cell {} [:div.buttons + [:a.button {:on-click (dispatch-event [::run-clicked r])} [:span.icon [:i.fa.fa-play]]] + [:a.button {:on-click (dispatch-event [::form/editing r])} [:span.icon [:i.fa.fa-pencil]]]]]])]]]))