Aggiunto componenti x test RadZen Scheduler

2024-09-06 08:43:12 +02:00
parent bc458303fc
commit 2dde594e40
11 changed files with 366 additions and 6 deletions
@@ -0,0 +1,49 @@
+@inject DialogService DialogService
+
+<RadzenTemplateForm TItem="Appointment" Data="@model" Submit=@OnSubmit>
+    <RadzenStack Gap="1rem">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="Title" Style="width: 4rem;" />
+            <RadzenTextBox @bind-Value="@model.Text" Name="Text" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="Text" Text="Title is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="Detail" Style="width: 4rem;" />
+            <RadzenTextBox @bind-Value="@model.Detail" Name="Detail" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="Detail" Text="Detail is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="Start" Style="width: 4rem;" />
+            <RadzenDatePicker @bind-Value="@model.Start" Name="Start" ShowTime="true" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="Start" Text="Start is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="End" Style="width: 4rem;" />
+            <RadzenDatePicker Name="End" @bind-Value="@model.End" ShowTime="true" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="End" Text="End is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" >
+            <RadzenButton ButtonType="ButtonType.Submit" Text="Save" />
+        </RadzenStack>
+    </RadzenStack>
+</RadzenTemplateForm>
+@code {
+    [Parameter]
+    public DateTime Start { get; set; }
+
+    [Parameter]
+    public DateTime End { get; set; }
+
+    Appointment model = new Appointment();
+
+    protected override void OnParametersSet()
+    {
+        model.Start = Start;
+        model.End = End;
+    }
+
+    void OnSubmit(Appointment model)
+    {
+        DialogService.Close(model);
+    }
+}
@@ -0,0 +1,11 @@
+namespace EgwCoreLib.BlazorTest.Components
+{
+    public class Appointment
+    {
+        public DateTime Start { get; set; }
+        public DateTime End { get; set; }
+
+        public string Text { get; set; } = "";
+        public string Detail { get; set; } = "";
+    }
+}
@@ -0,0 +1,45 @@
+@inject DialogService DialogService
+
+<RadzenTemplateForm TItem="Appointment" Data="@model" Submit=@OnSubmit>
+    <RadzenStack Gap="1rem">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="Title" Style="width: 6rem;" />
+            <RadzenTextBox @bind-Value="@model.Text" Name="Text" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="Text" Text="Title is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="Detail" Style="width: 6rem;" />
+            <RadzenTextBox @bind-Value="@model.Detail" Name="Detail" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="Detail" Text="Detail is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="Start" Style="width: 6rem;" />
+            <RadzenDatePicker @bind-Value="@model.Start" Name="Start" ShowTime="true" Style="width: 12rem;" />
+        <RadzenRequiredValidator Component="Start" Text="Start is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+            <RadzenLabel Text="End" Style="width: 6rem;" />
+            <RadzenDatePicker Name="End" @bind-Value="@model.End" ShowTime="true" Style="width: 12rem;" />
+            <RadzenRequiredValidator Component="End" Text="End is required" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" >
+            <RadzenButton ButtonType="ButtonType.Submit" Text="Save" />
+        </RadzenStack>
+    </RadzenStack>
+</RadzenTemplateForm>
+@code {
+    [Parameter]
+    public Appointment Appointment { get; set; }
+
+    Appointment model = new Appointment();
+
+    protected override void OnParametersSet()
+    {
+        model = Appointment;
+    }
+
+    void OnSubmit(Appointment model)
+    {
+        DialogService.Close(model);
+    }
+}
@@ -0,0 +1,64 @@
+@using Radzen
+@using System.Text.Json
+@inject IJSRuntime JSRuntime
+<RadzenCard Variant="Variant.Outlined" class="rz-mt-4">
+    <RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem" @attributes=@Attributes>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween">
+            <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Console log</RadzenText>
+            <RadzenButton Click=@OnClearClick Text="Clear console" ButtonStyle="ButtonStyle.Base" Variant="Variant.Flat" Size="ButtonSize.Small" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Vertical" Gap="0" ID="event-console" class="rz-pt-1" Style="border-top: var(--rz-grid-cell-border); min-height: 2rem; max-height: 12rem; overflow: auto;">
+            @foreach (var message in messages)
+            {
+                <RadzenAlert ShowIcon="false" Variant="Variant.Flat" AlertStyle="message.AlertStyle" Size="AlertSize.ExtraSmall" Shade="Shade.Lighter" AllowClose="false" Style="font-size: 0.75rem">
+                    <span Style="opacity: 0.6;">@message.Date.ToString("HH:mm:ss.ff")</span> @message.Text
+                </RadzenAlert>
+            }
+        </RadzenStack>
+    </RadzenStack>
+</RadzenCard>
+
+@code {
+    class Message
+    {
+        public DateTime Date { get; set; }
+        public string Text { get; set; }
+        public AlertStyle AlertStyle { get; set; }
+    }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object> Attributes { get; set; }
+    IList<Message> messages = new List<Message>();
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            await JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('event-console').scrollTop = document.getElementById('event-console').scrollHeight");
+        }
+    }
+
+    void OnClearClick()
+    {
+        Clear();
+    }
+
+    public void Clear()
+    {
+        messages.Clear();
+
+        InvokeAsync(StateHasChanged);
+    }
+
+    public void Log(string message, AlertStyle alertStyle = AlertStyle.Info)
+    {
+        messages.Add(new Message { Date = DateTime.Now, Text = message, AlertStyle = alertStyle });
+
+        InvokeAsync(StateHasChanged);
+    }
+
+    public void Log(object value)
+    {
+        Log(JsonSerializer.Serialize(value));
+    }
+}
@@ -17,6 +17,7 @@ namespace EgwCoreLib.BlazorTest.Data
            {"TestSvgDraw", "Test SVG draw"},
            {"TestGauges", "Test Gauges"},
            {"TestChart", "Test Chart.js"},
