Events-MVC (example with htmx)

2026-04-25 22:21:35 +02:00
parent eb04483417
commit 0ee1b22f61
114 changed files with 7966 additions and 0 deletions
--- a/Events-MVC/Events.MVC/Views/Registrations/Index.cshtml
+++ b/Events-MVC/Events.MVC/Views/Registrations/Index.cshtml
@@ -0,0 +1,85 @@
+@model Events.MVC.Models.Registrations.RegistrationsPageViewModel
+
+@{
+    ViewData[Constants.ViewDataKeys.Title] = "Registrations";
+    ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New registration";
+    ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-registration-panel";
+}
+
+<partial name="_RegistrationsPanel" model="Model" />
+
+@section Scripts {
+    <script>
+        function clearRegistrationSuggestions(scope) {
+            (scope || document).querySelectorAll(".registration-person-suggestions").forEach(function (container) {
+                container.innerHTML = "";
+            });
+        }
+
+        function syncRegistrationPersonLookup(input) {
+            var form = input.closest("form");
+            var hiddenInput = form ? form.querySelector("input[name='PersonId']") : null;
+            if (!hiddenInput) {
+                return;
+            }
+            hiddenInput.value = "";
+        }
+
+        document.body.addEventListener("input", function (event) {
+            if (event.target.matches("[data-person-autocomplete]")) {
+                syncRegistrationPersonLookup(event.target);
+            }
+        });
+
+        document.body.addEventListener("change", function (event) {
+            if (event.target.matches("[data-person-autocomplete]")) {
+                syncRegistrationPersonLookup(event.target);
+            }
+        });
+
+        document.body.addEventListener("click", function (event) {
+            var suggestion = event.target.closest("[data-person-suggestion]");
+            if (suggestion) {
+                var container = suggestion.closest(".registration-person-suggestions");
+                var wrapper = container ? container.closest(".registration-person-autocomplete") : null;
+                var input = wrapper ? wrapper.querySelector("[data-person-autocomplete]") : null;
+                var form = wrapper ? wrapper.closest("form") : null;
+                var hiddenInput = form ? form.querySelector("input[name='PersonId']") : null;
+
+                if (input && hiddenInput) {
+                    input.value = suggestion.dataset.personLabel || "";
+                    hiddenInput.value = suggestion.dataset.personId || "";
+                }
+
+                if (container) {
+                    container.innerHTML = "";
+                }
+                return;
+            }
+
+            if (!event.target.closest(".registration-person-autocomplete")) {
+                clearRegistrationSuggestions(document);
+            }
+        });
+
+        document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.RegistrationCreated)), function () {
+            var form = document.querySelector("#create-registration-form form");
+            if (form) {
+                form.reset();
+            }
+
+            var eventInput = document.querySelector("#create-registration-form input[name='EventId']");
+            var stateEventInput = document.querySelector("#registrations-state input[name='eventId']");
+            if (eventInput && stateEventInput) {
+                eventInput.value = stateEventInput.value;
+            }
+
+            clearRegistrationSuggestions(document.getElementById("create-registration-form"));
+
+            var panel = document.getElementById("create-registration-panel");
+            if (panel && window.bootstrap) {
+                bootstrap.Collapse.getOrCreateInstance(panel).hide();
+            }
+        });
+    </script>
+}