138 lines
5.2 KiB
Plaintext
138 lines
5.2 KiB
Plaintext
@using Microsoft.AspNetCore.Mvc.ViewFeatures
|
|
@model PagedList<PersonInfo>
|
|
@{
|
|
ViewData["Title"] = "People";
|
|
}
|
|
<h2>People list</h2>
|
|
|
|
@{
|
|
(string PropertyName, string Title, bool Sortable)[] columns =
|
|
[
|
|
(nameof(PersonInfo.FirstNameTranscription), "First Name", true),
|
|
(nameof(PersonInfo.LastNameTranscription), "Last Name", true),
|
|
(nameof(PersonInfo.OriginalName), "Original Name", false),
|
|
(nameof(PersonInfo.BirthDate), "Birth Date", true),
|
|
(nameof(PersonInfo.CountryName), "Country Name", true)
|
|
];
|
|
|
|
var personRowViewData = new ViewDataDictionary(ViewData)
|
|
{
|
|
{ Constants.ViewDataKeys.PagingInfo, Model.PagingInfo }
|
|
};
|
|
}
|
|
|
|
|
|
<section class="card border-0 shadow-sm" id="people-list">
|
|
<div class="card-body">
|
|
<form asp-action="Index" method="get"
|
|
class="d-flex justify-content-between align-items-start gap-3 flex-wrap flex-lg-nowrap mb-4">
|
|
<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" />
|
|
|
|
<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.PagingInfo.IsFiltered ? $"{Model.PagingInfo.FilteredItemsCount} / {Model.PagingInfo.TotalItemsCount}" : Model.PagingInfo.TotalItemsCount.ToString())</span>
|
|
<a asp-action="Create"
|
|
asp-route-page="@Model.PagingInfo.CurrentPage"
|
|
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
|
asp-route-sorts="@Model.PagingInfo.Sorts"
|
|
asp-route-searchText="@Model.PagingInfo.SearchText"
|
|
class="btn btn-primary">
|
|
Add
|
|
</a>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
|
<input id="searchText"
|
|
name="searchText"
|
|
value="@Model.PagingInfo.SearchText"
|
|
class="form-control"
|
|
placeholder="Search by country or full name"
|
|
aria-label="Filter by country or full 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"
|
|
class="btn btn-outline-secondary">
|
|
Clear
|
|
</a>
|
|
}
|
|
</div>
|
|
</form>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-hover" id="table-people">
|
|
<thead>
|
|
<tr>
|
|
@foreach (var column in columns)
|
|
{
|
|
<th>
|
|
@if (column.Sortable)
|
|
{
|
|
<a asp-action="Index"
|
|
asp-route-page="@Model.PagingInfo.CurrentPage"
|
|
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
|
asp-route-searchText="@Model.PagingInfo.SearchText"
|
|
asp-route-sorts="@Model.PagingInfo.ToggleSort(column.PropertyName)"
|
|
class="link-dark link-underline-opacity-0">
|
|
@column.Title@(Model.PagingInfo.IsSortedBy(column.PropertyName) ? (Model.PagingInfo.IsDescending() ? " ?" : " ?") : "")
|
|
</a>
|
|
}
|
|
else
|
|
{
|
|
@column.Title
|
|
}
|
|
</th>
|
|
}
|
|
<th class="text-end"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if (Model.Data.Count == 0)
|
|
{
|
|
<tr>
|
|
<td colspan="6" class="text-body-secondary">No data to display.</td>
|
|
</tr>
|
|
}
|
|
else
|
|
{
|
|
@foreach (var person in Model.Data)
|
|
{
|
|
<partial name="_PersonRow" model="person" view-data="personRowViewData" />
|
|
}
|
|
}
|
|
</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">
|
|
<input type="hidden" name="page" value="1" />
|
|
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
|
<input type="hidden" name="searchText" value="@Model.PagingInfo.SearchText" />
|
|
<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">
|
|
</pager>
|
|
</div>
|
|
</div>
|
|
</section>
|