Skip to content

Commit

Permalink
Merge pull request #188 from danheron/feature/multiday-appointment
Browse files Browse the repository at this point in the history 
Rewrote the Month View to support Multiday items
  • Loading branch information
@danheron
danheron authored Dec 3, 2024
2 parents aa064ce + 4a5537e commit ea6ab7b
Show file tree
Hide file tree
Showing 24 changed files with 767 additions and 380 deletions.
74 changes: 74 additions & 0 deletions Heron.MudCalendar.UnitTests.Viewer/TestComponents/Calendar/CalendarMultiDayMonthTest.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<MudPopoverProvider/>

<MudCalendar Items="_events" Height="1000" EnableDragItems="true" EnableResizeItems="true" CellClicked="TestClick"/>
<MudTextField @bind-Value="_value"/>
<MudTextField @bind-Value="_timeValue"/>

@code {
public static string __description__ = "Calendar Multi-Day Month Tests";

private string _value = string.Empty;
private string _timeValue = string.Empty;

private List<CalendarItem> _events = new()
{
new CalendarItem
{
Start = new DateTime(2024, 11, 12, 9, 0, 0),
End = new DateTime(2024, 11, 12, 10, 0, 0),
Text = "Event 1"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 12, 13, 0, 0),
End = new DateTime(2024, 11, 14, 13, 0, 0),
Text = "Event 2"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 12, 12, 0, 0),
End = new DateTime(2024, 11, 13, 12, 0, 0),
Text = "Event 3"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 13, 12, 30, 0),
End = new DateTime(2024, 11, 14, 12, 0, 0),
Text = "Event 4"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 14, 9, 0, 0),
Text = "Event 5"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 16, 9, 0, 0),
End = new DateTime(2024, 11, 20, 12, 0, 0),
Text = "Event 6"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 17, 9, 0, 0),
End = new DateTime(2024, 11, 19, 12, 0, 0),
Text = "Event 7"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 18, 9, 0, 0),
Text = "Event 8"
},
new CalendarItem
{
Start = new DateTime(2024, 11, 18, 11, 0, 0),
Text = "Event 9"
}
};

private void TestClick(DateTime dateTime)
{
_value = dateTime.Day.ToString();
_timeValue = dateTime.ToShortTimeString();
}

}
2 changes: 1 addition & 1 deletion Heron.MudCalendar.UnitTests.Viewer/TestComponents/Calendar/CalendarTest.razor
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<MudPopoverProvider></MudPopoverProvider>

<MudCalendar Items="_events" Height="500" ShowTodayButton="true" ShowWorkWeek="true" />
<MudCalendar Items="_events" Height="600" ShowTodayButton="true" ShowWorkWeek="true" />

@code {
public static string __description__ = "Basic Calendar Tests";
Expand Down
70 changes: 35 additions & 35 deletions Heron.MudCalendar.UnitTests/Components/CalendarTests.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using System;
using AngleSharp.Dom;
using FluentAssertions;
using Heron.MudCalendar.UnitTests.Viewer.TestComponents.Calendar;
using MudBlazor;
Expand Down Expand Up @@ -140,13 +141,13 @@ public void CellClick()

// Month View
comp.SetParam(x => x.CurrentDay, new DateTime(2023, 1, 1));
comp.Find("div.mud-cal-month-cell.mud-cal-month-link").Click();
comp.Find("div.mud-drop-zone a").Click();
textField.Instance.Text.Should().Be("26");
timeField.Instance.Text.Should().Be("00:00");

// Month View set with time
comp.SetParam(x => x.CurrentDay, new DateTime(2023, 1, 1, 9, 30, 0));
comp.Find("div.mud-cal-month-cell.mud-cal-month-link").Click();
comp.Find("div.mud-drop-zone a").Click();
textField.Instance.Text.Should().Be("26");
timeField.Instance.Text.Should().Be("00:00");

Expand Down Expand Up @@ -228,10 +229,9 @@ public void WeekStartSunday()
var cut = Context.RenderComponent<CalendarTest>();
var comp = cut.FindComponent<MudCalendar>();

// Gets the highlighted day
var today = comp.Find(
"div.mud-cal-month-cell[style='border:1px solid var(--mud-palette-primary);'] div.mud-cal-month-cell-title");
today.TextContent.Should().Be(DateTime.Today.Day.ToString());
// Check that the first day is a Sunday
var firstDayDate = comp.FindAll("div.mud-drop-zone")[0].Attributes["identifier"]!.TextContent;
DateTime.Parse(firstDayDate).DayOfWeek.Should().Be(DayOfWeek.Sunday);
}