+            {"TestRadzenSched", "Test Radzen Scheduler" }
        };
    }
 }
@@ -19,6 +19,10 @@
    <None Include="compilerconfig.json" />
  </ItemGroup>

+  <ItemGroup>
+    <PackageReference Include="Radzen.Blazor" Version="5.1.8" />
+  </ItemGroup>
+
  <ItemGroup>
    <ProjectReference Include="..\EgwCoreLib.Razor\EgwCoreLib.Razor.csproj" />
  </ItemGroup>
@@ -0,0 +1,170 @@
+@page "/TestRadzenSched"
+@inject DialogService DialogService
+
+<PageTitle>Test Radzen  Scheduler</PageTitle>
+
+<div class="card">
+    <div class="card-header">
+        <h1>Test Radzen Scheduler</h1>
+    </div>
+    <div class="card-body">
+        @if (currView == "year" || currView == "planner")
+        {
+            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);">
+                <RadzenLabel Text="Schedule Start Month:" />
+                <RadzenSelectBar @bind-Value="@startMonth" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Month)).Cast<Month>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
+                <RadzenDropDown @bind-Value="@startMonth" Change="StartMonthChange" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Month)).Cast<Month>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-inline-flex rz-display-xl-none" />
+            </RadzenStack>
+        }
+        else
+        {
+            <h3>@currView</h3>
+        }
+        <div style="@schedHeight">
+            <RadzenScheduler @ref=@scheduler SlotRender=@OnSlotRender style="height: 100%;" TItem="Appointment" Data=@appointments StartProperty="Start" EndProperty="End"
+                             TextProperty="Text" SelectedIndex="2"
+                             SlotSelect=@OnSlotSelect AppointmentSelect=@OnAppointmentSelect AppointmentRender=@OnAppointmentRender
+                             AppointmentMove=@OnAppointmentMove LoadData=OnLoadData>
+                <Template Context="appointments">
+                    <div>
+                        <strong>@appointments.Text</strong>
+                    </div>
+                    <small>
+                        @appointments.Detail
+                    </small>
+                </Template>
+                <ChildContent>
+                    <RadzenDayView />
+                    <RadzenWeekView />
+                    <RadzenMonthView />
+                    <RadzenYearPlannerView StartMonth="@startMonth" />
+                    @* <RadzenYearTimelineView StartMonth="@startMonth" /> *@
+                    <RadzenYearView StartMonth="@startMonth" />
+                </ChildContent>
+            </RadzenScheduler>
+        </div>
+        <EventConsole @ref=@console />
+    </div>
+</div>
+
+@code {
+    RadzenScheduler<Appointment> scheduler;
+    EventConsole console;
+    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();
+
+    Month startMonth = Month.January;
+
+    bool showSelMonth { get; set; } = true;
+
+    async Task StartMonthChange()
+    {
+        await scheduler.Reload();
+    }
+
+
+    IList<Appointment> appointments = new List<Appointment>
+    {
+        new Appointment { Start = DateTime.Today.AddDays(-2), End = DateTime.Today.AddDays(-2), Text = "Birthday", Detail="My Birthday" },
+        new Appointment { Start = DateTime.Today.AddDays(-11), End = DateTime.Today.AddDays(-10), Text = "Day off", Detail="Rest required" },
+        new Appointment { Start = DateTime.Today.AddDays(-10), End = DateTime.Today.AddDays(-8), Text = "Work from home", Detail="WIP from remote" },
+        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(12), Text = "Online meeting", Detail="Teams" },
+        new Appointment { Start = DateTime.Today.AddHours(10), End = DateTime.Today.AddHours(13), Text = "Skype call", Detail="Google Meet?" },
+        new Appointment { Start = DateTime.Today.AddHours(14), End = DateTime.Today.AddHours(14).AddMinutes(30), Text = "Dentist appointment", Detail="Anestetics" },
+        new Appointment { Start = DateTime.Today.AddDays(1), End = DateTime.Today.AddDays(12), Text = "Vacation", Detail="Long awaited!!!" },
+    };
+
+    void OnSlotRender(SchedulerSlotRenderEventArgs args)
+    {
+        // Highlight today in month view
+        if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)
+        {
+            args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
+        }
+
+        // Highlight working hours (9-18)
+        if ((args.View.Text == "Week" || args.View.Text == "Day") && args.Start.Hour > 8 && args.Start.Hour < 19)
+        {
+            args.Attributes["style"] = "background: var(--rz-scheduler-highlight-background-color, rgba(255,220,40,.2));";
+        }
+    }
+
+    async Task OnSlotSelect(SchedulerSlotSelectEventArgs args)
+    {
+        console.Log($"SlotSelect: Start={args.Start} End={args.End}");
+
+        if (args.View.Text != "Year")
+        {
+            Appointment data = await DialogService.OpenAsync<AddAppointmentPage>("Add Appointment",
+                new Dictionary<string, object> { { "Start", args.Start }, { "End", args.End } });
+
+            if (data != null)
+            {
+                appointments.Add(data);
+                // Either call the Reload method or reassign the Data property of the Scheduler
+                await scheduler.Reload();
+            }
+        }
+    }
+
+    async Task OnAppointmentSelect(SchedulerAppointmentSelectEventArgs<Appointment> args)
+    {
+        console.Log($"AppointmentSelect: Appointment={args.Data.Text}");
+
+        var copy = new Appointment
+            {
+                Start = args.Data.Start,
+                End = args.Data.End,
+                Text = args.Data.Text,
+                Detail = args.Data.Detail
+            };
+
+        var data = await DialogService.OpenAsync<EditAppointmentPage>("Edit Appointment", new Dictionary<string, object> { { "Appointment", copy } });
+
+        if (data != null)
+        {
+            // Update the appointment
+            args.Data.Start = data.Start;
+            args.Data.End = data.End;
+            args.Data.Text = data.Text;
+            args.Data.Detail = data.Detail;
+        }
+
+        await scheduler.Reload();
+    }
+
+    void OnAppointmentRender(SchedulerAppointmentRenderEventArgs<Appointment> args)
+    {
+        // Never call StateHasChanged in AppointmentRender - would lead to infinite loop
+
+        if (args.Data.Text == "Birthday")
+        {
+            args.Attributes["style"] = "background: red";
+        }
+    }
+
+    async Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs args)
+    {
+        var draggedAppointment = appointments.FirstOrDefault(x => x == args.Appointment.Data);
+
+        if (draggedAppointment != null)
+        {
+            draggedAppointment.Start = draggedAppointment.Start + args.TimeSpan;
+
+            draggedAppointment.End = draggedAppointment.End + args.TimeSpan;
+
+            await scheduler.Reload();
+        }
+    }
+
+    async Task OnLoadData(SchedulerLoadDataEventArgs args)
+    {
+        await Task.Delay(1);
+        currView = scheduler.SelectedView.Text.ToLowerInvariant();
+
+        schedHeight = (currView == "year" || currView == "planner") ? "height: 50rem;" : "height: 40rem;";
+        // // Get the appointments for between the Start and End
+        // data = await MyAppointmentService.GetData(args.Start, args.End);
+    }
+    private string currView { get; set; } = "";
+    private string schedHeight { get; set; } = "height: 40rem;";
+}
@@ -1,4 +1,5 @@
@using Microsoft.AspNetCore.Components.Web
+@using Radzen.Blazor
@namespace EgwCoreLib.BlazorTest.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@@ -13,6 +14,7 @@
    <link rel="stylesheet" href="css/site.css" />
    <link rel="stylesheet" href="EgwCoreLib.BlazorTest.styles.css" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
