From 9ddbd31cc8ddea1529cc6e23efc03ccb5eb5bb96 Mon Sep 17 00:00:00 2001 From: Bryce Date: Sat, 21 Oct 2023 13:04:42 -0700 Subject: [PATCH] almost perfect user experience --- resources/public/output.css | 9 ++++ .../auto_ap/ssr/admin/transaction_rules.clj | 45 ++++++++++--------- src/clj/auto_ap/ssr/components/buttons.clj | 17 ++++--- src/clj/auto_ap/ssr/components/radio.clj | 2 +- src/clj/auto_ap/ssr/ui.clj | 2 +- 5 files changed, 45 insertions(+), 30 deletions(-) diff --git a/resources/public/output.css b/resources/public/output.css index c83024f1..72b2faea 100644 --- a/resources/public/output.css +++ b/resources/public/output.css @@ -2094,6 +2094,11 @@ input:checked + .toggle-bg { background-color: rgb(253 246 178 / var(--tw-bg-opacity)); } +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -3554,6 +3559,10 @@ input:checked + .toggle-bg { max-width: 56rem; } + .sm\:max-w-2xl { + max-width: 42rem; + } + .sm\:rounded-lg { border-radius: 0.5rem; } diff --git a/src/clj/auto_ap/ssr/admin/transaction_rules.clj b/src/clj/auto_ap/ssr/admin/transaction_rules.clj index 2e5d8353..50ddec11 100644 --- a/src/clj/auto_ap/ssr/admin/transaction_rules.clj +++ b/src/clj/auto_ap/ssr/admin/transaction_rules.clj @@ -55,11 +55,6 @@ ;; as to which one to generate. -;; TODO lots of escaping concerns (urls in javascript), all these weird name filters - -;; TODO better generation of names? - - (defn filters [request] [:form {"hx-trigger" "change delay:500ms, keyup changed from:.hot-filter delay:1000ms" "hx-get" (bidi/path-for ssr-routes/only-routes @@ -411,7 +406,7 @@ ;; TODO dialog is no longer closeable (defn dialog* [& {:keys [entity form-params form-errors]}] (com/modal - {:modal-class "max-w-4xl"} + {:modal-class "max-w-2xl"} (com/modal-card {} [:div.flex [:div.p-2 "Transaction Rule"]] @@ -516,14 +511,14 @@ :placeholder "Search..." :url (bidi/path-for ssr-routes/only-routes :vendor-search) :id (str "form-vendor-search") + :class "w-96" :value (fc/field-value) :value-fn (some-fn :db/id identity) :content-fn (some-fn :vendor/name #(pull-attr (dc/db conn) :vendor/name %))})])) (fc/with-field :transaction-rule/accounts (list - (com/data-grid {:headers [(com/data-grid-header {} - "Account") + (com/data-grid {:headers [(com/data-grid-header {} "Account") (com/data-grid-header {:class "w-32"} "Location") (com/data-grid-header {:class "w-16"} "%") (com/data-grid-header {:class "w-16"})] @@ -531,24 +526,33 @@ (when @fc/*current* (doall (for [tra fc/*current*] (fc/with-cursor tra - (transaction-rule-account-row* entity tra)))))) + (transaction-rule-account-row* entity tra))))) + (com/data-grid-row + {:class "new-row"} + (com/data-grid-cell {:colspan 4 + :class "bg-gray-100"} + [:div.flex.justify-center + + (com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes + :admin-transaction-rule-new-account) + :color :secondary + :hx-include "#edit-form" + :hx-ext "rename-params" + :hx-rename-params-ex (cheshire/generate-string {"transaction-rule/client" "client-id" + "index" "index"}) + :hx-vals (hiccup/raw "js:{index: countRows(\"#transaction-rule-account-table\")}") + :hx-target "#edit-form .new-row" + :hx-swap "beforebegin"} + "New account")]))) (com/errors {:errors (fc/field-errors)}))) - (com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes - :admin-transaction-rule-new-account) - :hx-include "#edit-form" - :hx-ext "rename-params" - :hx-rename-params-ex (cheshire/generate-string {"transaction-rule/client" "client-id" - "index" "index"}) - :hx-vals (hiccup/raw "js:{index: countRows(\"#transaction-rule-account-table\")}") - :hx-target "#transaction-rule-account-table tbody" - :hx-swap "beforeend"} - "New account") + (fc/with-field :transaction-rule/transaction-approval-status (com/validated-field {:label "Approval status" :errors (fc/field-errors)} (com/radio {:options (ref->radio-options "transaction-approval-status") :value (fc/field-value) :name (fc/field-name) + :size :small :orientation :horizontal}))) [:div#form-errors (when (:errors fc/*form-errors*) @@ -568,7 +572,7 @@ (let [index (or index 0) ;; TODO schema decode is not working transaction-rule {:transaction-rule/client (dc/pull (dc/db conn) '[:client/name :client/locations :db/id] client-id) - :transaction-rule/accounts (conj (into [] (repeat (inc index) {} )) + :transaction-rule/accounts (conj (into [] (repeat index {} )) {:db/id (str (java.util.UUID/randomUUID)) :transaction-rule-account/location "Shared"})}] (html-response @@ -582,7 +586,6 @@ ;; TODO check to see if it should be called "Shared" or "shared" for the value -;; TODO blank location is being allowed ;; TODO hydrate nested types more easily. make it easy to hydrate so you don't do weird sometimes pulls ;; TODO is it possible to make it easy to get a virtual cursor in the case of adding a new row? setting up ;; fake data doesn't feel right - maybe have a "prelude" that's dynamic diff --git a/src/clj/auto_ap/ssr/components/buttons.clj b/src/clj/auto_ap/ssr/components/buttons.clj index 40574e20..9edd6529 100644 --- a/src/clj/auto_ap/ssr/components/buttons.clj +++ b/src/clj/auto_ap/ssr/components/buttons.clj @@ -98,13 +98,16 @@ (into [:div.htmx-indicator-hidden.inline-flex.gap-2.items-center.justify-center] children)]) (defn a-button- [params & children] - [:a (update params - :class #(cond-> % - true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center hover:scale-105 transition duration-100 justify-center") - (= :secondary (:color params)) (str " text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700") - (= :primary (:color params)) (str " text-white bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ") - (nil? (:color params)) - (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700"))) + [:a (-> params + (update :class #(cond-> % + true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center hover:scale-105 transition duration-100 justify-center") + (= :secondary (:color params)) (str " text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700") + (= :primary (:color params)) (str " text-white bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ") + (nil? (:color params)) + (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700") + )) + (assoc :tabindex 0) + (assoc :href (:href params "#"))) [:div.htmx-indicator.flex.items-center (svg/spinner {:class "inline w-4 h-4 text-white"}) [:div.ml-3 "Loading..."]] diff --git a/src/clj/auto_ap/ssr/components/radio.clj b/src/clj/auto_ap/ssr/components/radio.clj index bd27c9bb..17d9bf95 100644 --- a/src/clj/auto_ap/ssr/components/radio.clj +++ b/src/clj/auto_ap/ssr/components/radio.clj @@ -4,7 +4,7 @@ (defn radio- [{:keys [options name title size orientation] :or {size :medium} selected-value :value}] [:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title] [:ul {:class (cond-> "w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" - (= orientation :horizontal) (-> (hh/add-class "flex gap-8") + (= orientation :horizontal) (-> (hh/add-class "flex gap-2 flex-wrap") (hh/remove-wildcard ["w-" "rounded-lg" "border" "bg-"])))} (for [{:keys [value content]} options] [:li {:class (cond-> "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600" diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj index a32ba532..d2ef40b1 100644 --- a/src/clj/auto_ap/ssr/ui.clj +++ b/src/clj/auto_ap/ssr/ui.clj @@ -78,7 +78,7 @@ input[type=number] { "x-transition:leave-end" "!bg-opacity-0"} [:div.flex.place-items-center.place-content-center.w-full.h-full.p-12 - [:div {:class (str "w-full sm:max-w-4xl sm:rounded-lg overflow-scroll max-h-full sm:max-h-[90vh]") + [:div {:class (str "w-full sm:max-w-2xl sm:rounded-lg overflow-scroll max-h-full sm:max-h-[90vh]") "@click.outside" "open=false" "x-trap.inert.noscroll" "open" "x-trap.inert" "open"