improvements

This commit is contained in:
2023-10-22 21:00:04 -07:00
parent a6032e2be2
commit fc0392a235
9 changed files with 179 additions and 74 deletions

View File

@@ -1348,6 +1348,19 @@ input:checked + .toggle-bg {
height: 100vh; height: 100vh;
} }
.h-64 {
height: 16rem;
}
.h-min {
height: -moz-min-content;
height: min-content;
}
.h-\[90vh\] {
height: 90vh;
}
.max-h-96 { .max-h-96 {
max-height: 24rem; max-height: 24rem;
} }
@@ -1360,6 +1373,14 @@ input:checked + .toggle-bg {
max-height: 90vh; max-height: 90vh;
} }
.max-h-\[100vh\] {
max-height: 100vh;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.w-1\/2 { .w-1\/2 {
width: 50%; width: 50%;
} }
@@ -1433,6 +1454,23 @@ input:checked + .toggle-bg {
width: 100vw; width: 100vw;
} }
.w-min {
width: -moz-min-content;
width: min-content;
}
.w-8\/12 {
width: 66.666667%;
}
.w-6\/12 {
width: 50%;
}
.w-1\/4 {
width: 25%;
}
.max-w-2xl { .max-w-2xl {
max-width: 42rem; max-width: 42rem;
} }
@@ -1457,6 +1495,10 @@ input:checked + .toggle-bg {
max-width: 1024px; max-width: 1024px;
} }
.max-w-xs {
max-width: 20rem;
}
.flex-1 { .flex-1 {
flex: 1 1 0%; flex: 1 1 0%;
} }
@@ -1481,6 +1523,10 @@ input:checked + .toggle-bg {
flex-grow: 1; flex-grow: 1;
} }
.grow {
flex-grow: 1;
}
.basis-1\/4 { .basis-1\/4 {
flex-basis: 25%; flex-basis: 25%;
} }
@@ -1671,6 +1717,10 @@ input:checked + .toggle-bg {
place-items: center; place-items: center;
} }
.content-center {
align-content: center;
}
.items-start { .items-start {
align-items: flex-start; align-items: flex-start;
} }
@@ -1819,6 +1869,10 @@ input:checked + .toggle-bg {
overflow: hidden; overflow: hidden;
} }
.overflow-visible {
overflow: visible;
}
.overflow-scroll { .overflow-scroll {
overflow: scroll; overflow: scroll;
} }
@@ -1831,6 +1885,10 @@ input:checked + .toggle-bg {
overflow-y: auto; overflow-y: auto;
} }
.overflow-y-scroll {
overflow-y: scroll;
}
.truncate { .truncate {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -2208,6 +2266,11 @@ input:checked + .toggle-bg {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
} }
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.pb-2 { .pb-2 {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
@@ -3543,6 +3606,10 @@ input:checked + .toggle-bg {
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.sm\:m-12 {
margin: 3rem;
}
.sm\:block { .sm\:block {
display: block; display: block;
} }
@@ -3563,6 +3630,10 @@ input:checked + .toggle-bg {
padding: 1.5rem; padding: 1.5rem;
} }
.sm\:p-12 {
padding: 3rem;
}
.sm\:py-5 { .sm\:py-5 {
padding-top: 1.25rem; padding-top: 1.25rem;
padding-bottom: 1.25rem; padding-bottom: 1.25rem;

View File

@@ -21,8 +21,8 @@
[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
map->db-id-decoder map->db-id-decoder
ref->enum-schema ref->enum-schema
ref->select-options ref->select-options
@@ -135,16 +135,16 @@
:action-buttons (fn [request] :action-buttons (fn [request]
[(com/button {:hx-get (str (bidi/path-for ssr-routes/only-routes [(com/button {:hx-get (str (bidi/path-for ssr-routes/only-routes
:admin-account-new-dialog)) :admin-account-new-dialog))
:hx-target "#modal-holder" :hx-target "#modal-content"
:hx-swap "outerHTML" :hx-swap "innerHTML"
:color :primary} :color :primary}
"New Account")]) "New Account")])
:row-buttons (fn [request entity] :row-buttons (fn [request entity]
[(com/icon-button {:hx-get (str (bidi/path-for ssr-routes/only-routes [(com/icon-button {:hx-get (str (bidi/path-for ssr-routes/only-routes
:admin-account-edit-dialog :admin-account-edit-dialog
:db/id (:db/id entity))) :db/id (:db/id entity)))
:hx-target "#modal-holder" :hx-target "#modal-content"
:hx-swap "outerHTML"} :hx-swap "innerHTML"}
svg/pencil)]) svg/pencil)])
:breadcrumbs [[:a {:href (bidi/path-for ssr-routes/only-routes :breadcrumbs [[:a {:href (bidi/path-for ssr-routes/only-routes
:admin)} :admin)}
@@ -207,22 +207,26 @@
"account_client_override_id" (:db/id o)}))) "account_client_override_id" (:db/id o)})))
(html-response (html-response
(row* identity updated-account {:flash? true}) (row* identity updated-account {:flash? true})
:headers {"hx-trigger" "closeModal" :headers {"hx-trigger" "modalclose"
"hx-retarget" (format "#account-table tr[data-id=\"%d\"]" (:db/id updated-account))}))) "hx-retarget" (format "#account-table tr[data-id=\"%d\"]" (:db/id updated-account))})))
;; TODO use cursor
;; TODO index based list not dbid
(defn client-override* [override] (defn client-override* [override index]
[:div.flex.gap-2.mb-2.client-override [:div.flex.gap-2.mb-2.client-override
[:div.w-96 [:div.w-96
(com/typeahead {:name (format "account/client-overrides[%s][account-client-override/client]" (:db/id override)) (com/hidden {:name (format "account/client-overrides[%s][db/id]" index)
:placeholder "Search..." :value (:db/id override)})
:url (bidi/path-for ssr-routes/only-routes (com/typeahead-2 {:name (format "account/client-overrides[%s][account-client-override/client]" index)
:company-search) :placeholder "Search..."
:id (str "account-client-override-" (:db/id override)) :url (bidi/path-for ssr-routes/only-routes
:value [(:db/id (:account-client-override/client override)) :company-search)
(:client/name (:account-client-override/client override))]})] :id (str "account-client-override-" (:db/id override))
:value [(:db/id (:account-client-override/client override))
(:client/name (:account-client-override/client override))]})]
[:div.w-96 [:div.w-96
(com/text-input {:name (format "account/client-overrides[%s][account-client-override/name]" (:db/id override)) (com/text-input {:name (format "account/client-overrides[%s][account-client-override/name]" index)
:class "w-full" :class "w-full"
:value (:account-client-override/name override)})] :value (:account-client-override/name override)})]
[: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 {"_" (hiccup/raw "on click halt the event then transition the closest <.client-override />'s opacity to 0 then remove closest <.client-override />") } svg/x)]])
@@ -230,7 +234,7 @@
(defn dialog* [& {:keys [ account form-params]}] (defn dialog* [& {:keys [ account form-params]}]
(com/modal (com/modal
{:modal-class "max-w-4xl"} {}
[:form#edit-form (merge {:hx-ext "response-targets" [:form#edit-form (merge {:hx-ext "response-targets"
:hx-swap "outerHTML swap:300ms" :hx-swap "outerHTML swap:300ms"
:hx-target-400 "#form-errors .error-content"} :hx-target-400 "#form-errors .error-content"}
@@ -282,33 +286,37 @@
:options (ref->select-options "account-applicability")})) :options (ref->select-options "account-applicability")}))
(com/field {:label "Client Overrides" :id "client-overrides"} (com/field {:label "Client Overrides" :id "client-overrides"}
(for [override (:account/client-overrides account)] (for [[override index] (map vector (:account/client-overrides account) (range))]
(client-override* override))) (client-override* override index)))
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes (com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
:admin-account-client-override-new) :admin-account-client-override-new)
:hx-target "#client-overrides" :hx-vals (hiccup/raw "js:{index: document.getElementById('client-overrides').children.length - 1}")
:hx-swap "beforeend"} :hx-target "#client-overrides"
:hx-swap "beforeend"}
"New override") "New override")
[:div#form-errors [:span.error-content]] [:div#form-errors [:span.error-content]]
(com/button {:color :primary :form "edit-form" :type "submit"} ]
"Save")] (com/validated-save-button {:errors []}
[:div])]])) "Save account"))]]))
(defn new-client-override [_] (defn new-client-override [{ {:keys [index]} :query-params}]
(html-response (html-response
(client-override* {:db/id (str (java.util.UUID/randomUUID))}))) (client-override* {:db/id (str (java.util.UUID/randomUUID))}
index)))
(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* :account 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"})))
(defn account-new-dialog [_] (defn account-new-dialog [_]
(html-response (dialog* :account nil (html-response (dialog* :account nil
: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"}))
(def account-schema (mc/schema (def account-schema (mc/schema
[:map [:map
@@ -320,20 +328,23 @@
[:account/applicability (ref->enum-schema "account-applicability")] [:account/applicability (ref->enum-schema "account-applicability")]
[:account/invoice-allowance (ref->enum-schema "allowance")] [:account/invoice-allowance (ref->enum-schema "allowance")]
[:account/vendor-allowance (ref->enum-schema "allowance")] [:account/vendor-allowance (ref->enum-schema "allowance")]
[:account/client-overrides {:decode/json map->db-id-decoder [:account/client-overrides {:optional true}
:optional true}
[:maybe [:maybe
(forced-vector [:map (many-entity {}
[:db/id [:or entity-id temp-id]] [:db/id [:or entity-id temp-id]]
[:account-client-override/client [:or entity-id :string]] [:account-client-override/client [:or entity-id :string]]
[:account-client-override/name :string]])]]])) [:account-client-override/name :string])]]]))
(def key->handler (def key->handler
(apply-middleware-to-all-handlers (apply-middleware-to-all-handlers
(->> (->>
{:admin-accounts (helper/page-route grid-page) {:admin-accounts (helper/page-route grid-page)
:admin-account-table (helper/table-route grid-page) :admin-account-table (helper/table-route grid-page)
:admin-account-client-override-new (-> new-client-override wrap-admin wrap-client-redirect-unauthenticated) :admin-account-client-override-new (-> new-client-override
(wrap-schema-decode :query-schema [:map
[:index {:optional true
:default 0} [nat-int? {:default 0}]]])
wrap-admin wrap-client-redirect-unauthenticated)
:admin-account-save (-> account-save :admin-account-save (-> account-save
(wrap-schema-decode :form-schema account-schema) (wrap-schema-decode :form-schema account-schema)
(wrap-nested-form-params) (wrap-nested-form-params)

View File

@@ -193,7 +193,7 @@
[(com/button {:hx-get (str (bidi/path-for ssr-routes/only-routes [(com/button {:hx-get (str (bidi/path-for ssr-routes/only-routes
:admin-transaction-rule-new-dialog)) :admin-transaction-rule-new-dialog))
:hx-target "#modal-content" :hx-target "#modal-content"
:hx-swap "outerHTML" :hx-swap "innerHTML"
:color :primary} :color :primary}
"New Transaction Rule")]) "New Transaction Rule")])
:row-buttons (fn [request entity] :row-buttons (fn [request entity]
@@ -201,7 +201,7 @@
:admin-transaction-rule-edit-dialog :admin-transaction-rule-edit-dialog
:db/id (:db/id entity))) :db/id (:db/id entity)))
:hx-target "#modal-content" :hx-target "#modal-content"
:hx-swap "outerHTML"} :hx-swap "innerHTML"}
svg/pencil)]) svg/pencil)])
:breadcrumbs [[:a {:href (bidi/path-for ssr-routes/only-routes :breadcrumbs [[:a {:href (bidi/path-for ssr-routes/only-routes
:admin)} :admin)}
@@ -581,10 +581,7 @@
[: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*)})])]])]
[:div (com/button {:color :primary :form "edit-form" :type "submit" :class (cond-> "w-32" (com/validated-save-button {:errors form-errors} "Save rule"))]))
(seq form-errors) (->
(hh/add-class "animate-shake")))}
"Save")])]))
;; 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

