From 022a8ae10a3c0e0d4e56f7253bef47218bcfbb48 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Tue, 4 Aug 2020 07:42:45 -0700 Subject: [PATCH] standardized user form --- src/cljs/auto_ap/views/pages/admin/users.cljs | 203 ++++++------------ src/cljs/auto_ap/views/utils.cljs | 3 - 2 files changed, 60 insertions(+), 146 deletions(-) diff --git a/src/cljs/auto_ap/views/pages/admin/users.cljs b/src/cljs/auto_ap/views/pages/admin/users.cljs index 9b5a2eeb..ef1713c8 100644 --- a/src/cljs/auto_ap/views/pages/admin/users.cljs +++ b/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 [])))) - -(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]}])})) diff --git a/src/cljs/auto_ap/views/utils.cljs b/src/cljs/auto_ap/views/utils.cljs index c8cfc9fa..905a97b9 100644 --- a/src/cljs/auto_ap/views/utils.cljs +++ b/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"))))