Completato form attività e filtri

Template.Shared/Components/Layout/BottomSheet/FilterActivity.razor

@@ -0,0 +1,151 @@
+@using Template.Shared.Core.Dto
+@using Template.Shared.Core.Entity
+@using Template.Shared.Core.Helpers.Enum
+@using Template.Shared.Core.Interface
+@inject IManageDataService manageData
+
+<div class="bottom-sheet-backdrop @(IsSheetVisible ? "show" : "")" @onclick="CloseBottomSheet"></div>
+
+<div class="bottom-sheet-container @(IsSheetVisible ? "show" : "")">
+    <div class="bottom-sheet">
+        <div class="title">
+            <MudText Typo="Typo.h6">
+                <b>Filtri</b>
+            </MudText>
+            <MudIconButton Icon="@Icons.Material.Filled.Close" OnClick="CloseBottomSheet"/>
+        </div>
+
+        <div class="input-card clearButton">
+            <MudTextField T="string?" Placeholder="Cerca..." Variant="Variant.Text" @bind-Value="Filter.Text" DebounceInterval="500"/>
+
+            <MudIconButton Class="closeIcon" Icon="@Icons.Material.Filled.Close" OnClick="() => Filter.Text = null"/>
+        </div>
+
+        <div class="input-card">
+            <div class="form-container">
+                <span class="disable-full-width">Assegnata a</span>
+
+                <MudSelectExtended SearchBox="true"
+                                   ItemCollection="Users.Select(x => x.UserName).ToList()"
+                                   SelectAllPosition="SelectAllPosition.NextToSearchBox"
+                                   SelectAll="true"
+                                   NoWrap="true"
+                                   MultiSelection="true"
+                                   MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionUser))"
+                                   FullWidth="true" T="string"
+                                   Variant="Variant.Text"
+                                   Virtualize="true"
+                                   @bind-SelectedValues="Filter.User"
+                                   Class="customIcon-select"
+                                   AdornmentIcon="@Icons.Material.Filled.Code"/>
+
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="form-container">
+                <span class="disable-full-width">Tipo</span>
+
+                <MudSelectExtended FullWidth="true"
+                                   T="string?"
+                                   Variant="Variant.Text"
+                                   @bind-Value="Filter.Type"
+                                   Class="customIcon-select"
+                                   AdornmentIcon="@Icons.Material.Filled.Code">
+                    @foreach (var type in ActivityType)
+                    {
+                        <MudSelectItemExtended Class="custom-item-select" Value="@type.ActivityTypeId">@type.ActivityTypeId</MudSelectItemExtended>
+                    }
+                </MudSelectExtended>
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="form-container">
+                <span class="disable-full-width">Esito</span>
+
+                <MudSelectExtended FullWidth="true"
+                                   T="string?"
+                                   Variant="Variant.Text"
+                                   @bind-Value="Filter.Result"
+                                   Class="customIcon-select"
+                                   AdornmentIcon="@Icons.Material.Filled.Code">
+                    @foreach (var result in ActivityResult)
+                    {
+                        <MudSelectItemExtended Class="custom-item-select" Value="@result.ActivityResultId">@result.ActivityResultId</MudSelectItemExtended>
+                    }
+                </MudSelectExtended>
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="form-container">
+                <span class="disable-full-width">Categoria</span>
+
+                <MudSelectExtended FullWidth="true"
+                                   T="ActivityCategoryEnum?"
+                                   Variant="Variant.Text"
+                                   @bind-Value="Filter.Category"
+                                   Class="customIcon-select"
+                                   AdornmentIcon="@Icons.Material.Filled.Code">
+                    @foreach (var category in CategoryList)
+                    {
+                        <MudSelectItemExtended T="ActivityCategoryEnum?" Class="custom-item-select" Value="@category">@category.ConvertToHumanReadable()</MudSelectItemExtended>
+                    }
+                </MudSelectExtended>
+            </div>
+        </div>
+
+        <div class="button-section">
+            <MudButton OnClick="() => Filter = new FilterActivityDTO()" Variant="Variant.Outlined" Color="Color.Error">Pulisci</MudButton>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OnFilterButton">Filtra</MudButton>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public bool IsSheetVisible { get; set; }
+    [Parameter] public EventCallback<bool> IsSheetVisibleChanged { get; set; }
+
+    [Parameter] public FilterActivityDTO Filter { get; set; }
+    [Parameter] public EventCallback<FilterActivityDTO> FilterChanged { get; set; }
+
+    private List<StbActivityResult> ActivityResult { get; set; } = [];
+    private List<StbActivityType> ActivityType { get; set; } = [];
+    private List<StbUser> Users { get; set; } = [];
+    private List<ActivityCategoryEnum> CategoryList { get; set; } = [];
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (IsSheetVisible)
+            await LoadData();
+    }
+
+    private string GetMultiSelectionUser(List<string> selectedValues)
+    {
+        return $"{selectedValues.Count} Utent{(selectedValues.Count != 1 ? "i selezionati" : "e selezionato")}";
+    }
+
+    private async Task LoadData()
+    {
+        Users = await manageData.GetTable<StbUser>();
+        ActivityResult = await manageData.GetTable<StbActivityResult>();
+        ActivityType = await manageData.GetTable<StbActivityType>(x => x.FlagTipologia.Equals("A"));
+        CategoryList = ActivityCategoryHelper.AllActivityCategory;
+
+        StateHasChanged();
+    }
+
+    private void CloseBottomSheet()
+    {
+        IsSheetVisible = false;
+        IsSheetVisibleChanged.InvokeAsync(IsSheetVisible);
+    }
+
+    private void OnFilterButton()
+    {
+        FilterChanged.InvokeAsync(Filter);
+        CloseBottomSheet();
+    }
+
+}

