consistent user experience with new client
This commit is contained in:
@@ -246,32 +246,35 @@
|
|||||||
|
|
||||||
;; TODO decide when cursors are used. other cases it's not, some are
|
;; TODO decide when cursors are used. other cases it's not, some are
|
||||||
(defn client-override* [override]
|
(defn client-override* [override]
|
||||||
[:div.flex.gap-2.mb-2.client-override (-> {:x-ref "p"
|
(com/data-grid-row (-> {:x-ref "p"
|
||||||
:data-key "show"
|
:data-key "show"
|
||||||
:x-data (hx/json {:show (boolean (not (:new? override)))})}
|
:x-data (hx/json {:show (boolean (not (:new? override)))})}
|
||||||
hx/alpine-mount-then-appear)
|
hx/alpine-mount-then-appear)
|
||||||
[:div.w-96
|
(fc/with-field :db/id
|
||||||
(fc/with-field :db/id
|
(com/hidden {:name (fc/field-name)
|
||||||
(com/hidden {:name (fc/field-name)
|
:value (fc/field-value)}))
|
||||||
:value (fc/field-value)}))
|
(fc/with-field :account-client-override/client
|
||||||
(fc/with-field :account-client-override/client
|
(com/data-grid-cell {}
|
||||||
(com/validated-field {:errors (fc/field-errors)}
|
(com/validated-field {:errors (fc/field-errors)}
|
||||||
(com/typeahead-2 {:name (fc/field-name)
|
(com/typeahead-2 {:name (fc/field-name)
|
||||||
:placeholder "Search..."
|
:placeholder "Search..."
|
||||||
:url (bidi/path-for ssr-routes/only-routes
|
:class "w-96"
|
||||||
:company-search)
|
:url (bidi/path-for ssr-routes/only-routes
|
||||||
:value (fc/field-value)
|
:company-search)
|
||||||
:value-fn (some-fn :db/id identity) ;; TODO better hydration
|
:value (fc/field-value)
|
||||||
:content-fn (fn [value]
|
:value-fn (some-fn :db/id identity) ;; TODO better hydration
|
||||||
(:client/name (cond->> value
|
:content-fn (fn [value]
|
||||||
(nat-int? value) (dc/pull (dc/db conn) [:client/name]))))})))]
|
(:client/name (cond->> value
|
||||||
(fc/with-field :account-client-override/name
|
(nat-int? value) (dc/pull (dc/db conn) [:client/name]))))}))))
|
||||||
[:div.w-96
|
(fc/with-field :account-client-override/name
|
||||||
(com/validated-field {:errors (fc/field-errors)}
|
(com/data-grid-cell
|
||||||
(com/text-input {:name (fc/field-name)
|
{}
|
||||||
:class "w-full"
|
(com/validated-field {:errors (fc/field-errors)}
|
||||||
:value (fc/field-value)}))])
|
(com/text-input {:name (fc/field-name)
|
||||||
[:div (com/a-icon-button {"@click.prevent.stop" "show=false; setTimeout(() => $refs.p.remove(), 500)"} svg/x)]])
|
:class "w-96"
|
||||||
|
:value (fc/field-value)}))))
|
||||||
|
(com/data-grid-cell {:class "align-top"}
|
||||||
|
(com/a-icon-button {"@click.prevent.stop" "show=false; setTimeout(() => $refs.p.remove(), 500)"} svg/x))))
|
||||||
|
|
||||||
;; TODO each form:
|
;; TODO each form:
|
||||||
;; elimante typeahead1
|
;; elimante typeahead1
|
||||||
@@ -366,18 +369,32 @@
|
|||||||
:options (ref->select-options "account-applicability")})))
|
:options (ref->select-options "account-applicability")})))
|
||||||
|
|
||||||
(fc/with-field :account/client-overrides
|
(fc/with-field :account/client-overrides
|
||||||
|
|
||||||
(com/field {:label "Client Overrides" :id "client-overrides"}
|
(com/field {:label "Client Overrides" :id "client-overrides"}
|
||||||
(when (fc/field-value)
|
|
||||||
(doall
|
(com/data-grid {:headers [(com/data-grid-header {} "Client")
|
||||||
(for [override fc/*current*]
|
(com/data-grid-header {} "Account name")
|
||||||
(fc/with-cursor override
|
(com/data-grid-header {})]
|
||||||
(client-override* override)))))))
|
:id "client-override-table"}
|
||||||
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
|
(when (fc/field-value)
|
||||||
:admin-account-client-override-new)
|
(doall
|
||||||
:hx-vals (hiccup/raw "js:{index: document.getElementById('client-overrides').children.length - 1}")
|
(for [override fc/*current*]
|
||||||
:hx-target "#client-overrides"
|
(fc/with-cursor override
|
||||||
:hx-swap "beforeend"}
|
(client-override* override)))))
|
||||||
"New override")
|
(com/data-grid-row
|
||||||
|
{:class "new-row"}
|
||||||
|
(com/data-grid-cell {:colspan 3
|
||||||
|
:class "bg-gray-100"}
|
||||||
|
[:div.flex.justify-center
|
||||||
|
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
|
||||||
|
:admin-account-client-override-new)
|
||||||
|
:color :secondary
|
||||||
|
:hx-include "#edit-form"
|
||||||
|
:hx-vals (hiccup/raw "js:{index: countRows(\"#client-override-table\")}")
|
||||||
|
:hx-target "#edit-form .new-row"
|
||||||
|
:hx-swap "beforebegin"}
|
||||||
|
"New override")])))))
|
||||||
|
|
||||||
]
|
]
|
||||||
[:div
|
[:div
|
||||||
[:div [:div#form-errors (when (:errors fc/*form-errors*)
|
[:div [:div#form-errors (when (:errors fc/*form-errors*)
|
||||||
|
|||||||
@@ -549,7 +549,7 @@
|
|||||||
(com/data-grid-header {:class "w-16"} "%")
|
(com/data-grid-header {:class "w-16"} "%")
|
||||||
(com/data-grid-header {:class "w-16"})]
|
(com/data-grid-header {:class "w-16"})]
|
||||||
:id "transaction-rule-account-table"}
|
:id "transaction-rule-account-table"}
|
||||||
(when @fc/*current*
|
(when (fc/field-value)
|
||||||
(doall (for [tra fc/*current*]
|
(doall (for [tra fc/*current*]
|
||||||
(fc/with-cursor tra
|
(fc/with-cursor tra
|
||||||
(transaction-rule-account-row* entity tra)))))
|
(transaction-rule-account-row* entity tra)))))
|
||||||
|
|||||||
@@ -14,14 +14,19 @@
|
|||||||
:refer [wrap-admin wrap-client-redirect-unauthenticated]]
|
:refer [wrap-admin wrap-client-redirect-unauthenticated]]
|
||||||
[auto-ap.ssr-routes :as ssr-routes]
|
[auto-ap.ssr-routes :as ssr-routes]
|
||||||
[auto-ap.ssr.components :as com]
|
[auto-ap.ssr.components :as com]
|
||||||
|
[auto-ap.ssr.form-cursor :as fc]
|
||||||
[auto-ap.ssr.grid-page-helper :as helper]
|
[auto-ap.ssr.grid-page-helper :as helper]
|
||||||
|
[auto-ap.ssr.hx :as hx]
|
||||||
|
[auto-ap.ssr.nested-form-params :refer [wrap-nested-form-params]]
|
||||||
[auto-ap.ssr.svg :as svg]
|
[auto-ap.ssr.svg :as svg]
|
||||||
[auto-ap.ssr.utils
|
[auto-ap.ssr.utils
|
||||||
:refer [apply-middleware-to-all-handlers
|
:refer [apply-middleware-to-all-handlers
|
||||||
entity-id
|
entity-id
|
||||||
forced-vector
|
|
||||||
html-response
|
html-response
|
||||||
|
many-entity
|
||||||
ref->enum-schema
|
ref->enum-schema
|
||||||
|
ref->select-options
|
||||||
|
wrap-form-4xx-2
|
||||||
wrap-schema-decode]]
|
wrap-schema-decode]]
|
||||||
[auto-ap.time :as atime]
|
[auto-ap.time :as atime]
|
||||||
[bidi.bidi :as bidi]
|
[bidi.bidi :as bidi]
|
||||||
@@ -29,7 +34,9 @@
|
|||||||
[clojure.string :as str]
|
[clojure.string :as str]
|
||||||
[config.core :refer [env]]
|
[config.core :refer [env]]
|
||||||
[datomic.api :as dc]
|
[datomic.api :as dc]
|
||||||
[malli.core :as mc]))
|
[hiccup2.core :as hiccup]
|
||||||
|
[malli.core :as mc]
|
||||||
|
[clj-time.format :as f]))
|
||||||
|
|
||||||
(defn filters [request]
|
(defn filters [request]
|
||||||
[:form {"hx-trigger" "change delay:500ms, keyup changed from:.hot-filter delay:1000ms"
|
[:form {"hx-trigger" "change delay:500ms, keyup changed from:.hot-filter delay:1000ms"
|
||||||
@@ -258,79 +265,146 @@
|
|||||||
}
|
}
|
||||||
:session {:identity (dissoc (auth/user->jwt user "FAKE_TOKEN")
|
:session {:identity (dissoc (auth/user->jwt user "FAKE_TOKEN")
|
||||||
:exp)}}))
|
:exp)}}))
|
||||||
|
(defn client-row* [client]
|
||||||
|
(com/data-grid-row (-> {:x-ref "p"
|
||||||
|
:data-key "show"
|
||||||
|
:x-data (hx/json {:show (boolean (not (fc/field-value (:new? client))))})}
|
||||||
|
hx/alpine-mount-then-appear)
|
||||||
|
(com/data-grid-cell {}
|
||||||
|
(com/validated-field {:errors (fc/field-errors (:db/id fc/*current*))}
|
||||||
|
(com/typeahead-2 {:name (fc/field-name (:db/id fc/*current*))
|
||||||
|
:class "w-full"
|
||||||
|
:url (bidi/path-for ssr-routes/only-routes
|
||||||
|
:company-search)
|
||||||
|
:value (fc/field-value)
|
||||||
|
|
||||||
|
|
||||||
|
:value-fn :db/id ;; TODO better hydration
|
||||||
|
:content-fn (fn [value]
|
||||||
|
(:client/name (dc/pull (dc/db conn) [:client/name]
|
||||||
|
(or (:db/id value)
|
||||||
|
value))))
|
||||||
|
:size :small})))
|
||||||
|
(com/data-grid-cell {:class "align-top"}
|
||||||
|
(com/a-icon-button {"@click.prevent.stop" "show=false; setTimeout(() => $refs.p.remove(), 500)"} svg/x))))
|
||||||
|
|
||||||
|
(defn dialog* [{:keys [entity form-params form-errors]}]
|
||||||
|
(fc/start-form
|
||||||
|
entity form-errors
|
||||||
|
(com/modal
|
||||||
|
{}
|
||||||
|
[:form#edit-form (merge {:hx-ext "response-targets"
|
||||||
|
:hx-put (str (bidi/path-for ssr-routes/only-routes
|
||||||
|
:user-edit-save
|
||||||
|
:request-method :put))
|
||||||
|
:hx-swap "outerHTML swap:300ms"
|
||||||
|
:hx-target-400 "#form-errors .error-content"
|
||||||
|
:class "w-full"}
|
||||||
|
form-params)
|
||||||
|
[:fieldset {:class "hx-disable"}
|
||||||
|
(com/modal-card
|
||||||
|
{}
|
||||||
|
[:div.flex [:div.p-2 "User"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600 (:user/name entity)]]
|
||||||
|
[:div.space-y-6
|
||||||
|
(fc/with-field :db/id
|
||||||
|
(com/hidden {:name (fc/field-name)
|
||||||
|
:value (fc/field-value)}))
|
||||||
|
(fc/with-field :user/role
|
||||||
|
(com/validated-field {:label "Role"
|
||||||
|
:errors (fc/field-errors)}
|
||||||
|
(com/select {:name (fc/field-name)
|
||||||
|
:class "w-36"
|
||||||
|
:autofocus true
|
||||||
|
:value (some->> (fc/field-value) name)
|
||||||
|
:options (ref->select-options "user-role")})))
|
||||||
|
(fc/with-field :user/clients
|
||||||
|
(com/validated-field {:label "Clients"}
|
||||||
|
(com/data-grid {:headers [(com/data-grid-header {} "Client")
|
||||||
|
(com/data-grid-header {} )]
|
||||||
|
:id "client-table"}
|
||||||
|
(doall (for [client fc/*current*]
|
||||||
|
(fc/with-cursor client
|
||||||
|
(client-row* client))))
|
||||||
|
(com/data-grid-row
|
||||||
|
{:class "new-row"}
|
||||||
|
(com/data-grid-cell {:colspan 2
|
||||||
|
:class "bg-gray-100"}
|
||||||
|
[:div.flex.justify-center
|
||||||
|
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
|
||||||
|
:user-client-new)
|
||||||
|
:color :secondary
|
||||||
|
:hx-include "#edit-form"
|
||||||
|
:hx-vals (hiccup/raw "js:{index: countRows(\"#client-table\")}")
|
||||||
|
:hx-target "#edit-form .new-row"
|
||||||
|
:hx-swap "beforebegin"}
|
||||||
|
"New override")])))
|
||||||
|
))
|
||||||
|
[:div#form-errors [:span.error-content]]]
|
||||||
|
[:div
|
||||||
|
[:div [:div#form-errors (when (:errors fc/*form-errors*)
|
||||||
|
[:span.error-content
|
||||||
|
(com/errors {:errors (:errors fc/*form-errors*)})])]]
|
||||||
|
(com/validated-save-button {:errors (seq form-errors)}
|
||||||
|
"Save user")])]])))
|
||||||
|
|
||||||
|
;; TODO rename edit-form or make it generic
|
||||||
(defn user-edit-save [{:keys [form-params identity] :as request}]
|
(defn user-edit-save [{:keys [form-params identity] :as request}]
|
||||||
(let [_ @(dc/transact conn [[:upsert-entity form-params]])
|
(let [_ @(dc/transact conn [[:upsert-entity form-params]])
|
||||||
user (some-> form-params :db/id (#(dc/pull (dc/db conn) default-read %)))]
|
user (some-> form-params :db/id (#(dc/pull (dc/db conn) default-read %)))]
|
||||||
|
|
||||||
(html-response
|
(html-response
|
||||||
(row* identity user {:flash? true})
|
(row* identity user {:flash? true})
|
||||||
:headers {"hx-trigger" "modalclose"
|
:headers {"hx-trigger" "modalclose"
|
||||||
"hx-retarget" (format "#user-table tr[data-id=\"%d\"]" (:db/id user))})))
|
"hx-retarget" (format "#user-table tr[data-id=\"%d\"]" (:db/id user))})))
|
||||||
|
|
||||||
|
(defn user-save-error [request]
|
||||||
|
;; TODO hydration
|
||||||
|
;; TODO consistency of error handling and passing, on all form examples
|
||||||
|
(let [entity (some-> request :last-form)]
|
||||||
|
(html-response (dialog* {:entity entity
|
||||||
|
:form-errors (:form-errors request)})
|
||||||
|
:headers {"hx-retarget" "#edit-form fieldset"
|
||||||
|
"hx-reselect" "#edit-form fieldset"})))
|
||||||
|
|
||||||
(defn user-edit-dialog [request]
|
(defn user-edit-dialog [request]
|
||||||
(let [user (some-> request
|
(let [user (some-> request
|
||||||
:route-params
|
:route-params
|
||||||
:db/id
|
:db/id
|
||||||
(#(dc/pull (dc/db conn) default-read %)))]
|
(#(dc/pull (dc/db conn) default-read %)))]
|
||||||
(html-response
|
(html-response
|
||||||
(com/modal
|
(dialog* {:entity user
|
||||||
{}
|
:form-errors {}})
|
||||||
[:form {:hx-ext "response-targets"
|
|
||||||
:hx-put (str (bidi/path-for ssr-routes/only-routes
|
|
||||||
:user-edit-save
|
|
||||||
:request-method :put))
|
|
||||||
:hx-swap "outerHTML swap:300ms"
|
|
||||||
:hx-target-400 "#form-errors .error-content"
|
|
||||||
:class "w-full"}
|
|
||||||
[:fieldset {:class "hx-disable"}
|
|
||||||
(com/modal-card
|
|
||||||
{}
|
|
||||||
[:div.flex [:div.p-2 "User"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600 (:user/name user)]]
|
|
||||||
[:div.space-y-6
|
|
||||||
(com/hidden {:name "db/id"
|
|
||||||
:value (:db/id user)})
|
|
||||||
(com/field {:label "Role"}
|
|
||||||
(com/select {:name "user/role"
|
|
||||||
:class "w-36"
|
|
||||||
:autofocus true
|
|
||||||
:id "role"
|
|
||||||
:value (name (:user/role user))
|
|
||||||
:options [["none" "None"]
|
|
||||||
["power-user" "Power user"]
|
|
||||||
["manager" "Manager"]
|
|
||||||
["admin" "Admin"]
|
|
||||||
["user" "User"]]}))
|
|
||||||
(com/field {:label "Clients"}
|
|
||||||
(com/typeahead {:name "user/clients"
|
|
||||||
:class "w-full"
|
|
||||||
:multiple "multiple"
|
|
||||||
:url (bidi/path-for ssr-routes/only-routes
|
|
||||||
:company-search)
|
|
||||||
:id "clients"
|
|
||||||
:value (map
|
|
||||||
(fn [client]
|
|
||||||
[(:db/id client) (:client/name client)])
|
|
||||||
(:user/clients user))
|
|
||||||
:size :small}))
|
|
||||||
[:div#form-errors [:span.error-content]]]
|
|
||||||
(com/validated-save-button {:errors []} ;; TODO
|
|
||||||
"Save user"))]])
|
|
||||||
:headers {"hx-trigger" "modalopen"})))
|
:headers {"hx-trigger" "modalopen"})))
|
||||||
|
|
||||||
|
(defn new-client [{ {:keys [index]} :query-params}]
|
||||||
|
(let [index (or index 0)
|
||||||
|
account {:user/clients (conj (into [] (repeat index {}))
|
||||||
|
{:db/id nil
|
||||||
|
:new? true})}] ;; TODO schema decode is not working
|
||||||
|
(html-response
|
||||||
|
(fc/start-form account []
|
||||||
|
(fc/with-cursor (get-in fc/*current* [:user/clients index])
|
||||||
|
(client-row* fc/*current*))))))
|
||||||
|
|
||||||
(def key->handler
|
(def key->handler
|
||||||
(apply-middleware-to-all-handlers
|
(apply-middleware-to-all-handlers
|
||||||
{:users (helper/page-route grid-page)
|
{:users (helper/page-route grid-page)
|
||||||
:user-table (helper/table-route grid-page)
|
:user-table (helper/table-route grid-page)
|
||||||
:user-edit-save (-> user-edit-save
|
:user-edit-save (-> user-edit-save
|
||||||
(wrap-schema-decode
|
(wrap-schema-decode :form-schema (mc/schema
|
||||||
:form-schema (mc/schema
|
[:map
|
||||||
[:map
|
[:db/id entity-id]
|
||||||
[:db/id entity-id]
|
[:user/clients {:optional true}
|
||||||
[:user/clients {:optional true}
|
[:maybe
|
||||||
[:maybe
|
(many-entity {} [:db/id entity-id])]]
|
||||||
(forced-vector entity-id)]]
|
[:user/role (ref->enum-schema "user-role")]]))
|
||||||
[:user/role (ref->enum-schema "user-role")]])))
|
(wrap-nested-form-params)
|
||||||
|
(wrap-form-4xx-2 user-save-error))
|
||||||
|
:user-client-new (-> new-client
|
||||||
|
(wrap-schema-decode :query-schema [:map
|
||||||
|
[:index {:optional true
|
||||||
|
:default 0} [nat-int? {:default 0}]]]))
|
||||||
:user-edit-dialog (-> user-edit-dialog
|
:user-edit-dialog (-> user-edit-dialog
|
||||||
(wrap-schema-decode
|
(wrap-schema-decode
|
||||||
:route-schema (mc/schema [:map [:db/id entity-id]])))
|
:route-schema (mc/schema [:map [:db/id entity-id]])))
|
||||||
|
|||||||
@@ -16,6 +16,7 @@
|
|||||||
["/inspect/" [#"\d+" :entity-id] #"/?"] :admin-history-inspect}
|
["/inspect/" [#"\d+" :entity-id] #"/?"] :admin-history-inspect}
|
||||||
"/user" {"" {:get :users
|
"/user" {"" {:get :users
|
||||||
:put :user-edit-save}
|
:put :user-edit-save}
|
||||||
|
"/client/new" :user-client-new
|
||||||
"/table" :user-table
|
"/table" :user-table
|
||||||
"/impersonate" :user-impersonate
|
"/impersonate" :user-impersonate
|
||||||
[[#"\d+" :db/id] "/edit"] {:get :user-edit-dialog}}
|
[[#"\d+" :db/id] "/edit"] {:get :user-edit-dialog}}
|
||||||
|
|||||||
Reference in New Issue
Block a user