uses context, better loading experience
This commit is contained in:
Bryce Covert
@@ -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))))))
|
||||
|
||||
@@ -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]]]]]])]]]))
|
||||
|
||||
Reference in New Issue
Block a user