Events-MVC (example with htmx)

This commit is contained in:
Boris Milašinović
2026-04-25 22:21:35 +02:00
parent eb04483417
commit 0ee1b22f61
114 changed files with 7966 additions and 0 deletions

View File

@@ -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>
}

View File

@@ -0,0 +1,44 @@
@model Events.MVC.Models.Registrations.RegistrationViewModel
<form
asp-action="Create"
method="post"
hx-post="@Url.Action("Create", "Registrations")"
hx-include="#registrations-state"
hx-target="#registrations-panel"
hx-swap="outerHTML">
@Html.AntiForgeryToken()
<input asp-for="EventId" type="hidden" />
<div asp-validation-summary="ModelOnly" class="text-danger small mb-3"></div>
<div class="row g-3 align-items-end">
<div class="col-md-5">
<label asp-for="PersonId" class="form-label"></label>
<input asp-for="PersonId" type="hidden" />
<div class="position-relative registration-person-autocomplete">
<input
asp-for="PersonLookup"
class="form-control"
placeholder="Start typing a person's name"
autocomplete="off"
data-person-autocomplete
hx-get="@Url.Action("PersonSuggestions", "Registrations")"
hx-include="#registrations-state"
hx-trigger="input changed delay:250ms"
hx-target="#registration-person-suggestions-create"
hx-swap="innerHTML" />
<div id="registration-person-suggestions-create" class="list-group registration-person-suggestions"></div>
</div>
<span asp-validation-for="PersonId" class="text-danger small"></span>
</div>
<div class="col-md-5">
<label asp-for="SportId" class="form-label"></label>
<select asp-for="SportId" asp-items="Model.SportOptions" class="form-select">
<option value="">Select a sport</option>
</select>
<span asp-validation-for="SportId" class="text-danger small"></span>
</div>
<div class="col-sm-auto">
<button type="submit" class="btn btn-primary">Add registration</button>
</div>
</div>
</form>

View File

@@ -0,0 +1,23 @@
@model IReadOnlyList<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem>
@if (Model.Count > 0)
{
@foreach (var person in Model)
{
var parts = person.Text.Split('|', 2);
var originalName = parts[0];
var transcription = parts.Length > 1 ? parts[1] : string.Empty;
<button
type="button"
class="list-group-item list-group-item-action"
data-person-suggestion
data-person-id="@person.Value"
data-person-label="@originalName (@transcription)">
<span class="d-block">@originalName</span>
@if (!string.IsNullOrWhiteSpace(transcription))
{
<small class="d-block text-body-secondary">@transcription</small>
}
</button>
}
}

View File

@@ -0,0 +1,64 @@
@model Events.MVC.Models.Registrations.RegistrationViewModel
<tr id="registration-@Model.Id">
<td>@Model.Id</td>
<td colspan="5">
<form
asp-action="Edit"
asp-route-id="@Model.Id"
method="post"
hx-post="@Url.Action("Edit", "Registrations", new { id = Model.Id })"
hx-target="#registration-@Model.Id"
hx-swap="outerHTML">
@Html.AntiForgeryToken()
<input asp-for="Id" type="hidden" />
<input asp-for="EventId" type="hidden" />
<div asp-validation-summary="ModelOnly" class="text-danger small mb-2"></div>
<div class="row g-2 align-items-start">
<div class="col-md-5">
<label asp-for="PersonId" class="form-label"></label>
<input asp-for="PersonId" type="hidden" />
<div class="position-relative registration-person-autocomplete">
<input
asp-for="PersonLookup"
class="form-control"
placeholder="Start typing a person's name"
autocomplete="off"
data-person-autocomplete
hx-get="@Url.Action("PersonSuggestions", "Registrations")"
hx-include="#registrations-state"
hx-trigger="input changed delay:250ms"
hx-target="#registration-person-suggestions-@Model.Id"
hx-swap="innerHTML" />
<div id="registration-person-suggestions-@Model.Id" class="list-group registration-person-suggestions"></div>
</div>
<span asp-validation-for="PersonId" class="text-danger small"></span>
</div>
<div class="col-md-4">
<label asp-for="SportId" class="form-label"></label>
<select asp-for="SportId" asp-items="Model.SportOptions" class="form-select">
<option value="">Select a sport</option>
</select>
<span asp-validation-for="SportId" class="text-danger small"></span>
</div>
<div class="col-md-3">
<label asp-for="RegisteredAt" class="form-label"></label>
<input asp-for="RegisteredAt" class="form-control" disabled />
</div>
<div class="col-md-auto">
<button type="submit" class="btn btn-sm btn-primary">Save</button>
</div>
<div class="col-md-auto">
<button
type="button"
class="btn btn-sm btn-outline-secondary"
hx-get="@Url.Action("Row", "Registrations", new { id = Model.Id, eventId = Model.EventId })"
hx-target="#registration-@Model.Id"
hx-swap="outerHTML">
Cancel
</button>
</div>
</div>
</form>
</td>
</tr>

