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: 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 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>
|
||||
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++;
|
||||
}
|
||||
</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>
|
||||
</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 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)
|
||||
{
|
||||
<MudText Typo="Typo.body1" Style="font-weight: bold;">×</MudText>
|
||||
}
|
||||
</MudTd>
|
||||
rowTeamIndex++;
|
||||
}
|
||||
</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;
|
||||
var summaryTeamIndex = 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++;
|
||||
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++;
|
||||
}
|
||||
</FooterContent>
|
||||
</MudTable>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@{
|
||||
var rowIndex = 0;
|
||||
}
|
||||
@foreach (var history in _meetingHistories)
|
||||
{
|
||||
var rowTeamIndex = 0;
|
||||
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)
|
||||
{
|
||||
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++;
|
||||
}
|
||||
</tr>
|
||||
rowIndex++;
|
||||
}
|
||||
</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