Template.Shared/Components/Layout/BottomSheet/FilterActivity.razor.css

@@ -0,0 +1,56 @@
+.bottom-sheet-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(165, 165, 165, 0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    z-index: 1002;
+}
+
+.bottom-sheet-backdrop.show {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.bottom-sheet-container {
+    position: fixed;
+    bottom: -100%;
+    left: 0;
+    right: 0;
+    transition: bottom 0.3s ease;
+    z-index: 1003;
+}
+
+.bottom-sheet-container.show {
+    bottom: 0;
+}
+
+.bottom-sheet {
+    background-color: var(--mud-palette-surface);
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    padding: 4px 16px 16px;
+    box-shadow: 0 -2px 10px rgba(165, 165, 165, 0.5);
+}
+
+.clearButton ::deep .mud-icon-button {
+    padding: 4px !important;
+}
+
+.bottom-sheet ::deep .closeIcon .mud-icon-root {
+    border-radius: 50%;
+    padding: 2px;
+    min-width: 15px;
+    min-height: 15px;
+    padding: 4px;
+    background: var(--mud-palette-gray-light);
+    color: var(--mud-palette-surface);
+}
+
+.button-section {
+    display: flex;
+    justify-content: end;
+    gap: .75rem;
+    margin-top: 2rem;
+}

Template.Shared/Components/Layout/HeaderLayout.razor

@@ -22,11 +22,7 @@
             {
                 @if (ShowFilter)
                 {
-                    <MudIconButton Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark"/>
-                }
-                @if (ShowNotifications)
-                {
-                    @* <MudIconButton Icon="@Icons.Material.Filled.Notifications" Color="Color.Dark"/> *@
+                    <MudIconButton OnClick="OnFilterToggle" Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark" />
                 }
                 @if (ShowCalendarToggle)
                 {
@@ -53,6 +49,8 @@
     [Parameter] public bool Back { get; set; }
     [Parameter] public string BackTo { get; set; } = "";
 
+    [Parameter] public EventCallback OnFilterToggle { get; set; }
+
     [Parameter] public bool Cancel { get; set; }
     [Parameter] public EventCallback OnCancel { get; set; }
     [Parameter] public string? LabelSave { get; set; }
@@ -76,7 +74,7 @@
         }
 
         await JS.InvokeVoidAsync("goBack");
-        
+
     }
 
 }

