Events-MVC (example with htmx)
This commit is contained in:
Boris Milašinović
171
Events-MVC/Events.MVC/Views/Countries/Index.cshtml
Normal file
171
Events-MVC/Events.MVC/Views/Countries/Index.cshtml
Normal file
@@ -0,0 +1,171 @@
|
||||
@model PagedList<Events.MVC.Models.Countries.CountryViewModel>
|
||||
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = "Countries";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New country";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-country-panel";
|
||||
}
|
||||
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<section id="create-country-panel" class="collapse">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 mb-3">Add a new country</h2>
|
||||
<div id="create-country-form">
|
||||
<partial name="_CreateCountryForm" model='new Events.MVC.Models.Countries.CountryViewModel()' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<partial name="_CountriesList" model="Model" />
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
var countryToastVariantError = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.ToastVariants.Error));
|
||||
var countryToastTitleError = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.ToastTitles.Error));
|
||||
|
||||
function reindexCountryTranslations(editor) {
|
||||
var prefix = editor.dataset.prefix || "Translations";
|
||||
var rows = editor.querySelectorAll("[data-translation-row]");
|
||||
|
||||
rows.forEach(function (row, index) {
|
||||
row.querySelectorAll("[data-field]").forEach(function (input) {
|
||||
input.name = prefix + "[" + index + "]." + input.dataset.field;
|
||||
});
|
||||
});
|
||||
|
||||
editor.querySelectorAll("[data-remove-translation]").forEach(function (button) {
|
||||
button.disabled = rows.length === 1 && button.hasAttribute("data-keep-one");
|
||||
});
|
||||
}
|
||||
|
||||
function ensureCountryTranslationNames(editor) {
|
||||
editor.querySelectorAll("[data-translation-row]").forEach(function (row) {
|
||||
row.querySelectorAll("input[name]").forEach(function (input) {
|
||||
var match = input.name.match(/\.([^.]+)$/);
|
||||
if (match) {
|
||||
input.dataset.field = match[1];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
reindexCountryTranslations(editor);
|
||||
}
|
||||
|
||||
function validateCountryTranslations(form) {
|
||||
var editor = form.querySelector("[data-country-translations]");
|
||||
if (!editor) {
|
||||
return true;
|
||||
}
|
||||
|
||||
var rows = editor.querySelectorAll("[data-translation-row]");
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var languageInput = rows[i].querySelector("[data-field='LanguageCode'], input[name$='.LanguageCode']");
|
||||
var nameInput = rows[i].querySelector("[data-field='Name'], input[name$='.Name']");
|
||||
var language = languageInput ? languageInput.value.trim() : "";
|
||||
var name = nameInput ? nameInput.value.trim() : "";
|
||||
|
||||
if ((language && !name) || (!language && name)) {
|
||||
showAppToast({
|
||||
variant: countryToastVariantError,
|
||||
title: countryToastTitleError,
|
||||
message: "Every translation row must contain both a language code and a translation."
|
||||
});
|
||||
|
||||
if (!language && languageInput) {
|
||||
languageInput.focus();
|
||||
} else if (nameInput) {
|
||||
nameInput.focus();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function (event) {
|
||||
var addButton = event.target.closest("[data-add-translation]");
|
||||
if (addButton) {
|
||||
var editor = addButton.closest("[data-country-translations]");
|
||||
var template = editor ? editor.querySelector("[data-translation-template]") : null;
|
||||
var list = editor ? editor.querySelector("[data-translation-list]") : null;
|
||||
|
||||
if (!editor || !template || !list) {
|
||||
return;
|
||||
}
|
||||
|
||||
list.insertAdjacentHTML("beforeend", template.innerHTML.trim());
|
||||
reindexCountryTranslations(editor);
|
||||
return;
|
||||
}
|
||||
|
||||
var removeButton = event.target.closest("[data-remove-translation]");
|
||||
if (removeButton) {
|
||||
var row = removeButton.closest("[data-translation-row]");
|
||||
var owner = removeButton.closest("[data-country-translations]");
|
||||
var rows = owner ? owner.querySelectorAll("[data-translation-row]") : [];
|
||||
|
||||
if (!row || !owner || rows.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
row.remove();
|
||||
reindexCountryTranslations(owner);
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener("submit", function (event) {
|
||||
var form = event.target;
|
||||
if (!(form instanceof HTMLFormElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!form.matches("#create-country-form form, tr[id^='country-'] form")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateCountryTranslations(form)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:afterSwap", function (event) {
|
||||
if (event.target && (event.target.id === "create-country-form" || event.target.id === "countries-list" || event.target.id.indexOf("country-") === 0)) {
|
||||
document.querySelectorAll("[data-country-translations]").forEach(ensureCountryTranslationNames);
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-country-translations]").forEach(ensureCountryTranslationNames);
|
||||
|
||||
document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.CountryCreated)), function () {
|
||||
var form = document.querySelector("#create-country-form form");
|
||||
if (form) {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
var editor = document.querySelector("#create-country-form [data-country-translations]");
|
||||
if (editor) {
|
||||
var rows = editor.querySelectorAll("[data-translation-row]");
|
||||
rows.forEach(function (row, index) {
|
||||
if (index > 0) {
|
||||
row.remove();
|
||||
} else {
|
||||
row.querySelectorAll("input").forEach(function (input) {
|
||||
input.value = "";
|
||||
});
|
||||
}
|
||||
});
|
||||
reindexCountryTranslations(editor);
|
||||
}
|
||||
|
||||
var panel = document.getElementById("create-country-panel");
|
||||
if (panel && window.bootstrap) {
|
||||
bootstrap.Collapse.getOrCreateInstance(panel).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
171
Events-MVC/Events.MVC/Views/Countries/_CountriesList.cshtml
Normal file
171
Events-MVC/Events.MVC/Views/Countries/_CountriesList.cshtml
Normal file
@@ -0,0 +1,171 @@
|
||||
@model PagedList<Events.MVC.Models.Countries.CountryViewModel>
|
||||
|
||||
<section class="card border-0 shadow-sm" id="countries-list">
|
||||
<div class="card-body">
|
||||
<div id="countries-state" class="d-none">
|
||||
<input type="hidden" name="page" value="@Model.PagingInfo.CurrentPage" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.PagingInfo.Filters" />
|
||||
</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", "Countries")"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
onsubmit="var input=this.querySelector('[data-name-filter-input]'); var filters=this.querySelector('[name=filters]'); filters.value=input && input.value.trim() ? 'Name' + String.fromCharCode(64) + '=*' + input.value.trim() : ''; this.querySelector('[name=page]').value='1';">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.PagingInfo.Filters" />
|
||||
|
||||
<div class="d-flex align-items-center gap-3 pt-2">
|
||||
<h2 class="h5 mb-0">Countries list</h2>
|
||||
<span class="badge text-bg-light">@(Model.PagingInfo.IsFiltered ? $"{Model.PagingInfo.FilteredItemsCount} / {Model.PagingInfo.TotalItemsCount}" : Model.PagingInfo.TotalItemsCount.ToString())</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
||||
<input
|
||||
id="countryNameFilter"
|
||||
value="@Model.PagingInfo.NameFilter"
|
||||
data-name-filter-input
|
||||
class="form-control"
|
||||
style="max-width: 18rem;"
|
||||
placeholder="Search by country name"
|
||||
aria-label="Filter by country name" />
|
||||
|
||||
<button type="submit" class="btn btn-outline-primary">Filter</button>
|
||||
@if (Model.PagingInfo.IsFiltered)
|
||||
{
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="1"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.Sorts"
|
||||
asp-route-filters=""
|
||||
class="btn btn-outline-secondary"
|
||||
hx-get="@Url.Action("Index", "Countries", new { page = 1, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.Sorts, filters = string.Empty })"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Clear
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Code")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Countries", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Code"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Code@(Model.PagingInfo.IsSortedBy("Code") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Alpha3")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Countries", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Alpha3"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Alpha-3@(Model.PagingInfo.IsSortedBy("Alpha3") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Name")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Countries", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Name"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Name@(Model.PagingInfo.IsSortedBy("Name") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th class="text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (Model.Data.Count == 0)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="4" class="text-body-secondary">No countries to display.</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var country in Model.Data)
|
||||
{
|
||||
<partial name="_CountryRow" model="country" />
|
||||
}
|
||||
}
|
||||
</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.PagingInfo.CurrentPage of @Model.PagingInfo.TotalPages</small>
|
||||
<form
|
||||
asp-action="Index"
|
||||
method="get"
|
||||
class="d-inline-flex align-items-center gap-2"
|
||||
hx-get="@Url.Action("Index", "Countries")"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.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.PagingInfo.ItemsPerPage == option)">@option</option>
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<pager
|
||||
page-info="@Model.PagingInfo"
|
||||
page-action="Index"
|
||||
page-title="Enter a page number and press Enter"
|
||||
page-target="#countries-list"
|
||||
page-swap="outerHTML"
|
||||
page-push-url="true">
|
||||
</pager>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
44
Events-MVC/Events.MVC/Views/Countries/_CountryEditRow.cshtml
Normal file
44
Events-MVC/Events.MVC/Views/Countries/_CountryEditRow.cshtml
Normal file
@@ -0,0 +1,44 @@
|
||||
@model Events.MVC.Models.Countries.CountryViewModel
|
||||
|
||||
<tr id="country-@Model.Code">
|
||||
<td>@Model.Code</td>
|
||||
<td colspan="3">
|
||||
<form
|
||||
asp-action="Edit"
|
||||
asp-route-id="@Model.Code"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Edit", "Countries", new { id = Model.Code })"
|
||||
hx-target="#country-@Model.Code"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<input asp-for="Code" 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-sm-3 col-lg-2">
|
||||
<input asp-for="Alpha3" class="form-control text-uppercase" />
|
||||
<span asp-validation-for="Alpha3" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<input asp-for="Name" class="form-control" />
|
||||
<span asp-validation-for="Name" class="text-danger small"></span>
|
||||
</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", "Countries", new { id = Model.Code })"
|
||||
hx-target="#country-@Model.Code"
|
||||
hx-swap="outerHTML">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<partial name="_CountryTranslationsEditor" model="Model.Translations" view-data='new ViewDataDictionary(ViewData) { ["Prefix"] = "Translations" }' />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
33
Events-MVC/Events.MVC/Views/Countries/_CountryRow.cshtml
Normal file
33
Events-MVC/Events.MVC/Views/Countries/_CountryRow.cshtml
Normal file
@@ -0,0 +1,33 @@
|
||||
@model Events.MVC.Models.Countries.CountryViewModel
|
||||
|
||||
<tr id="country-@Model.Code">
|
||||
<td>@Model.Code</td>
|
||||
<td>@Model.Alpha3</td>
|
||||
<td>@Model.Name</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", "Countries", new { id = Model.Code })"
|
||||
hx-target="#country-@Model.Code"
|
||||
hx-swap="outerHTML">
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<form
|
||||
asp-action="Delete"
|
||||
asp-route-id="@Model.Code"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
hx-post="@Url.Action("Delete", "Countries", new { id = Model.Code })"
|
||||
hx-include="#countries-state"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete country '@Model.Name'?">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -0,0 +1,47 @@
|
||||
@model IList<Events.MVC.Models.Countries.CountryTranslationViewModel>
|
||||
|
||||
@{
|
||||
var prefix = (string?)ViewData[Constants.ViewDataKeys.Prefix] ?? "Translations";
|
||||
var canRemoveRows = (bool?)ViewData[Constants.ViewDataKeys.CanRemoveRows] ?? true;
|
||||
var rows = Model.Count == 0 ? [new Events.MVC.Models.Countries.CountryTranslationViewModel()] : Model;
|
||||
}
|
||||
|
||||
<div class="country-translations-editor" data-country-translations data-prefix="@prefix">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2 mb-2">
|
||||
<span class="form-label mb-0">Translations</span>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" data-add-translation>Add translation</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2" data-translation-list>
|
||||
@for (var i = 0; i < rows.Count; i++)
|
||||
{
|
||||
<div class="row g-2 align-items-start" data-translation-row>
|
||||
<div class="col-sm-3">
|
||||
<input name="@($"{prefix}[{i}].LanguageCode")" value="@rows[i].LanguageCode" class="form-control" placeholder="en" />
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<input name="@($"{prefix}[{i}].Name")" value="@rows[i].Name" class="form-control" placeholder="English name" />
|
||||
</div>
|
||||
<div class="col-sm-2 d-grid">
|
||||
<button type="button" class="btn btn-outline-danger" data-remove-translation @(!canRemoveRows ? "data-keep-one" : null) @(rows.Count == 1 && !canRemoveRows ? "disabled" : null)>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<template data-translation-template>
|
||||
<div class="row g-2 align-items-start" data-translation-row>
|
||||
<div class="col-sm-3">
|
||||
<input class="form-control" data-field="LanguageCode" placeholder="en" />
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<input class="form-control" data-field="Name" placeholder="English name" />
|
||||
</div>
|
||||
<div class="col-sm-2 d-grid">
|
||||
<button type="button" class="btn btn-outline-danger" data-remove-translation @(!canRemoveRows ? "data-keep-one" : null)>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="form-text">Enter a language code such as <code>en</code>, <code>de</code>, or <code>hr</code>.</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
@model Events.MVC.Models.Countries.CountryViewModel
|
||||
|
||||
<form
|
||||
asp-action="Create"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Create", "Countries")"
|
||||
hx-include="#countries-state"
|
||||
hx-target="#countries-list"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger small mb-3"></div>
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-sm-3 col-lg-2">
|
||||
<label asp-for="Code" class="form-label"></label>
|
||||
<input asp-for="Code" class="form-control text-uppercase" />
|
||||
<span asp-validation-for="Code" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-3 col-lg-2">
|
||||
<label asp-for="Alpha3" class="form-label"></label>
|
||||
<input asp-for="Alpha3" class="form-control text-uppercase" />
|
||||
<span asp-validation-for="Alpha3" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<label asp-for="Name" class="form-label"></label>
|
||||
<input asp-for="Name" class="form-control" />
|
||||
<span asp-validation-for="Name" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<button type="submit" class="btn btn-primary">Add country</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<partial name="_CountryTranslationsEditor" model="Model.Translations" view-data='new ViewDataDictionary(ViewData) { ["Prefix"] = "Translations", ["CanRemoveRows"] = false }' />
|
||||
</div>
|
||||
</form>
|
||||
43
Events-MVC/Events.MVC/Views/Events/Index.cshtml
Normal file
43
Events-MVC/Events.MVC/Views/Events/Index.cshtml
Normal file
@@ -0,0 +1,43 @@
|
||||
@model PagedList<Events.MVC.Models.Events.EventViewModel>
|
||||
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = "Events";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New event";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-event-panel";
|
||||
}
|
||||
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<section id="create-event-panel" class="collapse">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 mb-3">Add a new event</h2>
|
||||
<div id="create-event-form">
|
||||
<partial name="_CreateEventForm" model='new Events.MVC.Models.Events.EventViewModel { EventDate = DateOnly.FromDateTime(DateTime.Today) }' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<partial name="_EventsList" model="Model" />
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.EventCreated)), function () {
|
||||
var form = document.querySelector("#create-event-form form");
|
||||
if (form) {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
var dateInput = document.querySelector("#create-event-form input[type='date']");
|
||||
if (dateInput && !dateInput.value) {
|
||||
dateInput.value = new Date().toISOString().split("T")[0];
|
||||
}
|
||||
|
||||
var panel = document.getElementById("create-event-panel");
|
||||
if (panel && window.bootstrap) {
|
||||
bootstrap.Collapse.getOrCreateInstance(panel).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
26
Events-MVC/Events.MVC/Views/Events/_CreateEventForm.cshtml
Normal file
26
Events-MVC/Events.MVC/Views/Events/_CreateEventForm.cshtml
Normal file
@@ -0,0 +1,26 @@
|
||||
@model Events.MVC.Models.Events.EventViewModel
|
||||
|
||||
<form
|
||||
asp-action="Create"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Create", "Events")"
|
||||
hx-include="#events-state"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-lg-5">
|
||||
<label asp-for="Name" class="form-label"></label>
|
||||
<input asp-for="Name" class="form-control" />
|
||||
<span asp-validation-for="Name" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-4 col-lg-3">
|
||||
<label asp-for="EventDate" class="form-label"></label>
|
||||
<input asp-for="EventDate" class="form-control" type="date" />
|
||||
<span asp-validation-for="EventDate" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<button type="submit" class="btn btn-primary">Add event</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
40
Events-MVC/Events.MVC/Views/Events/_EventEditRow.cshtml
Normal file
40
Events-MVC/Events.MVC/Views/Events/_EventEditRow.cshtml
Normal file
@@ -0,0 +1,40 @@
|
||||
@model Events.MVC.Models.Events.EventViewModel
|
||||
|
||||
<tr id="event-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td colspan="4">
|
||||
<form
|
||||
asp-action="Edit"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Edit", "Events", new { id = Model.Id })"
|
||||
hx-target="#event-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<input asp-for="Id" type="hidden" />
|
||||
<div class="row g-2 align-items-start">
|
||||
<div class="col-lg-5">
|
||||
<input asp-for="Name" class="form-control" />
|
||||
<span asp-validation-for="Name" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-4 col-lg-3">
|
||||
<input asp-for="EventDate" class="form-control" type="date" />
|
||||
<span asp-validation-for="EventDate" class="text-danger small"></span>
|
||||
</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", "Events", new { id = Model.Id })"
|
||||
hx-target="#event-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
42
Events-MVC/Events.MVC/Views/Events/_EventRow.cshtml
Normal file
42
Events-MVC/Events.MVC/Views/Events/_EventRow.cshtml
Normal file
@@ -0,0 +1,42 @@
|
||||
@model Events.MVC.Models.Events.EventViewModel
|
||||
|
||||
<tr id="event-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td>@Model.Name</td>
|
||||
<td>@Model.EventDate.ToString("dd.MM.yyyy.")</td>
|
||||
<td>@Model.ParticipantsCount</td>
|
||||
<td class="text-end">
|
||||
<div class="d-inline-flex gap-2">
|
||||
<a
|
||||
asp-controller="Registrations"
|
||||
asp-action="Index"
|
||||
asp-route-eventId="@Model.Id"
|
||||
class="btn btn-sm btn-outline-secondary">
|
||||
Registrations
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
hx-get="@Url.Action("EditRow", "Events", new { id = Model.Id })"
|
||||
hx-target="#event-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<form
|
||||
asp-action="Delete"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
hx-post="@Url.Action("Delete", "Events", new { id = Model.Id })"
|
||||
hx-include="#events-state"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete event '@Model.Name'?">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
186
Events-MVC/Events.MVC/Views/Events/_EventsList.cshtml
Normal file
186
Events-MVC/Events.MVC/Views/Events/_EventsList.cshtml
Normal file
@@ -0,0 +1,186 @@
|
||||
@model PagedList<Events.MVC.Models.Events.EventViewModel>
|
||||
|
||||
<section class="card border-0 shadow-sm" id="events-list">
|
||||
<div class="card-body">
|
||||
<div id="events-state" class="d-none">
|
||||
<input type="hidden" name="page" value="@Model.PagingInfo.CurrentPage" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.PagingInfo.Filters" />
|
||||
</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", "Events")"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
onsubmit="var input=this.querySelector('[data-name-filter-input]'); var filters=this.querySelector('[name=filters]'); filters.value=input && input.value.trim() ? 'Name' + String.fromCharCode(64) + '=*' + input.value.trim() : ''; this.querySelector('[name=page]').value='1';">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.PagingInfo.Filters" />
|
||||
|
||||
<div class="d-flex align-items-center gap-3 pt-2">
|
||||
<h2 class="h5 mb-0">Events list</h2>
|
||||
<span class="badge text-bg-light">@(Model.PagingInfo.IsFiltered ? $"{Model.PagingInfo.FilteredItemsCount} / {Model.PagingInfo.TotalItemsCount}" : Model.PagingInfo.TotalItemsCount.ToString())</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
||||
<input
|
||||
id="eventNameFilter"
|
||||
value="@Model.PagingInfo.NameFilter"
|
||||
data-name-filter-input
|
||||
class="form-control"
|
||||
style="max-width: 18rem;"
|
||||
placeholder="Search by event name"
|
||||
aria-label="Filter by event name" />
|
||||
|
||||
<button type="submit" class="btn btn-outline-primary">Filter</button>
|
||||
@if (Model.PagingInfo.IsFiltered)
|
||||
{
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="1"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.Sorts"
|
||||
asp-route-filters=""
|
||||
class="btn btn-outline-secondary"
|
||||
hx-get="@Url.Action("Index", "Events", new { page = 1, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.Sorts, filters = string.Empty })"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Clear
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Id")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Events", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Id"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
ID@(Model.PagingInfo.IsSortedBy("Id") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Name")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Events", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Name"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Name@(Model.PagingInfo.IsSortedBy("Name") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("EventDate")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Events", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("EventDate"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Date@(Model.PagingInfo.IsSortedBy("EventDate") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("ParticipantsCount")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Events", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("ParticipantsCount"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Participants@(Model.PagingInfo.IsSortedBy("ParticipantsCount") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th class="text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (Model.Data.Count == 0)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="5" class="text-body-secondary">No events to display.</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var eventItem in Model.Data)
|
||||
{
|
||||
<partial name="_EventRow" model="eventItem" />
|
||||
}
|
||||
}
|
||||
</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.PagingInfo.CurrentPage of @Model.PagingInfo.TotalPages</small>
|
||||
<form
|
||||
asp-action="Index"
|
||||
method="get"
|
||||
class="d-inline-flex align-items-center gap-2"
|
||||
hx-get="@Url.Action("Index", "Events")"
|
||||
hx-target="#events-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.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.PagingInfo.ItemsPerPage == option)">@option</option>
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<pager
|
||||
page-info="@Model.PagingInfo"
|
||||
page-action="Index"
|
||||
page-title="Enter a page number and press Enter"
|
||||
page-target="#events-list"
|
||||
page-swap="outerHTML"
|
||||
page-push-url="true">
|
||||
</pager>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
15
Events-MVC/Events.MVC/Views/Home/Error.cshtml
Normal file
15
Events-MVC/Events.MVC/Views/Home/Error.cshtml
Normal file
@@ -0,0 +1,15 @@
|
||||
@model Events.MVC.Models.ErrorViewModel
|
||||
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = Constants.ToastTitles.Error;
|
||||
}
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h1 class="h4">An error occurred.</h1>
|
||||
@if (Model.ShowRequestId)
|
||||
{
|
||||
<p class="text-body-secondary mb-0">Request ID: <code>@Model.RequestId</code></p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
10
Events-MVC/Events.MVC/Views/Home/Index.cshtml
Normal file
10
Events-MVC/Events.MVC/Views/Home/Index.cshtml
Normal file
@@ -0,0 +1,10 @@
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = "Home";
|
||||
}
|
||||
|
||||
<section class="card border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<h1 class="h3 mb-3">Events</h1>
|
||||
<p class="mb-0">This sample demonstrates an ASP.NET Core MVC application for managing sports events, countries, people, and registrations using htmx.</p>
|
||||
</div>
|
||||
</section>
|
||||
38
Events-MVC/Events.MVC/Views/People/Index.cshtml
Normal file
38
Events-MVC/Events.MVC/Views/People/Index.cshtml
Normal file
@@ -0,0 +1,38 @@
|
||||
@model Events.MVC.Models.People.PeoplePageViewModel
|
||||
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = "People";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New person";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-person-panel";
|
||||
}
|
||||
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<section id="create-person-panel" class="collapse">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 mb-3">Add a new person</h2>
|
||||
<div id="create-person-form">
|
||||
<partial name="_CreatePersonForm" model='(Events.MVC.Models.People.PersonViewModel)ViewData[Constants.ViewDataKeys.CreatePersonModel]!' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<partial name="_PeopleList" model="Model" />
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.PersonCreated)), function () {
|
||||
var form = document.querySelector("#create-person-form form");
|
||||
if (form) {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
var panel = document.getElementById("create-person-panel");
|
||||
if (panel && window.bootstrap) {
|
||||
bootstrap.Collapse.getOrCreateInstance(panel).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
84
Events-MVC/Events.MVC/Views/People/_CreatePersonForm.cshtml
Normal file
84
Events-MVC/Events.MVC/Views/People/_CreatePersonForm.cshtml
Normal file
@@ -0,0 +1,84 @@
|
||||
@model Events.MVC.Models.People.PersonViewModel
|
||||
|
||||
<form
|
||||
asp-action="Create"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Create", "People")"
|
||||
hx-include="#people-state"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger small mb-3"></div>
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstName" class="form-label"></label>
|
||||
<input asp-for="FirstName" class="form-control" />
|
||||
<span asp-validation-for="FirstName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastName" class="form-label"></label>
|
||||
<input asp-for="LastName" class="form-control" />
|
||||
<span asp-validation-for="LastName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstNameTranscription" class="form-label"></label>
|
||||
<input asp-for="FirstNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="FirstNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastNameTranscription" class="form-label"></label>
|
||||
<input asp-for="LastNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="LastNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="Email" class="form-label"></label>
|
||||
<input asp-for="Email" class="form-control" />
|
||||
<span asp-validation-for="Email" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="ContactPhone" class="form-label"></label>
|
||||
<input asp-for="ContactPhone" class="form-control" />
|
||||
<span asp-validation-for="ContactPhone" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="BirthDate" class="form-label"></label>
|
||||
<input asp-for="BirthDate" type="date" class="form-control" />
|
||||
<span asp-validation-for="BirthDate" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="CountryCode" class="form-label"></label>
|
||||
<select asp-for="CountryCode" asp-items="Model.CountryOptions" class="form-select">
|
||||
<option value="">Select a country</option>
|
||||
</select>
|
||||
<span asp-validation-for="CountryCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="DocumentNumber" class="form-label"></label>
|
||||
<input asp-for="DocumentNumber" class="form-control" />
|
||||
<span asp-validation-for="DocumentNumber" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="AddressLine" class="form-label"></label>
|
||||
<input asp-for="AddressLine" class="form-control" />
|
||||
<span asp-validation-for="AddressLine" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="PostalCode" class="form-label"></label>
|
||||
<input asp-for="PostalCode" class="form-control" />
|
||||
<span asp-validation-for="PostalCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="City" class="form-label"></label>
|
||||
<input asp-for="City" class="form-control" />
|
||||
<span asp-validation-for="City" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="AddressCountry" class="form-label"></label>
|
||||
<input asp-for="AddressCountry" class="form-control" />
|
||||
<span asp-validation-for="AddressCountry" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<button type="submit" class="btn btn-primary">Add person</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
150
Events-MVC/Events.MVC/Views/People/_PeopleList.cshtml
Normal file
150
Events-MVC/Events.MVC/Views/People/_PeopleList.cshtml
Normal file
@@ -0,0 +1,150 @@
|
||||
@model Events.MVC.Models.People.PeoplePageViewModel
|
||||
|
||||
<section class="card border-0 shadow-sm" id="people-list">
|
||||
<div class="card-body">
|
||||
<div id="people-state" class="d-none">
|
||||
<input type="hidden" name="page" value="@Model.People.PagingInfo.CurrentPage" />
|
||||
<input type="hidden" name="pageSize" value="@Model.People.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.People.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", "People")"
|
||||
hx-target="#people-list"
|
||||
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('FullNameTranscription' + 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="page" value="1" />
|
||||
<input type="hidden" name="pageSize" value="@Model.People.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />
|
||||
|
||||
<div class="d-flex align-items-center gap-3 pt-2">
|
||||
<h2 class="h5 mb-0">People list</h2>
|
||||
<span class="badge text-bg-light">@(Model.People.PagingInfo.IsFiltered ? $"{Model.People.PagingInfo.FilteredItemsCount} / {Model.People.PagingInfo.TotalItemsCount}" : Model.People.PagingInfo.TotalItemsCount.ToString())</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
||||
<input
|
||||
id="personNameFilter"
|
||||
value="@Model.People.PagingInfo.NameFilter"
|
||||
data-name-filter-input
|
||||
class="form-control"
|
||||
style="max-width: 18rem;"
|
||||
placeholder="Search by transcribed full name"
|
||||
aria-label="Filter by transcribed full name" />
|
||||
|
||||
<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.People.PagingInfo.IsFiltered)
|
||||
{
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="1"
|
||||
asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.People.PagingInfo.Sorts"
|
||||
asp-route-filters=""
|
||||
class="btn btn-outline-secondary"
|
||||
hx-get="@Url.Action("Index", "People", new { page = 1, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.Sorts, filters = string.Empty })"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Clear
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("Id")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("Id"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
ID@(Model.People.PagingInfo.IsSortedBy("Id") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("FirstNameTranscription")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("FirstNameTranscription"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
First name@(Model.People.PagingInfo.IsSortedBy("FirstNameTranscription") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("LastNameTranscription")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("LastNameTranscription"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Last name@(Model.People.PagingInfo.IsSortedBy("LastNameTranscription") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th></th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("BirthDate")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("BirthDate"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Birth date@(Model.People.PagingInfo.IsSortedBy("BirthDate") ? (Model.People.PagingInfo.IsDescending() ? " v" : " ^") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("CountryName")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("CountryName"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Country@(Model.People.PagingInfo.IsSortedBy("CountryName") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("RegistrationsCount")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("RegistrationsCount"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Registrations@(Model.People.PagingInfo.IsSortedBy("RegistrationsCount") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th class="text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (Model.People.Data.Count == 0)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="8" class="text-body-secondary">No people to display.</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var person in Model.People.Data)
|
||||
{
|
||||
<partial name="_PersonRow" model="person" />
|
||||
}
|
||||
}
|
||||
</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.People.PagingInfo.CurrentPage of @Model.People.PagingInfo.TotalPages</small>
|
||||
<form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2" hx-get="@Url.Action("Index", "People")" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.People.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.People.PagingInfo.ItemsPerPage == option)">@option</option>
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<pager
|
||||
page-info="@Model.People.PagingInfo"
|
||||
page-action="Index"
|
||||
page-title="Enter a page number and press Enter"
|
||||
page-target="#people-list"
|
||||
page-swap="outerHTML"
|
||||
page-push-url="true">
|
||||
</pager>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
100
Events-MVC/Events.MVC/Views/People/_PersonEditRow.cshtml
Normal file
100
Events-MVC/Events.MVC/Views/People/_PersonEditRow.cshtml
Normal file
@@ -0,0 +1,100 @@
|
||||
@model Events.MVC.Models.People.PersonViewModel
|
||||
|
||||
<tr id="person-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td colspan="7">
|
||||
<form
|
||||
asp-action="Edit"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Edit", "People", new { id = Model.Id })"
|
||||
hx-target="#person-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<input asp-for="Id" 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-3">
|
||||
<label asp-for="FirstName" class="form-label"></label>
|
||||
<input asp-for="FirstName" class="form-control" />
|
||||
<span asp-validation-for="FirstName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastName" class="form-label"></label>
|
||||
<input asp-for="LastName" class="form-control" />
|
||||
<span asp-validation-for="LastName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstNameTranscription" class="form-label"></label>
|
||||
<input asp-for="FirstNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="FirstNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastNameTranscription" class="form-label"></label>
|
||||
<input asp-for="LastNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="LastNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="Email" class="form-label"></label>
|
||||
<input asp-for="Email" class="form-control" />
|
||||
<span asp-validation-for="Email" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="ContactPhone" class="form-label"></label>
|
||||
<input asp-for="ContactPhone" class="form-control" />
|
||||
<span asp-validation-for="ContactPhone" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="BirthDate" class="form-label"></label>
|
||||
<input asp-for="BirthDate" type="date" class="form-control" />
|
||||
<span asp-validation-for="BirthDate" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="CountryCode" class="form-label"></label>
|
||||
<select asp-for="CountryCode" asp-items="Model.CountryOptions" class="form-select">
|
||||
<option value="">Select a country</option>
|
||||
</select>
|
||||
<span asp-validation-for="CountryCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="DocumentNumber" class="form-label"></label>
|
||||
<input asp-for="DocumentNumber" class="form-control" />
|
||||
<span asp-validation-for="DocumentNumber" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="AddressLine" class="form-label"></label>
|
||||
<input asp-for="AddressLine" class="form-control" />
|
||||
<span asp-validation-for="AddressLine" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="PostalCode" class="form-label"></label>
|
||||
<input asp-for="PostalCode" class="form-control" />
|
||||
<span asp-validation-for="PostalCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="City" class="form-label"></label>
|
||||
<input asp-for="City" class="form-control" />
|
||||
<span asp-validation-for="City" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="AddressCountry" class="form-label"></label>
|
||||
<input asp-for="AddressCountry" class="form-control" />
|
||||
<span asp-validation-for="AddressCountry" class="text-danger small"></span>
|
||||
</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", "People", new { id = Model.Id })"
|
||||
hx-target="#person-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
37
Events-MVC/Events.MVC/Views/People/_PersonRow.cshtml
Normal file
37
Events-MVC/Events.MVC/Views/People/_PersonRow.cshtml
Normal file
@@ -0,0 +1,37 @@
|
||||
@model Events.MVC.Models.People.PersonViewModel
|
||||
|
||||
<tr id="person-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td>@Model.FirstNameTranscription</td>
|
||||
<td>@Model.LastNameTranscription</td>
|
||||
<td>@Model.FullName</td>
|
||||
<td>@Model.BirthDate?.ToString("dd.MM.yyyy.")</td>
|
||||
<td>@Model.CountryName</td>
|
||||
<td>@Model.RegistrationsCount</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", "People", new { id = Model.Id })"
|
||||
hx-target="#person-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<form
|
||||
asp-action="Delete"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
hx-post="@Url.Action("Delete", "People", new { id = Model.Id })"
|
||||
hx-include="#people-state"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete person '@Model.FullName'?">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
85
Events-MVC/Events.MVC/Views/Registrations/Index.cshtml
Normal file
85
Events-MVC/Events.MVC/Views/Registrations/Index.cshtml
Normal 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>
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
157
Events-MVC/Events.MVC/Views/Shared/_Layout.cshtml
Normal file
157
Events-MVC/Events.MVC/Views/Shared/_Layout.cshtml
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@ViewData[Constants.ViewDataKeys.Title] - Events</title>
|
||||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
</head>
|
||||
<body class="bg-body-tertiary">
|
||||
<header class="border-bottom bg-white shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-semibold" asp-controller="Home" asp-action="Index">Events</a>
|
||||
@if (ViewData[Constants.ViewDataKeys.HeaderActionLabel] is string headerActionLabel && ViewData[Constants.ViewDataKeys.HeaderActionTarget] is string headerActionTarget)
|
||||
{
|
||||
<div class="ms-3 d-none d-lg-flex align-items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="@headerActionTarget"
|
||||
aria-expanded="false"
|
||||
aria-controls="@headerActionTarget.TrimStart('#')">
|
||||
@headerActionLabel
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="mainNav">
|
||||
@if (ViewData[Constants.ViewDataKeys.HeaderActionLabel] is string mobileHeaderActionLabel && ViewData[Constants.ViewDataKeys.HeaderActionTarget] is string mobileHeaderActionTarget)
|
||||
{
|
||||
<div class="d-lg-none mb-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="@mobileHeaderActionTarget"
|
||||
aria-expanded="false"
|
||||
aria-controls="@mobileHeaderActionTarget.TrimStart('#')">
|
||||
@mobileHeaderActionLabel
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<ul class="navbar-nav ms-auto gap-lg-2">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Events" asp-action="Index">Events</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Sports" asp-action="Index">Sports</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Countries" asp-action="Index">Countries</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="People" asp-action="Index">People</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Registrations" asp-action="Index">Registrations</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container py-4">
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="app-toast" class="toast border-0 shadow-sm text-white" role="status" aria-live="polite" aria-atomic="true">
|
||||
<div id="app-toast-header" class="toast-header">
|
||||
<strong id="app-toast-title" class="me-auto">Notification</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div id="app-toast-body" class="toast-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="~/lib/htmx.org/dist/htmx.min.js"></script>
|
||||
<script src="~/js/pager.js" asp-append-version="true"></script>
|
||||
<script>
|
||||
var toastVariantSuccess = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.ToastVariants.Success));
|
||||
var toastVariantError = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.ToastVariants.Error));
|
||||
var toastTitleNotification = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.ToastTitles.Notification));
|
||||
var toastTitleError = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.ToastTitles.Error));
|
||||
|
||||
function showAppToast(options) {
|
||||
var toastElement = document.getElementById("app-toast");
|
||||
var headerElement = document.getElementById("app-toast-header");
|
||||
var titleElement = document.getElementById("app-toast-title");
|
||||
var bodyElement = document.getElementById("app-toast-body");
|
||||
|
||||
if (!toastElement || !headerElement || !titleElement || !bodyElement || !window.bootstrap) {
|
||||
return;
|
||||
}
|
||||
|
||||
var variant = options.variant || toastVariantSuccess;
|
||||
toastElement.classList.remove("toast-success", "toast-error");
|
||||
toastElement.classList.add(variant === toastVariantError ? "toast-error" : "toast-success");
|
||||
|
||||
headerElement.classList.remove("text-bg-success", "text-bg-danger");
|
||||
headerElement.classList.add(variant === toastVariantError ? "text-bg-danger" : "text-bg-success");
|
||||
|
||||
titleElement.textContent = options.title || toastTitleNotification;
|
||||
bodyElement.textContent = options.message || "";
|
||||
|
||||
var toast = bootstrap.Toast.getOrCreateInstance(toastElement, { delay: 2500 });
|
||||
toast.show();
|
||||
}
|
||||
|
||||
document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.ShowToast)), function (event) {
|
||||
showAppToast(event.detail || {});
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:responseError", function (event) {
|
||||
var xhr = event.detail.xhr;
|
||||
var message = "An error occurred while processing the request.";
|
||||
|
||||
if (xhr && xhr.responseText) {
|
||||
try {
|
||||
var problem = JSON.parse(xhr.responseText);
|
||||
message = problem.detail || problem.title || xhr.responseText;
|
||||
}
|
||||
catch {
|
||||
message = xhr.responseText;
|
||||
}
|
||||
}
|
||||
|
||||
showAppToast({
|
||||
variant: toastVariantError,
|
||||
title: toastTitleError,
|
||||
message: message
|
||||
});
|
||||
});
|
||||
|
||||
@if (TempData[Constants.TempDataKeys.ToastMessage] is string toastMessage)
|
||||
{
|
||||
var initialToastJson = System.Text.Json.JsonSerializer.Serialize(new
|
||||
{
|
||||
variant = TempData[Constants.TempDataKeys.ToastVariant] as string ?? Constants.ToastVariants.Success,
|
||||
title = TempData[Constants.TempDataKeys.ToastTitle] as string ?? Constants.ToastTitles.Notification,
|
||||
message = toastMessage
|
||||
});
|
||||
@:showAppToast(@Html.Raw(initialToastJson));
|
||||
}
|
||||
</script>
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
</body>
|
||||
</html>
|
||||
38
Events-MVC/Events.MVC/Views/Sports/Index.cshtml
Normal file
38
Events-MVC/Events.MVC/Views/Sports/Index.cshtml
Normal file
@@ -0,0 +1,38 @@
|
||||
@model PagedList<Events.MVC.Models.Sports.SportViewModel>
|
||||
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = "Sports";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New sport";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-sport-panel";
|
||||
}
|
||||
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<section id="create-sport-panel" class="collapse">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 mb-3">Add a new sport</h2>
|
||||
<div id="create-sport-form">
|
||||
<partial name="_CreateSportForm" model='new Events.MVC.Models.Sports.SportViewModel()' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<partial name="_SportsList" model="Model" />
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.SportCreated)), function () {
|
||||
var form = document.querySelector("#create-sport-form form");
|
||||
if (form) {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
var panel = document.getElementById("create-sport-panel");
|
||||
if (panel && window.bootstrap) {
|
||||
bootstrap.Collapse.getOrCreateInstance(panel).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
21
Events-MVC/Events.MVC/Views/Sports/_CreateSportForm.cshtml
Normal file
21
Events-MVC/Events.MVC/Views/Sports/_CreateSportForm.cshtml
Normal file
@@ -0,0 +1,21 @@
|
||||
@model Events.MVC.Models.Sports.SportViewModel
|
||||
|
||||
<form
|
||||
asp-action="Create"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Create", "Sports")"
|
||||
hx-include="#sports-state"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-sm-8 col-lg-6">
|
||||
<label asp-for="Name" class="form-label"></label>
|
||||
<input asp-for="Name" class="form-control" />
|
||||
<span asp-validation-for="Name" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<button type="submit" class="btn btn-primary">Add sport</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
36
Events-MVC/Events.MVC/Views/Sports/_SportEditRow.cshtml
Normal file
36
Events-MVC/Events.MVC/Views/Sports/_SportEditRow.cshtml
Normal file
@@ -0,0 +1,36 @@
|
||||
@model Events.MVC.Models.Sports.SportViewModel
|
||||
|
||||
<tr id="sport-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td colspan="2">
|
||||
<form
|
||||
asp-action="Edit"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Edit", "Sports", new { id = Model.Id })"
|
||||
hx-target="#sport-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<input asp-for="Id" type="hidden" />
|
||||
<div class="row g-2 align-items-start">
|
||||
<div class="col-lg-6">
|
||||
<input asp-for="Name" class="form-control" />
|
||||
<span asp-validation-for="Name" class="text-danger small"></span>
|
||||
</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", "Sports", new { id = Model.Id })"
|
||||
hx-target="#sport-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
32
Events-MVC/Events.MVC/Views/Sports/_SportRow.cshtml
Normal file
32
Events-MVC/Events.MVC/Views/Sports/_SportRow.cshtml
Normal file
@@ -0,0 +1,32 @@
|
||||
@model Events.MVC.Models.Sports.SportViewModel
|
||||
|
||||
<tr id="sport-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td>@Model.Name</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", "Sports", new { id = Model.Id })"
|
||||
hx-target="#sport-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<form
|
||||
asp-action="Delete"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
hx-post="@Url.Action("Delete", "Sports", new { id = Model.Id })"
|
||||
hx-include="#sports-state"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete sport '@Model.Name'?">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
156
Events-MVC/Events.MVC/Views/Sports/_SportsList.cshtml
Normal file
156
Events-MVC/Events.MVC/Views/Sports/_SportsList.cshtml
Normal file
@@ -0,0 +1,156 @@
|
||||
@model PagedList<Events.MVC.Models.Sports.SportViewModel>
|
||||
|
||||
<section class="card border-0 shadow-sm" id="sports-list">
|
||||
<div class="card-body">
|
||||
<div id="sports-state" class="d-none">
|
||||
<input type="hidden" name="page" value="@Model.PagingInfo.CurrentPage" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.PagingInfo.Filters" />
|
||||
</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", "Sports")"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
onsubmit="var input=this.querySelector('[data-name-filter-input]'); var filters=this.querySelector('[name=filters]'); filters.value=input && input.value.trim() ? 'Name' + String.fromCharCode(64) + '=*' + input.value.trim() : ''; this.querySelector('[name=page]').value='1';">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.PagingInfo.Filters" />
|
||||
|
||||
<div class="d-flex align-items-center gap-3 pt-2">
|
||||
<h2 class="h5 mb-0">Sports list</h2>
|
||||
<span class="badge text-bg-light">@(Model.PagingInfo.IsFiltered ? $"{Model.PagingInfo.FilteredItemsCount} / {Model.PagingInfo.TotalItemsCount}" : Model.PagingInfo.TotalItemsCount.ToString())</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
||||
<input
|
||||
id="nameFilter"
|
||||
value="@Model.PagingInfo.NameFilter"
|
||||
data-name-filter-input
|
||||
class="form-control"
|
||||
style="max-width: 18rem;"
|
||||
placeholder="Search by sport name"
|
||||
aria-label="Filter by sport name" />
|
||||
|
||||
<button type="submit" class="btn btn-outline-primary">Filter</button>
|
||||
@if (Model.PagingInfo.IsFiltered)
|
||||
{
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="1"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.Sorts"
|
||||
asp-route-filters=""
|
||||
class="btn btn-outline-secondary"
|
||||
hx-get="@Url.Action("Index", "Sports", new { page = 1, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.Sorts, filters = string.Empty })"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Clear
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Id")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Sports", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Id"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
ID@(Model.PagingInfo.IsSortedBy("Id") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort("Name")"
|
||||
asp-route-filters="@Model.PagingInfo.Filters"
|
||||
class="link-dark link-underline-opacity-0"
|
||||
hx-get="@Url.Action("Index", "Sports", new { page = Model.PagingInfo.CurrentPage, pageSize = Model.PagingInfo.ItemsPerPage, sorts = Model.PagingInfo.ToggleSort("Name"), filters = Model.PagingInfo.Filters })"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Name@(Model.PagingInfo.IsSortedBy("Name") ? (Model.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th class="text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="sports-table-body">
|
||||
@if (Model.Data.Count == 0)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="3" class="text-body-secondary">No sports to display.</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var sport in Model.Data)
|
||||
{
|
||||
<partial name="_SportRow" model="sport" />
|
||||
}
|
||||
}
|
||||
</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.PagingInfo.CurrentPage of @Model.PagingInfo.TotalPages</small>
|
||||
<form
|
||||
asp-action="Index"
|
||||
method="get"
|
||||
class="d-inline-flex align-items-center gap-2"
|
||||
hx-get="@Url.Action("Index", "Sports")"
|
||||
hx-target="#sports-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.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.PagingInfo.ItemsPerPage == option)">@option</option>
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<pager
|
||||
page-info="@Model.PagingInfo"
|
||||
page-action="Index"
|
||||
page-title="Enter a page number and press Enter"
|
||||
page-target="#sports-list"
|
||||
page-swap="outerHTML"
|
||||
page-push-url="true">
|
||||
</pager>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
5
Events-MVC/Events.MVC/Views/_ViewImports.cshtml
Normal file
5
Events-MVC/Events.MVC/Views/_ViewImports.cshtml
Normal file
@@ -0,0 +1,5 @@
|
||||
@using Events.EF.Models
|
||||
@using Events.MVC
|
||||
@using Events.MVC.Models
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
@addTagHelper *, Events.MVC
|
||||
3
Events-MVC/Events.MVC/Views/_ViewStart.cshtml
Normal file
3
Events-MVC/Events.MVC/Views/_ViewStart.cshtml
Normal file
@@ -0,0 +1,3 @@
|
||||
@{
|
||||
Layout = "_Layout";
|
||||
}
|
||||
Reference in New Issue
Block a user