Enhance EventOccurrenceDetailsDialog and StateScheduleHandout components for improved event display and styling

WebApp/Components/Features/Calendar/EventOccurrenceDetailsDialog.razor

@@ -1 +1,72 @@
+@namespace WebApp.Components.Features.Calendar
+@using Core.Entities
+
+<MudDialog>
+    <DialogContent>
+        @if (EventOccurrence == null)
+        {
+            <MudAlert Severity="Severity.Warning">
+                Event details are unavailable.
+            </MudAlert>
+        }
+        else
+        {
+            <MudStack Spacing="2">
+                <MudText Typo="Typo.h6">
+                    @(EventDefinition?.Name ?? EventOccurrence.Name)
+                </MudText>
+
+                <MudDivider />
+
+                <MudText Typo="Typo.body1">
+                    <strong>Occurrence:</strong> @EventOccurrence.Name
+                </MudText>
+                <MudText Typo="Typo.body1">
+                    <strong>Start:</strong> @EventOccurrence.StartTime.ToString("f")
+                </MudText>
+                @if (EventOccurrence.EndTime != null)
+                {
+                    <MudText Typo="Typo.body1">
+                        <strong>End:</strong> @EventOccurrence.EndTime.Value.ToString("f")
+                    </MudText>
+                }
+                @if (!string.IsNullOrWhiteSpace(EventOccurrence.Location))
+                {
+                    <MudText Typo="Typo.body1">
+                        <strong>Location:</strong> @EventOccurrence.Location
+                    </MudText>
+                }
+                @if (StudentFirstNames.Any())
+                {
+                    <MudText Typo="Typo.body1">
+                        <strong>Students:</strong> @string.Join(", ", StudentFirstNames)
+                    </MudText>
+                }
+            </MudStack>
+        }
+    </DialogContent>
+    <DialogActions>
+        <MudSpacer />
+        <MudButton OnClick="Close">Close</MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    [CascadingParameter]
+    public IMudDialogInstance MudDialog { get; set; } = null!;
+
+    [Parameter]
+    public EventOccurrence? EventOccurrence { get; set; }
+
+    [Parameter]
+    public EventDefinition? EventDefinition { get; set; }
+
+    [Parameter]
+    public List<string> StudentFirstNames { get; set; } = [];
+
+    private void Close()
+    {
+        MudDialog.Close();
+    }
+}
 

WebApp/Components/Features/Calendar/StateScheduleHandout.razor

@@ -123,13 +123,59 @@ else
                     </tr>
                     </thead>
                     <tbody>
-                    @foreach (var occ in dateGroup.OrderBy(o => o.StartTime))
+                    @foreach (var tlGroup in dateGroup
+                        .OrderBy(o => o.StartTime)
+                        .GroupBy(o => (FormatTimeDisplay(o), o.Location ?? ""))
+                        .Select(g => g.ToList()))
                     {
-                        <tr>
-                            <td>@FormatTimeDisplay(occ)</td>
-                            <td>@FormatCombinedScheduleEventCell(occ)</td>
-                            <td>@(occ.Location ?? "")</td>
-                        </tr>
+                        if (tlGroup.Count == 1)
+                        {
+                            var occ = tlGroup[0];
+                            <tr>
+                                <td>@FormatTimeDisplay(occ)</td>
+                                <td>@FormatCombinedScheduleEventCell(occ)</td>
+                                <td>@(occ.Location ?? "")</td>
+                            </tr>
+                        }
+                        else
+                        {
+                            var genericOcc = tlGroup.FirstOrDefault(o => !o.EventDefinitionId.HasValue);
+                            var specificOccs = tlGroup
+                                .Where(o => o.EventDefinitionId.HasValue)
+                                .OrderBy(o => FormatEventColumn(o), StringComparer.OrdinalIgnoreCase)
+                                .ToList();
+                            var rowCount = (genericOcc != null ? 1 : 0) + specificOccs.Count;
+                            var representative = genericOcc ?? specificOccs[0];
+
+                            if (genericOcc != null)
+                            {
+                                <tr>
+                                    <td rowspan="@rowCount">@FormatTimeDisplay(representative)</td>
+                                    <td>@FormatCombinedScheduleEventCell(genericOcc)</td>
+                                    <td rowspan="@rowCount">@(representative.Location ?? "")</td>
+                                </tr>
+                                @foreach (var sub in specificOccs)
+                                {
+                                    <tr>
+                                        <td class="combined-sub-event">@FormatCombinedScheduleEventCell(sub)</td>
+                                    </tr>
+                                }
+                            }
+                            else
+                            {
+                                <tr>
+                                    <td rowspan="@rowCount">@FormatTimeDisplay(representative)</td>
+                                    <td class="combined-sub-event">@FormatCombinedScheduleEventCell(specificOccs[0])</td>
+                                    <td rowspan="@rowCount">@(representative.Location ?? "")</td>
+                                </tr>
+                                @foreach (var sub in specificOccs.Skip(1))
+                                {
+                                    <tr>
+                                        <td class="combined-sub-event">@FormatCombinedScheduleEventCell(sub)</td>
+                                    </tr>
+                                }
+                            }
+                        }
                     }
                     </tbody>
                 </MudSimpleTable>

WebApp/wwwroot/app.css

@@ -52,6 +52,17 @@
     width: 100%;
 }
 
+.state-schedule-table th,
+.state-schedule-table td,
+.state-schedule-table table th,
+.state-schedule-table table td {
+    vertical-align: top !important;
+}
+
+.combined-sub-event {
+    padding-left: 1.5rem !important;
+}
+
 @media print {
     .state-schedule-handout {
         margin-left: -30pt !important;
@@ -100,6 +111,11 @@
     .state-schedule-table table tbody tr:last-child td {
         border-bottom: none !important;
     }
+
+    .state-schedule-table .combined-sub-event,
+    .state-schedule-table table .combined-sub-event {
+        padding-left: 1.5rem !important;
+    }
 }
 
 .page-header {