diff --git a/resources/public/css/main.css b/resources/public/css/main.css index e165b886..1552af87 100644 --- a/resources/public/css/main.css +++ b/resources/public/css/main.css @@ -519,5 +519,29 @@ table.balance-sheet th.total { .test { opacity: 1.0; - animation: appear 0.75s ease both; + animation: appear 1s; +} + + +/* Below here is recent re-styling */ +.table.table { + border: 1px solid rgba(34,36,38,.15) !important; + /* border: 2px solid red; */ + border-collapse: separate; + border-radius: 4px !important; +} +.table.table td.collapsing, .table.table th.collapsing { + white-space: nowrap; vertical-align: middle; +} + +.table.table th { + background-color: #f9fafb; + + /* border: 1px solid rgba(34,36,38,.15) !important; */ +} +.table.table thead tr:first-child>th:first-child { + border-radius: 4px 0px 0px 0px !important; +} +.table.table thead tr:first-child>th:last-child { + border-radius: 0px 4px 0px 0px !important; } diff --git a/src/cljs/auto_ap/effects.cljs b/src/cljs/auto_ap/effects.cljs index fc9da770..86f38a61 100644 --- a/src/cljs/auto_ap/effects.cljs +++ b/src/cljs/auto_ap/effects.cljs @@ -10,6 +10,7 @@ [clojure.walk :as walk] [venia.core :as v] [auto-ap.history :as p] + [auto-ap.status :as status] [pushy.core :as pushy])) (re-frame/reg-fx @@ -157,8 +158,10 @@ (re-frame/reg-fx :graphql - (fn [{:keys [query on-success on-error token variables query-obj]}] + (fn [{:keys [query on-success on-error token variables query-obj owns-state]}] (go + (when (:multi owns-state) + (re-frame/dispatch [::status/loading-multi (:multi owns-state) (:which owns-state)])) (let [headers (if token {"Authorization" (str "Token " token)} {}) @@ -168,8 +171,8 @@ :get) headers (if (= method :post) (assoc headers "Content-Type" "text/plain") - headers - ) + headers) + query (or query (v/graphql-query (->graphql query-obj))) response (= (:status response) 400) - (when on-error + (let [error (->> response + :body + :errors + (dates->date-times) + (map #(assoc % :status (:status response))) + )] + (when (:multi owns-state) + (re-frame/dispatch [::status/error-multi (:multi owns-state) (:which owns-state) error])) + (when on-error + (->> error + (conj on-error) + (re-frame/dispatch)))) + :else + (do + (when (:multi owns-state) + (re-frame/dispatch [::status/completed-multi (:multi owns-state) (:which owns-state)])) (->> response :body - :errors + :data (dates->date-times) - (map #(assoc % :status (:status response))) - (conj on-error) - (re-frame/dispatch))) - :else - (->> response - :body - :data - (dates->date-times) - (conj on-success) - (re-frame/dispatch))))))) + (conj on-success) + (re-frame/dispatch)))))))) diff --git a/src/cljs/auto_ap/status.cljs b/src/cljs/auto_ap/status.cljs new file mode 100644 index 00000000..05243e42 --- /dev/null +++ b/src/cljs/auto_ap/status.cljs @@ -0,0 +1,68 @@ +(ns auto-ap.status + (:require [re-frame.core :as re-frame])) + +;; (re-frame/reg-sub +;; ::status +;; (fn [db [_ which]] +;; (get-in db [::status which]))) +;; +;; +;; (defn loading [db which] +;; (-> db +;; (assoc-in [::status which :state] :loading) +;; (assoc-in [::status which :error] nil))) +;; +;; (defn completion [db which] +;; (-> db +;; (assoc-in [::status which :state] :loading) +;; (assoc-in [::status which :error] nil))) +;; +;; (defn triggers-loading [which] +;; (re-frame/enrich +;; (fn [db event] +;; (loading db which)))) +;; +;; (defn triggers-completion [which] +;; (re-frame/enrich +;; (fn [db event] +;; (completion db which)))) +;; +(defn class-for [which] + (cond (= :loading (:state which)) + ["is-loading"] + + (= :error (:state which)) + ["animated" "shake"] + + :else + [])) + + +(re-frame/reg-sub + ::multi + (fn [db [_ multi]] + (get-in db [::status multi]))) + +(re-frame/reg-event-db + ::loading-multi + [(re-frame/path [::status]) ] + (fn [db [_ multi which]] + (assoc-in db [multi which] {:state :loading + :error nil}))) + +(re-frame/reg-event-db + ::completed-multi + [(re-frame/path [::status]) ] + (fn [db [_ multi which]] + (assoc-in db [multi which] {:state nil + :error nil}))) + +(re-frame/reg-event-db + ::error-multi + [(re-frame/path [::status]) ] + (fn [db [_ multi which error]] + (assoc-in db [multi which] {:state :error + :error error}))) + +(defn reset-multi [db multi] + (assoc-in db [::status multi] {})) diff --git a/src/cljs/auto_ap/views/components/buttons.cljs b/src/cljs/auto_ap/views/components/buttons.cljs new file mode 100644 index 00000000..2b98b428 --- /dev/null +++ b/src/cljs/auto_ap/views/components/buttons.cljs @@ -0,0 +1,6 @@ +(ns auto-ap.views.components.buttons + (:require [auto-ap.views.utils :refer [dispatch-event]])) + +(defn fa-icon [{:keys [event icon class]}] + [:a.button {:class class + :on-click (dispatch-event event)} [:span.icon [:i.fa {:class icon}]]]) diff --git a/src/cljs/auto_ap/views/components/grid.cljs b/src/cljs/auto_ap/views/components/grid.cljs index 8885f3e9..8f233061 100644 --- a/src/cljs/auto_ap/views/components/grid.cljs +++ b/src/cljs/auto_ap/views/components/grid.cljs @@ -106,7 +106,7 @@ (fn [consume] (let [{:strs [on-params-change params] :as consume} (js->clj consume)] (r/as-element (into - [:div + [:div {:style {:margin-bottom "1rem"}} [:div.level [:div.level-left [:div.level-item @@ -146,7 +146,7 @@ :enter-class "appear" :exit-class "disappear"} - (into [:span] + (into [:div.test ] (r/children (r/current-component)))]]) (defn body [] @@ -168,7 +168,6 @@ :enter-class "appear" :exit-class "disappear"} [:div.test - [:div.ph-item [:div.ph-row [:div.ph-col-12.big]]]]]]) 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 94839229..a880d8c3 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,9 @@ [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.buttons :as buttons] [auto-ap.views.components.grid :as grid] + [auto-ap.status :as status] [re-frame.core :as re-frame] [reagent.core :as reagent] [reagent.core :as r])) @@ -17,6 +19,8 @@ (fn [{:keys [user db]} [_ which]] {:graphql {:token user + :owns-state {:multi ::run + :which (:id which)} :query-obj {:venia/operation {:operation/type :query :operation/name "RunTransactionRule"} :venia/queries [{:query/data [:run-transaction-rule @@ -27,8 +31,7 @@ [:client [:name]] [:bank-account [:name]] :description-original]]}]} - :on-success [::succeeded-run (:id which)] - #_#_:on-error [:forms/save-error ::form]}})) + :on-success [::succeeded-run (:id which)]}})) (re-frame/reg-event-fx @@ -41,6 +44,11 @@ (fn [db] (::table-params db))) +(re-frame/reg-event-db + ::unmounted + (fn [db] + (status/reset-multi db ::run))) + (re-frame/reg-sub ::table-params :<- [::specific-table-params] @@ -55,13 +63,13 @@ {:db (merge table-params params)})) - -(defn table [{:keys [id rule-page on-params-change params status]}] +(defn table* [{: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]) opc (fn [p] - (re-frame/dispatch [::params-changed p]))] + (re-frame/dispatch [::params-changed p])) + states @(re-frame/subscribe [::status/multi ::run])] [grid/grid {:on-params-change opc :params @(re-frame/subscribe [::table-params]) :status @status @@ -88,7 +96,7 @@ :sort-name "Note"} "Note"] - [grid/header-cell {}]]] + [grid/header-cell {:style {:width (str (inc (* 2 44)) "px")}}]]] [grid/body (for [{:keys [client bank-account description amount-lte amount-gte note id] :as r} transaction-rules] ^{:key id} @@ -109,6 +117,12 @@ :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]]]]]])]]])) + [grid/cell {} + [:div.buttons + [buttons/fa-icon {:event [::run-clicked r] :icon :fa-play :class (status/class-for (get states (:id r)))}] + [buttons/fa-icon {:event [::form/editing r] :icon :fa-pencil}]]]])]]])) + +(defn table [params] + (r/create-class {:component-will-unmount (dispatch-event [::unmounted]) + :reagent-render (fn [] + [table* params])})) diff --git a/src/cljs/auto_ap/views/utils.cljs b/src/cljs/auto_ap/views/utils.cljs index eee81578..2743b794 100644 --- a/src/cljs/auto_ap/views/utils.cljs +++ b/src/cljs/auto_ap/views/utils.cljs @@ -361,3 +361,13 @@ (assoc result (keyword k) (cljs.tools.reader.edn/read-string v))) {} (:query (cemerick.url/url (.-location js/window))))) + +(defn loading [db] + (-> db + (assoc-in [:status] :loading) + (assoc-in [:error] nil))) + +(defn triggers-loading [form] + (re-frame/enrich + (fn [db event] + (loading db))))