use a table for blocks (#2489)

CHANGELOG.md

@@ -4,12 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Added
+- Add search field to filter blocks table
+
 ### Fixed
 - Do not allow deleting ffmpeg profiles that are used by channels
 - Allow ffmpeg profiles using VAAPI accel to set h264 video profile
 - Fix HLS Direct playback, and make it accessible on separate streaming port
 - Fix playback troubleshooting when using multiple watermarks or multiple graphics elements
 
+### Changed
+- Use table instead of tree view on blocks page
+
 ## [25.7.0] - 2025-09-14
 ### Added
 - Add new collection type `Rerun Collection`

ErsatzTV.Application/Scheduling/Queries/GetAllBlocks.cs

@@ -0,0 +1,3 @@
+namespace ErsatzTV.Application.Scheduling;
+
+public record GetAllBlocks : IRequest<List<BlockViewModel>>;

ErsatzTV.Application/Scheduling/Queries/GetAllBlocksHandler.cs

@@ -0,0 +1,54 @@
+using ErsatzTV.Core.Domain.Scheduling;
+using ErsatzTV.Infrastructure.Data;
+using Microsoft.EntityFrameworkCore;
+
+namespace ErsatzTV.Application.Scheduling;
+
+public class GetAllBlocksHandler(IDbContextFactory<TvContext> dbContextFactory)
+    : IRequestHandler<GetAllBlocks, List<BlockViewModel>>
+{
+    public async Task<List<BlockViewModel>> Handle(GetAllBlocks request, CancellationToken cancellationToken)
+    {
+        await using TvContext dbContext = await dbContextFactory.CreateDbContextAsync(cancellationToken);
+
+        List<Block> blocks = await dbContext.Blocks
+            .AsNoTracking()
+            .ToListAsync(cancellationToken);
+
+        List<BlockGroup> blockGroups = await dbContext.BlockGroups
+            .AsNoTracking()
+            .ToListAsync(cancellationToken);
+
+        var unusedBlockGroups = blockGroups.ToList();
+
+        // match blocks to block groups
+        foreach (var block in blocks)
+        {
+            var maybeBlockGroup = blockGroups.FirstOrDefault(bg => bg.Id == block.BlockGroupId);
+            if (maybeBlockGroup != null)
+            {
+                unusedBlockGroups.Remove(maybeBlockGroup);
+                block.BlockGroup = maybeBlockGroup;
+            }
+        }
+
+        // create dummy blocks for any groups that have no blocks yet
+        foreach (var unusedGroup in unusedBlockGroups)
+        {
+            var dummyBlock = new Block
+            {
+                Id = unusedGroup.Id * -1,
+                BlockGroupId = unusedGroup.Id,
+                BlockGroup = unusedGroup,
+                Name = "(none)"
+            };
+
+            blocks.Add(dummyBlock);
+        }
+
+        return blocks.Map(Mapper.ProjectToViewModel)
+            .OrderBy(b => b.GroupName)
+            .ThenBy(b => b.Name)
+            .ToList();
+    }
+}

ErsatzTV/Pages/Blocks.razor

@@ -48,48 +48,82 @@
                     Add Block
                 </MudButton>
             </MudStack>
-            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
+            <MudTable Hover="true"
-                <div class="d-flex"></div>
+                      Dense="true"
-                <MudTreeView T="BlockTreeItemViewModel" Items="@_treeItems" Hover="true" Style="width: 100%">
+                      Class="mt-8"
-                    <ItemTemplate Context="item">
+                      Items="@_blocks"
-                        <MudTreeViewItem T="BlockTreeItemViewModel" Items="@item.Value!.TreeItems" Icon="@item.Value.Icon" Value="@item.Value">
+                      GroupBy="@_groupDefinition"
-                            <BodyContent>
+                      GroupHeaderStyle="background-color:var(--mud-palette-appbarbackground)"
-                                <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%">
+                      RowStyle="background-color:var(--mud-palette-background-gray)"
-                                    <MudGrid Justify="Justify.FlexStart">
+                      Filter="new Func<BlockViewModel,bool>(FilterBlocks)">
-                                        <MudItem xs="5">
+                <ColGroup>
-                                            <MudText>@item.Value.Text</MudText>
+                    <MudHidden Breakpoint="Breakpoint.Xs">
-                                        </MudItem>
+                        <col style="width: 60px;"/>
-                                        @if (!string.IsNullOrWhiteSpace(item.Value.EndText))
+                        <col/>
-                                        {
+                        <col style="width: 120px;"/>
-                                            <MudItem xs="6">
+                    </MudHidden>
-                                                <MudText>@item.Value.EndText</MudText>
+                </ColGroup>
-                                            </MudItem>
+                <ToolBarContent>
-                                        }
+                    <MudTextField T="string"
-                                    </MudGrid>
+                                  ValueChanged="@(s => OnSearch(s))"
-                                    <div style="justify-self: end;">
+                                  Placeholder="Search for blocks"
-                                        @foreach (int blockId in Optional(item.Value.BlockId))
+                                  Adornment="Adornment.Start"
-                                        {
+                                  AdornmentIcon="@Icons.Material.Filled.FilterList"
-                                            <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Medium" Color="Color.Inherit" Href="@($"blocks/{blockId}")"/>
+                                  Clearable="true">
-                                        }
+                    </MudTextField>
-                                        <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Color="Color.Inherit" OnClick="@(_ => DeleteItem(item.Value))"/>
+                </ToolBarContent>
-                                    </div>
+                <GroupHeaderTemplate>
-                                </div>
+                    <MudTd Class="mud-table-cell-custom-group">
-                            </BodyContent>
+                        @($"{context.Key}")
-                        </MudTreeViewItem>
+                    </MudTd>
-                    </ItemTemplate>
+                    <MudTd>
-                </MudTreeView>
+                        <div style="align-items: center; display: flex;">
-            </MudStack>
+                            <div style="width: 48px;"></div>
+                            <MudTooltip Text="Delete Block Group">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               OnClick="@(_ => DeleteBlockGroup(context.Items?.FirstOrDefault()))">
+                                </MudIconButton>
+                            </MudTooltip>
+                        </div>
+                    </MudTd>
+                </GroupHeaderTemplate>
+                <RowTemplate>
+                    <MudTd>@context.Name</MudTd>
+                    <MudTd>
+                        <div class="d-flex">
+                            @if (context.Id >= 0)
+                            {
+                                <MudTooltip Text="Edit Block">
+                                    <MudIconButton Icon="@Icons.Material.Filled.Edit"
+                                                   Href="@($"blocks/{context.Id}")">
+                                    </MudIconButton>
+                                </MudTooltip>
+                                <MudTooltip Text="Delete Block">
+                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                                   OnClick="@(_ => DeleteBlock(context))">
+                                    </MudIconButton>
+                                </MudTooltip>
+                            }
+                            else
+                            {
+                                <div style="height: 48px; width: 48px"></div>
+                            }
+                        </div>
+                    </MudTd>
+                </RowTemplate>
+            </MudTable>
         </MudContainer>
     </div>
 </MudForm>
 
 @code {
     private CancellationTokenSource _cts;
-    private readonly List<TreeItemData<BlockTreeItemViewModel>> _treeItems = [];
+    private readonly List<BlockViewModel> _blocks = [];
     private List<BlockGroupViewModel> _blockGroups = [];
     private BlockGroupViewModel _selectedBlockGroup;
     private string _blockGroupName;
     private string _blockName;
+    private string _searchString;
 
     public void Dispose()
     {
@@ -108,12 +142,8 @@
         {
             _blockGroups = await Mediator.Send(new GetAllBlockGroups(), token);
 
-            _treeItems.Clear();
+            _blocks.Clear();
-            BlockTreeViewModel tree = await Mediator.Send(new GetBlockTree(), token);
+            _blocks.AddRange(await Mediator.Send(new GetAllBlocks(), token));
-            foreach (BlockTreeBlockGroupViewModel group in tree.Groups)
-            {
-                _treeItems.Add(new TreeItemData<BlockTreeItemViewModel> { Value = new BlockTreeItemViewModel(group) });
-            }
         }
         catch (OperationCanceledException)
         {
@@ -121,6 +151,14 @@
         }
     }
 
+    private readonly TableGroupDefinition<BlockViewModel> _groupDefinition = new()
+    {
+        GroupName = "Group",
+        Indentation = false,
+        Expandable = true,
+        Selector = (e) => e.GroupName
+    };
+
     private async Task AddBlockGroup()
     {
         if (!string.IsNullOrWhiteSpace(_blockGroupName))
@@ -135,11 +173,13 @@
 
             foreach (BlockGroupViewModel blockGroup in result.RightToSeq())
             {
-                _treeItems.Add(new TreeItemData<BlockTreeItemViewModel> { Value = new BlockTreeItemViewModel(blockGroup) });
-                _treeItems.Sort((x, y) => string.Compare(x.Value?.Text, y.Value?.Text, StringComparison.CurrentCulture));
                 _blockGroupName = null;
-
                 _blockGroups = await Mediator.Send(new GetAllBlockGroups(), _cts.Token);
+                _selectedBlockGroup = _blockGroups.Find(bg => bg.Id == blockGroup.Id);
+
+                _blocks.Clear();
+                _blocks.AddRange(await Mediator.Send(new GetAllBlocks(), _cts.Token));
+
                 await InvokeAsync(StateHasChanged);
             }
         }
@@ -157,13 +197,10 @@
                 Logger.LogError("Unexpected error adding block: {Error}", error.Value);
             }
 
-            foreach (BlockViewModel block in result.RightToSeq())
+            if (result.IsRight)
             {
-                foreach (BlockTreeItemViewModel item in _treeItems.Map(i => i.Value).Where(item => item.BlockGroupId == _selectedBlockGroup.Id))
+                _blocks.Clear();
-                {
+                _blocks.AddRange(await Mediator.Send(new GetAllBlocks(), _cts.Token));
-                    item.TreeItems.Add(new TreeItemData<BlockTreeItemViewModel> { Value = new BlockTreeItemViewModel(block) });
-                    item.TreeItems.Sort((x, y) => string.Compare(x.Value?.Text, y.Value?.Text, StringComparison.CurrentCulture));
-                }
 
                 _blockName = null;
                 await InvokeAsync(StateHasChanged);
@@ -171,47 +208,70 @@
         }
     }
 
