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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<Routes />
|
<Routes @rendermode="InteractiveServer" />
|
||||||
<script src="_framework/blazor.web.js"></script>
|
<script src="_framework/blazor.web.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,24 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
<div class="page">
|
<div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
|
||||||
<div class="sidebar">
|
<div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
|
||||||
<NavMenu />
|
<NavMenu IsCollapsed="sidebarCollapsed" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="top-row px-4">
|
<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>
|
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -21,3 +33,12 @@
|
||||||
<a href="." class="reload">Reload</a>
|
<a href="." class="reload">Reload</a>
|
||||||
<span class="dismiss">🗙</span>
|
<span class="dismiss">🗙</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
private bool sidebarCollapsed = true;
|
||||||
|
|
||||||
|
private void ToggleSidebar()
|
||||||
|
{
|
||||||
|
sidebarCollapsed = !sidebarCollapsed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
|
@ -36,6 +37,27 @@ main {
|
||||||
text-overflow: ellipsis;
|
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) {
|
@media (max-width: 640.98px) {
|
||||||
.top-row {
|
.top-row {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -56,6 +78,9 @@ main {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
transition: width 0.2s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-row {
|
.top-row {
|
||||||
|
|
@ -74,6 +99,14 @@ main {
|
||||||
padding-left: 2rem !important;
|
padding-left: 2rem !important;
|
||||||
padding-right: 1.5rem !important;
|
padding-right: 1.5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.sidebar-collapsed {
|
||||||
|
width: 5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#blazor-error-ui {
|
#blazor-error-ui {
|
||||||
|
|
|
||||||
|
|
@ -2,59 +2,72 @@
|
||||||
@using WorkTracker.Configuration
|
@using WorkTracker.Configuration
|
||||||
@inject IOptions<AppAuthOptions> AppAuthOptions
|
@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="top-row ps-3 navbar navbar-dark">
|
||||||
<div class="container-fluid">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
<div class="nav-scrollable">
|
||||||
|
<nav id="sidebar-navigation" class="nav flex-column" aria-label="Sidebar navigation">
|
||||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
|
||||||
<nav class="nav flex-column">
|
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
<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> Dashboard
|
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Dashboard</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="grid">
|
<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> Grid View
|
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Grid View</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="calendar">
|
<NavLink class="nav-link" href="calendar" aria-label="Calendar" title="Calendar">
|
||||||
<span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span> Calendar
|
<span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Calendar</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="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> Summary
|
<span class="bi bi-bar-chart-fill-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Summary</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="settings">
|
<NavLink class="nav-link" href="settings" aria-label="Settings" title="Settings">
|
||||||
<span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span> Settings
|
<span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Settings</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AuthorizeView>
|
<AuthorizeView>
|
||||||
<Authorized>
|
<Authorized>
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="auth">
|
<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> @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>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
@if (AppAuthOptions.Value.Enabled)
|
@if (AppAuthOptions.Value.Enabled)
|
||||||
{
|
{
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<form action="/api/logout" method="post">
|
<form action="/api/logout" method="post">
|
||||||
<button type="submit" class="nav-link">
|
<button type="submit" class="nav-link" aria-label="Logout" title="Logout">
|
||||||
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
|
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Logout</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,13 +75,15 @@
|
||||||
</Authorized>
|
</Authorized>
|
||||||
<NotAuthorized>
|
<NotAuthorized>
|
||||||
<div class="nav-item px-3">
|
<div class="nav-item px-3">
|
||||||
<NavLink class="nav-link" href="login">
|
<NavLink class="nav-link" href="login" aria-label="Login" title="Login">
|
||||||
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
|
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span>
|
||||||
|
<span class="nav-label">Login</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
</NotAuthorized>
|
</NotAuthorized>
|
||||||
</AuthorizeView>
|
</AuthorizeView>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</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 {
|
.top-row {
|
||||||
min-height: 3.5rem;
|
min-height: 3.5rem;
|
||||||
background-color: rgba(0,0,0,0.4);
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
|
@ -24,6 +7,14 @@
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-brand-compact {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu-shell {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.bi {
|
.bi {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -83,6 +74,12 @@
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-label {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-item:first-of-type {
|
.nav-item:first-of-type {
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -114,24 +111,59 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-scrollable {
|
.nav-scrollable {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler:checked ~ .nav-scrollable {
|
|
||||||
display: block;
|
display: block;
|
||||||
|
height: calc(100vh - 3.5rem);
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
@media (max-width: 640.98px) {
|
||||||
.navbar-toggler {
|
.nav-menu-shell-collapsed .sidebar-brand-full,
|
||||||
|
.nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-scrollable {
|
.nav-scrollable {
|
||||||
/* Never collapse the sidebar for wide screens */
|
height: auto;
|
||||||
display: block;
|
}
|
||||||
|
}
|
||||||
/* Allow sidebar to scroll for tall menus */
|
|
||||||
height: calc(100vh - 3.5rem);
|
@media (min-width: 641px) {
|
||||||
overflow-y: auto;
|
.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))
|
@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 class="d-flex align-items-start justify-content-between gap-2 mb-2">
|
||||||
<div>
|
<div>
|
||||||
<div class="fw-semibold">@cell.Date.ToString("dddd d MMMM")</div>
|
<div class="fw-semibold">@cell.Date.ToString("dddd d MMMM")</div>
|
||||||
|
|
@ -241,6 +241,7 @@ else
|
||||||
currentWeek[dayOfWeek] = new CalendarCell
|
currentWeek[dayOfWeek] = new CalendarCell
|
||||||
{
|
{
|
||||||
Date = d,
|
Date = d,
|
||||||
|
ColumnIndex = dayOfWeek,
|
||||||
IsWeekend = d.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday,
|
IsWeekend = d.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday,
|
||||||
IsFestivity = festivities.Contains(d),
|
IsFestivity = festivities.Contains(d),
|
||||||
Entry = lookup.GetValueOrDefault(d)
|
Entry = lookup.GetValueOrDefault(d)
|
||||||
|
|
@ -293,6 +294,16 @@ else
|
||||||
activeDate = null;
|
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 bool IsActiveCell(DateOnly date) => activeDate == date;
|
||||||
|
|
||||||
private void CreateWorkUnit(DateOnly date)
|
private void CreateWorkUnit(DateOnly date)
|
||||||
|
|
@ -437,6 +448,7 @@ else
|
||||||
private sealed class CalendarCell
|
private sealed class CalendarCell
|
||||||
{
|
{
|
||||||
public DateOnly Date { get; set; }
|
public DateOnly Date { get; set; }
|
||||||
|
public int ColumnIndex { get; set; }
|
||||||
public bool IsWeekend { get; set; }
|
public bool IsWeekend { get; set; }
|
||||||
public bool IsFestivity { get; set; }
|
public bool IsFestivity { get; set; }
|
||||||
public WorkDayDocument? Entry { get; set; }
|
public WorkDayDocument? Entry { get; set; }
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@
|
||||||
@attribute [Authorize]
|
@attribute [Authorize]
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
@inject IWorkDayService WorkDayService
|
@using System.Globalization
|
||||||
|
@inject global::WorkTracker.Services.WorkDays.IWorkDayService WorkDayService
|
||||||
|
|
||||||
<PageTitle>Monthly Summary</PageTitle>
|
<PageTitle>Monthly Summary</PageTitle>
|
||||||
|
|
||||||
|
|
@ -20,11 +21,16 @@
|
||||||
<label class="form-check-label" for="include-preview">Include preview work units in totals</label>
|
<label class="form-check-label" for="include-preview">Include preview work units in totals</label>
|
||||||
</div>
|
</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)
|
@if (loading)
|
||||||
{
|
{
|
||||||
<p><em>Loading...</em></p>
|
<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="row g-3">
|
||||||
<div class="col-6 col-md-4 col-xl-3">
|
<div class="col-6 col-md-4 col-xl-3">
|
||||||
|
|
@ -141,14 +147,75 @@ else if (summary is not null)
|
||||||
</div>
|
</div>
|
||||||
</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 {
|
@code {
|
||||||
[Parameter] public string? YearMonth { get; set; }
|
[Parameter] public string? YearMonth { get; set; }
|
||||||
|
|
||||||
|
private static readonly CultureInfo ItalianCulture = CultureInfo.GetCultureInfo("it-IT");
|
||||||
|
|
||||||
private DateOnly currentMonth;
|
private DateOnly currentMonth;
|
||||||
private bool loading = true;
|
private bool loading = true;
|
||||||
private bool includePreview;
|
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()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
|
|
@ -174,6 +241,7 @@ else if (summary is not null)
|
||||||
{
|
{
|
||||||
loading = true;
|
loading = true;
|
||||||
summary = await WorkDayService.GetMonthlySummaryAsync(currentMonth.Year, currentMonth.Month, includePreview);
|
summary = await WorkDayService.GetMonthlySummaryAsync(currentMonth.Year, currentMonth.Month, includePreview);
|
||||||
|
timesheet = await WorkDayService.GetMonthlyTimesheetAsync(currentMonth.Year, currentMonth.Month, includePreview);
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -189,6 +257,53 @@ else if (summary is not null)
|
||||||
await LoadSummary();
|
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)
|
private static string FormatHours(decimal value)
|
||||||
{
|
{
|
||||||
var totalMinutes = (int)Math.Round(value * 60m, MidpointRounding.AwayFromZero);
|
var totalMinutes = (int)Math.Round(value * 60m, MidpointRounding.AwayFromZero);
|
||||||
|
|
@ -196,4 +311,10 @@ else if (summary is not null)
|
||||||
var minutes = totalMinutes % 60;
|
var minutes = totalMinutes % 60;
|
||||||
return $"{hours:00}:{minutes:00}";
|
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)
|
public async Task<int> GenerateMonthlyPreviewWorkUnitsAsync(int year, int month, CancellationToken cancellationToken = default)
|
||||||
{
|
{
|
||||||
cancellationToken.ThrowIfCancellationRequested();
|
cancellationToken.ThrowIfCancellationRequested();
|
||||||
|
|
@ -431,6 +480,64 @@ public sealed class CouchbaseLiteWorkDayService : IWorkDayService
|
||||||
return days.Count(day => day.CalendarEvents.Any(calendarEvent => calendarEvent.EventType == eventType));
|
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)
|
private static decimal GetHoursOff(WorkDayDocument day, bool includePreview)
|
||||||
{
|
{
|
||||||
var includedUnits = day.WorkUnits.Where(unit => includePreview || !unit.IsPreview).ToList();
|
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;
|
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)
|
private static WorkUnitDocument CreatePreviewWorkUnit(string label, TimeOnly startTime, TimeOnly endTime, AppSettingsDocument settings)
|
||||||
{
|
{
|
||||||
var workUnit = new WorkUnitDocument
|
var workUnit = new WorkUnitDocument
|
||||||
|
|
|
||||||
|
|
@ -22,5 +22,7 @@ public interface IWorkDayService
|
||||||
|
|
||||||
Task<MonthlySummaryModel> GetMonthlySummaryAsync(int year, int month, bool includePreview, CancellationToken cancellationToken = default);
|
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);
|
Task<int> GenerateMonthlyPreviewWorkUnitsAsync(int year, int month, CancellationToken cancellationToken = default);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,30 @@
|
||||||
import { expect, test } from '@playwright/test';
|
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 }) => {
|
test('home loads without a login screen', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
|
|
||||||
|
|
@ -14,7 +39,7 @@ test('protected pages are directly available without redirecting to login', asyn
|
||||||
{ path: '/calendar', heading: 'Calendar' },
|
{ path: '/calendar', heading: 'Calendar' },
|
||||||
{ path: '/summary', heading: 'Monthly Summary' },
|
{ path: '/summary', heading: 'Monthly Summary' },
|
||||||
{ path: '/settings', heading: 'Settings' },
|
{ path: '/settings', heading: 'Settings' },
|
||||||
{ path: '/workday', heading: 'Work Day Entry' },
|
{ path: '/work-unit', heading: 'Work Unit' },
|
||||||
{ path: '/auth', heading: 'You are authenticated' }
|
{ path: '/auth', heading: 'You are authenticated' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
133
wwwroot/app.css
133
wwwroot/app.css
|
|
@ -161,7 +161,8 @@ h1:focus {
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
left: 0.35rem;
|
left: 0.35rem;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
width: min(18rem, calc(100vw - 3rem));
|
width: min(16rem, calc(100vw - 2rem));
|
||||||
|
max-width: calc(100vw - 2rem);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
|
|
@ -169,6 +170,16 @@ h1:focus {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.calendar-popup-right {
|
||||||
|
left: auto;
|
||||||
|
right: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-popup-left {
|
||||||
|
left: 0.35rem;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.calendar-popup-section {
|
.calendar-popup-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -228,4 +239,124 @@ h1:focus {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: calc(100vw - 2rem);
|
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