+    <component type="typeof(RadzenTheme)" render-mode="ServerPrerendered" param-Theme="@("material")" />
 </head>
 <body>
    @RenderBody()
@@ -63,5 +65,6 @@
    @*Gestione ricollegamento successivo: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-6.0*@
    @* <script>Blazor.defaultReconnectionHandler._reconnectCallback = function (d) { document.location.reload(); }</script> *@

+    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
 </body>
 </html>
@@ -1,6 +1,7 @@
 using EgwCoreLib.BlazorTest;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Radzen;

 var builder = WebApplication.CreateBuilder(args);

@@ -8,6 +9,15 @@ var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();

+// aggiunto compressione
+builder.Services.AddResponseCompression(options =>
+{
+    options.EnableForHttps = true;
+});
+
+// aggiungo componenti radzen
+builder.Services.AddRadzenComponents();
+
 var app = builder.Build();

 // Configure the HTTP request pipeline.
@@ -18,11 +28,11 @@ if (!app.Environment.IsDevelopment())
    app.UseHsts();
 }

-//// disabilita risposta compressa in debug
-//if (!app.Environment.IsDevelopment())
-//{
-//    app.UseResponseCompression();
-//}
+// disabilita risposta compressa in debug
+if (!app.Environment.IsDevelopment())
+{
+    app.UseResponseCompression();
+}

 app.UseHttpsRedirection();

@@ -13,6 +13,7 @@

        <article class="content px-2">
            @Body
+            <RadzenComponents />
        </article>

        <div class="fixed-bottom bottom-row">
@@ -10,4 +10,6 @@
@using EgwCoreLib.BlazorTest.Components
@using EgwCoreLib.BlazorTest.Shared
@using EgwCoreLib.Razor
-@using EgwCoreLib.Razor.Data
+@using EgwCoreLib.Razor.Data
+@using Radzen
+@using Radzen.Blazor