uses context, better loading experience
This commit is contained in:
Bryce Covert
@@ -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;
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<link rel="stylesheet" href="/css/animate.css" />
|
||||
<link rel="stylesheet" href="/finance-font/style.css" />
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div><nav class="navbar has-shadow is-fixed-top"><div class="container"><div class="navbar-brand"><a class="navbar-item" href="../"><img src="/img/logo.png"></a></div><div class="navbar-menu"><div class="navbar-burger burger" data-target="navMenu"><span></span><span></span><span></span></div></div></div></nav><div class="columns has-shadow" id="mail-app" style="margin-bottom: 0px; height: calc(100vh - 46px);"><aside class="column aside menu is-2 "><div class="main left-nav"><div></div></div></aside><div class="column messages hero " id="message-feed" style="overflow: auto;"><div class="inbox-messages"><div class="has-text-centered hero is-fullheight is-vertically-centered is-centered"><div class="hero-body"><div class="container"><div class="column is-4 is-offset-4 has-text-centered"><div class="loader is-loading is-active big is-centered"></div></div></div></div></div></div></div></div><div></div><div id="dz-hidden"></div></div></div>
|
||||
|
||||
@@ -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