maddo/WorkTracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: Implement sidebar toggle functionality and enhance Monthly Timesheet summary view

Browse source
This commit is contained in:
Marco 2026-04-20 17:23:54 +02:00
commit a7f8dfba01
13 changed files with 686 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Components/App.razor
View file

@ -14,7 +14,7 @@
</head>
<body>
<Routes />
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
</body>

27
Components/Layout/MainLayout.razor
View file

@ -1,12 +1,24 @@
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
<div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
<div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
<NavMenu IsCollapsed="sidebarCollapsed" />
</div>
<main>
<div class="top-row px-4">
<button
type="button"
class="sidebar-toggle"
@onclick="ToggleSidebar"
aria-label="Toggle sidebar"
aria-controls="sidebar-navigation"
aria-expanded="@(sidebarCollapsed ? "false" : "true")"
title="Toggle sidebar">
<span class="sidebar-toggle-bar"></span>
<span class="sidebar-toggle-bar"></span>
<span class="sidebar-toggle-bar"></span>
</button>
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
@ -21,3 +33,12 @@
<a href="." class="reload">Reload</a>
<span class="dismiss">🗙</span>
</div>
@code {
private bool sidebarCollapsed = true;
private void ToggleSidebar()
{
sidebarCollapsed = !sidebarCollapsed;
}
}

33
Components/Layout/MainLayout.razor.css
View file