@@ -15,6 +15,7 @@
(def breadcrumbs breadcrumbs/breadcrumbs-) (def breadcrumbs breadcrumbs/breadcrumbs-)
(def button buttons/button-) (def button buttons/button-)
(def validated-save-button buttons/validated-save-button-)
(def a-button buttons/a-button-) (def a-button buttons/a-button-)
(def button-icon buttons/button-icon-) (def button-icon buttons/button-icon-)
(def icon-button buttons/icon-button-) (def icon-button buttons/icon-button-)

View File

@@ -1,5 +1,6 @@
(ns auto-ap.ssr.components.buttons (ns auto-ap.ssr.components.buttons
(:require [auto-ap.ssr.svg :as svg])) (:require [auto-ap.ssr.svg :as svg]
[auto-ap.ssr.hiccup-helper :as hh]))
(defn button-icon- [_ i] (defn button-icon- [_ i]
[:div.h-4.w-4 i]) [:div.h-4.w-4 i])
@@ -170,3 +171,16 @@
:hx-on:click "this.querySelector(\"input\").value = event.target.value; this.querySelector(\"input\").dispatchEvent(new Event('change', {bubbles: true}));"} :hx-on:click "this.querySelector(\"input\").value = event.target.value; this.querySelector(\"input\").dispatchEvent(new Event('change', {bubbles: true}));"}
[:input {:type "hidden" :name name}]] [:input {:type "hidden" :name name}]]
children))) children)))
(defn validated-save-button- [{:keys [errors class] :as params} & children]
(button- (-> {:color :primary :form "edit-form"
:type "submit" :class (cond-> (or class "")
true (hh/add-class "w-32")
(seq errors) (hh/add-class "animate-shake"))}
(merge params)
(dissoc :errors))
(if (seq children)
children
"Save"))
)

