Scheduler drag and drop with mobile support (#1395)

* Appointment drag and drop functionality for Scheduler component. * Added drag support for mobile devices. * Remove DragDropTouch.js. * Remove touch events. Set ondragstart as an attribute (required for mobile support). * Remove some views. --------- Co-authored-by: Atanas Korchev <akorchev@gmail.com>
radzenhq · Mar 21, 2024 · b88156a · b88156a
1 parent 311a53e
commit b88156a
Show file tree

Hide file tree

Showing 19 changed files with 245 additions and 65 deletions.
diff --git a/Radzen.Blazor/Common.cs b/Radzen.Blazor/Common.cs
@@ -3,6 +3,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.Extensions.DependencyInjection;
 using Radzen.Blazor;
+using Radzen.Blazor.Rendering;
 using System;
 using System.Collections;
 using System.Collections.Generic;
@@ -582,6 +583,22 @@ public class GoogleMapClickEventArgs
         public GoogleMapPosition Position { get; set; }
     }
 
+    /// <summary>
+    /// Supplies information about a <see cref="DropableViewBase.AppointmentMove" /> event that is being raised.
+    /// </summary>
+    public class SchedulerAppointmentMoveEventArgs
+    {
+        /// <summary>
+        /// Gets or sets the appointment data.
+        /// </summary> 
+        public AppointmentData Appointment { get; set; }
+
+        /// <summary>
+        /// Gets or sets the time span.
+        /// </summary> 
+        public TimeSpan TimeSpan { get; set; }
+    }
+
     /// <summary>
     /// Supplies information about a <see cref="RadzenMenu.Click" /> event that is being raised.
     /// </summary>

diff --git a/Radzen.Blazor/IScheduler.cs b/Radzen.Blazor/IScheduler.cs
@@ -11,6 +11,11 @@ namespace Radzen.Blazor
     /// </summary>
     public interface IScheduler
     {
+        /// <summary>
+        /// Gets or sets the appointment move event callback.
+        /// </summary>
+        /// <value>The appointment move event callback.</value>
+        EventCallback<SchedulerAppointmentMoveEventArgs> AppointmentMove { get; set; }
         /// <summary>
         /// Gets the appointments in the specified range.
         /// </summary>
@@ -97,15 +102,18 @@ public interface IScheduler
         /// </summary>
         /// <param name="reference"></param>
         /// <param name="data"></param>
-        /// <returns></returns>
         Task MouseEnterAppointment(ElementReference reference, AppointmentData data);
 
         /// <summary>
         /// Returns true if the scheduler has a mouse enter appointment listener.
         /// </summary>
-        /// <returns></returns>
         bool HasMouseEnterAppointmentDelegate();
 
+        /// <summary>
+        /// Returns true if the scheduler has an AppointmentMove listener.
+        /// </summary>
+        bool HasAppointmentMoveDelegate();
+
         /// <summary>
         /// Notifies the scheduler that the user has moved the mouse out of the specified appointment.
         /// </summary>

diff --git a/Radzen.Blazor/ISchedulerView.cs b/Radzen.Blazor/ISchedulerView.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
@@ -49,5 +50,11 @@ public interface ISchedulerView
         /// Gets the end date.
         /// </summary>
         DateTime EndDate { get; }
+        /// <summary>
+        /// Handles appointent move event.
+        /// </summary>
+        /// <param name="data"></param>
+        /// <returns></returns>
+        Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs data);
     }
 }
diff --git a/Radzen.Blazor/RadzenDayView.razor b/Radzen.Blazor/RadzenDayView.razor
@@ -8,10 +8,11 @@
     {
         var appointments = Scheduler.GetAppointmentsInRange(StartDate, EndDate).ToList();
 
-        return 
+        return
     @<CascadingValue Value=@Scheduler>
         <DayView StartDate=@StartDate EndDate=@EndDate StartTime=@StartTime EndTime=@EndTime Appointments=@appointments
-        TimeFormat=@TimeFormat MinutesPerSlot=@MinutesPerSlot />
+            TimeFormat=@TimeFormat MinutesPerSlot=@MinutesPerSlot
+            AppointmentMove=OnAppointmentMove />
     </CascadingValue>
     ;
     }

diff --git a/Radzen.Blazor/RadzenMonthView.razor b/Radzen.Blazor/RadzenMonthView.razor
@@ -3,7 +3,7 @@
 
 @inherits SchedulerViewBase
 
