Aggiunta visualizzazione mensile in agenda

2025-05-13 09:43:00 +02:00
parent bc3809b61c
commit 6f08ba87be
15 changed files with 397 additions and 59 deletions
--- a/Template.Shared/Components/Layout/HeaderLayout.razor
+++ b/Template.Shared/Components/Layout/HeaderLayout.razor
@@ -3,7 +3,7 @@
        <h3 class="page-title">@Title</h3>
        @if (ShowFilter)
        {
-            <MudIconButton Icon="@Icons.Material.Filled.FilterAlt" Color="Color.Dark" />
+            <MudIconButton Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark" />
        }
    </div>
 </div>
--- a/Template.Shared/Components/Layout/MainLayout.razor
+++ b/Template.Shared/Components/Layout/MainLayout.razor
@@ -23,8 +23,7 @@
        {
                Primary = "#ABA9BF",
                Secondary = "#BEB7DF",
-                Tertiary = "#D4F2D2",
-                Background = "#f6f6f8"
+                Tertiary = "#D4F2D2"
        }
    };

--- a/Template.Shared/Components/Layout/NavMenu.razor
+++ b/Template.Shared/Components/Layout/NavMenu.razor
@@ -7,7 +7,7 @@
                <li class="nav-item">
                    <NavLink class="nav-link" href="Users" Match="NavLinkMatch.All">
                        <div class="d-flex flex-column">
-                            <i class="ri-group-fill"></i>
+                            <i class="ri-group-line"></i>
                            <span>Contatti</span>
                        </div>
                    </NavLink>
@@ -15,7 +15,7 @@
                <li class="nav-item">
                    <NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
                        <div class="d-flex flex-column">
-                            <i class="ri-calendar-todo-fill"></i>
+                            <i class="ri-calendar-todo-line"></i>
                            <span>Agenda</span>
                        </div>
                    </NavLink>
@@ -23,7 +23,7 @@
                <li class="nav-item">
                    <NavLink class="nav-link" href="PersonalInfo" Match="NavLinkMatch.All">
                        <div class="d-flex flex-column">
-                            <i class="ri-user-fill"></i>
+                            <i class="ri-user-line"></i>
                            <span>Profilo</span>
                        </div>
                    </NavLink>
--- a/Template.Shared/Components/Pages/Calendar.razor
+++ b/Template.Shared/Components/Pages/Calendar.razor
@@ -1,34 +1,61 @@
@page "/Calendar"
@attribute [Authorize]
@using Template.Shared.Components.Layout
+@using Template.Shared.Components.SingleElements.Calendar

 <HeaderLayout Title="Agenda" ShowFilter="true"/>

 <div class="content">
-    <MudButtonGroup Size="Size.Small" Color="Color.Surface" OverrideStyles="true" Variant="Variant.Filled">
-        <MudButton>Giorno</MudButton>
-        <MudButton Disabled="true">Settimana</MudButton>
-        <MudButton Disabled="true">Mese</MudButton>
+    <MudButtonGroup Size="Size.Small" Class="custom-mudButtonGroup" Color="Color.Surface" OverrideStyles="true" Variant="Variant.Outlined" DropShadow="true">
+        <MudButton StartIcon="@Icons.Material.Filled.ViewStream" Class="@(FilterByDay ? "custom-button-active" : "")" OnClick="SelectDay">Giorno</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.CalendarViewDay" Class="@(FilterByWeek ? "custom-button-active" : "")" OnClick="SelectWeek">Settimana</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.CalendarViewMonth" Class="@(FilterByMonth ? "custom-button-active" : "")" OnClick="SelectMonth">Mese</MudButton>
    </MudButtonGroup>

    <div class="activity-filter">
        <div class="date-controller">
-            <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft" @onclick="() => DateFilter = DateFilter.AddDays(-1)" Color="Color.Surface"/>
+            <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft" @onclick="() => ChangeDate(-1)" Color="Color.Surface"/>
            <MudButton Variant="Variant.Text" Color="Color.Surface" OnClick="OpenCalendar">
+                @if (FilterByDay)
+                {
                    @($"{DateFilter:M}")
+                }
+                else if (FilterByWeek)
+                {
+                    @($"{(DateRangeFilter.Start!.Value.Month == DateRangeFilter.End!.Value.Month ? DateRangeFilter.Start!.Value.Day : DateRangeFilter.Start!.Value.ToString("M"))} - {DateRangeFilter.End!.Value:M}")
+                }
+                else if (FilterByMonth)
+                {
+                    @($"{DateFilter:Y}")
+                }
            </MudButton>
-            <MudIconButton Icon="@Icons.Material.Filled.ChevronRight" @onclick="() => DateFilter = DateFilter.AddDays(1)" Color="Color.Surface" />
+            <MudIconButton Icon="@Icons.Material.Filled.ChevronRight" @onclick="() => ChangeDate(1)" Color="Color.Surface"/>
        </div>

        <MudOverlay @bind-Visible="_isVisible" DarkBackground="true" AutoClose="true">
