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

@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" 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="() => 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="() => ChangeDate(1)" Color="Color.Surface"/>
        </div>

        <MudOverlay @bind-Visible="_isVisible" DarkBackground="true" AutoClose="true">
            <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">
        @if (FilterByDay)
        {
            <DayView @bind-Date="DateFilter"/>
        }
        else if (FilterByWeek)
        {
            <WeekView @bind-Date="DateRangeFilter" />
        }
        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"/>
        </ActivatorContent>
        <ChildContent>
            <MudMenuItem>Nuovo contatto</MudMenuItem>
            <MudMenuItem>Nuova attivit<69></MudMenuItem>
        </ChildContent>
    </MudMenu>
</div>

@code {
    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();
    }

}