Made accounts page look great

This commit is contained in:
2023-10-23 10:57:35 -07:00
parent 2f05197f5b
commit 825443ef2c
5 changed files with 337 additions and 265 deletions

View File

@@ -7,6 +7,7 @@
audit-transact audit-transact
conn conn
merge-query merge-query
pull-attr
pull-many pull-many
query2]] query2]]
[auto-ap.query-params :as query-params] [auto-ap.query-params :as query-params]
@@ -17,17 +18,19 @@
[auto-ap.ssr.components :as com] [auto-ap.ssr.components :as com]
[auto-ap.ssr.form-cursor :as fc] [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.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
field-validation-error
form-validation-error
html-response html-response
many-entity many-entity
ref->enum-schema ref->enum-schema
ref->select-options ref->select-options
temp-id temp-id
validation-error
wrap-form-4xx-2 wrap-form-4xx-2
wrap-schema-decode]] wrap-schema-decode]]
[bidi.bidi :as bidi] [bidi.bidi :as bidi]
@@ -181,7 +184,28 @@
(= :post request-method) (assoc :db/id "new")) (= :post request-method) (assoc :db/id "new"))
_ (cond (= :post request-method) _ (cond (= :post request-method)
(when-let [extant (seq (dc/q '[:find ?x :in $ ?nc :where [?x :account/numeric-code ?nc]] (dc/db conn) (:account/numeric-code entity)))] (when-let [extant (seq (dc/q '[:find ?x :in $ ?nc :where [?x :account/numeric-code ?nc]] (dc/db conn) (:account/numeric-code entity)))]
(validation-error (format "The code %d is already in use." (:account/numeric-code entity))))) (field-validation-error (format "The code %d is already in use." (:account/numeric-code entity))
[:account/numeric-code]
:form form-params))
)
;; TODO the following would work better if the schema was hydrated automatically with needed values
_ (some->> form-params
:account/client-overrides
(group-by :account-client-override/client)
(filter (fn [[client overrides]]
(> (count overrides) 1)))
(map first)
seq
(#(form-validation-error (format "Client(s) %s have more than one override."
(str/join ", "
(map (fn [client]
(format "'%s'" (pull-attr (dc/db conn)
:client/name
(-> client)))
) %)))
:form form-params))
)
{:keys [tempids]} (audit-transact [[:upsert-entity (cond-> entity {:keys [tempids]} (audit-transact [[:upsert-entity (cond-> entity
(:account/numeric-code entity) (assoc :account/code (str (:account/numeric-code entity))))]] (:account/numeric-code entity) (assoc :account/code (str (:account/numeric-code entity))))]]
(:identity request)) (:identity request))
@@ -213,8 +237,18 @@
;; TODO use cursor ;; TODO use cursor
;; TODO index based list not dbid ;; TODO index based list not dbid
;; TODO lots of weird edge cases with indexes
;; for example, what happens when you have 0, 1, 2, but then delete 1?
;; what happens when you delete 2 but then add another one?
;; preference is that the field parsing logic does better grouping of what
;; goes with what, building index on the server side
;; not needing to pass index in
(defn client-override* [override] (defn client-override* [override]
[:div.flex.gap-2.mb-2.client-override [:div.flex.gap-2.mb-2.client-override (-> {"x-ref" "p"
:data-key "show"
}
hx/alpine-mount-then-appear)
[:div.w-96 [: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)
@@ -226,15 +260,17 @@
:url (bidi/path-for ssr-routes/only-routes :url (bidi/path-for ssr-routes/only-routes
:company-search) :company-search)
:value (fc/field-value) :value (fc/field-value)
:value-fn :db/id ;; TODO hydration something here :value-fn (some-fn :db/id identity) ;; TODO better hydration
:content-fn :client/name})))] :content-fn (fn [value]
(:client/name (cond->> value
(nat-int? value) (dc/pull (dc/db conn) [:client/name]))))})))]
(fc/with-field :account-client-override/name (fc/with-field :account-client-override/name
[:div.w-96 [:div.w-96
(com/validated-field {:errors (fc/field-errors)} (com/validated-field {:errors (fc/field-errors)}
(com/text-input {:name (fc/field-name) (com/text-input {:name (fc/field-name)
:class "w-full" :class "w-full"
:value (fc/field-value)}))]) :value (fc/field-value)}))])
[:div (com/a-icon-button {"_" (hiccup/raw "on click halt the event then transition the closest <.client-override />'s opacity to 0 then remove closest <.client-override />")} svg/x)]]) [:div (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
@@ -246,9 +282,14 @@
;; componentize ;; componentize
;; ensure all dependency oriented stuff works the same way ;; ensure all dependency oriented stuff works the same way
;; make sure that "new row index" stuff works ok ;; make sure that "new row index" stuff works ok
;; TODO figure out when hx-targets are decided
;; ensure that adding a new one results in a new row
(defn dialog* [& {:keys [account form-params form-errors]}] (defn dialog* [& {:keys [entity form-params form-errors]}]
(fc/start-form entity form-errors
[:div {:x-data (hx/json {"accountName" (:account/name entity)
"accountCode" (:account/numeric-code entity)})}
(com/modal (com/modal
{} {}
[:form#edit-form (merge {:hx-ext "response-targets" [:form#edit-form (merge {:hx-ext "response-targets"
@@ -258,28 +299,32 @@
[:fieldset {:class "hx-disable"} [:fieldset {:class "hx-disable"}
(com/modal-card (com/modal-card
{} {}
[:div.flex [:div.p-2 "Account"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600 (:account/numeric-code account) " - " (:account/name account)]] [:div.flex [:div.p-2 "Account"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600
[:span {:x-text "accountCode"}]
(fc/start-form " - "
account form-errors [:span {:x-text "accountName"}]]]
[:div.space-y-1 [:div.space-y-1
(when-let [id (:db/id account)] (when-let [id (:db/id entity)]
(com/hidden {:name "db/id" (com/hidden {:name "db/id"
:value id})) :value id}))
(fc/with-field :account/numeric-code (fc/with-field :account/numeric-code
(when (nil? (fc/field-value)) (if (nil? (:db/id entity))
(com/validated-field {:label "Numeric code" (com/validated-field {:label "Numeric code"
:errors (fc/field-errors)} :errors (fc/field-errors)}
(com/text-input {:name (fc/field-name) (com/text-input {:name (fc/field-name)
:x-model "accountCode"
:autofocus true :autofocus true
:class "w-32"})))) :class "w-32"}))
(com/hidden {:name (fc/field-name)
:value (fc/field-value)})))
(fc/with-field :account/name (fc/with-field :account/name
(com/validated-field {:label "Name" (com/validated-field {:label "Name"
:errors (fc/field-errors)} :errors (fc/field-errors)}
(com/text-input {:name (fc/field-name) (com/text-input {:name (fc/field-name)
:autofocus true :x-model "accountName"
:class "w-32"
:class "w-64"
:value (fc/field-value)}))) :value (fc/field-value)})))
(fc/with-field :account/type (fc/with-field :account/type
(com/validated-field {:label "Account Type" (com/validated-field {:label "Account Type"
@@ -296,6 +341,7 @@
:class "w-16" :class "w-16"
:value (fc/field-value)}))) :value (fc/field-value)})))
[:div.flex.flex-wrap.gap-4
(fc/with-field :account/invoice-allowance (fc/with-field :account/invoice-allowance
(com/validated-field {:label "Invoice Allowance" (com/validated-field {:label "Invoice Allowance"
:errors (fc/field-errors)} :errors (fc/field-errors)}
@@ -309,7 +355,7 @@
(com/select {:name (fc/field-name) (com/select {:name (fc/field-name)
:class "w-36" :class "w-36"
:value (some-> (fc/field-value) name) :value (some-> (fc/field-value) name)
:options (ref->select-options "allowance")}))) :options (ref->select-options "allowance")})))]
(fc/with-field :account/applicability (fc/with-field :account/applicability
(com/validated-field {:label "Applicability" (com/validated-field {:label "Applicability"
:errors (fc/field-errors)} :errors (fc/field-errors)}
@@ -331,9 +377,13 @@
:hx-target "#client-overrides" :hx-target "#client-overrides"
:hx-swap "beforeend"} :hx-swap "beforeend"}
"New override") "New override")
[:div#form-errors [:span.error-content]]]) ]
(com/validated-save-button {:errors []} ;; TODO [:div
"Save account"))]])) [: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 account")])]])]))
(defn new-client-override [{ {:keys [index]} :query-params}] (defn new-client-override [{ {:keys [index]} :query-params}]
(let [index (or index 0) (let [index (or index 0)
@@ -346,14 +396,15 @@
(defn account-edit-dialog [request] (defn account-edit-dialog [request]
(let [account (some-> request :route-params :db/id (#(dc/pull (dc/db conn) default-read %)))] (let [account (some-> request :route-params :db/id (#(dc/pull (dc/db conn) default-read %)))]
(html-response (dialog* :account account (html-response (dialog* :entity account
:form-params {:hx-put (str (bidi/path-for ssr-routes/only-routes :form-params {:hx-put (str (bidi/path-for ssr-routes/only-routes
:admin-account-edit-save))}) :admin-account-edit-save))})
:headers {"hx-trigger" "modalopen"}))) :headers {"hx-trigger" "modalopen"})))
(defn account-new-dialog [_] (defn account-new-dialog [_]
(html-response (dialog* :account nil (html-response (dialog* :entity {}
:form-errors {}
:form-params {:hx-post (str (bidi/path-for ssr-routes/only-routes :form-params {:hx-post (str (bidi/path-for ssr-routes/only-routes
:admin-account-new-save))}) :admin-account-new-save))})
:headers {"hx-trigger" "modalopen"})) :headers {"hx-trigger" "modalopen"}))
@@ -362,7 +413,7 @@
;; TODO hydration ;; TODO hydration
;; TODO consistency of error handling and passing, on all form examples ;; TODO consistency of error handling and passing, on all form examples
(let [entity (some-> request :last-form)] (let [entity (some-> request :last-form)]
(html-response (dialog* :account entity (html-response (dialog* :entity entity
:form-errors (:form-errors request) :form-errors (:form-errors request)
:form-params (if (:db/id entity) :form-params (if (:db/id entity)
{:hx-put (str (bidi/path-for ssr-routes/only-routes {:hx-put (str (bidi/path-for ssr-routes/only-routes

View File

@@ -401,6 +401,7 @@
;; TODO dialog is no longer closeable ;; TODO dialog is no longer closeable
(defn dialog* [& {:keys [entity form-params form-errors]}] (defn dialog* [& {:keys [entity form-params form-errors]}]
(fc/start-form entity form-errors
(com/modal (com/modal
{:modal-class "max-w-2xl"} {:modal-class "max-w-2xl"}
@@ -419,7 +420,6 @@
:x-data (hx/json {:clientId (or (:db/id (:transaction-rule/client entity)) :x-data (hx/json {:clientId (or (:db/id (:transaction-rule/client entity))
(:transaction-rule/client entity))})} (:transaction-rule/client entity))})}
(fc/start-form entity form-errors
[:div.space-y-1 [:div.space-y-1
(when-let [id (:db/id entity)] (when-let [id (:db/id entity)]
(com/hidden {:name "db/id" (com/hidden {:name "db/id"
@@ -580,10 +580,13 @@
:size :small :size :small
:orientation :horizontal}))) :orientation :horizontal})))
;; TODO componentize
]]
[:div
[:div#form-errors (when (:errors fc/*form-errors*) [:div#form-errors (when (:errors fc/*form-errors*)
[:span.error-content [:span.error-content
(com/errors {:errors (:errors fc/*form-errors*)})])]])] (com/errors {:errors (:errors fc/*form-errors*)})])]
(com/validated-save-button {:errors form-errors} "Save rule"))])) (com/validated-save-button {:errors form-errors} "Save rule")])])))
;; TODO Should forms have some kind of helper to render an individual field? saving ;; TODO Should forms have some kind of helper to render an individual field? saving

View File

@@ -134,7 +134,9 @@
(defn a-icon-button- [params & children] (defn a-icon-button- [params & children]
(into (into
[:a (update params :class str " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100") [:a (-> params (update :class str " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100"
)
(update :href #(or % "")))
[:div.h-4.w-4 children]])) [:div.h-4.w-4 children]]))
(defn save-button- [params & children] (defn save-button- [params & children]

View File

@@ -24,3 +24,17 @@
"x-transition:enter" "transition duration-500" "x-transition:enter" "transition duration-500"
"x-transition:enter-start" "opacity-0" "x-transition:enter-start" "opacity-0"
"x-transition:enter-end" "opacity-100")) "x-transition:enter-end" "opacity-100"))
(defn alpine-disappear [m]
(assoc m
"x-transition:leave" "transition duration-500"
"x-transition:leave-start" "opacity-100"
"x-transition:leave-end" "opacity-0"))
(defn alpine-mount-then-appear [{:keys [data-key] :as params}]
(merge (-> {"x-data" (json {data-key false})
"x-init" (format "$nextTick(() => %s=true)" (name data-key))
"x-show" (name data-key)}
alpine-appear
alpine-disappear)
(dissoc params :data-key)))

View File

@@ -146,6 +146,8 @@
(defn keyword->str [k] (defn keyword->str [k]
(subs (str k) 1)) (subs (str k) 1))
;; TODO need to remove or at least remove usages as the form is not included
(defn validation-error [m & {:as data}] (defn validation-error [m & {:as data}]
(throw+ (ex-info m (merge data {:type :validation})))) (throw+ (ex-info m (merge data {:type :validation}))))