Events-MVC (example with htmx)

Events-MVC/Events.MVC/wwwroot/css/site.css

@@ -0,0 +1,55 @@
+body {
+    min-height: 100vh;
+}
+
+.navbar-brand {
+    letter-spacing: 0.02em;
+}
+
+.card {
+    border-radius: 1rem;
+}
+
+.table > :not(caption) > * > * {
+    padding-top: 0.9rem;
+    padding-bottom: 0.9rem;
+}
+
+.pagebox {
+    width: 3.5rem;
+    min-width: 3.5rem;
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    text-align: center;
+}
+
+#app-toast {
+    min-width: 18rem;
+}
+
+#app-toast.toast-success {
+    background-color: #198754;
+}
+
+#app-toast.toast-error {
+    background-color: #dc3545;
+}
+
+#app-toast .toast-body {
+    color: #fff;
+}
+
+#app-toast .btn-close {
+    filter: invert(1);
+}
+
+.registration-person-suggestions {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    left: 0;
+    right: 0;
+    z-index: 1050;
+    max-height: 16rem;
+    overflow-y: auto;
+}
+

Events-MVC/Events.MVC/wwwroot/js/pager.js

@@ -0,0 +1,61 @@
+(function () {
+    function validRange(value, min, max) {
+        if (!/^\d+$/.test(value)) {
+            return false;
+        }
+
+        var page = parseInt(value, 10);
+        return page >= min && page <= max;
+    }
+
+    function goToPage(input) {
+        var value = input.value.trim();
+        var min = parseInt(input.dataset.min, 10);
+        var max = parseInt(input.dataset.max, 10);
+
+        if (!validRange(value, min, max)) {
+            input.value = input.dataset.current || "";
+            return;
+        }
+
+        var url = (input.dataset.urlTemplate || "").replace("__page__", value);
+        if (!url) {
+            return;
+        }
+
+        var target = input.dataset.target;
+        var swap = input.dataset.swap || "outerHTML";
+        var pushUrl = input.dataset.pushUrl === "true";
+
+        if (window.htmx && target) {
+            htmx.ajax("GET", url, {
+                target: target,
+                swap: swap,
+                pushUrl: pushUrl
+            });
+            return;
+        }
+
+        window.location.href = url;
+    }
+
+    document.addEventListener("focusin", function (event) {
+        if (event.target.matches(".pagebox")) {
+            event.target.select();
+        }
+    });
+
+    document.addEventListener("keydown", function (event) {
+        if (!event.target.matches(".pagebox")) {
+            return;
+        }
+
+        if (event.key === "Enter") {
+            event.preventDefault();
+            goToPage(event.target);
+        }
+        else if (event.key === "Escape") {
+            event.target.value = event.target.dataset.current || "";
+        }
+    });
+})();