Use cards on event list

Author: dynamictulip

PocketDDD.BlazorClient/PocketDDD.BlazorClient/Features/Home/Components/EventData.razor

@@ -7,51 +7,88 @@
 @inject IDispatcher Dispatcher
 
 <MudList Clickable="true">
-    @foreach(var timeSlot in State.Value.EventMetaData)
+    @foreach (var timeSlot in State.Value.EventMetaData)
     {
         <MudListSubheader Class="pb-0 pl-1 border-b border-solid mud-border-primary">
             <MudText Typo="Typo.h6">
                 @timeSlot.From.ToString("h:mm")
                 @timeSlot.From.ToString("tt").ToLowerInvariant()
             </MudText>
         </MudListSubheader>
-        @if(timeSlot.Info is not null)
+        @if (timeSlot.Info is not null)
         {
             <MudListItem Class="ml-6">
                 <MudText Typo="Typo.h5">@timeSlot.Info</MudText>
             </MudListItem>
         }
-        @foreach(var sessionItem in timeSlot.Sessions.Select((session, index) => (session, index)))
+
+        @foreach (var sessionItem in timeSlot.Sessions.Select((session, index) => (session, index)))
         {
-            <MudListItem OnClick="() => HandleViewSession(sessionItem.session.Id)">
-                <MudPaper Class="pa-4">
-                    <MudText Typo="Typo.subtitle1">
-                        @WhenBookmarkedShowIcon(sessionItem.session) 
-                        @sessionItem.session.Title
-                    </MudText>
-                    <MudText Typo="Typo.subtitle2">@sessionItem.session.SpeakerName</MudText>
-                    <MudText Typo="Typo.subtitle2">@sessionItem.session.RoomName</MudText>
-                </MudPaper>
+            <MudListItem>
+                <MudCard>
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h6">
+                                @sessionItem.session.Title
+                            </MudText>
+                        </CardHeaderContent>
+                        <CardHeaderActions>
+                            <MudToggleIconButton
+                                ToggledChanged="@(_ => HandleToggleSessionBookmarked(sessionItem.session))"
+                                Toggled="@sessionItem.session.IsBookmarked"
+                                Icon="@Icons.Material.Filled.BookmarkBorder"
+                                Color="@Color.Default"
+                                ToggledIcon="@Icons.Material.Filled.Bookmark"
+                                ToggledColor="@Color.Primary"
+                                title="@(sessionItem.session.IsBookmarked ? "Unbookmark session" : "Bookmark session")"/>
+                        </CardHeaderActions>
+                    </MudCardHeader>
+                    <MudCardContent Class="d-flex flex-row justify-space-between">
+                        <MudContainer Class="px-0">
+                            <MudText Typo="Typo.subtitle2">@sessionItem.session.SpeakerName</MudText>
+                            <MudText Typo="Typo.subtitle2">@sessionItem.session.RoomName</MudText>
+                        </MudContainer>
+                        @ShowSessionLength(sessionItem.session)
+                    </MudCardContent>
+                    <MudCardActions>
+                        <MudButton OnClick="() => HandleViewSession(sessionItem.session.Id)" Variant="Variant.Outlined" Color="Color.Primary" FullWidth="true">
+                            More details
+                        </MudButton>
+                    </MudCardActions>
+                </MudCard>
             </MudListItem>
 
-            @if (sessionItem.index != timeSlot.Sessions.Count -1)
+            @if (sessionItem.index != timeSlot.Sessions.Count - 1)
             {
-                <MudDivider />
+                <MudDivider/>
             }
         }
     }
 
 </MudList>
 
 @code{
-    RenderFragment? WhenBookmarkedShowIcon(Features.Home.Store.Session session) =>
-        session.IsBookmarked
-            ? @<MudIcon Icon="@Icons.Material.Filled.Bookmark" Title="Bookmarked" />
-            : null;
+
+    RenderFragment ShowSessionLength(Session session)
+    {
+        var colour = Color.Info;
+
+        if (session.Length == TimeSpan.FromMinutes(30))
+            colour = Color.Secondary;
+        else if (session.Length == TimeSpan.FromMinutes(15))
+            colour = Color.Tertiary;
+
+        return @<MudChip Color="@colour" Variant="Variant.Outlined">@GetTimeSpanDisplayText(session.Length)</MudChip>;
+    }
+
 }
 
 @code {
-    void HandleViewSession(int sessionId) => NavigationManager.NavigateTo($"session/{sessionId}");
+
+    void HandleViewSession(int sessionId)
+    {
+        NavigationManager.NavigateTo($"session/{sessionId}");
+    }
 
     void HandleToggleSessionBookmarked(Session session)
     {

PocketDDD.BlazorClient/PocketDDD.BlazorClient/Features/Home/Store/EventDataMapper.cs

@@ -1,5 +1,6 @@
 using PocketDDD.Shared.API.ResponseDTOs;
 using System.Collections.Immutable;
+using System.Globalization;
 
 namespace PocketDDD.BlazorClient.Features.Home.Store;
 
@@ -21,7 +22,8 @@ public static IImmutableList<TimeSlot> ToHomeStateModel(this EventDataResponseDT
                                     Title = s.Title,
                                     TrackName = eventData.Tracks.Single(tr => tr.Id == s.TrackId).Name,
                                     RoomName = eventData.Tracks.Single(tr => tr.Id == s.TrackId).RoomName,
-                                    IsBookmarked = sessionBookmarks.Contains(s.Id)
+                                    IsBookmarked = sessionBookmarks.Contains(s.Id),
+                                    Length = ts.To.Subtract(ts.From)
                                 })
                                 .OrderBy(s => s.TrackName)
                                 .ToImmutableList()