View File

@@ -1,17 +1,26 @@
(ns auto-ap.ssr.components.dialog (ns auto-ap.ssr.components.dialog
(:require [hiccup2.core :as hiccup] (:require [hiccup2.core :as hiccup]
[auto-ap.ssr.hx :as hx])) [auto-ap.ssr.hx :as hx]
[auto-ap.ssr.hiccup-helper :as hh]))
(defn modal- [params & children] (defn modal- [params & children]
[:div#modal-content {:class ""} [:div {:class (-> (:class params)
children]) (or "max-w-4xl w-1/4 overflow-visible")
(hh/add-class "h-min"))
"@click.outside" "open=false"
} children])
(defn modal-card- [params header content footer] (defn modal-card- [params header content footer]
[:div#modal-card params [:div#modal-card (update params
[:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content w-full"} :class (fn [c] (-> c
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header] (or "w-full")
[:div {:class "p-6 space-y-6 overflow-scroll "} )))
[:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content w-full flex flex-col max-h-[80vh]"}
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0"} header]
[:div {:class "px-6 space-y-6 overflow-y-scroll w-full shrink"}
#_[:div.bg-green-300.w-full.h-64
"hello"]
content] content]
(when footer [:div {:class "p-4 "} footer])]]) (when footer [:div {:class "p-4 shrink-0"} footer])]])
;; fade-in-settle slide-up-settle duration-300 transition-all ;; fade-in-settle slide-up-settle duration-300 transition-all

