merged

resources/input.css

@@ -135,6 +135,14 @@
     display: inherit;
 }
 
+.htmx-request .htmx-indicator-invisible {
+    visibility: hidden !important;
+}
+
+.htmx-indicator-invisible {
+    display: inherit;
+}
+
 .htmx-swapping .fade-out {
     opacity: 0.0 !important;
 }

resources/public/css/main.css

@@ -468,5 +468,4 @@ table.balance-sheet th.total {
     background-color: whitesmoke !important;
     border-color: whitesmoke !important;
     box-shadow: none;
-}
-
+}

resources/public/js/alpine-vals.js

@@ -0,0 +1,29 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.directive('hx-val', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
+        var config = function(evt) {
+            evt.detail.parameters[value] = evaluate(expression); // add a new parameter into the request
+        }
+        el.addEventListener('htmx:configRequest', config);
+        cleanup(() => {
+            el.removeEventListener('htmx:configRequest', config);
+        })
+    })
+
+    Alpine.directive('dispatch', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
+        let dependent_properties = evaluateLater(expression)
+    
+        effect(() => {
+            dependent_properties(props => {
+                el.dispatchEvent(
+                    new CustomEvent(value, {
+                        props,
+                        bubbles: true,
+                        // Allows events to pass the shadow DOM barrier.
+                        composed: true,
+                        cancelable: true,
+                    })
+                )
+            })
+        })
+    })
+}) 

resources/public/js/htmx-disable.js

@@ -122,7 +122,7 @@ htmx.defineExtension('trigger-filter', {
 initDatepicker = function(elem) {
     const modalParent = elem.closest('#modal-content');
     if (modalParent) {
-        elem.dp = new Datepicker(elem, {format: "mm/dd/yyyy", autohide: true, container: ".modal-stack"});
+        elem.dp = new Datepicker(elem, {format: "mm/dd/yyyy", autohide: true, container: "#modal-content .modal-card"});
     } else {
         elem.dp = new Datepicker(elem, {format: "mm/dd/yyyy", autohide: true});
     }

resources/schema.edn

@@ -1334,10 +1334,7 @@
   :db/cardinality #:db{:ident :db.cardinality/one},
   :db/doc         "The specific client this rule is for",
   :db/ident       :transaction-rule/client}
- {:db/valueType   #:db{:ident :db.type/string},
-  :db/cardinality #:db{:ident :db.cardinality/one},
-  :db/doc         "The specific client group this rule is for",
-  :db/ident       :transaction-rule/client-group}
+ {:db/valueType   #:db{:ident :db.type/string}, :db/cardinality #:db{:ident :db.cardinality/one}, :db/doc         "The specific client group this rule is for", :db/ident       :transaction-rule/client-group}
  {:db/valueType   #:db{:ident :db.type/ref},
   :db/cardinality #:db{:ident :db.cardinality/one},
   :db/doc         "The specific bank account this rule is for",