@ -6,6 +6,7 @@
main {
flex: 1;
min-width: 0;
}
.sidebar {
@ -36,6 +37,27 @@ main {
text-overflow: ellipsis;
}
.sidebar-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.2rem;
width: 2.5rem;
height: 2.5rem;
margin-right: auto;
border: 1px solid #d6d5d5;
border-radius: 0.65rem;
background: #fff;
}
.sidebar-toggle-bar {
width: 1rem;
height: 2px;
background: #334155;
border-radius: 999px;
}
@media (max-width: 640.98px) {
.top-row {
justify-content: space-between;
@ -56,6 +78,9 @@ main {
height: 100vh;
position: sticky;
top: 0;
transition: width 0.2s ease;
overflow: hidden;
flex: 0 0 auto;
}
.top-row {
@ -74,6 +99,14 @@ main {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
.sidebar-toggle {
display: inline-flex;
}
.sidebar.sidebar-collapsed {
width: 5rem;
}
}
#blazor-error-ui {

57
Components/Layout/NavMenu.razor
View file

@ -2,59 +2,72 @@
@using WorkTracker.Configuration
@inject IOptions<AppAuthOptions> AppAuthOptions
@code {
[Parameter] public bool IsCollapsed { get; set; }
}
<div class="nav-menu-shell @(IsCollapsed ? "nav-menu-shell-collapsed" : string.Empty)" data-testid="sidebar-shell" data-collapsed="@(IsCollapsed ? "true" : "false")">
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">WorkTracker</a>
<a class="navbar-brand" href="" aria-label="WorkTracker home">
<span class="sidebar-brand-full">WorkTracker</span>
<span class="sidebar-brand-compact" aria-hidden="true">WT</span>
</a>
</div>
</div>
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="nav flex-column">
<div class="nav-scrollable">
<nav id="sidebar-navigation" class="nav flex-column" aria-label="Sidebar navigation">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Dashboard
<NavLink class="nav-link" href="" Match="NavLinkMatch.All" aria-label="Dashboard" title="Dashboard">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Dashboard</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="grid">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Grid View
<NavLink class="nav-link" href="grid" aria-label="Grid View" title="Grid View">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Grid View</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="calendar">
<span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span> Calendar
<NavLink class="nav-link" href="calendar" aria-label="Calendar" title="Calendar">
<span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Calendar</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="summary">
<span class="bi bi-bar-chart-fill-nav-menu" aria-hidden="true"></span> Summary
<NavLink class="nav-link" href="summary" aria-label="Summary" title="Summary">
<span class="bi bi-bar-chart-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Summary</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="settings">
<span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span> Settings
<NavLink class="nav-link" href="settings" aria-label="Settings" title="Settings">
<span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Settings</span>
</NavLink>
</div>
<AuthorizeView>
<Authorized>
<div class="nav-item px-3">
<NavLink class="nav-link" href="auth">
<span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span> @context.User.Identity?.Name
<NavLink class="nav-link" href="auth" aria-label="@context.User.Identity?.Name" title="@context.User.Identity?.Name">
<span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">@context.User.Identity?.Name</span>
</NavLink>
</div>
@if (AppAuthOptions.Value.Enabled)
{
<div class="nav-item px-3">
<form action="/api/logout" method="post">
<button type="submit" class="nav-link">
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
<button type="submit" class="nav-link" aria-label="Logout" title="Logout">
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Logout</span>
</button>
</form>
</div>
@ -62,13 +75,15 @@
</Authorized>
<NotAuthorized>
<div class="nav-item px-3">
<NavLink class="nav-link" href="login">
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
<NavLink class="nav-link" href="login" aria-label="Login" title="Login">
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Login</span>
</NavLink>
</div>
</NotAuthorized>
</AuthorizeView>
</nav>
</div>
</div>

90
Components/Layout/NavMenu.razor.css
View file

@ -1,20 +1,3 @@
.navbar-toggler {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
color: white;
position: absolute;
top: 0.5rem;
right: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler:checked {
background-color: rgba(255, 255, 255, 0.5);
}
.top-row {
min-height: 3.5rem;
background-color: rgba(0,0,0,0.4);
@ -24,6 +7,14 @@
font-size: 1.1rem;
}
.sidebar-brand-compact {
display: none;
}
.nav-menu-shell {
height: 100%;
}
.bi {
display: inline-block;
position: relative;
@ -83,6 +74,12 @@
padding-bottom: 0.5rem;
}
.nav-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
@ -114,24 +111,59 @@
}
.nav-scrollable {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable {
display: block;
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
@media (min-width: 641px) {
.navbar-toggler {
@media (max-width: 640.98px) {
.nav-menu-shell-collapsed .sidebar-brand-full,
.nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact {
display: none;
}
.nav-scrollable {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
height: auto;
}
}
@media (min-width: 641px) {
.nav-menu-shell-collapsed .top-row {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.nav-menu-shell-collapsed .container-fluid {
justify-content: center;
}
.nav-menu-shell-collapsed .sidebar-brand-full,
.nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact,
.nav-menu-shell-collapsed .nav-label {
display: none;
}
.nav-menu-shell-collapsed .nav-item {
padding-bottom: 0.3rem;
}
.nav-menu-shell-collapsed .nav-item.px-3 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.nav-menu-shell-collapsed .nav-item ::deep .nav-link {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.nav-menu-shell-collapsed .nav-item ::deep .nav-link,
.nav-menu-shell-collapsed .nav-item ::deep button.nav-link {
min-width: 0;
}
.nav-menu-shell-collapsed .bi {
margin-right: 0;
}
}

14
Components/Pages/CalendarView.razor
View file

@ -81,7 +81,7 @@ else
@if (IsActiveCell(cell.Date))
{
<div class="calendar-popup" @onclick:stopPropagation="true">
<div class="calendar-popup @GetPopupClass(cell)" @onclick:stopPropagation="true">
<div class="d-flex align-items-start justify-content-between gap-2 mb-2">
<div>
<div class="fw-semibold">@cell.Date.ToString("dddd d MMMM")</div>
@ -241,6 +241,7 @@ else
currentWeek[dayOfWeek] = new CalendarCell
{
Date = d,
ColumnIndex = dayOfWeek,
IsWeekend = d.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday,
IsFestivity = festivities.Contains(d),
Entry = lookup.GetValueOrDefault(d)
@ -293,6 +294,16 @@ else
activeDate = null;
}
private static string GetPopupClass(CalendarCell cell)
{
if (cell.ColumnIndex == 0)
{
return "calendar-popup-left";
}
return cell.ColumnIndex >= 5 ? "calendar-popup-right" : string.Empty;
}
private bool IsActiveCell(DateOnly date) => activeDate == date;
private void CreateWorkUnit(DateOnly date)
@ -437,6 +448,7 @@ else
private sealed class CalendarCell
{
public DateOnly Date { get; set; }
public int ColumnIndex { get; set; }
public bool IsWeekend { get; set; }
public bool IsFestivity { get; set; }
public WorkDayDocument? Entry { get; set; }

127
Components/Pages/MonthlySummary.razor
View file

@ -3,7 +3,8 @@
@attribute [Authorize]
@rendermode InteractiveServer
@inject IWorkDayService WorkDayService
@using System.Globalization
@inject global::WorkTracker.Services.WorkDays.IWorkDayService WorkDayService
<PageTitle>Monthly Summary</PageTitle>
@ -20,11 +21,16 @@
<label class="form-check-label" for="include-preview">Include preview work units in totals</label>
</div>
<div class="btn-group mb-3" role="group" aria-label="Summary view selector">
<button type="button" class="btn @(viewMode == SummaryViewMode.Cards ? "btn-primary" : "btn-outline-primary")" @onclick="() => SetViewMode(SummaryViewMode.Cards)">Cards</button>
<button type="button" class="btn @(viewMode == SummaryViewMode.Timesheet ? "btn-primary" : "btn-outline-primary")" @onclick="() => SetViewMode(SummaryViewMode.Timesheet)">Timesheet</button>
</div>
@if (loading)
{
<p><em>Loading...</em></p>
}
else if (summary is not null)
else if (viewMode == SummaryViewMode.Cards && summary is not null)
{
<div class="row g-3">
<div class="col-6 col-md-4 col-xl-3">
@ -141,14 +147,75 @@ else if (summary is not null)
</div>
</div>
}
else if (viewMode == SummaryViewMode.Timesheet && timesheet is not null)
{
<div class="timesheet-summary-card card border-0 shadow-sm">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-bordered table-sm align-middle mb-0 timesheet-summary-table">
<thead>
<tr>
<th class="timesheet-summary-sticky-column">Categoria</th>
@for (var i = 0; i < timesheet.Days.Count; i++)
{
var day = timesheet.Days[i];
<th class="text-center timesheet-summary-day-header @GetDayColumnClass(day) @GetDayPopupClass(i, timesheet.Days.Count)">
<div>@day.Date.Day</div>
<div class="small text-muted">@GetDayHeader(day.Date)</div>
<div class="timesheet-summary-day-popup">
<div class="fw-semibold mb-2">@day.Date.ToString("dddd d MMMM", ItalianCulture)</div>
@if (day.WorkUnitSummaries.Count == 0 && day.EventSummaries.Count == 0)
{
<div class="small text-muted">Nessun elemento registrato.</div>
}
else
{
@foreach (var workUnit in day.WorkUnitSummaries)
{
<div class="timesheet-summary-day-popup-item">@workUnit</div>
}
@foreach (var calendarEvent in day.EventSummaries)
{
<div class="timesheet-summary-day-popup-item timesheet-summary-day-popup-item-event">@calendarEvent</div>
}
}
</div>
</th>
}
<th class="text-center timesheet-summary-total-column">Totale</th>
</tr>
</thead>
<tbody>
@foreach (var row in timesheet.Rows)
{
<tr>
<th scope="row" class="timesheet-summary-sticky-column">@row.Label</th>
@for (var i = 0; i < row.DailyValues.Count; i++)
{
<td class="text-center @GetDayColumnClass(timesheet.Days[i])">@FormatTimesheetValue(row.DailyValues[i], row.ValueFormat)</td>
}
<td class="text-center fw-semibold timesheet-summary-total-column">@FormatTimesheetValue(row.Total, row.ValueFormat)</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
}
@code {
[Parameter] public string? YearMonth { get; set; }
private static readonly CultureInfo ItalianCulture = CultureInfo.GetCultureInfo("it-IT");
private DateOnly currentMonth;
private bool loading = true;
private bool includePreview;
private MonthlySummaryModel? summary;
private global::WorkTracker.Domain.MonthlySummaryModel? summary;
private global::WorkTracker.Domain.MonthlyTimesheetModel? timesheet;
private SummaryViewMode viewMode = SummaryViewMode.Timesheet;
protected override async Task OnInitializedAsync()
{
@ -174,6 +241,7 @@ else if (summary is not null)
{
loading = true;
summary = await WorkDayService.GetMonthlySummaryAsync(currentMonth.Year, currentMonth.Month, includePreview);
timesheet = await WorkDayService.GetMonthlyTimesheetAsync(currentMonth.Year, currentMonth.Month, includePreview);
loading = false;
}
@ -189,6 +257,53 @@ else if (summary is not null)
await LoadSummary();
}
private void SetViewMode(SummaryViewMode mode)
{
viewMode = mode;
}
private static string GetDayHeader(DateOnly date)
{
return ItalianCulture.TextInfo.ToTitleCase(date.ToString("ddd", ItalianCulture));
}
private static string GetDayColumnClass(global::WorkTracker.Domain.MonthlyTimesheetDayModel day)
{
if (day.IsWeekend || day.IsHoliday)
{
return "timesheet-summary-day-danger";
}
return day.IsClosure ? "timesheet-summary-day-closure" : string.Empty;
}
private static string GetDayPopupClass(int index, int totalDays)
{
if (index == 0)
{
return "timesheet-summary-day-popup-left";
}
return index >= totalDays - 2 ? "timesheet-summary-day-popup-right" : string.Empty;
}
private static string FormatTimesheetValue(decimal? value, global::WorkTracker.Domain.MonthlyTimesheetValueFormat valueFormat)
{
if (!value.HasValue || value.Value <= 0m)
{
return string.Empty;
}
return valueFormat == global::WorkTracker.Domain.MonthlyTimesheetValueFormat.Days
? value.Value.ToString("0.##", ItalianCulture)
: FormatDecimalHours(value.Value);
}
private static string FormatDecimalHours(decimal value)
{
return value.ToString("0.##", ItalianCulture);
}
private static string FormatHours(decimal value)
{
var totalMinutes = (int)Math.Round(value * 60m, MidpointRounding.AwayFromZero);
@ -196,4 +311,10 @@ else if (summary is not null)
var minutes = totalMinutes % 60;
return $"{hours:00}:{minutes:00}";
}
private enum SummaryViewMode
{
Cards,
Timesheet
}
}