-            <MudDatePicker PickerVariant="PickerVariant.Static" Date="DateFilter" />
+            <MudDatePicker @bind-Date:after="CloseDatePicker" @bind-Date="DateFilter" PickerVariant="PickerVariant.Static">
+                <PickerActions>
+                    @if (DateFilter != DateTime.Today)
+                    {
+                        <MudButton Class="mr-auto align-self-start" OnClick="() => DateFilter = DateTime.Today">Oggi</MudButton>
+                    }
+                </PickerActions>
+            </MudDatePicker>
        </MudOverlay>
    </div>

    <div class="card-container">
-        <ActivityCard Type="memo" />
-        <ActivityCard Type="commessa"/>
-        <ActivityCard Type="interna"/>
+        @if (FilterByDay)
+        {
+            <DayView/>
+        }
+        else if (FilterByWeek)
+        {
+        }
+        else if (FilterByMonth)
+        {
+            <MonthView @bind-Date="DateTimeForMonthView" />
+        }
    </div>

    <MudMenu PopoverClass="custom_popover" Class="custom-mudfab" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight">
@@ -43,14 +70,110 @@
 </div>

@code {
-    private DateTime DateFilter { get; set; } = DateTime.Today;
+    private bool FilterByDay { get; set; } = true;
+    private bool FilterByWeek { get; set; }
+    private bool FilterByMonth { get; set; }
+    private DateTime? DateFilter { get; set; } = DateTime.Today;
+    private DateRange DateRangeFilter { get; set; } = new();
+    private DateTime DateTimeForMonthView { get; set; }

    private bool _isVisible;

+    protected override void OnInitialized()
+    {
+        CalcDateRange();
+    }
+
    public void OpenCalendar()
    {
        _isVisible = true;
        StateHasChanged();
    }

+    private void SelectDay()
+    {
+        ResetFilterCalendar();
+        FilterByDay = !FilterByDay;
+        StateHasChanged();
+    }
+
+    private void SelectWeek()
+    {
+        ResetFilterCalendar();
+        FilterByWeek = !FilterByWeek;
+        CalcDateRange();
+        StateHasChanged();
+    }
+
+    private void SelectMonth()
+    {
+        ResetFilterCalendar();
+        FilterByMonth = !FilterByMonth;
+        DateTimeForMonthView = new DateTime(DateFilter!.Value.Year, DateFilter!.Value.Month, 1);
+        StateHasChanged();
+    }
+
+    private void ResetFilterCalendar(bool forceSelectDay = false)
+    {
+        FilterByDay = false;
+        FilterByWeek = false;
+        FilterByMonth = false;
+    }
+
+    private void ChangeDate(int value)
+    {
+        var date = DateFilter!.Value;
+
+        if (FilterByDay)
+        {
+            DateFilter = date.AddDays(value);
+        }
+        else if (FilterByWeek)
+        {
+            DateFilter = DateRangeFilter.Start!.Value.AddDays(value > 0 ? 7 : -7);
+        }
+        else if (FilterByMonth)
+        {
+            var year = date.Year;
+            var month = value > 0 ? date.Month + 1 : date.Month - 1;
+
+            switch (month)
+            {
+                case > 12:
+                    year++;
+                    month = 1;
+                    break;
+                case < 1:
+                    year--;
+                    month = 12;
+                    break;
+            }
+
+            DateFilter = new DateTime(year, month, 1);
+            DateTimeForMonthView = DateFilter.Value;
+        }
+
+        CalcDateRange();
+        StateHasChanged();
+    }
+
+    private void CalcDateRange()
+    {
+        var giornoSettimana = DateFilter!.Value.DayOfWeek;
+        var diffInizio = (7 + (giornoSettimana - DayOfWeek.Monday)) % 7;
+
+        DateRangeFilter.Start = DateFilter!.Value.AddDays(-diffInizio).Date;
+        DateRangeFilter.End = DateRangeFilter.Start.Value.AddDays(6);
+    }
+
+    private async Task CloseDatePicker()
+    {
+        DateTimeForMonthView = new DateTime(DateFilter!.Value.Year, DateFilter!.Value.Month, 1);
+        CalcDateRange();
+        await Task.Delay(150);
+
+        _isVisible = false;
+        StateHasChanged();
+    }
+
 }
--- a/Template.Shared/Components/Pages/Calendar.razor.css
+++ b/Template.Shared/Components/Pages/Calendar.razor.css
@@ -1,6 +1,4 @@
-.activity-filter {
-    margin-top: .5rem;
-}
+.activity-filter { margin-top: .5rem; }

 .card-container {
    margin-top: .5rem;
@@ -15,3 +13,15 @@
    display: flex;
    align-items: center;
 }