-    private async Task DeleteItem(BlockTreeItemViewModel treeItem)
+    private void OnSearch(string query)
     {
-        foreach (int blockGroupId in Optional(treeItem.BlockGroupId))
+        _searchString = query;
-        {
+    }
-            var parameters = new DialogParameters { { "EntityType", "block group" }, { "EntityName", treeItem.Text } };
-            var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };
 
-            IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Block Group", parameters, options);
+    private bool FilterBlocks(BlockViewModel block) => FilterBlocks(block, _searchString);
-            DialogResult result = await dialog.Result;
-            if (result is not null && !result.Canceled)
-            {
-                await Mediator.Send(new DeleteBlockGroup(blockGroupId), _cts.Token);
-                _treeItems.RemoveAll(i => i.Value?.BlockGroupId == blockGroupId);
-                if (_selectedBlockGroup?.Id == blockGroupId)
-                {
-                    _selectedBlockGroup = null;
-                }
 
-                _blockGroups = await Mediator.Send(new GetAllBlockGroups(), _cts.Token);
+    private bool FilterBlocks(BlockViewModel block, string searchString)
-                await InvokeAsync(StateHasChanged);
+    {
-            }
+        if (string.IsNullOrWhiteSpace(searchString))
+        {
+            return true;
         }
 
-        foreach (int blockId in Optional(treeItem.BlockId))
+        if (block.Name.Contains(searchString, StringComparison.OrdinalIgnoreCase))
         {
-            var parameters = new DialogParameters { { "EntityType", "block" }, { "EntityName", treeItem.Text } };
+            return true;
-            var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };
+        }
 