View File

@@ -0,0 +1,39 @@
@model Events.MVC.Models.Registrations.RegistrationViewModel
<tr id="registration-@Model.Id">
<td>@Model.Id</td>
<td>
<span class="d-block">@Model.PersonName</span>
<small class="d-block text-body-secondary">@Model.PersonTranscription</small>
</td>
<td>@Model.CountryName</td>
<td>@Model.SportName</td>
<td>@Model.RegisteredAt.ToString("dd.MM.yyyy. HH:mm")</td>
<td class="text-end">
<div class="d-inline-flex gap-2">
<button
type="button"
class="btn btn-sm btn-outline-primary"
hx-get="@Url.Action("EditRow", "Registrations", new { id = Model.Id, eventId = Model.EventId })"
hx-target="#registration-@Model.Id"
hx-swap="outerHTML">
Edit
</button>
<form
asp-action="Delete"
asp-route-id="@Model.Id"
asp-route-eventId="@Model.EventId"
method="post"
class="d-inline"
hx-post="@Url.Action("Delete", "Registrations", new { id = Model.Id, eventId = Model.EventId })"
hx-include="#registrations-state"
hx-target="#registrations-panel"
hx-swap="outerHTML"
hx-confirm="Delete this registration?">
@Html.AntiForgeryToken()
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
</form>
</div>
</td>
</tr>

View File

