feat: add BatchEdit page and extract reusable batch sub-components from BatchUpload

fix: TrackNumber sort case, stale _imagePath reset, skip Done rows on retry in BatchEdit
2026-06-11 16:56:55 -04:00
parent 92a3bea129
commit 407ed90341
7 changed files with 788 additions and 191 deletions
@@ -0,0 +1,84 @@
+@using Microsoft.AspNetCore.Components.Forms
+
+<MudPaper Class="pa-4" Elevation="2">
+    <MudText Typo="Typo.h6" GutterBottom="true">Tracks</MudText>
+
+    @if (AllowNewTracks)
+    {
+        <InputFile OnChange="HandleWavFilesSelected" accept=".wav,audio/wav,audio/x-wav" multiple disabled="@Disabled" />
+    }
+
+    @if (Tracks.Count == 0)
+    {
+        <MudText Typo="Typo.body2" Color="Color.Default" Class="mt-3">No tracks added yet.</MudText>
+    }
+    else
+    {
+        <MudList T="BatchRowModel" Class="mt-3">
+            @for (var i = 0; i < Tracks.Count; i++)
+            {
+                var index = i;
+                var row = Tracks[index];
+                <div style="@RowStyle(index)" @onclick="() => SelectRow(index)">
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="pa-2">
+                        <MudText Typo="Typo.body2" Style="min-width: 1.5rem;">@(index + 1).</MudText>
+                        <MudText Typo="Typo.body2" Style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@row.TrackName</MudText>
+                        @StatusChip(row)
+                        <MudIconButton Icon="@Icons.Material.Filled.ArrowUpward"
+                                       Size="Size.Small"
+                                       Disabled="@(index == 0 || Disabled)"
+                                       OnClick="@(() => OnMoveUp.InvokeAsync(index))"
+                                       aria-label="Move track up" />
+                        <MudIconButton Icon="@Icons.Material.Filled.ArrowDownward"
+                                       Size="Size.Small"
+                                       Disabled="@(index == Tracks.Count - 1 || Disabled)"
+                                       OnClick="@(() => OnMoveDown.InvokeAsync(index))"
+                                       aria-label="Move track down" />
+                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                       Color="Color.Error"
+                                       Size="Size.Small"
+                                       Disabled="@Disabled"
+                                       OnClick="@(() => OnRemove.InvokeAsync(index))"
+                                       aria-label="Remove track" />
+                    </MudStack>
+                </div>
+            }
+        </MudList>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public List<BatchRowModel> Tracks { get; set; } = new();
+    [Parameter] public int SelectedIndex { get; set; }
+    [Parameter] public EventCallback<int> SelectedIndexChanged { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public bool AllowNewTracks { get; set; } = true;
+    [Parameter] public EventCallback<IReadOnlyList<IBrowserFile>> OnWavFilesSelected { get; set; }
+    [Parameter] public EventCallback<int> OnMoveUp { get; set; }
+    [Parameter] public EventCallback<int> OnMoveDown { get; set; }
+    [Parameter] public EventCallback<int> OnRemove { get; set; }
+
+    private const int MaxFilesPerPick = 50;
+
+    private Task SelectRow(int index) => SelectedIndexChanged.InvokeAsync(index);
+
+    private Task HandleWavFilesSelected(InputFileChangeEventArgs e) =>
+        OnWavFilesSelected.InvokeAsync(e.GetMultipleFiles(MaxFilesPerPick));
+
+    private string RowStyle(int index)
+    {
+        const string baseStyle = "cursor: pointer; border-radius: 4px;";
+        return index == SelectedIndex
+            ? $"{baseStyle} background-color: var(--mud-palette-action-default-hover);"
+            : baseStyle;
+    }
+
+    private RenderFragment StatusChip(BatchRowModel row) => row.Status switch
+    {
+        BatchRowStatus.Uploading => @<MudChip T="string" Size="Size.Small" Color="Color.Info" Variant="Variant.Text">
+            <MudProgressCircular Indeterminate="true" Size="Size.Small" Class="mr-1" />Uploading</MudChip>,
+        BatchRowStatus.Done => @<MudChip T="string" Size="Size.Small" Color="Color.Success" Variant="Variant.Text" Icon="@Icons.Material.Filled.CheckCircle">Done</MudChip>,
+        BatchRowStatus.Failed => @<MudChip T="string" Size="Size.Small" Color="Color.Error" Variant="Variant.Text" Icon="@Icons.Material.Filled.Error">Failed</MudChip>,
+        _ => @<MudChip T="string" Size="Size.Small" Color="Color.Default" Variant="Variant.Text">Queued</MudChip>
+    };
+}