-            IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Block", parameters, options);
+        return false;
-            DialogResult result = await dialog.Result;
+    }
-            if (result is not null && !result.Canceled)
-            {
-                await Mediator.Send(new DeleteBlock(blockId), _cts.Token);
-                foreach (BlockTreeItemViewModel parent in _treeItems.Map(i => i.Value))
-                {
-                    parent.TreeItems.RemoveAll(i => i.Value == treeItem);
-                }
 
-                await InvokeAsync(StateHasChanged);
+    private async Task DeleteBlockGroup(BlockViewModel block)
+    {
+        if (block is null)
+        {
+            return;
+        }
+
+        var parameters = new DialogParameters { { "EntityType", "block group" }, { "EntityName", block.GroupName } };
+        var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };
+
+        IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Block Group", parameters, options);
+        DialogResult result = await dialog.Result;
+        if (result is not null && !result.Canceled)
+        {
+            await Mediator.Send(new DeleteBlockGroup(block.GroupId), _cts.Token);
+            if (_selectedBlockGroup?.Id == block.GroupId)
+            {
+                _selectedBlockGroup = null;
             }
+
+            _blockGroups = await Mediator.Send(new GetAllBlockGroups(), _cts.Token);
+            _blocks.Clear();
+            _blocks.AddRange(await Mediator.Send(new GetAllBlocks(), _cts.Token));
+
+            await InvokeAsync(StateHasChanged);
         }
     }
 
+    private async Task DeleteBlock(BlockViewModel block)
+    {
+        var parameters = new DialogParameters { { "EntityType", "block" }, { "EntityName", block.Name } };
+        var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };
+
+        IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Block", parameters, options);
+        DialogResult result = await dialog.Result;
+        if (result is not null && !result.Canceled)
+        {
+            await Mediator.Send(new DeleteBlock(block.Id), _cts.Token);
+            _blocks.Clear();
+            _blocks.AddRange(await Mediator.Send(new GetAllBlocks(), _cts.Token));
+
+            await InvokeAsync(StateHasChanged);
+        }
+    }
 }