Makes transaction rule form much better; state visible

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

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