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">
|
<MudStack Spacing="3">
|
||||||
@if (_meetingHistories.Any())
|
@if (_meetingHistories.Any())
|
||||||
{
|
{
|
||||||
<MudPaper Elevation="1" Class="pa-3" Style="overflow-x: auto;">
|
<MudPaper Elevation="1" Class="pa-3" Style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
|
||||||
<MudTable Items="_meetingHistories"
|
<table class="history-grid-table" style="min-width: max-content; width: 100%; border-collapse: collapse;">
|
||||||
Hover="true"
|
<colgroup>
|
||||||
Striped="true"
|
<col style="width: 72px;" />
|
||||||
Dense="true"
|
|
||||||
Breakpoint="Breakpoint.Sm">
|
|
||||||
<ColGroup>
|
|
||||||
<col style="width: 100px;" />
|
|
||||||
<col style="width: 50px;" />
|
|
||||||
@foreach (var team in _allTeams)
|
|
||||||
{
|
|
||||||
<col style="width: 40px;" />
|
<col style="width: 40px;" />
|
||||||
|
@for (var c = 0; c < _allTeams.Count; c++)
|
||||||
|
{
|
||||||
|
<col style="width: 28px;" />
|
||||||
}
|
}
|
||||||
</ColGroup>
|
</colgroup>
|
||||||
<HeaderContent>
|
<thead>
|
||||||
<MudTh Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
<tr>
|
||||||
<MudText Typo="Typo.caption" Style="writing-mode: vertical-rl; text-orientation: mixed;">
|
<th class="history-cell history-cell-date">
|
||||||
Date
|
<span class="mud-typography mud-typography-caption">Date</span>
|
||||||
</MudText>
|
</th>
|
||||||
</MudTh>
|
<th class="history-cell history-cell-actions">
|
||||||
<MudTh Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
<span class="mud-typography mud-typography-caption" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">Actions</span>
|
||||||
<MudText Typo="Typo.caption">Actions</MudText>
|
</th>
|
||||||
</MudTh>
|
|
||||||
@{
|
@{
|
||||||
var teamIndex = 0;
|
var teamIndex = 0;
|
||||||
}
|
}
|
||||||
@foreach (var team in _allTeams)
|
@foreach (var team in _allTeams)
|
||||||
{
|
{
|
||||||
var isEven = teamIndex % 2 == 0;
|
var isEven = teamIndex % 2 == 0;
|
||||||
var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
|
var colClass = isEven ? "history-cell history-cell-col-even" : "history-cell history-cell-col-odd";
|
||||||
var headerStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
|
<th class="@colClass">
|
||||||
<MudTh Style="@headerStyle">
|
<span class="mud-typography mud-typography-caption" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">@team.ToString()</span>
|
||||||
<MudText Typo="Typo.caption" Style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">
|
</th>
|
||||||
@team.ToString()
|
|
||||||
</MudText>
|
|
||||||
</MudTh>
|
|
||||||
teamIndex++;
|
teamIndex++;
|
||||||
}
|
}
|
||||||
</HeaderContent>
|
</tr>
|
||||||
<RowTemplate>
|
<tr>
|
||||||
<MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
|
<th class="history-cell history-cell-date history-cell-times-met">Times Met</th>
|
||||||
<MudButton Variant="Variant.Text"
|
<th class="history-cell history-cell-actions "></th>
|
||||||
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;
|
var summaryTeamIndex = 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;
|
|
||||||
}
|
}
|
||||||
@foreach (var team in _allTeams)
|
@foreach (var team in _allTeams)
|
||||||
{
|
{
|
||||||
var timesMet = GetTimesMetForTeam(team);
|
var timesMet = GetTimesMetForTeam(team);
|
||||||
var isEven = footerTeamIndex % 2 == 0;
|
var isEven = summaryTeamIndex % 2 == 0;
|
||||||
var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
|
var colClass = isEven ? "history-cell history-cell-col-even history-cell-times-met" : "history-cell history-cell-col-odd history-cell-times-met";
|
||||||
var footerCellStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
|
<th class="@colClass">@timesMet</th>
|
||||||
<MudTd Align="Align.Center" Style="@footerCellStyle">
|
summaryTeamIndex++;
|
||||||
<MudText Typo="Typo.body2" Style="font-weight: bold;">@timesMet</MudText>
|
|
||||||
</MudTd>
|
|
||||||
footerTeamIndex++;
|
|
||||||
}
|
}
|
||||||
</FooterContent>
|
</tr>
|
||||||
</MudTable>
|
</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>
|
</MudPaper>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
@@ -142,6 +138,58 @@
|
|||||||
}
|
}
|
||||||
</MudPaper>
|
</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 {
|
@code {
|
||||||
private List<TeamMeetingHistory> _meetingHistories = [];
|
private List<TeamMeetingHistory> _meetingHistories = [];
|
||||||
private List<Team> _allTeams = [];
|
private List<Team> _allTeams = [];
|
||||||
|
|||||||
Reference in New Issue
Block a user