standardized user form

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

@@ -1,5 +1,4 @@
 (ns auto-ap.views.pages.admin.users
-  (:require-macros [cljs.core.async.macros :refer [go]])
   (:require [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [clojure.string :as str]
@@ -8,179 +7,97 @@
             [auto-ap.entities.clients :as entity]
             [auto-ap.views.components.address :refer [address-field]]
             [auto-ap.views.components.admin.side-bar :refer [admin-side-bar]]
+            [auto-ap.views.pages.admin.users.table :as table]
             [auto-ap.views.components.layouts :refer [side-bar-layout]]
             [auto-ap.views.utils :refer [login-url dispatch-value-change bind-field horizontal-field dispatch-event]]
             [auto-ap.views.components.modal :refer [modal action-modal]]
-            [auto-ap.utils :refer [by replace-if]]
+            [auto-ap.views.components.grid :as grid]
+            [auto-ap.utils :refer [by replace-by]]
             [cljs.reader :as edn]
             [auto-ap.routes :as routes]
-            [bidi.bidi :as bidi]))
+            [bidi.bidi :as bidi]
+            [auto-ap.status :as status]
+            [auto-ap.views.pages.admin.users.form :as form]))
+
+
+
+(re-frame/reg-sub
+ ::params
+ :<- [::table/params]
+ (fn [table-params]
+   table-params))
 
 (re-frame/reg-sub
  ::users
  (fn [db]
-   (-> db (::users []))))
+   (::users db)))
-
-(re-frame/reg-sub
- ::editing
- (fn [db]
-   (-> db ::editing)))
 
 (re-frame/reg-event-fx
- ::users-mounted
+ ::params-change
+ (fn [_ [_ params]]
+   {:set-uri-params params}))
+
+(re-frame/reg-sub
+ ::page
+ :<- [::params]
+ :<- [::users]
+ (fn [[params all-users]]
+   (assoc (grid/virtual-paginate-controls (:start params ) all-users)
+          :data (grid/virtual-paginate (:start params) all-users))))
+
+(re-frame/reg-event-fx
+ ::mounted
  (fn [{:keys [db]} _]
    {:graphql {:token (:user db)
+              :owns-state {:single ::page}
               :query-obj {:venia/queries [[:user
                                            [:name
                                             :id
                                             :role
                                             [:clients [:id :name]]]]]} 
-              :on-success [::received]}}))
+              :on-success [::received]}
+    :forward-events {:register ::edited-user
+                     :events #{::form/saved}
+                     :dispatch-to [::saved]}}))
+
+(re-frame/reg-event-fx
+ ::unmounted
+ (fn [{:keys [db]} _]
+   {:forward-events {:unregister ::edited-user}}))
+
 
 (re-frame/reg-event-db
- ::change
+ ::saved
- (fn  [db [_ path value]]
+ (fn [db [_ [_ query-result]]]
-   (assoc-in db (concat [::editing] path)
+   (-> db
-             value)))
+       (update ::users
+               replace-by
+               :id
+               (assoc (:edit-user query-result) :class "live-added")))))
 
 (re-frame/reg-event-db
  ::received
  (fn [db [_ d]]
    (assoc-in db [::users] (:user d))))
 
