flex table track

This commit is contained in:
FrigaT
2026-04-15 18:49:18 +03:00
parent e82dcdeaa4
commit 50ed75b413
2 changed files with 49 additions and 40 deletions

View File

@@ -5,45 +5,48 @@
@inject HttpClient Http
@inject ISnackbar Snackbar
<MudStack>
<MudTextField @bind-Value="_searchQuery"
@bind-Value:after="SearchTracks"
Variant="Variant.Outlined"
FullWidth
Label="Название или ссылка на трек Яндекс.Музыки"
Disabled="@_isSearching"
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary"
/>
<MudStack Style="height: 100%; overflow: hidden;">
<MudItem>
<MudTextField @bind-Value="_searchQuery"
@bind-Value:after="SearchTracks"
Variant="Variant.Outlined"
FullWidth
Label="Название или ссылка на трек Яндекс.Музыки"
Disabled="@_isSearching"
Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary" />
<MudToggleGroup T="TrackSearchType"
@bind-Value="_searchType"
@bind-Value:after="SearchTracks"
Size="Size.Small"
Color="Color.Primary"
Disabled="@(_isSearching)"
>
<MudToggleItem Value="TrackSearchType.All" Text="Все" />
<MudToggleItem Value="TrackSearchType.Track" Text="Трек" />
<MudToggleItem Value="TrackSearchType.Album" Text="Альбом" />
<MudToggleItem Value="TrackSearchType.Artist" Text="Исполнитель" />
</MudToggleGroup>
<MudToggleGroup T="TrackSearchType"
@bind-Value="_searchType"
@bind-Value:after="SearchTracks"
Size="Size.Small"
Color="Color.Primary"
Disabled="@(_isSearching)">
<MudToggleItem Value="TrackSearchType.All" Text="Все" />
<MudToggleItem Value="TrackSearchType.Track" Text="Трек" />
<MudToggleItem Value="TrackSearchType.Album" Text="Альбом" />
<MudToggleItem Value="TrackSearchType.Artist" Text="Исполнитель" />
</MudToggleGroup>
</MudItem>
<MudTable Items="@_searchResults"
Virtualize
Hover="true"
Breakpoint="Breakpoint.Sm"
Loading="@_isSearching">
Virtualize
Hover
Elevation="0"
Class="d-flex flex-grow-1 flex-column"
Style="min-height: 0;"
Breakpoint="Breakpoint.Sm"
Loading="@_isSearching">
<RowTemplate>
<MudTd Style="width: 100%;">
<TrackItem Track="@context" PlaylistShareToken="@ShareToken" />
</MudTd>
<MudTd>
<MudToggleIconButton Toggled="@ExistingTrackIds.Contains(context.TrackId)"
Icon="@Icons.Material.Filled.AddCircle"
Color="@Color.Primary"
ToggledIcon="@Icons.Material.Filled.RemoveCircle"
ToggledColor="@Color.Error"
ToggledChanged="() => ToggleTrack(context)" />
Icon="@Icons.Material.Filled.AddCircle"
Color="@Color.Primary"
ToggledIcon="@Icons.Material.Filled.RemoveCircle"
ToggledColor="@Color.Error"
ToggledChanged="() => ToggleTrack(context)" />
</MudTd>
</RowTemplate>
</MudTable>

View File

@@ -11,7 +11,7 @@
@inject AuthenticationStateProvider AuthProvider
@inject IDialogService DialogService
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-8">
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-4" Style="height: 100%;">
@if (_loading)
{
<MudProgressCircular Indeterminate />
@@ -22,21 +22,26 @@
}
else
{
<MudSplitPanel>
<MudSplitPanel Class="flex-grow-1" Style="height: 100%;">
<FirstPanel>
<MudCard>
<MudCard Class="d-flex flex-column" Style="height: 100%;">
<MudCardHeader>
<CardHeaderContent>
<PlaylistHeader Playlist="@_playlist" />
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" Size="Size.Medium" />
<MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
<MudItem>
<MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" Size="Size.Medium" />
</MudItem>
<MudTable Items="@_tracks"
Virtualize="true"
Height="400px"
Hover="true"
Virtualize
Hover
Elevation="0"
Class="d-flex flex-grow-1 flex-column"
Style="min-height: 0;"
Breakpoint="Breakpoint.Sm"
Loading="@_tracksLoading">
<RowTemplate>
@@ -57,13 +62,14 @@
<SecondPanel>
@if (_canAdd)
{
<MudCard>
<MudCard Class="d-flex flex-column" Style="height: 100%;">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.h5" Color="Color.Primary">Добавление треков</MudText>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
<AddTrackSection ShareToken="Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
</MudCardContent>
</MudCard>