notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

uses context, better loading experience

Browse Source
This commit is contained in:
Bryce Covert
2020-08-02 21:13:49 -07:00
parent 1503d6c036
commit 45ff1deed6
4 changed files with 183 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
resources/public/css/main.css
View File

@@ -359,6 +359,7 @@ nav.navbar .navbar-item.is-active {
.table { table-layout: fixed } .table { table-layout: fixed }
.table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; height: 60px; vertical-align: middle; } .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 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 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 {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; } .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-right-color: transparent;
border-top-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;
}

2
resources/public/index.html
View File

@@ -14,7 +14,7 @@
<link rel="stylesheet" href="/css/animate.css" /> <link rel="stylesheet" href="/css/animate.css" />
<link rel="stylesheet" href="/finance-font/style.css" /> <link rel="stylesheet" href="/finance-font/style.css" />
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
</head> </head>
<body> <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> <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>

166
src/cljs/auto_ap/views/components/grid.cljs
View File

@@ -1,5 +1,11 @@
(ns auto-ap.views.components.grid (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] (defn toggle-sort-by [params sort-key sort-name]
(let [[found? sort] (reduce (let [[found? sort] (reduce
@@ -94,61 +100,105 @@
[:a.tag.is-medium.is-delete {:on-click (fn [] [:a.tag.is-medium.is-delete {:on-click (fn []
(on-change {:sort (filter #(not= sort-key (:sort-key %)) sort)}))}]]])]) (on-change {:sort (filter #(not= sort-key (:sort-key %)) sort)}))}]]])])
(defn grid [{:keys [on-params-change params status column-count]}] (defn controls [{:keys [start end count total] :as para}]
{:grid-container (fn grid-container [{:keys [start end count total]}] (let [children (r/children (r/current-component))]
(into [:div [:> Consumer {}
[:div.level (fn [consume]
[:div.level-left (let [{:strs [on-params-change params] :as consume} (js->clj consume)]
[:div.level-item (r/as-element (into
[paginator {:start start :end end :count count :total total [:div
:on-change on-params-change}]] [:div.level
[:div.level-item [:div.level-left
[sort-by-list {:sort (:sort @params) [:div.level-item
:on-change on-params-change}]]]]] [paginator {:start start :end end :count count :total total
(r/children (r/current-component)))) :on-change on-params-change}]]
:table (fn table [] [:div.level-item
(r/create-class {:reagent-render [sort-by-list {:sort (:sort params)
(fn [{:keys [fullwidth]}] :on-change on-params-change}]]]]]
(into children))))]))
[: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))))
:table-row (fn table-row [{:keys [class]}] (defn table []
(into [:tr {:class class}] (r/create-class {:reagent-render
(r/children (r/current-component)))) (fn [{:keys [fullwidth]}]
:table-cell (fn table-cell [params] (into
(into [:td params] [:table.table.compact {:class (if fullwidth
(r/children (r/current-component)))) ["is-fullwidth"])}]
:table-body (fn table-body [] (r/children (r/current-component))))}))
(if (:loading @status)
[:tbody (defn header []
[:tr (into
[:td {:col-span column-count} [:thead]
[:div.container (r/children (r/current-component))))
[:div.columns.is-centered
[:div.column.is-narrow (defn header-cell [{:keys [style class]}]
[:div.loader.is-loading.is-active.is-table-loader.is-centered]]]]] (into [:th {:style style
]] :class class}]
(into [:tbody] (r/children (r/current-component))))
(r/children (r/current-component)))))
:table-sortable-header-cell (fn table-sortable-header-cell [{:keys [style class sort-key sort-name asc]}] (defn row [{:keys [class]}]
(conj (into (into [:tr {:class class}]
[:th {:on-click (fn [e] (r/children (r/current-component))))
(on-params-change
(toggle-sort-by {:sort (:sort @params)} sort-key sort-name))) (defn cell [params]
:style (assoc style [:td params
:cursor "pointer") [appearing {:visible? true
:class class}] :timeout 1000
(r/children (r/current-component))) :enter-class "appear"
(sort-icon sort-key (:sort @params))))}) :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))))))

105
src/cljs/auto_ap/views/pages/admin/rules/table.cljs
View File

@@ -6,7 +6,7 @@
[auto-ap.views.components.sort-by-list :refer [sort-by-list]] [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.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.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] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[reagent.core :as r])) [reagent.core :as r]))
@@ -57,67 +57,58 @@
(defn table [{:keys [id rule-page on-params-change params status]}] (defn table [{:keys [id rule-page on-params-change params status]}]
(let [opc (fn [p] (let [{:keys [sort asc]} @params
(re-frame/dispatch [::params-changed p])) {:keys [transaction-rules start end count total]} @rule-page
{:keys [table-sortable-header-cell selected-client @(re-frame/subscribe [::subs/client])
table opc (fn [p]
table-header (re-frame/dispatch [::params-changed p]))]
table-row [grid/grid {:on-params-change opc
table-header-cell :params @(re-frame/subscribe [::table-params])
table-body :status @status
table-cell :column-count 6}
grid-container]} [grid/controls {:start start :end end :count count :total total}]
(grid {:on-params-change opc [grid/table {:fullwidth true }
:params (re-frame/subscribe [::table-params]) [grid/header
:status status [grid/row {}
:column-count 5})] [grid/sortable-header-cell {:sort-key "client"
(fn [{:keys [id rule-page on-params-change params status]}] :sort-name "Client"}
(let [{:keys [sort asc]} @params "Client"]
{: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"]
[table-sortable-header-cell {:sort-key "bank-account" [grid/sortable-header-cell {:sort-key "bank-account"
:sort-name "Bank Account"} :sort-name "Bank Account"}
"Bank Account"] "Bank Account"]
[table-sortable-header-cell {:sort-key "description" [grid/sortable-header-cell {:sort-key "description"
:sort-name "Description"} :sort-name "Description"}
"Description"] "Description"]
[table-header-cell {:style {:width "12em"}} "Amount"] [grid/header-cell {:style {:width "12em"}} "Amount"]
[table-sortable-header-cell {:sort-key "note" [grid/sortable-header-cell {:sort-key "note"
:sort-name "Note"} :sort-name "Note"}
"Note"] "Note"]
[table-header-cell {:style {:width "9em"}}]]] [grid/header-cell {}]]]
[table-body [grid/body
(for [{:keys [client bank-account description amount-lte amount-gte note id] :as r} transaction-rules] (for [{:keys [client bank-account description amount-lte amount-gte note id] :as r} transaction-rules]
^{:key id} ^{:key id}
[table-row {:class (:class r)} [grid/row {:class (:class r)}
[table-cell {} (:name client)] [grid/cell {} (:name client)]
[table-cell {} (:name bank-account)] [grid/cell {} (:name bank-account)]
[table-cell {} description] [grid/cell {} description]
[table-cell {:class "has-text-right"} [grid/cell {:class "has-text-right"}
(cond (and amount-gte amount-lte) (cond (and amount-gte amount-lte)
(str (->$ amount-gte) " - " (->$ amount-lte)) (str (->$ amount-gte) " - " (->$ amount-lte))
amount-gte amount-gte
(str ">=" (->$ amount-gte)) (str ">=" (->$ amount-gte))
amount-lte amount-lte
(str "<=" (->$ amount-lte)) (str "<=" (->$ amount-lte))
:else :else
"")] "")]
[table-cell {} note] [grid/cell {} note]
[table-cell {} [:div.buttons [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 [::run-clicked r])} [:span.icon [:i.fa.fa-play]]]
[:a.button {:on-click (dispatch-event [::form/editing r])} [:span.icon [:i.fa.fa-pencil]]]]]])]]])))) [:a.button {:on-click (dispatch-event [::form/editing r])} [:span.icon [:i.fa.fa-pencil]]]]]])]]]))