-@code {    
+@code {
     public override RenderFragment Render()
     {
         var appointments = Scheduler.GetAppointmentsInRange(StartDate, EndDate);
@@ -21,7 +21,7 @@
         }
 
         return @<CascadingValue Value=@Scheduler>
-            <MonthView StartDate=@StartDate EndDate=@EndDate MaxAppointmentsInSlot=@maxAppointmentsInSlot MoreText=@MoreText Appointments=@appointments />
+            <MonthView StartDate=@StartDate EndDate=@EndDate MaxAppointmentsInSlot=@maxAppointmentsInSlot MoreText=@MoreText Appointments=@appointments AppointmentMove=OnAppointmentMove />
         </CascadingValue>;
     }
 }
diff --git a/Radzen.Blazor/RadzenScheduler.razor.cs b/Radzen.Blazor/RadzenScheduler.razor.cs
@@ -235,6 +235,32 @@ public partial class RadzenScheduler<TItem> : RadzenComponent, IScheduler
         [Parameter]
         public EventCallback<SchedulerLoadDataEventArgs> LoadData { get; set; }
 
+        /// <summary>
+        /// A callback that will be invoked when an appointment is being dragged and then dropped on a different slot.
+        /// Commonly used to change it to a different timeslot.
+        /// </summary>
+        /// <example>
+        /// <code>
+        /// &lt;RadzenScheduler Data=@appointments AppointmentMove=@OnAppointmentMove&gt;
+        /// &lt;/RadzenScheduler&gt;
+        /// @code {
+        ///   async Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs moved)
+        ///   {
+        ///     var draggedAppointment = appointments.SingleOrDefault(x => x == (Appointment)moved.Appointment.Data);
+        ///     if (draggedAppointment != null)
+        ///     {
+        ///         draggedAppointment.Start = draggedAppointment.Start + moved.TimeSpan;
+        ///         draggedAppointment.End = draggedAppointment.End + moved.TimeSpan;
+        ///         await scheduler.Reload();
+        ///     }
+        ///   }
+        /// }
+        /// </code>
+        /// </example>
+        /// <value></value>
+        [Parameter]
+        public EventCallback<SchedulerAppointmentMoveEventArgs> AppointmentMove { get; set; }
+
         IList<ISchedulerView> Views { get; set; } = new List<ISchedulerView>();
 
         /// <summary>
@@ -610,5 +636,10 @@ bool IScheduler.HasMouseEnterAppointmentDelegate()
         {
             return AppointmentMouseEnter.HasDelegate;
         }
+
+        bool IScheduler.HasAppointmentMoveDelegate()
+        {
+            return AppointmentMove.HasDelegate;
+        }
     }
 }
diff --git a/Radzen.Blazor/RadzenWeekView.razor b/Radzen.Blazor/RadzenWeekView.razor
@@ -9,7 +9,7 @@
         var appointments = Scheduler.GetAppointmentsInRange(StartDate, EndDate).ToList();
 
         return @<CascadingValue Value=@Scheduler>
-                <WeekView HeaderFormat=@HeaderFormat MinutesPerSlot=@MinutesPerSlot StartDate=@StartDate EndDate=@EndDate StartTime=@StartTime EndTime=@EndTime Appointments=@appointments TimeFormat="@TimeFormat" />
+                <WeekView HeaderFormat=@HeaderFormat MinutesPerSlot=@MinutesPerSlot StartDate=@StartDate EndDate=@EndDate StartTime=@StartTime EndTime=@EndTime Appointments=@appointments TimeFormat="@TimeFormat" AppointmentMove=OnAppointmentMove />
             </CascadingValue>;
     }
 }
diff --git a/Radzen.Blazor/RadzenYearPlannerView.razor b/Radzen.Blazor/RadzenYearPlannerView.razor
@@ -3,7 +3,7 @@
 
 @inherits SchedulerViewBase
 
-@code {    
+@code {
     public override RenderFragment Render()
     {
         var appointments = Scheduler.GetAppointmentsInRange(StartDate, EndDate);
@@ -21,12 +21,13 @@
         }
 
         return @<CascadingValue Value=@Scheduler>
-                    <YearPlannerView StartDate=@StartDate 
-                        EndDate=@EndDate 
+                    <YearPlannerView StartDate=@StartDate
+                        EndDate=@EndDate
                         StartMonth=@StartMonth
-                        MaxAppointmentsInSlot=@maxAppointmentsInSlot 
-                        MoreText=@MoreText 
-                        Appointments=@appointments />
+                        MaxAppointmentsInSlot=@maxAppointmentsInSlot
+                        MoreText=@MoreText
+                        Appointments=@appointments
+                        AppointmentMove=OnAppointmentMove />
                 </CascadingValue>;
     }
 }