[Test]
Expand All @@ -255,10 +255,10 @@ public void EventOrder()
var cut = Context.RenderComponent<CalendarSameDayEventsTest>();
var comp = cut.FindComponent<MudCalendar>();

comp.Find("div.mud-cal-month-dropzone div.mud-cal-cell-template").TextContent.Should().Be("Event 1");
comp.Find("div.mud-cal-drop-item div.mud-cal-cell-template").TextContent.Should().Be("Event 1");

cut.Find("button.add-item").Click();
comp.FindAll("div.mud-cal-month-dropzone div.mud-cal-cell-template")[2].TextContent.Should().Be("Event 2.5");
comp.FindAll("div.mud-cal-drop-item div.mud-cal-cell-template")[2].TextContent.Should().Be("Event 2.5");
}

[Test]
Expand Down Expand Up @@ -323,47 +323,30 @@ public void OverlappingEvents()
var comp = cut.FindComponent<MudCalendar>();

comp.SetParam(x => x.View, CalendarView.Day);
var event1 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[0];
var event1 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[0];
event1.Attributes["style"].Should().NotBeNull();
event1.Attributes["style"]?.Value.Should().Contain("left:0");
event1.Attributes["style"]?.Value.Should().Contain("width:33");

var event2 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[1];
var event2 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[1];
event2.Attributes["style"].Should().NotBeNull();
event2.Attributes["style"]?.Value.Should().Contain("left:33");
event2.Attributes["style"]?.Value.Should().Contain("width:33");

// Make sure no error thrown on the event ending at midnight when go to next day
comp.FindAll("button.mud-icon-button")[1].Click();

var event16 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[0];
var event16 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[0];
event16.Attributes["style"].Should().NotBeNull();
event16.Attributes["style"]?.Value.Should().Contain("left:0");
event16.Attributes["style"]?.Value.Should().Contain("width:100");

var event17 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[1];
var event17 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[1];
event17.Attributes["style"].Should().NotBeNull();
event17.Attributes["style"]?.Value.Should().Contain("left:0");
event17.Attributes["style"]?.Value.Should().Contain("width:100");
}

[Test]
public void MultiDayMonthView()
{
var cut = Context.RenderComponent<CalendarMultiDayEventTest>();
var comp = cut.FindComponent<MudCalendar>();

comp.SetParam(x => x.CurrentDay, new DateTime(2023, 2, 1));
comp.FindAll("div.mud-cal-month-cell > div.mud-drop-zone > div.mud-cal-month-cell-title")[2].TextContent.Should().Be("1");
comp.FindAll("div.mud-cal-month-cell > div.mud-drop-zone")[2].Children.Length.Should().Be(2);
comp.FindAll("div.mud-cal-month-cell > div.mud-drop-zone")[3].Children.Length.Should().Be(2);

comp.SetParam(x => x.EnableDragItems, true);
comp.FindAll("div.mud-cal-month-cell > div.mud-drop-zone > div.mud-cal-month-cell-title")[2].TextContent.Should().Be("1");
comp.FindAll("div.mud-cal-month-cell > div.mud-drop-zone")[2].Children.Length.Should().Be(2);
comp.FindAll("div.mud-cal-month-cell > div.mud-drop-zone")[3].Children.Length.Should().Be(2);
}

[Test]
public void MultiDayWorkWeekView()
{
Expand Down Expand Up @@ -422,6 +405,23 @@ public void MultiDayDayView()
comp.FindAll("div.mud-cal-week-cell-holder div.mud-cal-cell-template").Count.Should().Be(1);
}

