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/Pages/Calendar.razor
+++ b/Template.Shared/Components/Pages/Calendar.razor
@@ -1,39 +1,66 @@
@page "/Calendar"
@attribute [Authorize]
@using Template.Shared.Components.Layout
+@using Template.Shared.Components.SingleElements.Calendar

-<HeaderLayout Title="Agenda" ShowFilter="true" />
+<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">
-                @($"{DateFilter:M}")
+                @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">
        <ActivatorContent>
-            <MudFab Color="Color.Primary" Size="Size.Small" StartIcon="@Icons.Material.Filled.Add" />
+            <MudFab Color="Color.Primary" Size="Size.Small" StartIcon="@Icons.Material.Filled.Add"/>
        </ActivatorContent>
        <ChildContent>
            <MudMenuItem>Nuovo contatto</MudMenuItem>
@@ -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;
@@ -14,4 +12,16 @@
 .date-controller {
    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);
 }