consistent user experience with new client

This commit is contained in:
2023-10-23 11:59:14 -07:00
parent dc1fefd30c
commit be9d777a17
4 changed files with 184 additions and 92 deletions

View File

@@ -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*)

View File

@@ -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)))))

View File

@@ -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]])))

View File

@@ -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}}