feat: Implement sidebar toggle functionality and enhance Monthly Timesheet summary view
This commit is contained in:
Marco
parent
cab549ab3a
commit
a7f8dfba01
13 changed files with 686 additions and 58 deletions
|
|
@ -14,7 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<Routes />
|
||||
<Routes @rendermode="InteractiveServer" />
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
26
Domain/MonthlyTimesheetDaySummary.cs
Normal file
26
Domain/MonthlyTimesheetDaySummary.cs
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
namespace WorkTracker.Domain;
|
||||
|
||||
public sealed class MonthlyTimesheetDaySummary
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
|
||||
public decimal OfficeHours { get; set; }
|
||||
|
||||
public decimal HomeHours { get; set; }
|
||||
|
||||
public decimal OvertimeHours { get; set; }
|
||||
|
||||
public decimal WeekendHours { get; set; }
|
||||
|
||||
public decimal NightHours { get; set; }
|
||||
|
||||
public decimal VacationDays { get; set; }
|
||||
|
||||
public decimal PermitHours { get; set; }
|
||||
|
||||
public decimal CompensatoryRestDays { get; set; }
|
||||
|
||||
public decimal SickDays { get; set; }
|
||||
|
||||
public decimal HolidayDays { get; set; }
|
||||
}
|
||||
46
Domain/MonthlyTimesheetModel.cs
Normal file
46
Domain/MonthlyTimesheetModel.cs
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
namespace WorkTracker.Domain;
|
||||
|
||||
public sealed class MonthlyTimesheetModel
|
||||
{
|
||||
public int Year { get; set; }
|
||||
|
||||
public int Month { get; set; }
|
||||
|
||||
public List<MonthlyTimesheetDayModel> Days { get; set; } = [];
|
||||
|
||||
public List<MonthlyTimesheetRowModel> Rows { get; set; } = [];
|
||||
}
|
||||
|
||||
public sealed class MonthlyTimesheetDayModel
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
|
||||
public bool IsWeekend { get; set; }
|
||||
|
||||
public bool IsHoliday { get; set; }
|
||||
|
||||
public bool IsClosure { get; set; }
|
||||
|
||||
public List<string> WorkUnitSummaries { get; set; } = [];
|
||||
|
||||
public List<string> EventSummaries { get; set; } = [];
|
||||
}
|
||||
|
||||
public sealed class MonthlyTimesheetRowModel
|
||||
{
|
||||
public string Key { get; set; } = string.Empty;
|
||||
|
||||
public string Label { get; set; } = string.Empty;
|
||||
|
||||
public MonthlyTimesheetValueFormat ValueFormat { get; set; }
|
||||
|
||||
public List<decimal?> DailyValues { get; set; } = [];
|
||||
|
||||
public decimal? Total { get; set; }
|
||||
}
|
||||
|
||||
public enum MonthlyTimesheetValueFormat
|
||||
{
|
||||
Hours = 0,
|
||||
Days = 1
|
||||
}
|
||||
|
|
@ -212,6 +212,55 @@ public sealed class CouchbaseLiteWorkDayService : IWorkDayService
|
|||
};
|
||||
}
|
||||
|
||||
public async Task<MonthlyTimesheetModel> GetMonthlyTimesheetAsync(int year, int month, bool includePreview, CancellationToken cancellationToken = default)
|
||||
{
|
||||
var from = new DateOnly(year, month, 1);
|
||||
var to = from.AddMonths(1).AddDays(-1);
|
||||
var days = await GetRangeAsync(from, to, cancellationToken);
|
||||
var dayLookup = days.ToDictionary(day => day.Date);
|
||||
var settings = await appSettingsService.GetAsync(cancellationToken);
|
||||
|
||||
var daySummaries = new List<MonthlyTimesheetDaySummary>();
|
||||
for (var date = from; date <= to; date = date.AddDays(1))
|
||||
{
|
||||
dayLookup.TryGetValue(date, out var day);
|
||||
daySummaries.Add(CreateTimesheetDaySummary(day, date, includePreview, settings.StandardWorkHoursPerDay));
|
||||
}
|
||||
|
||||
return new MonthlyTimesheetModel
|
||||
{
|
||||
Year = year,
|
||||
Month = month,
|
||||
Days = daySummaries.Select(summary => new MonthlyTimesheetDayModel
|
||||
{
|
||||
Date = summary.Date,
|
||||
IsWeekend = summary.Date.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday,
|
||||
IsHoliday = summary.HolidayDays > 0m || dayLookup.GetValueOrDefault(summary.Date)?.IsItalianFestivity == true,
|
||||
IsClosure = summary.VacationDays > 0m && HasEventType(dayLookup.GetValueOrDefault(summary.Date), CalendarEventType.Closure),
|
||||
WorkUnitSummaries = dayLookup.GetValueOrDefault(summary.Date)?.WorkUnits
|
||||
.Where(unit => includePreview || !unit.IsPreview)
|
||||
.Select(FormatTimesheetWorkUnitSummary)
|
||||
.ToList() ?? [],
|
||||
EventSummaries = dayLookup.GetValueOrDefault(summary.Date)?.CalendarEvents
|
||||
.Select(FormatTimesheetEventSummary)
|
||||
.ToList() ?? []
|
||||
}).ToList(),
|
||||
Rows =
|
||||
[
|
||||
CreateTimesheetRow("office", "Ore lavorative in presenza", MonthlyTimesheetValueFormat.Hours, daySummaries.Select(summary => summary.OfficeHours)),
|
||||
CreateTimesheetRow("home", "Ore lavorative in smart working", MonthlyTimesheetValueFormat.Hours, daySummaries.Select(summary => summary.HomeHours)),
|
||||
CreateTimesheetRow("overtime", "Straordinari", MonthlyTimesheetValueFormat.Hours, daySummaries.Select(summary => summary.OvertimeHours)),
|
||||
CreateTimesheetRow("weekend", "Weekend", MonthlyTimesheetValueFormat.Hours, daySummaries.Select(summary => summary.WeekendHours)),
|
||||
CreateTimesheetRow("night", "Notturni (22-06)", MonthlyTimesheetValueFormat.Hours, daySummaries.Select(summary => summary.NightHours)),
|
||||
CreateTimesheetRow("vacation", "Giorni di ferie", MonthlyTimesheetValueFormat.Days, daySummaries.Select(summary => summary.VacationDays)),
|
||||
CreateTimesheetRow("permit", "Ore di permesso", MonthlyTimesheetValueFormat.Hours, daySummaries.Select(summary => summary.PermitHours)),
|
||||
CreateTimesheetRow("compensatory-rest", "Riposo compensativo", MonthlyTimesheetValueFormat.Days, daySummaries.Select(summary => summary.CompensatoryRestDays), includeZeroTotal: false),
|
||||
CreateTimesheetRow("sick", "Giorni di malattia", MonthlyTimesheetValueFormat.Days, daySummaries.Select(summary => summary.SickDays)),
|
||||
CreateTimesheetRow("holiday", "Festività", MonthlyTimesheetValueFormat.Days, daySummaries.Select(summary => summary.HolidayDays))
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
public async Task<int> GenerateMonthlyPreviewWorkUnitsAsync(int year, int month, CancellationToken cancellationToken = default)
|
||||
{
|
||||
cancellationToken.ThrowIfCancellationRequested();
|
||||
|
|
@ -431,6 +480,64 @@ public sealed class CouchbaseLiteWorkDayService : IWorkDayService
|
|||
return days.Count(day => day.CalendarEvents.Any(calendarEvent => calendarEvent.EventType == eventType));
|
||||
}
|
||||
|
||||
private static MonthlyTimesheetDaySummary CreateTimesheetDaySummary(WorkDayDocument? day, DateOnly date, bool includePreview, decimal defaultStandardHours)
|
||||
{
|
||||
var includedUnits = day?.WorkUnits.Where(unit => includePreview || !unit.IsPreview).ToList() ?? [];
|
||||
var totalHours = includedUnits.Sum(unit => unit.ManualWorkedHours);
|
||||
var explicitHoliday = HasEventType(day, CalendarEventType.Holiday);
|
||||
var illness = HasEventType(day, CalendarEventType.Illness);
|
||||
var dayOff = HasEventType(day, CalendarEventType.DayOff);
|
||||
var closure = HasEventType(day, CalendarEventType.Closure);
|
||||
var isWeekend = date.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday;
|
||||
var isAutomaticHoliday = day?.IsItalianFestivity ?? false;
|
||||
var standardHours = includedUnits.FirstOrDefault()?.CoeffSnapshot.StandardWorkHoursPerDay ?? defaultStandardHours;
|
||||
var nightHours = includedUnits.Sum(GetNightHours);
|
||||
var weekdayDaytimeHours = isWeekend ? 0m : Math.Max(0m, totalHours - nightHours);
|
||||
var suppressVacation = isWeekend || explicitHoliday || isAutomaticHoliday || illness;
|
||||
var hasNonWorkingEvent = explicitHoliday || illness || dayOff || closure;
|
||||
var permitHours = !isWeekend && !isAutomaticHoliday && !hasNonWorkingEvent && totalHours < standardHours
|
||||
? standardHours - totalHours
|
||||
: 0m;
|
||||
|
||||
return new MonthlyTimesheetDaySummary
|
||||
{
|
||||
Date = date,
|
||||
OfficeHours = includedUnits.Where(unit => unit.Location == WorkUnitLocation.Office).Sum(unit => unit.ManualWorkedHours),
|
||||
HomeHours = includedUnits.Where(unit => unit.Location == WorkUnitLocation.Home).Sum(unit => unit.ManualWorkedHours),
|
||||
OvertimeHours = Math.Max(0m, weekdayDaytimeHours - standardHours),
|
||||
WeekendHours = isWeekend ? totalHours : 0m,
|
||||
NightHours = nightHours,
|
||||
VacationDays = (dayOff || closure) && !suppressVacation ? 1m : 0m,
|
||||
PermitHours = Math.Max(0m, permitHours),
|
||||
CompensatoryRestDays = 0m,
|
||||
SickDays = illness ? 1m : 0m,
|
||||
HolidayDays = explicitHoliday && !isWeekend ? 1m : 0m
|
||||
};
|
||||
}
|
||||
|
||||
private static MonthlyTimesheetRowModel CreateTimesheetRow(
|
||||
string key,
|
||||
string label,
|
||||
MonthlyTimesheetValueFormat valueFormat,
|
||||
IEnumerable<decimal> values,
|
||||
bool includeZeroTotal = true)
|
||||
{
|
||||
var dailyValues = values
|
||||
.Select(value => value > 0m ? value : (decimal?)null)
|
||||
.ToList();
|
||||
|
||||
var total = dailyValues.Where(value => value.HasValue).Sum(value => value ?? 0m);
|
||||
|
||||
return new MonthlyTimesheetRowModel
|
||||
{
|
||||
Key = key,
|
||||
Label = label,
|
||||
ValueFormat = valueFormat,
|
||||
DailyValues = dailyValues,
|
||||
Total = includeZeroTotal || total > 0m ? total : null
|
||||
};
|
||||
}
|
||||
|
||||
private static decimal GetHoursOff(WorkDayDocument day, bool includePreview)
|
||||
{
|
||||
var includedUnits = day.WorkUnits.Where(unit => includePreview || !unit.IsPreview).ToList();
|
||||
|
|
@ -449,6 +556,63 @@ public sealed class CouchbaseLiteWorkDayService : IWorkDayService
|
|||
return eventType is CalendarEventType.DayOff or CalendarEventType.Closure or CalendarEventType.Holiday or CalendarEventType.Illness;
|
||||
}
|
||||
|
||||
private static bool HasEventType(WorkDayDocument? day, CalendarEventType eventType)
|
||||
{
|
||||
return day?.CalendarEvents.Any(calendarEvent => calendarEvent.EventType == eventType) == true;
|
||||
}
|
||||
|
||||
private static string FormatTimesheetWorkUnitSummary(WorkUnitDocument unit)
|
||||
{
|
||||
var prefix = unit.Location == WorkUnitLocation.Home ? "SW" : "Pres";
|
||||
var hours = FormatCompactHours(unit.ManualWorkedHours);
|
||||
if (unit.StartTime.HasValue && unit.EndTime.HasValue)
|
||||
{
|
||||
return $"{prefix}: {unit.Label} ({unit.StartTime:HH:mm}-{unit.EndTime:HH:mm}, {hours}h{(unit.IsPreview ? ", preview" : string.Empty)})";
|
||||
}
|
||||
|
||||
return $"{prefix}: {unit.Label} ({hours}h{(unit.IsPreview ? ", preview" : string.Empty)})";
|
||||
}
|
||||
|
||||
private static string FormatTimesheetEventSummary(CalendarEventDocument calendarEvent)
|
||||
{
|
||||
if (calendarEvent.StartTime.HasValue)
|
||||
{
|
||||
return $"{calendarEvent.EventType}: {calendarEvent.Description} ({calendarEvent.StartTime:HH:mm})";
|
||||
}
|
||||
|
||||
return $"{calendarEvent.EventType}: {calendarEvent.Description}";
|
||||
}
|
||||
|
||||
private static string FormatCompactHours(decimal value)
|
||||
{
|
||||
return value == decimal.Truncate(value)
|
||||
? value.ToString("0")
|
||||
: value.ToString("0.##", System.Globalization.CultureInfo.InvariantCulture);
|
||||
}
|
||||
|
||||
private static decimal GetNightHours(WorkUnitDocument unit)
|
||||
{
|
||||
if (!unit.StartTime.HasValue || !unit.EndTime.HasValue || unit.EndTime <= unit.StartTime)
|
||||
{
|
||||
return 0m;
|
||||
}
|
||||
|
||||
return GetOverlapHours(unit.StartTime.Value, unit.EndTime.Value, new TimeOnly(0, 0), new TimeOnly(6, 0))
|
||||
+ GetOverlapHours(unit.StartTime.Value, unit.EndTime.Value, new TimeOnly(22, 0), new TimeOnly(23, 59, 59));
|
||||
}
|
||||
|
||||
private static decimal GetOverlapHours(TimeOnly rangeStart, TimeOnly rangeEnd, TimeOnly windowStart, TimeOnly windowEnd)
|
||||
{
|
||||
var overlapStart = rangeStart > windowStart ? rangeStart : windowStart;
|
||||
var overlapEnd = rangeEnd < windowEnd ? rangeEnd : windowEnd;
|
||||
if (overlapEnd <= overlapStart)
|
||||
{
|
||||
return 0m;
|
||||
}
|
||||
|
||||
return Math.Round((decimal)(overlapEnd - overlapStart).TotalHours, 2, MidpointRounding.AwayFromZero);
|
||||
}
|
||||
|
||||
private static WorkUnitDocument CreatePreviewWorkUnit(string label, TimeOnly startTime, TimeOnly endTime, AppSettingsDocument settings)
|
||||
{
|
||||
var workUnit = new WorkUnitDocument
|
||||
|
|
|
|||
|
|
@ -22,5 +22,7 @@ public interface IWorkDayService
|
|||
|
||||
Task<MonthlySummaryModel> GetMonthlySummaryAsync(int year, int month, bool includePreview, CancellationToken cancellationToken = default);
|
||||
|
||||
Task<MonthlyTimesheetModel> GetMonthlyTimesheetAsync(int year, int month, bool includePreview, CancellationToken cancellationToken = default);
|
||||
|
||||
Task<int> GenerateMonthlyPreviewWorkUnitsAsync(int year, int month, CancellationToken cancellationToken = default);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,30 @@
|
|||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test.describe('sidebar collapse', () => {
|
||||
test('starts collapsed and expands through the toggle button', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1440, height: 960 });
|
||||
await page.goto('/');
|
||||
|
||||
const sidebar = page.getByTestId('sidebar-shell');
|
||||
const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
|
||||
|
||||
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
|
||||
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
||||
await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();
|
||||
|
||||
await toggle.click();
|
||||
|
||||
await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
|
||||
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
|
||||
await expect(page.getByText('Dashboard')).toBeVisible();
|
||||
|
||||
await toggle.click();
|
||||
|
||||
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
|
||||
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
test('home loads without a login screen', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
|
||||
|
|
@ -14,7 +39,7 @@ test('protected pages are directly available without redirecting to login', asyn
|
|||
{ path: '/calendar', heading: 'Calendar' },
|
||||
{ path: '/summary', heading: 'Monthly Summary' },
|
||||
{ path: '/settings', heading: 'Settings' },
|
||||
{ path: '/workday', heading: 'Work Day Entry' },
|
||||
{ path: '/work-unit', heading: 'Work Unit' },
|
||||
{ path: '/auth', heading: 'You are authenticated' }
|
||||
];
|
||||
|
||||
|
|
|
|||
133
wwwroot/app.css
133
wwwroot/app.css
|
|
@ -161,7 +161,8 @@ h1:focus {
|
|||
top: 2rem;
|
||||
left: 0.35rem;
|
||||
z-index: 20;
|
||||
width: min(18rem, calc(100vw - 3rem));
|
||||
width: min(16rem, calc(100vw - 2rem));
|
||||
max-width: calc(100vw - 2rem);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.75rem;
|
||||
|
|
@ -169,6 +170,16 @@ h1:focus {
|
|||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.calendar-popup-right {
|
||||
left: auto;
|
||||
right: 0.35rem;
|
||||
}
|
||||
|
||||
.calendar-popup-left {
|
||||
left: 0.35rem;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.calendar-popup-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -228,4 +239,124 @@ h1:focus {
|
|||
left: 0;
|
||||
width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Monthly timesheet summary */
|
||||
.timesheet-summary-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timesheet-summary-table {
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.timesheet-summary-table thead th {
|
||||
background-color: #f8f9fa;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timesheet-summary-table th,
|
||||
.timesheet-summary-table td {
|
||||
min-width: 2.2rem;
|
||||
padding: 0.25rem 0.12rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.timesheet-summary-sticky-column {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
min-width: 15rem !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.timesheet-summary-table thead .timesheet-summary-sticky-column {
|
||||
z-index: 3;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.timesheet-summary-total-column {
|
||||
background-color: #f8f9fa;
|
||||
min-width: 3.3rem !important;
|
||||
}
|
||||
|
||||
.timesheet-summary-table tbody tr:nth-child(odd) td,
|
||||
.timesheet-summary-table tbody tr:nth-child(odd) .timesheet-summary-sticky-column {
|
||||
background-color: #fcfcfd;
|
||||
}
|
||||
|
||||
.timesheet-summary-table .timesheet-summary-day-danger {
|
||||
background-color: #f8d7da !important;
|
||||
}
|
||||
|
||||
.timesheet-summary-table .timesheet-summary-day-closure {
|
||||
background-color: #e2e3e5 !important;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-header {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.35rem);
|
||||
left: 50%;
|
||||
z-index: 15;
|
||||
width: min(18rem, calc(100vw - 2rem));
|
||||
max-width: calc(100vw - 2rem);
|
||||
padding: 0.65rem 0.75rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0.7rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18);
|
||||
text-align: left;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-header:hover .timesheet-summary-day-popup,
|
||||
.timesheet-summary-day-header:focus-within .timesheet-summary-day-popup {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup-left .timesheet-summary-day-popup {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup-right .timesheet-summary-day-popup {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup-item {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.35;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup-item + .timesheet-summary-day-popup-item {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup-item-event {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.timesheet-summary-sticky-column {
|
||||
min-width: 12rem !important;
|
||||
}
|
||||
|
||||
.timesheet-summary-day-popup {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue