add basic selection behavior to search results

ErsatzTV/Pages/Search.razor

@@ -27,7 +27,10 @@
             {
                 <MediaCard Data="@card"
                            Link="@($"/media/movies/{card.MovieId}")"
-                           AddToCollectionClicked="@AddToCollection"/>
+                           AddToCollectionClicked="@AddToCollection"
+                           SelectClicked="@(e => SelectClicked(card, e))"
+                           IsSelected="@_selectedCards.Contains(card)"
+                           IsSelectMode="@_selectedCards.Any()"/>
             }
         </MudContainer>
     }
@@ -50,6 +53,8 @@
 @code {
     private string _query;
     private SearchCardResultsViewModel _data;
+    private System.Collections.Generic.HashSet<MediaCardViewModel> _selectedCards;
+    private MediaCardViewModel _selectedLast;
 
     protected override async Task OnInitializedAsync()
     {
@@ -61,6 +66,39 @@
             Either<BaseError, SearchCardResultsViewModel> maybeResults = await Mediator.Send(new GetSearchCards(_query));
             maybeResults.IfRight(results => _data = results);
         }
+
+        _selectedCards = new System.Collections.Generic.HashSet<MediaCardViewModel>();
+    }
+
+    private async Task SelectClicked(MovieCardViewModel movie, MouseEventArgs e)
+    {
+        if (_selectedCards.Contains(movie))
+        {
+            _selectedCards.Remove(movie);
+        }
+        else
+        {
+            if (e.ShiftKey && _selectedLast is MovieCardViewModel selectedMovie)
+            {
+                var sorted = _data.MovieCards.OrderBy(m => m.SortTitle).ToList();
+                int start = sorted.IndexOf(selectedMovie);
+                int finish = sorted.IndexOf(movie);
+                if (start > finish)
+                {
+                    int temp = start;
+                    start = finish;
+                    finish = temp;
+                }
+
+                for (int i = start; i < finish; i++)
+                {
+                    _selectedCards.Add(sorted[i]);
+                }
+            }
+
+            _selectedLast = movie;
+            _selectedCards.Add(movie);
+        }
     }
 
     private async Task AddToCollection(MediaCardViewModel card)

ErsatzTV/Shared/MainLayout.razor

@@ -15,7 +15,7 @@
             </a>
         </div>
         <MudTextField T="string"
-                      @ref="                            _textField"
+                      @ref="_textField"
                       AdornmentIcon="@Icons.Material.Filled.Search"
                       Adornment="Adornment.Start"
                       Variant="Variant.Outlined"

ErsatzTV/Shared/MediaCard.razor

@@ -5,7 +5,7 @@
 <div class="@((ContainerClass ?? "media-card-container mr-6") + " pb-3")">
     @if (!string.IsNullOrWhiteSpace(Link))
     {
-        <div style="position: relative">
+        <div class="@(IsSelected ? "media-card-selected" : "")" style="position: relative; border-radius: 4px;">
             <MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
                 @if (string.IsNullOrWhiteSpace(Data.Poster))
                 {
@@ -14,17 +14,34 @@
                     </MudText>
                 }
             </MudPaper>
+            @if (IsSelected)
+            {
+                <div style="height: 48px; width: 48px; top: 0; left: 0; position: absolute; display: flex">
+                    <MudIcon Color="Color.Tertiary"
+                             Icon="@Icons.Material.Filled.CheckBox"
+                             Style="margin: auto"/>
+                </div>
+            }
             <div class="media-card-overlay" style="">
-                <MudButton Link="@Link" Style="height: 100%; width: 100%">
+                <MudButton Link="@(IsSelectMode ? null : Link)"
+                           Style="height: 100%; width: 100%"
+                           OnClick="@(e => IsSelectMode ? SelectClicked.InvokeAsync(e) : Task.CompletedTask)">
                 </MudButton>
-                @if (AddToCollectionClicked.HasDelegate)
+                @if (SelectClicked.HasDelegate)
+                {
+                    <MudIconButton Color="Color.Tertiary"
+                                   Icon="@(IsSelected ? Icons.Material.Filled.CheckBox : Icons.Material.Filled.CheckBoxOutlineBlank)"
+                                   Style="top: 0; left: 0; position: absolute;"
+                                   OnClick="@(e => SelectClicked.InvokeAsync(e))"/>
+                }
+                @if (AddToCollectionClicked.HasDelegate && !IsSelectMode)
                 {
                     <MudIconButton Color="Color.Tertiary"
                                    Icon="@Icons.Material.Filled.PlaylistAdd"
                                    Style="bottom: 0; left: 0; position: absolute;"
                                    OnClick="@(() => AddToCollectionClicked.InvokeAsync(Data))"/>
                 }
-                @if (DeleteClicked.HasDelegate)
+                @if (DeleteClicked.HasDelegate && !IsSelectMode)
                 {
                     <MudIconButton Color="Color.Tertiary"
                                    Icon="@Icons.Material.Filled.Delete"
@@ -88,6 +105,15 @@
     [Parameter]
     public EventCallback<MediaCardViewModel> AddToCollectionClicked { get; set; }
 
+    [Parameter]
+    public EventCallback<MouseEventArgs> SelectClicked { get; set; }
+
+    [Parameter]
+    public bool IsSelectMode { get; set; }
+
+    [Parameter]
+    public bool IsSelected { get; set; }
+
     private string GetPlaceholder(string sortTitle)
     {
         if (Placeholder != null)

ErsatzTV/wwwroot/css/site.css

@@ -18,6 +18,10 @@
     width: 152px;
 }
 
+.media-card-selected {
+    box-shadow: 0 0 0 3px #00c000, 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
 .media-card-episode { width: 392px; }
 
 .media-card:hover { /*filter: brightness(75%);*/ }