Progress on side panel

resources/public/css/main.css

@@ -149,6 +149,11 @@ nav.navbar .navbar-item.is-active  {
   padding: 40px;
   color: #6F7B7E;
 }
+
+.aside .sub-main {
+    padding: 10px;
+    color: #6F7B7E;
+}
 .aside .title {
   color: #6F7B7E;
   font-size: 12px;

resources/public/index.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="/css/bulma.min.css" integrity="sha256-HEtF7HLJZSC3Le1HcsWbz1hDYFPZCqDhZa9QsCgVUdw=" crossorigin="anonymous" />
   <link rel="stylesheet" href="/css/bulma-calendar.min.css" />
   <link rel="stylesheet" href="/css/bulma-badge.min.css" />
+  <link rel="stylesheet" href="/css/animate.css" />
   <link rel="stylesheet" href="/finance-font/style.css" />
   <link rel="stylesheet" href="/css/main.css" />
 

src/cljs/auto_ap/views/components/address.cljs

@@ -3,7 +3,6 @@
             [auto-ap.views.utils :refer [dispatch-value-change dispatch-event bind-field horizontal-field]]))
 
 (defn address-field [{:keys [event field subscription]}]
-  (println "sub" subscription)
   [:span
    [horizontal-field
     nil

src/cljs/auto_ap/views/components/layouts.cljs

@@ -81,7 +81,7 @@
       [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
        [:i {:class "fa fa-github"}]]]]]])
 
-(defn side-bar-layout [{:keys [side-bar main ap bottom]}]
+(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}]
   (let [ap @(re-frame/subscribe [::subs/active-page])
         client @(re-frame/subscribe [::subs/client])]
     [:div 
@@ -92,7 +92,11 @@
         side-bar]]
       [:div {:class "column messages hero is-fullheight", :id "message-feed"}
        ^{:key (str "active-page-" (:name client))}
-       [:div.inbox-messages main]]]
+       [:div.inbox-messages main]]
+      (when right-side-bar
+        [:aside.fadeInRight.animated {:class "column aside is-narrow menu hero is-fullheight" :style {:animation-duration "0.75s"}}
+         [:div.sub-main
+          right-side-bar]])]
      [footer]
      bottom
      [:div#dz-hidden]]))

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

@@ -17,6 +17,11 @@
             [auto-ap.routes :as routes]
             [bidi.bidi :as bidi]))
 
+(re-frame/reg-event-fx
+ ::new
+ (fn  [{:keys [db]} [_ client-id]]
+   {:db (assoc-in db [:admin :adding-client?] true)}))
+
 (re-frame/reg-event-fx
  ::edit
  (fn  [{:keys [db]} [_ client-id]]
@@ -70,6 +75,13 @@
    (assoc-in db (concat [:admin :client] path)
              value)))
 
+(re-frame/reg-event-db
+ ::change-new
+ (fn  [db [_ path value]]
+   
+   (assoc-in db (concat [:admin :new-client] path)
+             value)))
+
 (re-frame/reg-event-fx
  ::add-location
  (fn [{:keys [db]} _]
@@ -94,6 +106,21 @@
                                                                 (conj bank-accounts new-bank-account)))
               (update-in [:admin :client] dissoc :new-account))})))
 
