Refactor History component in MeetingSchedule to enhance table structure and styling
This commit updates the History component by replacing the MudTable with a custom HTML table structure for improved styling and responsiveness. The table now features enhanced column definitions, including vertical text orientation for headers and improved row styling for better readability. Additionally, CSS styles are introduced to manage table appearance, ensuring a more user-friendly interface for displaying meeting histories. This enhancement contributes to a better overall user experience in the meeting schedule feature.
This commit is contained in:
@@ -35,103 +35,99 @@
|
||||
<MudStack Spacing="3">
|
||||
@if (_meetingHistories.Any())
|
||||
{
|
||||
<MudPaper Elevation="1" Class="pa-3" Style="overflow-x: auto;">
|
||||
<MudTable Items="_meetingHistories"
|
||||
Hover="true"
|
||||
Striped="true"
|
||||
Dense="true"
|
||||
Breakpoint="Breakpoint.Sm">
|
||||
<ColGroup>
|
||||
<col style="width: 100px;" />
|
||||
<col style="width: 50px;" />
|
||||
@foreach (var team in _allTeams)
|
||||
<MudPaper Elevation="1" Class="pa-3" Style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
|
||||
<table class="history-grid-table" style="min-width: max-content; width: 100%; border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col style="width: 72px;" />
|
||||
<col style="width: 40px;" />
|
||||
@for (var c = 0; c < _allTeams.Count; c++)
|
||||
{
|
||||
<col style="width: 40px;" />
|
||||
<col style="width: 28px;" />
|
||||
}
|
||||
</ColGroup>
|
||||
<HeaderContent>
|
||||
<MudTh Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
||||
<MudText Typo="Typo.caption" Style="writing-mode: vertical-rl; text-orientation: mixed;">
|
||||
Date
|
||||
</MudText>
|
||||
</MudTh>
|
||||
<MudTh Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
||||
<MudText Typo="Typo.caption">Actions</MudText>
|
||||
</MudTh>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="history-cell history-cell-date">
|
||||
<span class="mud-typography mud-typography-caption">Date</span>
|
||||
</th>
|
||||
<th class="history-cell history-cell-actions">
|
||||
<span class="mud-typography mud-typography-caption" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">Actions</span>
|
||||
</th>
|
||||
@{
|
||||
var teamIndex = 0;
|
||||
}
|
||||
@foreach (var team in _allTeams)
|
||||
{
|
||||
var isEven = teamIndex % 2 == 0;
|
||||
var colClass = isEven ? "history-cell history-cell-col-even" : "history-cell history-cell-col-odd";
|
||||
<th class="@colClass">
|
||||
<span class="mud-typography mud-typography-caption" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">@team.ToString()</span>
|
||||
</th>
|
||||
teamIndex++;
|
||||
}
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="history-cell history-cell-date history-cell-times-met">Times Met</th>
|
||||
<th class="history-cell history-cell-actions "></th>
|
||||
@{
|
||||
var summaryTeamIndex = 0;
|
||||
}
|
||||
@foreach (var team in _allTeams)
|
||||
{
|
||||
var timesMet = GetTimesMetForTeam(team);
|
||||
var isEven = summaryTeamIndex % 2 == 0;
|
||||
var colClass = isEven ? "history-cell history-cell-col-even history-cell-times-met" : "history-cell history-cell-col-odd history-cell-times-met";
|
||||
<th class="@colClass">@timesMet</th>
|
||||
summaryTeamIndex++;
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@{
|
||||
var teamIndex = 0;
|
||||
var rowIndex = 0;
|
||||
}
|
||||
@foreach (var team in _allTeams)
|
||||
@foreach (var history in _meetingHistories)
|
||||
{
|
||||
var isEven = teamIndex % 2 == 0;
|
||||
var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
|
||||
var headerStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
|
||||
<MudTh Style="@headerStyle">
|
||||
<MudText Typo="Typo.caption" Style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">
|
||||
@team.ToString()
|
||||
</MudText>
|
||||
</MudTh>
|
||||
teamIndex++;
|
||||
}
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
||||
<MudButton Variant="Variant.Text"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Small"
|
||||
OnClick="@(() => ViewMeetingDetails(context))"
|
||||
Style="text-transform: none; padding: 2px 4px;">
|
||||
@context.MeetingDate.ToString("MM/dd/yy")
|
||||
</MudButton>
|
||||
</MudTd>
|
||||
<MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
||||
<MudTooltip Text="Load into Planner">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Upload"
|
||||
Size="Size.Small"
|
||||
Color="Color.Secondary"
|
||||
OnClick="@(() => LoadMeetingIntoPlanner(context))"
|
||||
Variant="Variant.Text" />
|
||||
</MudTooltip>
|
||||
</MudTd>
|
||||
@{
|
||||
var rowTeamIndex = 0;
|
||||
}
|
||||
@foreach (var team in _allTeams)
|
||||
{
|
||||
var met = TeamMetOnDate(context, team);
|
||||
var isEven = rowTeamIndex % 2 == 0;
|
||||
var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
|
||||
var cellStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
|
||||
<MudTd Align="Align.Center" Style="@cellStyle">
|
||||
@if (met)
|
||||
var rowClass = rowIndex % 2 == 0 ? "history-row-even" : "history-row-odd";
|
||||
<tr class="@rowClass">
|
||||
<td class="history-cell history-cell-date ">
|
||||
<MudButton Variant="Variant.Text"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Small"
|
||||
OnClick="@(() => ViewMeetingDetails(history))"
|
||||
Style="text-transform: none; padding: 0 2px; min-width: unset;">
|
||||
@history.MeetingDate.ToString("MM/dd/yy")
|
||||
</MudButton>
|
||||
</td>
|
||||
<td class="history-cell history-cell-actions">
|
||||
<MudTooltip Text="Load into Planner">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Upload"
|
||||
Size="Size.Small"
|
||||
Color="Color.Secondary"
|
||||
OnClick="@(() => LoadMeetingIntoPlanner(history))"
|
||||
Variant="Variant.Text"
|
||||
Style="padding: 2px;" />
|
||||
</MudTooltip>
|
||||
</td>
|
||||
@foreach (var team in _allTeams)
|
||||
{
|
||||
<MudText Typo="Typo.body1" Style="font-weight: bold;">×</MudText>
|
||||
var met = TeamMetOnDate(history, team);
|
||||
var isEven = rowTeamIndex % 2 == 0;
|
||||
var colClass = isEven ? "history-cell history-cell-col-even" : "history-cell history-cell-col-odd";
|
||||
<td class="@colClass">
|
||||
@if (met)
|
||||
{
|
||||
<span class="mud-typography mud-typography-body1" style="font-weight: bold;">×</span>
|
||||
}
|
||||
</td>
|
||||
rowTeamIndex++;
|
||||
}
|
||||
</MudTd>
|
||||
rowTeamIndex++;
|
||||
</tr>
|
||||
rowIndex++;
|
||||
}
|
||||
</RowTemplate>
|
||||
<FooterContent>
|
||||
<MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider); font-weight: bold;">
|
||||
Times Met
|
||||
</MudTd>
|
||||
<MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);"></MudTd>
|
||||
@{
|
||||
var footerTeamIndex = 0;
|
||||
}
|
||||
@foreach (var team in _allTeams)
|
||||
{
|
||||
var timesMet = GetTimesMetForTeam(team);
|
||||
var isEven = footerTeamIndex % 2 == 0;
|
||||
var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
|
||||
var footerCellStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
|
||||
<MudTd Align="Align.Center" Style="@footerCellStyle">
|
||||
<MudText Typo="Typo.body2" Style="font-weight: bold;">@timesMet</MudText>
|
||||
</MudTd>
|
||||
footerTeamIndex++;
|
||||
}
|
||||
</FooterContent>
|
||||
</MudTable>
|
||||
</tbody>
|
||||
</table>
|
||||
</MudPaper>
|
||||
}
|
||||
else
|
||||
@@ -142,6 +138,58 @@
|
||||
}
|
||||
</MudPaper>
|
||||
|
||||
<style>
|
||||
.history-grid-table {
|
||||
--history-border: 1px solid var(--mud-palette-divider);
|
||||
--history-shade: var(--mud-palette-background-grey);
|
||||
}
|
||||
.history-grid-table th,
|
||||
.history-grid-table td {
|
||||
padding: 2px 4px;
|
||||
border-right: var(--history-border);
|
||||
border-bottom: var(--history-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.history-grid-table thead th {
|
||||
border-top: var(--history-border);
|
||||
background-color: var(--mud-palette-surface);
|
||||
}
|
||||
.history-grid-table thead .history-cell-col-odd {
|
||||
background-color: var(--mud-palette-surface);
|
||||
}
|
||||
.history-grid-table thead th:first-child,
|
||||
.history-grid-table tbody td:first-child {
|
||||
border-left: var(--history-border);
|
||||
}
|
||||
.history-grid-table .history-cell-date {
|
||||
padding: 2px 4px;
|
||||
text-align: left;
|
||||
min-width: 72px;
|
||||
}
|
||||
.history-grid-table .history-cell-actions {
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
min-width: 40px;
|
||||
}
|
||||
.history-grid-table thead .history-cell-col-even {
|
||||
background-color: var(--history-shade);
|
||||
}
|
||||
.history-grid-table .history-cell-times-met {
|
||||
font-weight: bold;
|
||||
background-color: var(--history-shade);
|
||||
}
|
||||
.history-grid-table tbody .history-row-odd td {
|
||||
background-color: var(--history-shade);
|
||||
}
|
||||
.history-grid-table tbody .history-row-even td.history-cell-col-even,
|
||||
.history-grid-table tbody .history-row-odd td.history-cell-col-even {
|
||||
background-color: var(--history-shade);
|
||||
}
|
||||
.history-grid-table tbody .history-row-odd td.history-cell-col-odd {
|
||||
background-color: var(--history-shade);
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private List<TeamMeetingHistory> _meetingHistories = [];
|
||||
private List<Team> _allTeams = [];
|
||||
|
||||
Reference in New Issue
Block a user