first step in making accounts editable.

resources/public/css/main.css

@@ -363,6 +363,8 @@ nav.navbar .navbar-item.is-active  {
     .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.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;  }
 
     .typeahead {
     position:relative;

src/cljs/auto_ap/views/pages/admin/accounts.cljs

@@ -1,23 +1,15 @@
 (ns auto-ap.views.pages.admin.accounts
-  (:require-macros [cljs.core.async.macros :refer [go]]
+  (:require [auto-ap.forms :as forms]
-                   [clojure.string :as str])
-  (:require [re-frame.core :as re-frame]
-            
-            [reagent.core :as reagent]
-            [clojure.spec.alpha :as s]
-            [clojure.string :as str]
             [auto-ap.subs :as subs]
-            [auto-ap.forms :as forms]
-            [auto-ap.events :as events]
-            [auto-ap.entities.clients :as entity]
-            [auto-ap.views.components.address :refer [address-field]]
-            [auto-ap.views.components.layouts :refer [side-bar-layout appearing-side-bar]]
             [auto-ap.views.components.admin.side-bar :refer [admin-side-bar]]
-            [auto-ap.views.utils :refer [login-url dispatch-event dispatch-value-change bind-field horizontal-field]]
+            [auto-ap.views.utils :refer [dispatch-event]]
-            [auto-ap.views.components.modal :refer [action-modal]]
+            [auto-ap.views.components.layouts
-            [cljs.reader :as edn]
+             :refer
-            [auto-ap.routes :as routes]
+             [appearing-side-bar side-bar-layout]]
-            [bidi.bidi :as bidi]))
+            [auto-ap.views.pages.admin.accounts.form :as account-form]
+            [re-frame.core :as re-frame]))
+
+
 
 (defn accounts-table [{:keys [accounts]} ]
   
@@ -27,18 +19,21 @@
          ^{:key account-set}
          [:div
           [:h2.title.is-4 account-set]
-          [:table.table
+          [:table.table.compact
            [:thead
             [:th "Code"]
             [:th "Name"]
-            [:th "Type"]]
+            [:th "Type"]
+            [:th {:style {:width "5em"}}]
+            ]
            [:tbody
-            (for [{:keys [id numeric-code name type]} (sort-by :numeric-code accounts)]
+            (for [{:keys [id numeric-code name type] :as account} (sort-by :numeric-code accounts)]
               ^{:key id}
               [:tr
                [:td numeric-code]
                [:td name]
-               [:td type]])]]]))])
+               [:td type]
+               [:td [:a.button {:on-click (dispatch-event [::account-form/editing account])} [:span [:span.icon [:i.fa.fa-pencil]]]]]])]]]))])
 
 (defn admin-accounts-content []
   [:div
@@ -48,5 +43,7 @@
       [accounts-table {:accounts accounts}]])])
 
 (defn admin-accounts-page []
-  [side-bar-layout {:side-bar [admin-side-bar {}]
+  (let [{:keys [active?]} @(re-frame/subscribe [::forms/form ::account-form/form])]
-                    :main [admin-accounts-content]}])
+    [side-bar-layout {:side-bar [admin-side-bar {}]
+                      :main [admin-accounts-content]
+                      :right-side-bar [appearing-side-bar {:visible? active?} [account-form/form]]}]))

src/cljs/auto_ap/views/pages/admin/accounts/form.cljs

@@ -0,0 +1,66 @@
+(ns auto-ap.views.pages.admin.accounts.form
+  (:require [auto-ap.forms :as forms]
+            [auto-ap.subs :as subs]
+            [auto-ap.views.components.admin.side-bar :refer [admin-side-bar]]
+            [auto-ap.views.utils :refer [bind-field dispatch-event]]
+            [auto-ap.views.components.layouts
+             :refer
+             [appearing-side-bar side-bar-layout]]
+            [re-frame.core :as re-frame]))
+
+(def types [:dividend :expense :asset :liability :equities :revenue])
+(re-frame/reg-event-db
+ ::editing
+ (fn [db [_ which]]
+   (-> db
+       (forms/start-form ::form which))))
+
+(defn form []
+  (let [{error :error account :data } @(re-frame/subscribe [::forms/form ::form])
+        change-event [::forms/change ::form]]
+    
+    [forms/side-bar-form {:form ::form}
+     [:form
+      [:h1.title.is-2 "Add/edit account"]
+      [:div.field
+       [:p.help  "Code"]
+       [:div.control
+        [bind-field
+         [:input.input {:type "text"
+                        :field :numeric-code
+                        #_:spec #_:entity/name
+                        :event change-event
+                        :subscription account}]]]]
+
+      [:div.field
+       [:p.help  "Name"]
+       [:div.control
+        [bind-field
+         [:input.input {:type "text"
+                        :field :name
+                        #_:spec #_:entity/name
+                        :event change-event
+                        :subscription account}]]]]
+
+      [:div.field
+       [:p.help  "Location"]
+       [:div.control
+        [:div.select
+         [bind-field
+          [:select {:type "select"
+                    :field :type
+                    :spec (set types)
+                    :event change-event
+                    :subscription account}
+           (map (fn [l] [:option {:value l} (name l)]) types)]]]]]
+
+      (when error
+        [:div.notification.is-warning.animated.fadeInUp
+         error])
+      
+
+      [:submit.button.is-large.is-primary {#_:disabled #_(if (s/valid? :entity/client @(re-frame/subscribe [::new-client-request]))
+                                                       ""
+                                                       "disabled")
+                                           :on-click (dispatch-event [::account-saving])
+                                           :class (str @(re-frame/subscribe [::forms/loading-class ::form]) (when error " animated shake"))} "Save"]]]))