+(re-frame/reg-event-fx
+ ::add-new-new-bank-account
+ (fn [{:keys [db]} _]
+   (let [client (:new-client @(re-frame/subscribe [::subs/admin]))
+         new-bank-account (:new-account client)
+         new-bank-account (-> new-bank-account
+                              (update :code #(str (:code client) "-" %))
+                              (update :check-number #(if (seq %) (js/parseInt %) nil))
+                              (update :yodlee-account-id #(if (seq %) (js/parseInt %) nil))
+                              (assoc :is-new? true))]
+     {:db (-> db
+              (update-in [:admin :new-client :new-bank-accounts] (fn [bank-accounts]
+                                                               (conj bank-accounts new-bank-account)))
+              (update-in [:admin :new-client] dissoc :new-account))})))
+
 (re-frame/reg-event-db
  ::remove-new-bank-account
  (fn [db [_ index]]
@@ -275,24 +302,189 @@
             (for [[index {:keys [name code number check-number]}] (map vector (range) (:new-bank-accounts editing-client))]
               ^{:key index} [:li [:strong "* " code ": " name] [:button.button {:on-click (dispatch-event [::remove-new-bank-account index])} [:span.icon [:i.fa.fa-times]]]])]]]
          
-         (when (:saving? editing-client) [:div.is-overlay {:style {"backgroundColor" "rgba(150,150,150, 0.5)"}}])])))
-  )
+         (when (:saving? editing-client) [:div.is-overlay {:style {"backgroundColor" "rgba(150,150,150, 0.5)"}}])]))))
 
 (defn admin-clients-content []
   [:div
    (let [clients (re-frame/subscribe [::subs/clients])
          editing-client (:client @(re-frame/subscribe [::subs/admin]))]
-     
      [:div
       [:h1.title "Clients"]
+      [:div.is-pulled-right
+       [:a.button.is-primary.is-large {:on-click (dispatch-event [::new])} "New client"]]
       [clients-table]
       (when editing-client
-        [clients-modal])
-      
-      ])]
-  
-  )
+        [clients-modal])])])
+
+
+(defn new-client-form []
+  (let [new-client (:new-client @(re-frame/subscribe [::subs/admin]))]
+    [:div 
+    [:form
+     [:section.section {:style {:padding-bottom "0.75em" :padding-top "0.75em"}}
+      [:h1.title "Add client"]
+      [:div.field
+       [:label.label  "Name"]
+       [:div.control
+        [bind-field
+         [:input.input {:type "text"
+                        :field :name
+                        :spec ::entity/name
+                        :event ::change-new
+                        :subscription new-client}]]]]
+
+      [:div.field
+       [:label.label "Client code"]
+       [:div.control
+        [bind-field
+         [:input.input {:type "code"
+                        :field :code
+                        :spec ::entity/code
+                        :event ::change-new
+                        :subscription new-client}]]]]
+
+      [:div.field
+       [:label.label "Email"]
+       [:div.control
+        [bind-field
+         [:input.input {:type "email"
+                        :field :email
+                        :spec ::entity/email
+                        :event ::change-new
+                        :subscription new-client}]]]]
+
+      [:div.field
+       [:label.label "Locations"]
+       [:div.control
+        [:div.field.has-addons
+         [:p.control
+          [bind-field
+           [:input.input {:type "text"
+                          :field :location
+                          :event ::change-new
+                          :subscription new-client}]]]
+         [:p.control [:button.button.is-primary {:on-click (dispatch-event [::add-location])} "Add"]]]
+        [:ul
+         (for [location (:locations new-client)]
+           ^{:key location} [:li  location ])]]]
+      ]
+
+     [:section.section {:style {:padding-bottom "0.75em" :padding-top "0.75em"}}
+      [:h2.subtitle "Address"]
+      [address-field {:field [:address]
+                      :event ::change-new
+                      :subscription new-client}]]
+
+     [:section.section  {:style {:padding-bottom "0.75em" :padding-top "0.75em" :background "hsl(0, 0%, 96%)"}}
+     [:h2.subtitle "Add bank account"]
+     [:label.label "General"]
+      [horizontal-field
+       nil
+       [:div.control
+        [:p.help "Account Code"]
+        [:div.field.has-addons.is-extended
+         [:p.control [:a.button.is-static (:code new-client) "-" ]]
+         [:p.control
+          [bind-field
+           [:input.input {:type "code"
+                          :field [:new-account :code]
+                          :spec ::entity/code
+                          :event ::change-new
+                          :subscription new-client}]]]]] 
+
+      [:div.control
+       [:p.help "Nickname"]
+       [bind-field
+        [:input.input {:placeholder "BOA Checking #1"
+                       :type "text"
+                       :field [:new-account :name]
+                       :event ::change-new
+                       :subscription new-client}]]]]
+
+     [:label.label "Bank"]
+     [horizontal-field
+      nil
+      [:div.control
+       [:p.help "Bank Name"]
+       [bind-field
+        [:input.input {:placeholder "Bank of America"
+                       :type "text"
+                       :field [:new-account :bank-name]
+                       :event ::change-new
+                       :subscription new-client}]]]
+      [:div.control
+       [:p.help "Routing #"]
+       [bind-field
+        [:input.input {:placeholder "104819123"
+                       :type "text"
+                       :field [:new-account :routing]
+                       :event ::change-new
+                       :subscription new-client}]]]
+      [:div.control
+       [:p.help "Bank code"]
+       [bind-field
+        [:input.input {:placeholder "12/10123"
+                       :type "text"
+                       :field [:new-account :bank-code]
+                       :event ::change-new
+                       :subscription new-client}]]]]
+
+     [:label.label "Checking account"]
+     [horizontal-field
+      nil
+      [:div.control
+       [:p.help "Account #"]
+       [bind-field
+        [:input.input {:placeholder "123456789"
+                       :type "text"
+                       :field [:new-account :number]
+                       :event ::change-new
+                       :subscription new-client}]]]
+      [:div.control
+       [:p.help "Check Number"]
+       [bind-field
+        [:input.input {:placeholder "10000"
+                       :type "text"
+                       :field [:new-account :check-number]
+                       :event ::change-new
+                       :subscription new-client}]]]]
+
+     [:div.field
+      [:label.label "Yodlee Account"]
+      [:div.control
+       [bind-field
+        [:input.input {:placeholder "Yodlee Account #"
+                       :type "text"
+                       :field [:new-account :yodlee-account-id]
+                       :event ::change-new
+                       :subscription new-client}]]]
+      ]
+      [:div.field
+       [:div.control
+        [:button.button.is-primary {:disabled (if (and (s/valid? ::entity/bank-account (:new-account new-client))
+                                                       (not ((doto (set (map :code (:new-bank-accounts new-client))) println)
+                                                             (str (:code new-client) "-" (-> new-client :new-account :code)))))
+                                                ""
+                                                "disabled")
+                                    :on-click (dispatch-event [::add-new-new-bank-account])} "Add"]]]]
+
+     [:section.section  {:style {:padding-bottom "0.75em" :padding-top "0.75em"}}
+     [:h2.subtitle "Bank Accounts"]
+     [:div.field
+      nil
+      [:div.control
+       [:ul
+        
+        (for [{:keys [code name number check-number id]} (:bank-accounts new-client)]
+          ^{:key id} [:li code ": " name])
+        (for [[index {:keys [name code number check-number]}] (map vector (range) (:new-bank-accounts new-client))]
+          ^{:key index} [:li [:strong "* " code ": " name] [:button.button {:on-click (dispatch-event [::remove-new-bank-account index])} [:span.icon [:i.fa.fa-times]]]])]]]]
+     
+     (when (:saving? new-client) [:div.is-overlay {:style {"backgroundColor" "rgba(150,150,150, 0.5)"}}])]]))
 
 (defn admin-clients-page []
-  [side-bar-layout {:side-bar [admin-side-bar {}]
-                    :main [admin-clients-content]}])
+  (let [adding-client? @(re-frame/subscribe [::subs/admin])]
+    [side-bar-layout {:side-bar [admin-side-bar {}]
+                      :main [admin-clients-content]
+                      :right-side-bar (when adding-client?
+                                        [new-client-form])}]))

src/cljs/auto_ap/views/utils.cljs

@@ -132,9 +132,10 @@
 
 (defn horizontal-field [label & controls]
   [:div.field.is-horizontal
+   (when label 
    [:div.field-label
     label
-    ]
+    ])
    (into
     [:div.field-body]