[Test]
public void MultiDayMonthView()
{
var cut = Context.RenderComponent<CalendarMultiDayMonthTest>();
var comp = cut.FindComponent<MudCalendar>();

comp.SetParam(x => x.CurrentDay, new DateTime(2024, 11, 1));
// Should be event 3
comp.FindAll("div.mud-cal-drop-item")[0].Attributes["style"]!.TextContent.Contains("top:36px").Should().BeTrue();
comp.FindAll("div.mud-cal-drop-item")[0].Attributes["style"]!.TextContent.Contains("left:14.2").Should().BeTrue();
comp.FindAll("div.mud-cal-drop-item")[0].Attributes["style"]!.TextContent.Contains("width:28.5").Should().BeTrue();

// Should be event 7
comp.FindAll("div.mud-cal-drop-item")[8].Attributes["style"]!.TextContent.Contains("left:0").Should().BeTrue();
comp.FindAll("div.mud-cal-drop-item")[8].Attributes["style"]!.TextContent.Contains("width:28.5").Should().BeTrue();
}

[Test]
public void DateChangedEvent()
{
Expand Down Expand Up @@ -477,7 +477,7 @@ public void CurrentDayTest()
var comp = cut.FindComponent<MudCalendar>();

// Check that current month is Feb 2024
comp.FindAll(".mud-cal-month-dropzone")[0].Attributes["identifier"]!.TextContent.Should().Be("29/01/2024");
comp.FindAll(".mud-drop-zone")[0].Attributes["identifier"]!.TextContent.Should().Be("29/01/2024");
}

[Test]
Expand All @@ -487,23 +487,23 @@ public void DayItemMinHeightTest()
var comp = cut.FindComponent<MudCalendar>();

comp.SetParam(x => x.View, CalendarView.Day);
var event1 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[0];
var event1 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[0];
event1.Attributes["style"].Should().NotBeNull();
event1.Attributes["style"]?.Value.Should().Contain("height:90");

var event3 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[2];
var event3 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[2];
event3.Attributes["style"].Should().NotBeNull();
event3.Attributes["style"]?.Value.Should().Contain("width:50");

var event4 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[3];
var event4 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[3];
event4.Attributes["style"].Should().NotBeNull();
event4.Attributes["style"]?.Value.Should().Contain("width:50");

var event5 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[4];
var event5 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[4];
event5.Attributes["style"].Should().NotBeNull();
event5.Attributes["style"]?.Value.Should().Contain("height:50");

var event6 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-week-drop-item")[5];
var event6 = comp.FindAll("div.mud-cal-week-cell-holder > div.mud-cal-drop-item")[5];
event6.Attributes["style"].Should().NotBeNull();
event6.Attributes["style"]?.Value.Should().Contain("height:50");
}
Expand Down
9 changes: 4 additions & 5 deletions Heron.MudCalendar/Base/DayWeekViewBase.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,13 @@
<div @ref="_scrollDiv" class="mud-cal-week-scroll" style="width: 100%;">
<div class="d-block relative">
@RenderTimes
@* @RenderDays *@
<MudDropContainer
T="CalendarItem"
Items="Calendar.Items"
ItemsSelector="@((item, dropzone) => item.Id == dropzone)"
ItemDisabled="@((_) => !Calendar.EnableDragItems)"
ItemDisabled="@(_ => !Calendar.EnableDragItems)"
ItemDropped="ItemDropped"
CanDropClass="mud-cal-week-drop-ok">
CanDropClass="mud-cal-drop-ok">
<ChildContent>
@RenderCells
</ChildContent>
Expand Down Expand Up @@ -138,10 +137,10 @@
{
if (position.Item.Start.Date == cell.Date.Date)
{
<WeekDropZone Item="@position.Item" Style="@EventStyle(position)">
<WeekDropZone Position="position" Style="@EventStyle(position)" @key="position.Item.Id">
@if (Calendar.EnableResizeItems && !position.Item.IsMultiDay)
{
<Resizer IntervalSize="Calendar.DayCellHeight" HeightChanged="@(newHeight => ItemHeightChanged(position.Item, newHeight))"/>
<Resizer ContainerClass="mud-cal-week-grid" CellCount="CellsInDay" ResizeX="false" SizeChanged="@(newHeight => ItemHeightChanged(position.Item, newHeight))"/>
}
</WeekDropZone>
}
Expand Down
Loading

0 comments on commit ea6ab7b

Please sign in to comment.