Aggiunta visualizzazione mensile in agenda

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>

Template.Shared/Components/Layout/MainLayout.razor

@@ -23,8 +23,7 @@
         {
                 Primary = "#ABA9BF",
                 Secondary = "#BEB7DF",
-                Tertiary = "#D4F2D2",
+                Tertiary = "#D4F2D2"
-                Background = "#f6f6f8"
         }
     };
 

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>

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">
+    <MudButtonGroup Size="Size.Small" Class="custom-mudButtonGroup" Color="Color.Surface" OverrideStyles="true" Variant="Variant.Outlined" DropShadow="true">
-        <MudButton>Giorno</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.ViewStream" Class="@(FilterByDay ? "custom-button-active" : "")" OnClick="SelectDay">Giorno</MudButton>
-        <MudButton Disabled="true">Settimana</MudButton>
+        <MudButton StartIcon="@Icons.Material.Filled.CalendarViewDay" Class="@(FilterByWeek ? "custom-button-active" : "")" OnClick="SelectWeek">Settimana</MudButton>
-        <MudButton Disabled="true">Mese</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" />
+        @if (FilterByDay)
-        <ActivityCard Type="commessa"/>
+        {
-        <ActivityCard Type="interna"/>
+            <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();
+    }
+
 }

Template.Shared/Components/Pages/Calendar.razor.css

@@ -1,6 +1,4 @@
-.activity-filter {
+.activity-filter { margin-top: .5rem; }
-    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%);
 }

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>

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);
+    border: 2px solid var(--card-border-color);
-    margin-top: 1rem;
     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);
 }
 

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>

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;
+}

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; } = "";
+    }
+}

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; }

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); }

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;
@@ -119,4 +126,15 @@ 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;
 }

Template.Shared/wwwroot/css/default-theme.css

@@ -1,5 +1,7 @@
 :root {
-    --primary-color: #5352ed;
+    /*Color*/
-    --ligther-color: #f7f7ff;
+    --card-border-color: hsl(from var(--mud-palette-gray-light) h s 86%);
-    --darker-color: hsl(240, 81%, 30%);
+    --gray-for-shadow: hsl(from var(--mud-palette-gray-light) h s 95%);
-}
+    /*Utility*/
+    --card-shadow: 5px 5px 10px 0 var(--gray-for-shadow);
+}

Template.Web/Properties/launchSettings.json

@@ -8,31 +8,41 @@
         "sslPort": 44379
       }
     },
-    "profiles": {
+  "profiles": {
-      "http": {
+    "http": {
-        "commandName": "Project",
+      "commandName": "Project",
-        "dotnetRunMessages": true,
+      "dotnetRunMessages": true,
-        "launchBrowser": true,
+      "launchBrowser": true,
-        "applicationUrl": "http://localhost:5153",
+      "applicationUrl": "http://localhost:5153",
-        "environmentVariables": {
+      "environmentVariables": {
-          "ASPNETCORE_ENVIRONMENT": "Development"
+        "ASPNETCORE_ENVIRONMENT": "Development"
-        }
+      }
-      },
+    },
-      "https": {
+    "http debugger": {
-        "commandName": "Project",
+      "commandName": "Project",
-        "dotnetRunMessages": true,
+      "dotnetRunMessages": true,
-        "launchBrowser": true,
+      "launchBrowser": true,
-        "applicationUrl": "https://localhost:7125;http://localhost:5153",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-        "environmentVariables": {
+      "applicationUrl": "http://localhost:5154;http://0.0.0.0:5154",
-          "ASPNETCORE_ENVIRONMENT": "Development"
+      "environmentVariables": {
-        }
+        "ASPNETCORE_ENVIRONMENT": "Development"
-      },
+      }
-      "IIS Express": {
+    },
-        "commandName": "IISExpress",
+    "https": {
-        "launchBrowser": true,
+      "commandName": "Project",
-        "environmentVariables": {
+      "dotnetRunMessages": true,
-          "ASPNETCORE_ENVIRONMENT": "Development"
+      "launchBrowser": true,
-        }
+      "applicationUrl": "https://localhost:7125;http://localhost:5153",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
       }
     }
   }
+  }