Makes transaction rule form much better; state visible

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;
 }

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 (<! (http/request {:method method
                                        :headers  headers
@@ -184,18 +187,25 @@
          
 
          (>= (: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-success)
-                (conj on-error)
+                (re-frame/dispatch))))))))
-                (re-frame/dispatch)))
-         :else
-         (->> response
-              :body
-              :data
-              (dates->date-times)
-              (conj on-success)
-              (re-frame/dispatch)))))))

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

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

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

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-success [::succeeded-run (:id which)]}}))
-     #_#_:on-error [:forms/save-error ::form]}}))
 
 
 (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
+           [grid/cell {} 
-                           [:a.button {:on-click (dispatch-event [::run-clicked r])} [:span.icon [:i.fa.fa-play]]]
+            [:div.buttons 
-                           [:a.button {:on-click (dispatch-event [::form/editing r])} [:span.icon [:i.fa.fa-pencil]]]]]])]]]))
+             [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])}))

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