@@ -0,0 +1,149 @@
@model Events.MVC.Models.Registrations.RegistrationsPageViewModel
<section class="card border-0 shadow-sm" id="registrations-list">
<div class="card-body">
<div id="registrations-state" class="d-none">
<input type="hidden" name="eventId" value="@Model.SelectedEventId" />
<input type="hidden" name="page" value="@Model.Registrations.PagingInfo.CurrentPage" />
<input type="hidden" name="pageSize" value="@Model.Registrations.PagingInfo.ItemsPerPage" />
<input type="hidden" name="sorts" value="@Model.Registrations.PagingInfo.Sorts" />
<input type="hidden" name="filters" value="@Model.Registrations.PagingInfo.Filters" />
<input type="hidden" name="countryFilter" value="@Model.CountryFilter" />
</div>
<form
asp-action="Index"
method="get"
class="d-flex justify-content-between align-items-start gap-3 flex-wrap flex-lg-nowrap mb-4"
hx-get="@Url.Action("Index", "Registrations")"
hx-target="#registrations-panel"
hx-swap="outerHTML"
hx-push-url="true"
onsubmit="var input=this.querySelector('[data-name-filter-input]'); var country=this.querySelector('[name=countryFilter]'); var filters=this.querySelector('[name=filters]'); var values=[]; if (input && input.value.trim()) { values.push('PersonTranscription' + String.fromCharCode(64) + '=*' + input.value.trim()); } if (country && country.value) { values.push('CountryCode==' + country.value); } filters.value=values.join(','); this.querySelector('[name=page]').value='1';">
<input type="hidden" name="eventId" value="@Model.SelectedEventId" />
<input type="hidden" name="page" value="1" />
<input type="hidden" name="pageSize" value="@Model.Registrations.PagingInfo.ItemsPerPage" />
<input type="hidden" name="sorts" value="@Model.Registrations.PagingInfo.Sorts" />
<input type="hidden" name="filters" value="@Model.Registrations.PagingInfo.Filters" />
<div class="d-flex align-items-center gap-3 pt-2">
<h2 class="h5 mb-0">Registrations list</h2>
<span class="badge text-bg-light">@(Model.Registrations.PagingInfo.IsFiltered ? $"{Model.Registrations.PagingInfo.FilteredItemsCount} / {Model.Registrations.PagingInfo.TotalItemsCount}" : Model.Registrations.PagingInfo.TotalItemsCount.ToString())</span>
</div>
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
<input
value="@Model.Registrations.PagingInfo.NameFilter"
data-name-filter-input
class="form-control"
style="max-width: 18rem;"
placeholder="Search by transcription"
aria-label="Filter by transcription" />
<select name="countryFilter" asp-items="Model.CountryOptions" class="form-select" style="max-width: 14rem;" aria-label="Filter by country">
<option value="">All countries</option>
</select>
<button type="submit" class="btn btn-outline-primary">Filter</button>
@if (Model.Registrations.PagingInfo.IsFiltered)
{
<a
asp-action="Index"
asp-route-eventId="@Model.SelectedEventId"
asp-route-page="1"
asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage"
asp-route-sorts="@Model.Registrations.PagingInfo.Sorts"
asp-route-filters=""
class="btn btn-outline-secondary"
hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = 1, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.Sorts, filters = string.Empty })"
hx-target="#registrations-panel"
hx-swap="outerHTML"
hx-push-url="true">
Clear
</a>
}
</div>
</form>
@if (!Model.CanCreate && !string.IsNullOrWhiteSpace(Model.CreateDisabledMessage))
{
<div class="alert alert-warning mb-4">@Model.CreateDisabledMessage</div>
}
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th>
<a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("Id")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("Id"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
ID@(Model.Registrations.PagingInfo.IsSortedBy("Id") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
</a>
</th>
<th>
<a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("PersonName")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("PersonName"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
Person@(Model.Registrations.PagingInfo.IsSortedBy("PersonName") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
</a>
</th>
<th>Country</th>
<th>
<a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("SportName")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("SportName"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
Sport@(Model.Registrations.PagingInfo.IsSortedBy("SportName") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
</a>
</th>
<th>
<a asp-action="Index" asp-route-eventId="@Model.SelectedEventId" asp-route-page="@Model.Registrations.PagingInfo.CurrentPage" asp-route-pageSize="@Model.Registrations.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.Registrations.PagingInfo.ToggleSort("RegisteredAt")" asp-route-filters="@Model.Registrations.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "Registrations", new { eventId = Model.SelectedEventId, page = Model.Registrations.PagingInfo.CurrentPage, pageSize = Model.Registrations.PagingInfo.ItemsPerPage, sorts = Model.Registrations.PagingInfo.ToggleSort("RegisteredAt"), filters = Model.Registrations.PagingInfo.Filters })" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
Registered at@(Model.Registrations.PagingInfo.IsSortedBy("RegisteredAt") ? (Model.Registrations.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
</a>
</th>
<th class="text-end"></th>
</tr>
</thead>
<tbody>
@if (Model.Registrations.Data.Count == 0)
{
<tr>
<td colspan="6" class="text-body-secondary">No registrations to display.</td>
</tr>
}
else
{
@foreach (var registration in Model.Registrations.Data)
{
<partial name="_RegistrationRow" model="registration" />
}
}
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-4 gap-3 flex-wrap">
<div class="d-flex align-items-center gap-2 flex-wrap">
<small class="text-body-secondary">Page @Model.Registrations.PagingInfo.CurrentPage of @Model.Registrations.PagingInfo.TotalPages</small>
<form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2" hx-get="@Url.Action("Index", "Registrations")" hx-target="#registrations-panel" hx-swap="outerHTML" hx-push-url="true">
<input type="hidden" name="eventId" value="@Model.SelectedEventId" />
<input type="hidden" name="page" value="1" />
<input type="hidden" name="sorts" value="@Model.Registrations.PagingInfo.Sorts" />
<input type="hidden" name="filters" value="@Model.Registrations.PagingInfo.Filters" />
<select name="pageSize" class="form-select form-select-sm" style="width: auto;" aria-label="Items per page" onchange="this.form.requestSubmit()">
@{
int[] pageSizeOptions = [10, 20, 50, 100];
}
@foreach (var option in pageSizeOptions)
{
<option value="@option" selected="@(Model.Registrations.PagingInfo.ItemsPerPage == option)">@option</option>
}
</select>
</form>
</div>
<pager
page-info="@Model.Registrations.PagingInfo"
page-action="Index"
page-title="Enter a page number and press Enter"
page-target="#registrations-panel"
page-swap="outerHTML"
page-push-url="true"
page-route-event-id="@Model.SelectedEventId.ToString()">
</pager>
</div>
</div>
</section>

View File

@@ -0,0 +1,43 @@
@model Events.MVC.Models.Registrations.RegistrationsPageViewModel
<div class="d-flex flex-column gap-4" id="registrations-panel">
<section class="card border-0 shadow-sm">
<div class="card-body">
<form
asp-action="Index"
method="get"
class="row g-3 align-items-end"
hx-get="@Url.Action("Index", "Registrations")"
hx-target="#registrations-panel"
hx-swap="outerHTML"
hx-push-url="true">
<div class="col-lg-6">
<label for="selectedEventId" class="form-label">Event</label>
<select
id="selectedEventId"
name="eventId"
asp-items="Model.EventOptions"
class="form-select"
onchange="this.form.requestSubmit()">
</select>
</div>
<div class="col-auto">
<span class="badge text-bg-light">Registrations for: @Model.SelectedEventName</span>
</div>
</form>
</div>
</section>
<section id="create-registration-panel" class="collapse">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h2 class="h5 mb-3">Add a new registration</h2>
<div id="create-registration-form">
<partial name="_CreateRegistrationForm" model="Model.CreateModel" />
</div>
</div>
</div>
</section>
<partial name="_RegistrationsList" model="Model" />
</div>