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]]]]]])]]]))