From 6f08ba87be309f2aa8ae7117c4a9fd172339c2dc Mon Sep 17 00:00:00 2001 From: MarcoE Date: Tue, 13 May 2025 09:43:00 +0200 Subject: [PATCH] Aggiunta visualizzazione mensile in agenda --- .../Components/Layout/HeaderLayout.razor | 2 +- .../Components/Layout/MainLayout.razor | 3 +- .../Components/Layout/NavMenu.razor | 6 +- .../Components/Pages/Calendar.razor | 153 ++++++++++++++++-- .../Components/Pages/Calendar.razor.css | 16 +- .../Components/Pages/PersonalInfo.razor | 2 + .../Components/Pages/PersonalInfo.razor.css | 9 +- .../SingleElements/Calendar/DayView.razor | 6 + .../SingleElements/Calendar/DayView.razor.css | 7 + .../SingleElements/Calendar/MonthView.razor | 97 +++++++++++ .../Calendar/MonthView.razor.css | 64 ++++++++ .../Card/ActivityCard.razor.css | 3 +- Template.Shared/wwwroot/css/app.css | 18 +++ Template.Shared/wwwroot/css/default-theme.css | 10 +- Template.Web/Properties/launchSettings.json | 60 ++++--- 15 files changed, 397 insertions(+), 59 deletions(-) create mode 100644 Template.Shared/Components/SingleElements/Calendar/DayView.razor create mode 100644 Template.Shared/Components/SingleElements/Calendar/DayView.razor.css create mode 100644 Template.Shared/Components/SingleElements/Calendar/MonthView.razor create mode 100644 Template.Shared/Components/SingleElements/Calendar/MonthView.razor.css diff --git a/Template.Shared/Components/Layout/HeaderLayout.razor b/Template.Shared/Components/Layout/HeaderLayout.razor index 4a7d4d8..3489ce7 100644 --- a/Template.Shared/Components/Layout/HeaderLayout.razor +++ b/Template.Shared/Components/Layout/HeaderLayout.razor @@ -3,7 +3,7 @@

@Title

@if (ShowFilter) { - + } diff --git a/Template.Shared/Components/Layout/MainLayout.razor b/Template.Shared/Components/Layout/MainLayout.razor index 7d9bdf2..4de1212 100644 --- 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" } }; diff --git a/Template.Shared/Components/Layout/NavMenu.razor b/Template.Shared/Components/Layout/NavMenu.razor index 9e7e669..ec8366a 100644 --- a/Template.Shared/Components/Layout/NavMenu.razor +++ b/Template.Shared/Components/Layout/NavMenu.razor @@ -7,7 +7,7 @@
  • - + Contatti
    @@ -15,7 +15,7 @@
  • - + Agenda
    @@ -23,7 +23,7 @@
  • - + Profilo
    diff --git a/Template.Shared/Components/Pages/Calendar.razor b/Template.Shared/Components/Pages/Calendar.razor index ac90024..01e07e1 100644 --- 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 - +
    - - Giorno - Settimana - Mese + + Giorno + Settimana + Mese
    - + - @($"{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}") + } - +
    - + + + @if (DateFilter != DateTime.Today) + { + Oggi + } + +
    - - - + @if (FilterByDay) + { + + } + else if (FilterByWeek) + { + } + else if (FilterByMonth) + { + + }
    - + - + Nuovo contatto @@ -43,14 +70,110 @@
    @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(); + } + } \ No newline at end of file diff --git a/Template.Shared/Components/Pages/Calendar.razor.css b/Template.Shared/Components/Pages/Calendar.razor.css index dbe1a65..6bce93c 100644 --- 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%); } \ No newline at end of file diff --git a/Template.Shared/Components/Pages/PersonalInfo.razor b/Template.Shared/Components/Pages/PersonalInfo.razor index a5776e1..19474c1 100644 --- a/Template.Shared/Components/Pages/PersonalInfo.razor +++ b/Template.Shared/Components/Pages/PersonalInfo.razor @@ -79,6 +79,8 @@ Impostazioni account +
    +
    Esci diff --git a/Template.Shared/Components/Pages/PersonalInfo.razor.css b/Template.Shared/Components/Pages/PersonalInfo.razor.css index dd3738d..9363cb0 100644 --- 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); } diff --git a/Template.Shared/Components/SingleElements/Calendar/DayView.razor b/Template.Shared/Components/SingleElements/Calendar/DayView.razor new file mode 100644 index 0000000..cf0274f --- /dev/null +++ b/Template.Shared/Components/SingleElements/Calendar/DayView.razor @@ -0,0 +1,6 @@ +
    + @for (var i = 0; i < 3; i++) + { + + } +
    \ No newline at end of file diff --git a/Template.Shared/Components/SingleElements/Calendar/DayView.razor.css b/Template.Shared/Components/SingleElements/Calendar/DayView.razor.css new file mode 100644 index 0000000..a92eed1 --- /dev/null +++ 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; +} diff --git a/Template.Shared/Components/SingleElements/Calendar/MonthView.razor b/Template.Shared/Components/SingleElements/Calendar/MonthView.razor new file mode 100644 index 0000000..f573039 --- /dev/null +++ b/Template.Shared/Components/SingleElements/Calendar/MonthView.razor @@ -0,0 +1,97 @@ +
    + @foreach (var nomeGiorno in _giorniSettimana) + { +
    @nomeGiorno
    + } + + @for (var i = 0; i < StartDays; i++) + { +
    + } + + @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); + +
    +
    + @day + @if (events.Any()) + { +
    + } +
    +
    + } + + @for (var i = 0; i < EndDays; i++) + { +
    + } +
    + +@code +{ + [Parameter] public required DateTime Date { get; set; } + + [Parameter] public EventCallback DateChanged { get; set; } + + private List 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 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; } = ""; + } +} \ No newline at end of file diff --git a/Template.Shared/Components/SingleElements/Calendar/MonthView.razor.css b/Template.Shared/Components/SingleElements/Calendar/MonthView.razor.css new file mode 100644 index 0000000..cea3e90 --- /dev/null +++ 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; } \ No newline at end of file diff --git a/Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css b/Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css index 6267f00..34534eb 100644 --- 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); } diff --git a/Template.Shared/wwwroot/css/app.css b/Template.Shared/wwwroot/css/app.css index 0ce37bb..4854344 100644 --- 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; @@ -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; } \ No newline at end of file diff --git a/Template.Shared/wwwroot/css/default-theme.css b/Template.Shared/wwwroot/css/default-theme.css index 2a7bc2f..202c134 100644 --- 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%); -} \ No newline at end of file + /*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); +} diff --git a/Template.Web/Properties/launchSettings.json b/Template.Web/Properties/launchSettings.json index 53f0c7b..751cdb5 100644 --- a/Template.Web/Properties/launchSettings.json +++ b/Template.Web/Properties/launchSettings.json @@ -8,31 +8,41 @@ "sslPort": 44379 } }, - "profiles": { - "http": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "applicationUrl": "http://localhost:5153", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "https": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "applicationUrl": "https://localhost:7125;http://localhost:5153", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "IIS Express": { - "commandName": "IISExpress", - "launchBrowser": true, - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } + "profiles": { + "http": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "http://localhost:5153", + "environmentVariables": { + "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, + "launchBrowser": true, + "applicationUrl": "https://localhost:7125;http://localhost:5153", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" } } } + }