Template.Shared/Components/Layout/Overlay/SaveOverlay.razor

@@ -0,0 +1,23 @@
+@using Template.Shared.Components.Layout.Spinner
+<MudOverlay Visible="VisibleOverlay" LightBackground="true">
+    @if (SuccessAnimation)
+    {
+        <div class="success-checkmark">
+            <div class="check-icon">
+                <span class="icon-line line-tip"></span>
+                <span class="icon-line line-long"></span>
+                <div class="icon-circle"></div>
+                <div class="icon-fix"></div>
+            </div>
+        </div>
+    }
+    else
+    {
+        <SpinnerLayout/>
+    }
+</MudOverlay>
+
+@code {
+    [Parameter] public required bool SuccessAnimation { get; set; }
+    [Parameter] public required bool VisibleOverlay { get; set; }
+}

Template.Shared/Components/Layout/Overlay/SaveOverlay.razor.css

@@ -0,0 +1,156 @@
+.success-checkmark {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto;
+}
+
+.success-checkmark .check-icon {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    border-radius: 50%;
+    box-sizing: content-box;
+    border: 4px solid var(--mud-palette-success);
+}
+
+.success-checkmark .check-icon::before {
+    top: 3px;
+    left: -2px;
+    width: 30px;
+    transform-origin: 100% 50%;
+    border-radius: 100px 0 0 100px;
+}
+
+.success-checkmark .check-icon::after {
+    top: 0;
+    left: 30px;
+    width: 60px;
+    transform-origin: 0 50%;
+    border-radius: 0 100px 100px 0;
+    animation: rotate-circle 4.25s ease-in;
+}
+
+.success-checkmark .check-icon::before,
+.success-checkmark .check-icon::after {
+    content: '';
+    height: 100px;
+    position: absolute;
+    transform: rotate(-45deg);
+    z-index: 2;
+}
+
+.icon-line {
+    height: 5px;
+    background-color: var(--mud-palette-success);
+    display: block;
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+}
+
+.icon-line.line-tip {
+    top: 46px;
+    left: 14px;
+    width: 25px;
+    transform: rotate(45deg);
+    animation: icon-line-tip 0.75s;
+}
+
+.icon-line.line-long {
+    top: 38px;
+    right: 8px;
+    width: 47px;
+    transform: rotate(-45deg);
+    animation: icon-line-long 0.75s;
+}
+
+
+.icon-circle {
+    top: -4px;
+    left: -4px;
+    z-index: 10;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: content-box;
+    border: 4px solid var(--mud-palette-success);
+}
+
+.icon-fix {
+    top: 8px;
+    width: 5px;
+    left: 26px;
+    z-index: 1;
+    height: 85px;
+    position: absolute;
+    transform: rotate(-45deg);
+}
+
+@keyframes rotate-circle {
+    0% { transform: rotate(-45deg); }
+
+    5% { transform: rotate(-45deg); }
+
+    12% { transform: rotate(-405deg); }
+
+    100% { transform: rotate(-405deg); }
+}
+
+@keyframes icon-line-tip {
+    0% {
+        width: 0;
+        left: 1px;
+        top: 19px;
+    }
+
+    54% {
+        width: 0;
+        left: 1px;
+        top: 19px;
+    }
+
+    70% {
+        width: 50px;
+        left: -8px;
+        top: 37px;
+    }
+
+    84% {
+        width: 17px;
+        left: 21px;
+        top: 48px;
+    }
+
+    100% {
+        width: 25px;
+        left: 14px;
+        top: 45px;
+    }
+}
+
+@keyframes icon-line-long {
+    0% {
+        width: 0;
+        right: 46px;
+        top: 54px;
+    }
+
+    65% {
+        width: 0;
+        right: 46px;
+        top: 54px;
+    }
+
+    84% {
+        width: 55px;
+        right: 0px;
+        top: 35px;
+    }
+
+    100% {
+        width: 47px;
+        right: 8px;
+        top: 38px;
+    }
+}