diff --git a/Radzen.Blazor/RadzenYearTimelineView.razor b/Radzen.Blazor/RadzenYearTimelineView.razor
@@ -26,7 +26,8 @@
                         StartMonth=@StartMonth
                         MaxAppointmentsInSlot=@maxAppointmentsInSlot
                         MoreText=@MoreText
-                        Appointments=@appointments />
+                        Appointments=@appointments
+                        AppointmentMove=OnAppointmentMove />
                 </CascadingValue>;
     }
 }
diff --git a/Radzen.Blazor/Rendering/Appointment.razor b/Radzen.Blazor/Rendering/Appointment.razor
@@ -1,19 +1,23 @@
 @using Radzen.Blazor
 @using Radzen.Blazor.Rendering
 
-<div @ref=@element class="@($"{"rz-event"} {CssClass}".Trim())" style=@Style @onclick=@OnClick @onmouseenter=@OnMouseEnter @onmouseleave=@OnMouseLeave>
-    <div class="rz-event-content" title=@Title @attributes=@Attributes>
-        @if (ShowAppointmentContent)
-        {
-            @Scheduler.RenderAppointment(Data)
-        }
+    <div @ref=@element class="@($"{"rz-event"} {CssClass}".Trim())" draggable=@DraggableAttribute style=@Style @onclick=@OnClick @onmouseenter=@OnMouseEnter @onmouseleave=@OnMouseLeave @ondrag=@OnDragStart ondragstart=@OnDragStartAttribute>
+        <div class="rz-event-content" title=@Title @attributes=@Attributes>
+            @if (ShowAppointmentContent)
+            {
+                @Scheduler.RenderAppointment(Data)
+            }
+        </div>
     </div>
-</div>
 @code {
     private ElementReference element;
 
     private string Title => Scheduler.HasMouseEnterAppointmentDelegate() ? null : Data?.Text;
 
+    private string DraggableAttribute => Scheduler?.HasAppointmentMoveDelegate() == true ? "true" : null;
+
+    private string OnDragStartAttribute => Scheduler?.HasAppointmentMoveDelegate() == true ? "event.dataTransfer.setData('', event.target.id)" : null;
+
     [Parameter]
     public string CssClass { get; set; }
 
@@ -32,6 +36,9 @@
     [Parameter]
     public EventCallback<AppointmentData> Click { get; set; }
 
+    [Parameter]
+    public EventCallback<AppointmentData> DragStart { get; set; }
+
     IDictionary<string, object> Attributes { get; set; }
 
     [Parameter]
@@ -88,4 +95,9 @@
     {
         await Scheduler.MouseLeaveAppointment(element, Data);
     }
+
+    public async Task OnDragStart(DragEventArgs args)
+    {
+        await DragStart.InvokeAsync(Data);
+    }
 }
diff --git a/Radzen.Blazor/Rendering/DaySlotEvents.razor b/Radzen.Blazor/Rendering/DaySlotEvents.razor
@@ -33,12 +33,14 @@
         @if (item.Start >= start && item.Start <= end)
         {
             <Appointment Data=@item Top=@top Left=@left Width=@width Height=@height Click=@OnAppointmentSelect
-                CssClass="@(CurrentDate.Date == date.Date && object.Equals(Appointments.Where(i => i.Start.Date == CurrentDate.Date).OrderBy(i => i.Start).ThenByDescending(i => i.End).ElementAtOrDefault(CurrentAppointment),item) ? "rz-state-focused" : "")" />
+                CssClass="@(CurrentDate.Date == date.Date && object.Equals(Appointments.Where(i => i.Start.Date == CurrentDate.Date).OrderBy(i => i.Start).ThenByDescending(i => i.End).ElementAtOrDefault(CurrentAppointment),item) ? "rz-state-focused" : "")" 
+                DragStart=@OnAppointmentDragStart />
         } 
         else if (date == StartDate)
         {
             <Appointment Data=@item Top=@top Left=@left Width=@width Height=@height Click=@OnAppointmentSelect
-                CssClass="@(CurrentDate == date && CurrentAppointment != - 1 && object.Equals(appointments.ElementAtOrDefault(CurrentAppointment),item) ? "rz-state-focused" : "")" />
+                CssClass="@(CurrentDate == date && CurrentAppointment != - 1 && object.Equals(appointments.ElementAtOrDefault(CurrentAppointment),item) ? "rz-state-focused" : "")" 
+                DragStart=@OnAppointmentDragStart />
         }
     }
 }
