adding styling to vendors page.

src/cljs/auto_ap/views/components/grid.cljs

@@ -204,9 +204,9 @@
                       (r/children (r/current-component))))))
 
 (defn virtual-paginate [start xs ]
-  (take 100 (drop start xs)))
+  (take 100 (drop (or start 0) xs)))
 
 (defn virtual-paginate-controls [start xs]
-  {:start start :end (min (+ start 100)
+  {:start (or start 0) :end (min (+ (or start 0) 100)
-                          (count xs))
+                                 (count xs))
    :total (count xs)})

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

@@ -11,7 +11,8 @@
             [re-frame.core :as re-frame]
             [auto-ap.views.components.grid :as grid]
             [auto-ap.status :as status]
-            [auto-ap.views.components.buttons :as buttons]))
+            [auto-ap.views.components.buttons :as buttons]
+            [reagent.core :as reagent]))
 
 (re-frame/reg-event-db
  ::edit-completed
@@ -29,6 +30,11 @@
  (fn [db]
    (-> db ::params)))
 
+(re-frame/reg-event-fx
+ ::unmounted
+ (fn [{:keys [db]} _]
+   {:db (dissoc db ::params)}))
+
 (defn accounts-table [{:keys [accounts]}]
   (let [status @(re-frame/subscribe [::status/single ::page])
         opc (fn [p]
@@ -80,7 +86,12 @@
       [accounts-table {:accounts accounts}]])])
 
 (defn admin-accounts-page []
-  (let [{:keys [active?]} @(re-frame/subscribe [::forms/form ::account-form/form])]
+  (reagent/create-class
-    [side-bar-layout {:side-bar [admin-side-bar {}]
+   {:display-name "accounts-page"
-                      :main [admin-accounts-content]
+    :component-will-unmount #(re-frame/dispatch [::unmounted])
-                      :right-side-bar [appearing-side-bar {:visible? active?} [account-form/form ]]}]))
+    :reagent-render
+    (fn []
+      (let [{:keys [active?]} @(re-frame/subscribe [::forms/form ::account-form/form])]
+        [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/vendors.cljs

@@ -1,9 +1,9 @@
 (ns auto-ap.views.pages.admin.vendors
-  (:require-macros [cljs.core.async.macros :refer [go]]
+(:require [re-frame.core :as re-frame]
-                   [auto-ap.entities.vendors :as vendor])
-  (:require [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [clojure.string :as str]
+            [auto-ap.views.components.buttons :as buttons]
+            [auto-ap.views.pages.admin.vendors.side-bar :as side-bar]
             [auto-ap.subs :as subs]
             [auto-ap.events :as events]
             [auto-ap.forms :as forms]
@@ -11,89 +11,21 @@
             [auto-ap.entities.vendors :as entity]
             [auto-ap.views.components.address :refer [address-field]]
             [auto-ap.views.components.vendor-dialog :refer [vendor-dialog] :as vendor-dialog]
-            
+            [auto-ap.views.components.grid :as grid] 
             [auto-ap.views.components.modal :refer [modal action-modal]]
             [auto-ap.views.components.admin.side-bar :refer [admin-side-bar]]
             [auto-ap.views.components.layouts :refer [side-bar-layout]]
             [clojure.spec.alpha :as s]
-            [auto-ap.views.utils :refer [login-url dispatch-value-change dispatch-event bind-field horizontal-field]]
+            [auto-ap.views.utils :refer [login-url dispatch-value-change dispatch-event bind-field horizontal-field action-cell-width]]
 
             [auto-ap.views.components.typeahead :refer [typeahead]]
             [cljs.reader :as edn]
             [auto-ap.routes :as routes]
-            [bidi.bidi :as bidi]))
+            [bidi.bidi :as bidi])
+  (:require-macros [cljs.core.async.macros :refer [go]]
+                   [auto-ap.entities.vendors :as vendor]))
 
 
-(re-frame/reg-event-fx
- ::new
- (fn  [{:keys [db]} _]
-   {:db (assoc-in db [:admin :vendor]
-                  {})
-   :dispatch [::events/modal-status ::admin-vendor {:visible? true}]}))
-
-
-
-
-
-(re-frame/reg-event-fx
- ::remind
- (fn  [{:keys [db] :as fx} [_ id]]
-   { :http {:method :post
-            :token (:user db)
-            :headers {"Content-Type" "application/edn"}
-            :uri (str "/api/vendors/" id "/remind")
-            :on-success [::reminder-sent]
-            :on-error [::failed "Failed to send reminder"]}
-    :db (assoc-in db [:admin :banner] nil)}))
-
-(re-frame/reg-event-db
- ::reminder-sent
- (fn  [db [_ error]]
-   (-> db
-       (assoc-in [:admin :banner] "Reminder sent!"))))
-
-(re-frame/reg-event-db
- ::failed
- (fn  [db [_ error]]
-   (-> db
-       (assoc-in [:admin :banner] error))))
-
-(re-frame/reg-event-fx
- ::save-complete
- (fn  [{:keys [db]} [_ {vendor :upsert-vendor} ]]
-   {:dispatch [::events/modal-completed ::admin-vendor ]
-    :db (-> db
-            
-            (assoc-in [:admin :vendor] nil)
-            (assoc-in [:vendors (:id vendor)] vendor))}))
-
-(re-frame/reg-event-db
- ::save-error
- (fn  [db [_ vendor]]
-   (-> db
-       (assoc-in [:admin :vendor :error] true)
-       (assoc-in [:admin :vendor :saving?] false))))
-
-(re-frame/reg-event-db
- ::change
- (fn  [db [_ path value]]
-   (assoc-in db (concat [:admin :vendor] path)
-             value)))
-
-(re-frame/reg-event-db
- ::add-relationship
- (fn  [db [_ ]]
-   (-> db
-       (update-in [:admin :vendor :relationships] #(conj (or % [])
-                                                         {:account-number (get-in db [:admin :vendor :new-relationship-account-number])
-                                                          :client-id (get-in db [:admin :vendor :new-relationship-client])}))
-       (update-in [:admin :vendor] dissoc :new-relationship-account-number :new-relationship-client))))
-
-(re-frame/reg-event-db
- ::remove-relationship
- (fn  [db [_ i]]
-   (-> db
-       (update-in [:admin :vendor :relationships] #(vec (concat (subvec % 0 i) (subvec % (min (count %) (inc i)))))))))
 
 (re-frame/reg-event-fx
  ::mounted
@@ -108,32 +40,71 @@
    (assoc db :vendors (by :id (:vendor vendors )))))
 
 
-(defn invalid-fields [spec v]
+(re-frame/reg-event-db
-  (set (mapcat :in (::s/problems (s/explain-data spec v)))))
+ ::table-params-changed
+ (fn [db [_ p]]
+   (assoc db ::table-params p)))
+
+(re-frame/reg-sub
+ ::table-params
+ (fn [db]
+   (-> db ::table-params)))
+
+(re-frame/reg-event-fx
+ ::unmounted
+ (fn [{:keys [db]} _]
+   {:db (dissoc db ::table-params ::side-bar/filter-params)}))
+
+(re-frame/reg-sub
+ ::params
+ :<- [::side-bar/filter-params]
+ :<- [::table-params]
+ (fn [[filter-params table-params]]
+   (println "TABLE params" table-params)
+   (cond-> {}
+     (seq filter-params) (merge filter-params)
+     (seq table-params) (merge table-params))))
+
+
+(re-frame/reg-sub
+ ::vendor-page
+ :<- [::params]
+ :<- [::subs/sorted-all-vendors]
+ (fn [[params all-vendors]]
+   (let [matching-vendors (cond->> all-vendors
+                            (:name params) (filter #(str/includes? (str/lower-case (:name %)) (str/lower-case (:name params)))))]
+     (assoc (grid/virtual-paginate-controls (:start params ) matching-vendors)
+            :data (grid/virtual-paginate (:start params) matching-vendors)))))
 
 (defn vendors-table []
-  (let [vendors (re-frame/subscribe [::subs/sorted-all-vendors])]
+  (let [vendor-page @(re-frame/subscribe [::vendor-page])
-    [:table {:class "table", :style {:width "100%"}}
+        params @(re-frame/subscribe [::params])
-     [:thead  
+        accounts @(re-frame/subscribe [::subs/all-accounts-by-id])
-      [:tr  
+        ]
-       [:th "Name"]
+    
-       [:th "Email"]
+    [grid/grid {:status nil
-       [:th "Invoice Reminders"]
+                :on-params-change (fn [p]
-       [:th]]]
+                                    (re-frame/dispatch [::table-params-changed p]))
-     [:tbody (for [v @vendors]
+                :params params
-               ^{:key (str (:id v))}
+                :column-count 4}
-               [:tr {:on-click (dispatch-event [::vendor-dialog/started v])
+     [grid/controls vendor-page]
-                     :style {"cursor" "pointer"}}
+     [grid/table {:fullwidth true}
-                [:td (:name v)]
+      [grid/header
-                [:td (:primary-email v)]
+       [grid/row {}
-                [:td (:invoice-reminder-schedule v)]
+        [grid/header-cell {} "Name"]
-                [:td
+        [grid/header-cell {} "Email"]
-                 (when (:primary-email v)
+        [grid/header-cell {} "Default Account"]
-                   [:button.button.is-primary.is-outlined
+        [grid/header-cell {:style {:width (action-cell-width 1)}}]]]
-
+      [grid/body
-                    {:on-click (dispatch-event [::events/remind (:id v)])
+       (for [v (:data vendor-page)]
-                     :href "#"}
+         ^{:key (str (:id v))}
-                    [:span.icon [:i.fa.fa-share-square]] [:span "Send Reminder"]])]])]]))
+         [grid/row {:class (:class v)}
+          [grid/cell {} (:name v)]
+          [grid/cell {} (:email (:primary-contact v))]
+          [grid/cell {} (-> v :default-account :id accounts :name)]
+          [grid/cell {}
+           [buttons/fa-icon {:event [::vendor-dialog/started v]
+                             :icon "fa-pencil"}]]])]]]))
 
 (defn danger-for [[dom {:keys [field subscription class] :as keys} & rest]]
   (let [keys (assoc keys :class (str class
@@ -219,20 +190,13 @@
               editing-vendor (:vendor @(re-frame/subscribe [::subs/admin]))]
           [:div
            [:h1.title "Vendors"]
-           [:a.button.is-primary.is-large {:on-click (dispatch-event [::merge-clicked])} "Merge vendors"]
+           [:div.is-pulled-right [:a.button.is-primary.is-outlined {:on-click (dispatch-event [::merge-clicked])} "Merge vendors"]]
            [vendors-table]
-
+           [merge-vendors-dialog]])])
-           [:div.is-pulled-right
-            [:a.button.is-primary.is-large {:on-click (dispatch-event [::vendor-dialog/started {}])} "New vendor"]]
-           [merge-vendors-dialog]
-           #_[vendor-dialog {:vendor editing-vendor
-                           :save-event [::events/save]
-                           :change-event ::events/change
-                           :form ::admin-vendor
-                           :id ::admin-vendor}]])])
      {:component-did-mount (fn []
                              (re-frame/dispatch [::mounted]))})])
 
 (defn admin-vendors-page []
-  [side-bar-layout {:side-bar [admin-side-bar {}]
+  [side-bar-layout {:side-bar [admin-side-bar {}
+                               [side-bar/vendor-side-bar]]
                     :main [admin-vendors-content]}])

src/cljs/auto_ap/views/pages/admin/vendors/side_bar.cljs

@@ -0,0 +1,68 @@
+(ns auto-ap.views.pages.admin.vendors.side-bar
+  (:require
+   [re-frame.core :as re-frame]
+   [auto-ap.subs :as subs]
+   [auto-ap.views.utils :refer [active-when dispatch-value-change]]
+   [auto-ap.views.components.typeahead :refer [typeahead-entity]]))
+
+(re-frame/reg-sub
+ ::specific-filters
+ (fn [db ]
+   (::filters db nil)))
+
+(re-frame/reg-sub
+ ::filters
+ :<- [::specific-filters]
+ :<- [::subs/vendors-by-id]
+ :<- [::subs/query-params]
+ (fn [[specific-filters vendors-by-id query-params] ]
+   (let [url-filters (-> query-params
+                         (select-keys #{:name}))]
+     (merge url-filters specific-filters ))))
+
+(re-frame/reg-sub
+ ::filter
+ :<- [::filters]
+ (fn [filters [_ which]]
+   (get filters which)))
+
+(re-frame/reg-sub
+ ::settled-filters
+ (fn [db ]
+   (::settled-filters db)))
+
+(re-frame/reg-sub
+ ::filter-params
+ :<- [::settled-filters]
+ :<- [::subs/active-page]
+ (fn [[filters ap ]]
+   {:name (:name filters)}))
+
+(re-frame/reg-event-fx
+ ::filters-settled
+ (fn [{:keys [db]} [_ & params]]
+   {:db (assoc db ::settled-filters @(re-frame/subscribe [::filters]))}))
+
+(re-frame/reg-event-fx
+ ::filter-changed
+ (fn [{:keys [db]} [_ & params]]
+   (let [[a b c] params
+         [which val] (if (= 3 (count params))
+                       [(into [a] b) c]
+                       [[a] b])]
+     {:db (assoc-in db (into [::filters] which) val)
+      :dispatch-debounce {:event [::filters-settled]
+                          :time 800
+                          :key ::filters}})))
+
+
+(defn vendor-side-bar []
+  [:div
+   [:p.menu-label "Name"]
+
+   [:div.field
+    [:div.control [:input.input {:placeholder "Harry's Food Products"
+                                 :value @(re-frame/subscribe [::filter :name])
+                                 :on-change (dispatch-value-change [::filter-changed :name])} ]]]])
+
+