+
+.content ::deep > .custom-mudButtonGroup .mud-button-root {
+    border-radius: 12px;
+    padding: .5rem 1.5rem;
+    text-transform: none !important;
+    font-size: .985rem;
+    border: 1px solid var(--mud-palette-gray-light);
+}
+
+.content ::deep > .custom-mudButtonGroup .custom-button-active {
+    background-color: hsl(from var(--mud-palette-primary) h s 95%);
+}
--- a/Template.Shared/Components/Pages/PersonalInfo.razor
+++ b/Template.Shared/Components/Pages/PersonalInfo.razor
@@ -79,6 +79,8 @@
        <span>Impostazioni account</span>
    </div>
    
+    <div class="divider"></div>
+    
    <div class="user-button logout" @onclick="Logout">
        <span>Esci</span>
        <i class="ri-logout-box-line"></i>
--- a/Template.Shared/Components/Pages/PersonalInfo.razor.css
+++ b/Template.Shared/Components/Pages/PersonalInfo.razor.css
@@ -26,13 +26,14 @@

 .section-info {
    width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: .8rem 1.2rem;
-    background: var(--mud-palette-surface);
+    border: 1px solid var(--card-border-color);
+    box-shadow: var(--card-shadow);
 }

 .section-personal-info {
@@ -59,8 +60,7 @@
 }

 .user-button {
-    border: 2px solid var(--mud-palette-overlay-dark);
-    margin-top: 1rem;
+    border: 2px solid var(--card-border-color);
    background: transparent;
    text-align: center;
    border-radius: 6px;
@@ -71,7 +71,6 @@
 }

 .user-button.logout {
-    border: 2px solid var(--mud-palette-error);
    color: var(--mud-palette-error);
 }