@@ -63,6 +65,9 @@
     [Parameter]
     public int MinutesPerSlot { get; set; }
 
+    [Parameter]
+    public EventCallback<AppointmentData> AppointmentDragStart { get; set; }
+
     [Parameter]
     public IList<AppointmentData> Appointments { get; set; }
 
@@ -136,4 +141,9 @@
         return groups;
     }
 
+    public async Task OnAppointmentDragStart(AppointmentData Data)
+    {
+        await AppointmentDragStart.InvokeAsync(Data);
+    }
+
 }
diff --git a/Radzen.Blazor/Rendering/DayView.razor b/Radzen.Blazor/Rendering/DayView.razor
@@ -1,4 +1,5 @@
 @using Radzen.Blazor
+@inherits DropableViewBase
 
 <div class="rz-view rz-day-view">
     <div class="rz-view-header">
@@ -11,11 +12,11 @@
          @onfocus=@(args => {if(CurrentDate == default(DateTime)) { CurrentDate = StartDate; }})>
         <Hours Start=@StartTime End=@EndTime TimeFormat=@TimeFormat MinutesPerSlot=@MinutesPerSlot />
         <div class="rz-slots">
-            <DaySlotEvents MinutesPerSlot=@MinutesPerSlot StartDate=@StartDate EndDate=@EndDate Appointments=@Appointments CurrentDate="@CurrentDate" CurrentAppointment="@currentAppointment"/>
+            <DaySlotEvents MinutesPerSlot=@MinutesPerSlot StartDate=@StartDate EndDate=@EndDate Appointments=@Appointments CurrentDate="@CurrentDate" CurrentAppointment="@currentAppointment" AppointmentDragStart=@OnAppointmentDragStart />
             @for (var date = StartDate; date < EndDate; date = date.AddMinutes(MinutesPerSlot))
             {
                 var slotDate = date;
-                <div @onclick=@(args => OnSlotClick(slotDate)) @attributes=@Attributes(date)></div>
+                    <div @onclick=@(args => OnSlotClick(slotDate)) @attributes=@Attributes(date) ondragover="event.preventDefault();" @ondrop=@(args => @OnDrop(slotDate))></div>
             }
         </div>
     </div>
@@ -67,6 +68,7 @@
     {
         var attributes = Scheduler.GetSlotAttributes(date, date.AddMinutes(MinutesPerSlot));
         attributes["class"] = ClassList.Create("rz-slot").Add("rz-slot-minor", (date.Minute / MinutesPerSlot) % 2 == 1).Add(attributes).ToString();
+        attributes["dropzone"] = "move";
         return attributes;
     }
 
@@ -119,4 +121,4 @@
             preventKeyPress = false;
         }
     }
-} 
+}
diff --git a/Radzen.Blazor/Rendering/DropableViewBase.cs b/Radzen.Blazor/Rendering/DropableViewBase.cs
@@ -0,0 +1,54 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor.Rendering
+{
+    /// <summary>
+    /// A base class for <see cref="MonthView" /> <see cref="DayView" /> <see cref="WeekView" /> <see cref="YearPlannerView" /> <see cref="YearTimelineView" /> views.
+    /// </summary>
+    public abstract class DropableViewBase : ComponentBase
+    {
+        private bool dragStarted = false;
+        private AppointmentData draggedAppointment;
+        /// <summary>
+        /// Gets or sets the appointment move event callback.
+        /// </summary>
+        /// <value>The appointment move event callback.</value>
+        [Parameter]
+        public EventCallback<SchedulerAppointmentMoveEventArgs> AppointmentMove { get; set; }
+
+        /// <summary>
+        /// Handles on slot drop.
+        /// </summary>
+        /// <param name="slotDate"></param>
+        /// <returns>Task</returns>
+        public async Task OnDrop(DateTime slotDate)
+        {
+            if (draggedAppointment != null)
+            {
+                TimeSpan timespan = slotDate - draggedAppointment.Start;
+
+                await AppointmentMove.InvokeAsync(new SchedulerAppointmentMoveEventArgs { Appointment = draggedAppointment, TimeSpan = timespan });
+
+                draggedAppointment = null;
+            }
+
+            dragStarted = false;
+        }
+
+        /// <summary>
+        /// Handles Appointment drag started.
+        /// </summary>
+        /// <param name="data"></param>
+        /// <returns></returns>
+        public void OnAppointmentDragStart(AppointmentData data)
+        {
+            if (!dragStarted)
+            {
+                dragStarted = true;
+                draggedAppointment = data;
+            }
+        }
+    }
+}