Makes an okay experience of editing vendors through a wizard

This commit is contained in:
2023-11-01 23:06:18 -07:00
parent 3211635dce
commit 99e4f05769
12 changed files with 683 additions and 23 deletions

View File

@@ -8,7 +8,8 @@
[auto-ap.routes.admin.transaction-rules :as transaction-rules]
[auto-ap.ssr.hiccup-helper :as hh]
[auto-ap.routes.admin.import-batch :as ib-routes]
[auto-ap.routes.admin.excel-invoices :as ei-routes]))
[auto-ap.routes.admin.excel-invoices :as ei-routes]
[auto-ap.routes.admin.vendors :as v-routes]))
(defn menu-button- [params & children]
[:div
@@ -203,9 +204,8 @@
"Clients")]
[:li
(menu-button- {:icon svg/vendors
:href (bidi/path-for client-routes/routes
:admin-vendors)
:target "_new"}
:href (bidi/path-for ssr-routes/only-routes
::v-routes/page)}
"Vendors")]
[:li
(menu-button- {:icon svg/user

View File

@@ -6,28 +6,31 @@
(defn modal- [params & children]
[:div (-> params
(assoc "@click.outside" "open=false"
:x-data (hx/json {:index 0 :hidingIndex -1 :unexpectedError false})
:x-data (hx/json {:index 0 :hidingIndex -1 :unexpectedError false :transitioning false})
"x-on:htmx:response-error" "unexpectedError=true"
"x-on:htmx:before-request" "unexpectedError=false"
:x-ref "modalStack"
"@modalnext"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', '-translate-x-full scale-0 opacity-0' );
"@modalnext.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', '-translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index + 1].setAttribute('x-transition:enter-start', 'translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => {index ++; hidingIndex = -1 }, 150)"
setTimeout(() => {index ++; transitioning=true; hidingIndex = -1; }, 150);
setTimeout(() => transitioning=false, 320)"
"@modalprevious"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
"@modalprevious.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index - 1].setAttribute('x-transition:enter-start', '-translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => { index --; hidingIndex = -1; }, 150)"
setTimeout(() => { index --; hidingIndex = -1; transitioning=true; }, 150);
setTimeout(() => transitioning=false, 320)"
"@modalpop"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
"@modalpop.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index - 1].setAttribute('x-transition:enter-start', '-translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => index --, 150)
setTimeout(() => { $refs.modalStack.removeChild($refs.modalStack.children[index+1]); hidingIndex=-1; }, 300)
setTimeout(() => {index --; transitioning=true;}, 150);
setTimeout(() => { $refs.modalStack.removeChild($refs.modalStack.children[index+1]); hidingIndex=-1; }, 300);
setTimeout(() => transitioning=false, 320)
"
)
(update :class (fnil hh/add-class "") "w-full h-full modal-stack"))
@@ -58,6 +61,7 @@
{:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content flex flex-col h-full"
:x-data (hx/json {:i index})
:x-show "index == i && hidingIndex != i"
"x-trap" "index == i && hidingIndex == -1 && !transitioning"
"x-transition:enter" "transition duration-150",
"x-transition:enter-end" "translate-x-0 scale-100 opacity-100",
"x-transition:leave" "transition duration-150",

View File

@@ -55,7 +55,6 @@
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer"))
"@click.prevent" "open = !open; popper.update()"
"@keydown.enter.prevent.stop" "open = !open; popper.update()"
"@keydown.down.prevent.stop" "open = true; popper.update()"
"@keydown.backspace" "value = {value: '', label: '' }"
:tabindex 0
@@ -101,7 +100,7 @@
"placeholder" (:placeholder params)
"@keydown.down.prevent" "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active"
"@keydown.up.prevent" "active --; active = active < 0 ? 0 : active"
"@keydown.enter.prevent" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''};"
"@keydown.enter.prevent.stop" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''};"
"x-init" "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}]
[:div.dropdown-options {:class "rounded-b-lg overflow-hidden"}
[:template {:x-for "(element, index) in elements"}
@@ -131,7 +130,9 @@
(dissoc :error?)
(assoc :type "text")
(update
:class (fnil hh/add-class "") default-input-classes)
:class #(-> ""
(hh/add-class default-input-classes)
(hh/add-class %)))
(update :class #(str % (use-size size))))])
(defn money-input- [{:keys [size] :as params}]
@@ -204,5 +205,10 @@
[:input {:type "hidden" :value value :name name}])
(defn checkbox- [params & rest]
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})
rest])
(if (seq rest)
[:label {:class "text-sm text-gray-800 dark:text-gray-300"}
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})]
[:span.ml-2
rest]]
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})
]))