View File

@@ -82,7 +82,8 @@ c.clearChoices();
[{:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}] [{:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}]
[])}) [])})
:x-modelable "value.value" :x-modelable "value.value"
:x-model (:x-model params)} :x-model (:x-model params)
:class "relative"}
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes) [:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer")) (hh/add-class "cursor-pointer"))
"@click.prevent" "open = !open;" "@click.prevent" "open = !open;"

View File

@@ -77,17 +77,17 @@ input[type=number] {
"x-transition:leave-start" "!bg-opacity-50" "x-transition:leave-start" "!bg-opacity-50"
"x-transition:leave-end" "!bg-opacity-0"} "x-transition:leave-end" "!bg-opacity-0"}
[:div.flex.place-items-center.place-content-center.w-full.h-full.p-12 ;; TODO to get this right i think what needs to happen is to just set this up as having a single
[:div {:class (str "w-full sm:max-w-2xl sm:rounded-lg overflow-scroll max-h-full sm:max-h-[90vh]") ;; div that is forced to the maximum allowed size. inside that will be a div that just centers
"@click.outside" "open=false" ;; the elements, allowing it to grow as necessar. Then make the modal on the inside of this
"x-trap.inert.noscroll" "open" ;; div just use flexbox to make the inside part be the part that scrolls
"x-trap.inert" "open" [:div#modal-content {:class (str "inset-0 max-h-[80vh] sm:m-12 flex justify-center items-center shrink h-full")
"x-show" "open" "x-trap.inert.noscroll" "open"
"x-transition:enter" "ease-out duration-300" "x-trap.inert" "open"
"x-transition:enter-start" "!bg-opacity-0 !translate-y-32" "x-show" "open"
"x-transition:enter-end" "!bg-opacity-100 !translate-y-0" "x-transition:enter" "ease-out duration-300"
"x-transition:leave" "duration-300" "x-transition:enter-start" "!bg-opacity-0 !translate-y-32"
"x-transition:leave-start" "!opacity-100 !translate-y-0" "x-transition:enter-end" "!bg-opacity-100 !translate-y-0"
"x-transition:leave-end" "!opacity-0 !translate-y-32"} "x-transition:leave" "duration-300"
"x-transition:leave-start" "!opacity-100 !translate-y-0"
[:div#modal-content {:class "flex items-center justify-between pb-2"}]]]]]]])) "x-transition:leave-end" "!opacity-0 !translate-y-32"}]]]]]))

View File

@@ -71,13 +71,13 @@
{:value "none" {:value "none"
:content "None"}]})) :content "None"}]}))
(com/field {:label "Client"} (com/field {:label "Client"}
(com/typeahead {:name "client" (com/typeahead-2 {:name "client"
:placeholder "Search..." :placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :url (bidi/path-for ssr-routes/only-routes
:company-search) :company-search)
:id (str "client-search") :id (str "client-search")
:value [(:db/id (:client (:parsed-query-params request))) :value [(:db/id (:client (:parsed-query-params request)))
(:client/name (:client (:parsed-query-params request)))]}))]]) (:client/name (:client (:parsed-query-params request)))]}))]])
(def default-read '[:db/id (def default-read '[:db/id
:user/name :user/name
@@ -207,7 +207,7 @@
:user-edit-dialog :user-edit-dialog
:db/id (:db/id entity))) :db/id (:db/id entity)))
:hx-target "#modal-content" :hx-target "#modal-content"
:hx-swap "outerHTML"} :hx-swap "innerHTML"}
svg/pencil)]) svg/pencil)])
:breadcrumbs [[:a {:href (bidi/path-for ssr-routes/only-routes :breadcrumbs [[:a {:href (bidi/path-for ssr-routes/only-routes
:admin)} :admin)}
@@ -281,7 +281,8 @@
:user-edit-save :user-edit-save
:request-method :put)) :request-method :put))
:hx-swap "outerHTML swap:300ms" :hx-swap "outerHTML swap:300ms"
:hx-target-400 "#form-errors .error-content"} :hx-target-400 "#form-errors .error-content"
:class "w-full"}
[:fieldset {:class "hx-disable"} [:fieldset {:class "hx-disable"}
(com/modal-card (com/modal-card
{} {}