-(re-frame/reg-event-db
- ::edit
- (fn [db [_ d]]
-   (re-frame/dispatch [::events/modal-status ::edit-user {:visible? true}])
-   (if-let [user (get (by :id (::users db)) d)]
-     (assoc-in db [::editing :user] user)
-     (dissoc db ::editing))))
-
-(re-frame/reg-event-db
- ::add-client
- (fn [db [_ d]]
-   (let [client (get @(re-frame/subscribe [::subs/clients-by-id])
-                         (get-in db [::editing :adding-client]))]
-     (update-in db [::editing :user :clients] conj client))))
-
-(re-frame/reg-event-db
- ::remove-client
- (fn [db [_ d]]
-   (update-in db [::editing :user :clients] #(filter (fn [c] (not= (:id c) d)) %))))
-
-(re-frame/reg-event-fx
- ::save
- (fn [{:keys [db]} [_]]
-   {:db (-> db
-            (assoc-in [::editing :saving?] true ))
-    :graphql
-    {:token (-> db :user)
-     
-     :query-obj {:venia/operation {:operation/type :mutation
-                                   :operation/name "EditUser"}
-                 
-                 :venia/queries [{:query/data [:edit-user
-                                               {:edit-user (update (get-in db [::editing :user]) :clients #(map :id %))}
-                                               [:id :name :role [:clients [:id :name]]]]}]}  
-     :on-success [::saved]}}))
-
-(re-frame/reg-event-fx
- ::saved
- (fn [{:keys [db]} [_ {:keys [edit-user]}]]
-   (re-frame/dispatch [::events/modal-completed ::edit-user])
-   {:db (-> db
-            (assoc-in [::editing :saving?] false )
-            (dissoc ::editing)
-            (update ::users
-                    (fn [us]
-                      (replace-if #(= (:id %1) (:id %2)) edit-user us) 
-                      )))}))
 
 (defn users-table []
-  (let [users (re-frame/subscribe [::users])]
+  [table/table {:page @(re-frame/subscribe [::page])
-    [:table {:class "table", :style {:width "100%"}}
+                :status @(re-frame/subscribe [::status/single ::page])}])
-     [:thead  
-      [:tr  
-       [:th "User"]
-       [:th "Role"]
-       [:th "Clients"]]]
-     [:tbody (for [{:keys [id name role clients] :as c} @users]
-               ^{:key (str name "-" id )}
-               [:tr {:on-click (fn [] (re-frame/dispatch [::edit id]))
-                     :style {"cursor" "pointer"}}
-                [:td name]
-                [:td role]
-                [:td (str/join ", " (map :name clients))]])]]))
 
 
-
+(defn admin-users-content []
-(def admin-users-content
+  [:div
-  (with-meta
+   [:h1.title "Users"]
-    (fn []
+   [users-table]
-      [:div
+   [form/form]])
-       (let [clients (re-frame/subscribe [::users])
-             editing @(re-frame/subscribe [::editing])]
-         [:div
-          [:h1.title "Users"]
-          [users-table]
-          
-          [action-modal {:title (str "Edit " (:name (:user editing)))
-                         :id ::edit-user
-                         :action-text "Save"
-                         :save-event [::save]}
-           [horizontal-field
-            [:label.label  "Name"]
-            [bind-field
-             [:input.input {:type "text"
-                            :field [:user :name]
-                            :spec ::entity/name
-                            :event ::change
-                            :subscription editing}]]]
-
-           [horizontal-field
-            [:label.label  "Role"]
-            [:div.control
-             [:div.select
-              [bind-field
-               [:select {:type "select"
-                         :field [:user :role]
-                         :spec ::entity/name
-                         :event ::change
-                         :subscription editing}
-                [:option {:value ":none"} "None"]
-                [:option {:value ":user"} "User"]
-                [:option {:value ":manager"} "Manager"]
-                [:option {:value ":admin"} "Admin"]]]]]]
-           
-
-           (when (#{":user" ":manager"} (:role (:user editing)))
-             [horizontal-field
-              [:label.label "Clients"]
-              [:div.control
-
-               [:div.field.has-addons
-                [:p.control
-                 [:div.select
-                  [bind-field
-                   [:select {:type "select"
-                             :field [:adding-client]
-                             :event ::change
-                             :subscription editing}
-                    [:option]
-                    (let [used-clients (set (map :id (:clients (:user editing))))]
-                      (for [{:keys [id name]} @(re-frame/subscribe [::subs/clients])
-                            :when (not (used-clients id))]
-                        ^{:key id} [:option {:value id} name]))]]]]
-                [:p.control
-                 [:button.button.is-primary {:on-click (dispatch-event [::add-client])} "Add"]]]
-               
-               [:ul
-                (for [{:keys [id name]} (:clients (:user editing))]
-                  ^{:key id} [:li  name [:a.icon {:on-click (dispatch-event [::remove-client id])} [:i.fa.fa-times ]]])]]])]])])
-    {:component-will-mount #(re-frame/dispatch-sync [::users-mounted {}]) }))
 
 
 (defn admin-users-page []
-  [side-bar-layout {:side-bar [admin-side-bar {}]
+  (reagent/create-class
-                    :main [admin-users-content]}])
+   {:component-will-unmount #(re-frame/dispatch [::unmounted])
+    :component-did-mount #(re-frame/dispatch [::mounted])
+    :reagent-render (fn []
+                      [side-bar-layout {:side-bar [admin-side-bar {}]
+                                        :main [admin-users-content]}])}))
 

src/cljs/auto_ap/views/utils.cljs

@@ -307,7 +307,6 @@
     ])
    (into
     [:div.field-body]
-    
     (with-keys (map (fn [x] [:div.field x]) controls)))])
 
 
@@ -317,8 +316,6 @@
 
 (def date-picker
   (do
-    
-    
     (reagent/adapt-react-class (aget js/DatePicker "default"))))