102 lines
4.6 KiB
Plaintext
102 lines
4.6 KiB
Plaintext
@typeparam TItem where TItem : WatchIt.Common.Query.IQueryOrderable<TItem>
|
|
@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TItem>
|
|
|
|
|
|
|
|
<CascadingValue Value="this">
|
|
<div class="vstack gap-3">
|
|
<div class="rounded-3 panel panel-regular p-2 px-3 z-3">
|
|
<div class="container-grid">
|
|
<div class="row gx-3">
|
|
<div class="col">
|
|
<h2 class="m-0">@(Title)</h2>
|
|
</div>
|
|
<div class="col-auto align-self-center">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text">Order by</span>
|
|
<select class="form-select" @onchange="SortingOptionChanged">
|
|
@foreach (KeyValuePair<string, string> sortingOption in SortingOptions)
|
|
{
|
|
<option value="@(sortingOption.Key)">@(sortingOption.Value)</option>
|
|
}
|
|
</select>
|
|
<input type="checkbox" class="btn-check" id="sortingAscending" autocomplete="off" @onchange="SortingAscendingChanged">
|
|
<label class="btn btn-outline-secondary" for="sortingAscending">↓︎</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto align-self-center">
|
|
<div class="d-flex">
|
|
<Dropdown RightAligned>
|
|
<DropdownToggle Color="Color.Secondary" Size="Size.Small">
|
|
<i class="fa fa-filter"></i>
|
|
</DropdownToggle>
|
|
<DropdownMenu Class="p-2">
|
|
<DropdownHeader>Filters</DropdownHeader>
|
|
<DropdownDivider/>
|
|
@(ChildContent)
|
|
<DropdownDivider/>
|
|
<button class="btn btn-secondary btn-sm w-100" @onclick="FilterApplied">Apply</button>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if (_loaded)
|
|
{
|
|
if (string.IsNullOrWhiteSpace(_error))
|
|
{
|
|
if (_items.Count > 0)
|
|
{
|
|
foreach (TItem item in _items)
|
|
{
|
|
<div role="button" class="rounded-3 panel panel-regular p-2" @onclick="@(() => NavigationManager.NavigateTo(string.Format(UrlIdTemplate, IdSource(item))))">
|
|
<ListItemComponent Id="@(IdSource(item))"
|
|
Name="@(NameSource(item))"
|
|
AdditionalNameInfo="@(AdditionalNameInfoSource(item))"
|
|
Rating="@(RatingSource(item))"
|
|
PictureDownloadingTask="@(PictureDownloadingTask)"/>
|
|
</div>
|
|
}
|
|
if (!_allItemsLoaded)
|
|
{
|
|
<div role="button" class="rounded-3 panel panel-regular p-3" @onclick="DownloadItems">
|
|
<div class="d-flex justify-content-center">
|
|
@if (!_itemsLoading)
|
|
{
|
|
<strong>Load more</strong>
|
|
}
|
|
else
|
|
{
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
<strong>Loading...</strong>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="panel">
|
|
<div class="d-flex justify-content-center">
|
|
<span>No items found</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<ErrorPanelComponent ErrorMessage="@_error"/>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="m-5">
|
|
<LoadingComponent/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</CascadingValue>
|
|
|