standardized user form
This commit is contained in:
Bryce Covert
@@ -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 []))))
|
||||
|
||||
(re-frame/reg-sub
|
||||
::editing
|
||||
(fn [db]
|
||||
(-> db ::editing)))
|
||||
(::users db)))
|
||||
|
||||
(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
|
||||
(fn [db [_ path value]]
|
||||
(assoc-in db (concat [::editing] path)
|
||||
value)))
|
||||
::saved
|
||||
(fn [db [_ [_ query-result]]]
|
||||
(-> db
|
||||
(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 {:class "table", :style {:width "100%"}}
|
||||
[: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))]])]]))
|
||||
[table/table {:page @(re-frame/subscribe [::page])
|
||||
:status @(re-frame/subscribe [::status/single ::page])}])
|
||||
|
||||
|
||||
|
||||
(def admin-users-content
|
||||
(with-meta
|
||||
(fn []
|
||||
[:div
|
||||
(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-content []
|
||||
[:div
|
||||
[:h1.title "Users"]
|
||||
[users-table]
|
||||
[form/form]])
|
||||
|
||||
|
||||
(defn admin-users-page []
|
||||
[side-bar-layout {:side-bar [admin-side-bar {}]
|
||||
:main [admin-users-content]}])
|
||||
(reagent/create-class
|
||||
{: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]}])}))
|
||||
|
||||
|
||||
@@ -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"))))
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user