--- a/Template.Shared/Components/SingleElements/Calendar/DayView.razor
+++ b/Template.Shared/Components/SingleElements/Calendar/DayView.razor
@@ -0,0 +1,6 @@
+<div class="calendar">
+    @for (var i = 0; i < 3; i++)
+    {
+        <ActivityCard Type="interna" />
+    }
+</div>
--- a/Template.Shared/Components/SingleElements/Calendar/DayView.razor.css
+++ b/Template.Shared/Components/SingleElements/Calendar/DayView.razor.css
@@ -0,0 +1,7 @@
+.calendar {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 1rem;
+}
--- a/Template.Shared/Components/SingleElements/Calendar/MonthView.razor
+++ b/Template.Shared/Components/SingleElements/Calendar/MonthView.razor
@@ -0,0 +1,97 @@
+<div class="calendar">
+    @foreach (var nomeGiorno in _giorniSettimana)
+    {
+        <div class="calendar-header">@nomeGiorno</div>
+    }
+
+    @for (var i = 0; i < StartDays; i++)
+    {
+        <div class="calendar-day disabled @(i == 0 ? "radiusTopLeft" : "")"></div>
+    }
+
+    @for (var day = 1; day <= DaysInMonth; day++)
+    {
+        var currentDate = new DateTime(Date.Year, Date.Month, day);
+        var events = GetEventsForDay(currentDate);
+        var isToday = currentDate == DateTime.Today;
+
+        var topRight = StartDays == 0 ? 7 : 7 - StartDays;
+        var bottomLeft = DaysInMonth - (6 - EndDays);
+
+        <div class="calendar-day @(isToday ? "today" : "") 
+                                 @(StartDays == 0 && day == 1 ? "radiusTopLeft" : "") 
+                                 @(EndDays == 0 && day == DaysInMonth ? "radiusBottomRight" : "")
+                                 @(bottomLeft == day ? "radiusBottomLeft" : "")
+                                 @(topRight == day ? "radiusTopRight" : "")">
+            <div class="calendar-day-wrapper">
+                <span class="titleDay">@day</span>
+                @if (events.Any())
+                {
+                    <div class="event-dot"></div>
+                }
+            </div>
+        </div>
+    }
+
+    @for (var i = 0; i < EndDays; i++)
+    {
+        <div class="calendar-day disabled @(i + 1 == EndDays ? "radiusBottomRight" : "")"></div>
+    }
+</div>
+
+@code
+{
+    [Parameter] public required DateTime Date { get; set; }
+
+    [Parameter] public EventCallback<DateTime> DateChanged { get; set; }
+
+    private List<CalendarEvent> Events { get; set; }
+
+    private int DaysInMonth { get; set; }
+    private int StartDays { get; set; }
+    private int EndDays { get; set; }
+
+    readonly string[] _giorniSettimana = ["Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"];
+
+    protected override void OnInitialized()
+    {
+        ChangeMonth();
+    }
+
+    protected override void OnParametersSet()
+    {
+        ChangeMonth();
+    }
+
+    private void ChangeMonth()
+    {
+        var firstDay = Date;
+        DaysInMonth = DateTime.DaysInMonth(firstDay.Year, firstDay.Month);
+
+        var dayOfWeek = (int)firstDay.DayOfWeek;
+        StartDays = dayOfWeek == 0 ? 6 : dayOfWeek - 1;
+
+        var tempTotalCell = (int)Math.Ceiling((double)(DaysInMonth + StartDays) / 7);
+        var totalCell = tempTotalCell * 7;
+        EndDays = totalCell - (DaysInMonth + StartDays);
+
+        Events =
+        [
+            new CalendarEvent { Date = DateTime.Today, Title = "Meeting", Time = "10:00" },
+            new CalendarEvent { Date = DateTime.Today.AddDays(2), Title = "Dentista", Time = "15:30" },
+            new CalendarEvent { Date = DateTime.Today.AddDays(5), Title = "Scadenza", Time = "Tutto il giorno" }
+        ];
+    }
+
+    private List<CalendarEvent> GetEventsForDay(DateTime day)
+    {
+        return Events.Where(e => e.Date.Date == day.Date).ToList();
+    }
+
+    public class CalendarEvent
+    {
+        public DateTime Date { get; set; }
+        public string Title { get; set; } = "";
+        public string Time { get; set; } = "";
+    }
+}
--- a/Template.Shared/Components/SingleElements/Calendar/MonthView.razor.css
+++ b/Template.Shared/Components/SingleElements/Calendar/MonthView.razor.css
@@ -0,0 +1,64 @@
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    /*border: 1px solid #ccc;*/
+}
+
+.calendar-header, .calendar-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 65px;
+    font-size: 0.85rem;
+    padding: 4px;
+}
+
+.calendar-day { border: 1px solid var(--mud-palette-gray-light); }
+
+.calendar-day.disabled { border: 1px solid hsl(from var(--mud-palette-gray-light) h s 88%); }
+
+.calendar-header {
+    font-weight: bold;
+    min-height: 25px;
+    display: flex;
+    justify-content: end;
+}
+
+.today > .calendar-day-wrapper > .titleDay {
+    background-color: var(--mud-palette-primary);
+    color: var(--mud-palette-appbar-text);
+    font-weight: 700;
+}
+
+.calendar-day-wrapper > .titleDay {
+    padding: 6px;
+    border-radius: 50%;
+    position: absolute;
+    line-height: normal;
+}
+
+.event-dot {
+    width: 100%;
+    height: 6px;
+    border-radius: 4px;
+    background-color: var(--mud-palette-secondary);
+    position: absolute;
+    bottom: 0;
+}
+
+.calendar-day:hover .event-popup { display: block; }
+
+.calendar-day-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.radiusTopLeft { border-top-left-radius: 12px; }
+
+.radiusTopRight { border-top-right-radius: 12px; }
+
+.radiusBottomLeft { border-bottom-left-radius: 12px; }
+
+.radiusBottomRight { border-bottom-right-radius: 12px; }
--- a/Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css
+++ b/Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css
@@ -7,7 +7,8 @@
    padding: .5rem .7rem;
    border-radius: 12px;
    line-height: normal;
-    background: var(--mud-palette-surface);
+    border: 1px solid var(--card-border-color);
+    box-shadow: var(--card-shadow);
 }

 .activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
--- a/Template.Shared/wwwroot/css/app.css
+++ b/Template.Shared/wwwroot/css/app.css
@@ -101,6 +101,13 @@ h1:focus { outline: none; }
    padding-right: 12px !important;
 }

+.divider {
+    display: block;
+    width: 100%;
+    border: 1px solid var(--card-border-color);
+    margin: 1.5rem 0;
+}
+
@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
@@ -120,3 +127,14 @@ h1:focus { outline: none; }

    .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
 }
+
+/*MudBlazor Personalization*/
+.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:last-child), .mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:last-child) .mud-button-root {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:first-child), .mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
--- a/Template.Shared/wwwroot/css/default-theme.css
+++ b/Template.Shared/wwwroot/css/default-theme.css
@@ -1,5 +1,7 @@
 :root {
-    --primary-color: #5352ed;
-    --ligther-color: #f7f7ff;
-    --darker-color: hsl(240, 81%, 30%);
+    /*Color*/
+    --card-border-color: hsl(from var(--mud-palette-gray-light) h s 86%);
+    --gray-for-shadow: hsl(from var(--mud-palette-gray-light) h s 95%);
+    /*Utility*/
+    --card-shadow: 5px 5px 10px 0 var(--gray-for-shadow);
 }
--- a/Template.Web/Properties/launchSettings.json
+++ b/Template.Web/Properties/launchSettings.json
@@ -18,6 +18,16 @@
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
+    "http debugger": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5154;http://0.0.0.0:5154",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,