Feature/JA-121 Calendar Component

TutorLizard.Blazor/Components/Calendar.razor

@@ -0,0 +1,111 @@
+@using System.Text.Json
+@using TutorLizard.Shared.Models.DTOs
+@inject NavigationManager navigation
+
+<div class="calendar-container my-2">
+ <div class="calendar-header">
+ <div class="previous">
+ <button class="btn btn-success" @onclick="() => Navigate(controller, action)">
+ <i class="bi bi-arrow-left"></i>
+ </button>
+ </div>
+ <h3>@Month/@Year</h3>
+ <div class="next">
+ <button class="btn btn-success" @onclick="() => Navigate(controller, action)">
+ <i class="bi bi-arrow-right"></i>
+ </button>
+ </div>
+ </div>
+ <div class="calendar-main">
+ <div class="seven-column-section days-header">
+ <div class="d-none d-xxl-block">Poniedziałek</div>
+ <div class="d-none d-xxl-block">Wtorek</div>
+ <div class="d-none d-xxl-block">Środa</div>
+ <div class="d-none d-xxl-block">Czwartek</div>
+ <div class="d-none d-xxl-block">Piątek</div>
+ <div class="d-none d-xxl-block">Sobota</div>
+ <div class="d-none d-xxl-block">Niedziela</div>
+
+ <div class="d-xxl-none">Pn</div>
+ <div class="d-xxl-none">Wt</div>
+ <div class="d-xxl-none">Śr</div>
+ <div class="d-xxl-none">Czw</div>
+ <div class="d-xxl-none">Pt</div>
+ <div class="d-xxl-none">Sb</div>
+ <div class="d-xxl-none">Nd</div>
+ </div>
+ <div class="seven-column-section calendar-grid">
+ <div class="@(DayOfWeekOnFirst()) @(IsSelected(1) ? "selected" : "")" @onclick="() => HandleDaySelected(1)">
+ 1
+ <CalendarItemsCountIndicator AsTutor="GetScheduleItemCountsAsTutor(1)"
+ AsStudent="GetScheduleItemCountsAsStudent(1)"/>
+ </div>
+ @for (int i = 2; i <= DateTime.DaysInMonth(Year, Month); i++)
+ {
+ int day = i;
+ <div class="@(IsSelected(day) ? "selected" : "")" @onclick="() => HandleDaySelected(day)">
+ @day
+ <CalendarItemsCountIndicator AsTutor="GetScheduleItemCountsAsTutor(day)"
+ AsStudent="GetScheduleItemCountsAsStudent(day)" />
+ </div>
+ }
+ </div>
+ </div>
+</div>
+
+@code {
+ [Parameter, EditorRequired]
+ public int Year { get; set; }
+ [Parameter, EditorRequired]
+ public int Month { get; set; }
+ [Parameter, EditorRequired]
+ public List<IScheduleItemSummaryDto> Schedule { get; set; } = [];
+ [Parameter, EditorRequired]
+ public Action<int, int, int>? OnDaySelected { get; set; }
+ [Parameter, EditorRequired]
+ public int DaySelected { get; set; }
+
+ private string controller = "Browse";
+ private string action = "Ads";
+
+ private string DayOfWeekOnFirst()
+ {
+ DateTime first = new DateTime(Year, Month, 1);
+ return first.DayOfWeek.ToString().ToLower();
+ }
+
+ private void Navigate(string controller, string action)
+ {
+ navigation.NavigateTo($"{controller}/{action}");
+ }
+
+ private void HandleDaySelected(int day)
+ {
+ OnDaySelected?.Invoke(Year, Month, day);
+ }
+
+ private int GetScheduleItemCountsAsTutor(int day)
+ {
+ DateTime date = new DateTime(Year, Month, day);
+ return Schedule
+ .Where(si =>
+ si.DateTime.Date == date.Date &&
+ si is TutorsScheduleItemSummaryDto)
+ .Count();
+ }
+
+ private int GetScheduleItemCountsAsStudent(int day)
+ {
+ DateTime date = new DateTime(Year, Month, day);
+ return Schedule
+ .Where(si =>
+ si.DateTime.Date == date.Date &&
+ si is StudentsScheduleItemSummaryDto)
+ .Count();
+ }
+
+ private bool IsSelected(int day)
+ {
+ return day == DaySelected;
+ }
+}

TutorLizard.Blazor/Components/Calendar.razor.css

@@ -0,0 +1,115 @@
+.calendar-container {
+ display: flex;
+ flex-direction: column;
+ background-color: darkgreen;
+ border-radius: 1rem;
+ padding: 1rem;
+}
+
+ .calendar-container h3 {
+ text-align: center;
+ color: white;
+ margin: 0;
+ }
+
+.calendar-header {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ padding-bottom: 1rem;
+}
+
+.previous {
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: left;
+ padding-left: 1rem;
+ font-size: 2rem;
+}
+
+.next {
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ padding-right: 1rem;
+ font-size: 2rem;
+}
+
+.calendar-main {
+ border-radius: .5rem;
+ overflow: hidden;
+ background-color: whitesmoke;
+}
+
+.seven-column-section {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ column-gap: .5rem;
+ row-gap: .5rem;
+}
+
+.days-header {
+ padding-bottom: .5rem;
+}
+
+ .days-header div {
+ padding: 1rem 0;
+ background-color: white;
+ text-align: center;
+ font-weight: bold;
+ }
+
+.calendar-grid {
+}
+
+ .calendar-grid div {
+ background-color: white;
+ font-size: 2rem;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position:relative;
+ height: 7rem;
+ }
+
+ .calendar-grid div:hover {
+ background-color: darkgreen;
+ transition: .35s;
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ }
+
+.selected {
+ font-weight: bold;
+}
+
+.monday {
+ grid-column: 1;
+}
+
+.tuesday {
+ grid-column: 2;
+}
+
+.wednesday {
+ grid-column: 3;
+}
+
+.thursday {
+ grid-column: 4;
+}
+
+.friday {
+ grid-column: 5;
+}
+
+.saturday {
+ grid-column: 6;
+}
+
+.sunday {
+ grid-column: 7;
+}

TutorLizard.Blazor/Components/CalendarItemsCountIndicator.razor

@@ -0,0 +1,17 @@
+<div class="indicator-container">
+ @if (AsTutor > 0)
+ {
+ <span class="badge bg-success mx-md-1">N: @AsTutor</span>
+ }
+ @if (AsStudent > 0)
+ {
+ <span class="badge bg-primary mx-md-1">U: @AsStudent</span>
+ }
+</div>
+
+@code {
+ [Parameter, EditorRequired]
+ public int AsTutor { get; set; }
+ [Parameter, EditorRequired]
+ public int AsStudent { get; set; }
+}

TutorLizard.Blazor/Components/CalendarItemsCountIndicator.razor.css

@@ -0,0 +1,6 @@
+.indicator-container {
+ position: absolute;
+ bottom: 0;
+ font-size: .75rem;
+ padding-bottom: .5rem;
+}

TutorLizard.Blazor/Components/Schedule.razor

@@ -0,0 +1,76 @@
+@using System.Text.Json
+@using TutorLizard.Shared.Models.DTOs
+
+<div class="row">
+ <div class="col-lg-8">
+ <Calendar Year="@Year"
+ Month="@Month"
+ Schedule="@schedule"
+ OnDaySelected="@DisplayScheduleForDay"
+ DaySelected="@selectedDay.Day"/>
+ </div>
+ <div class="col-lg-4">
+ <ScheduleForDay Schedule="@scheduleForDay"
+ Day="@selectedDay.Day"
+ Month="@selectedDay.Month"
+ Year="@selectedDay.Year" />
+ </div>
+</div>
+
+@code {
+ [Parameter, EditorRequired]
+ public int Year { get; set; }
+ [Parameter, EditorRequired]
+ public int Month { get; set; }
+ [Parameter, EditorRequired]
+ public string? TutorsSchedule { get; set; }
+ [Parameter, EditorRequired]
+ public string? StudentsSchedule { get; set; }
+
+ private List<IScheduleItemSummaryDto> schedule = [];
+ private List<IScheduleItemSummaryDto> scheduleForDay = [];
+
+ DateTime selectedDay = DateTime.Now;
+
+ protected override void OnParametersSet()
+ {
+ schedule.Clear();
+ try
+ {
+ if (String.IsNullOrWhiteSpace(StudentsSchedule) == false)
+ {
+ var studentsSchedule = JsonSerializer
+ .Deserialize<IEnumerable<StudentsScheduleItemSummaryDto>>(StudentsSchedule);
+ schedule.AddRange(studentsSchedule);
+ }
+ if (String.IsNullOrWhiteSpace(TutorsSchedule) == false)
+ {
+ var tutorsSchedule = JsonSerializer
+ .Deserialize<IEnumerable<TutorsScheduleItemSummaryDto>>(TutorsSchedule);
+ schedule.AddRange(tutorsSchedule);
+ }
+ }
+ catch
+ { }
+
+ if (Year == DateTime.Now.Year && Month == DateTime.Now.Month)
+ {
+ DisplayScheduleForDay(Year, Month, DateTime.Now.Day);
+ }
+ else
+ {
+ DisplayScheduleForDay(Year, Month, 1);
+ }
+
+ base.OnParametersSet();
+ }
+
+ private void DisplayScheduleForDay(int year, int month, int day)
+ {
+ selectedDay = new DateTime(year, month, day);
+ scheduleForDay = schedule
+ .Where(si => si.DateTime.Date == selectedDay.Date)
+ .ToList();
+ StateHasChanged();
+ }
+}

TutorLizard.Blazor/Components/Schedule.razor.css

@@ -0,0 +1 @@
+

TutorLizard.Blazor/Components/ScheduleForDay.razor

@@ -0,0 +1,37 @@
+@using TutorLizard.Shared.Models.DTOs
+<div class="schedule-container my-2">
+ <h3>@($"{Day}.{Month}.{Year}")</h3>
+ <div class="schedule-list">
+ @if (Schedule.Count == 0)
+ {
+ <div class="text-light text-center">Brak terminów.</div>
+ }
+ @foreach (var item in Schedule)
+ {
+ if (item is StudentsScheduleItemSummaryDto studentsScheduleItem)
+ {
+ <StudentsScheduleItem ScheduleItem="@studentsScheduleItem" />
+ }
+ if (item is TutorsScheduleItemSummaryDto tutorsScheduleItem)
+ {
+ <TutorsScheduleItem ScheduleItem="@tutorsScheduleItem" />
+ }
+ }
+ </div>
+</div>
+
+@code {
+ [Parameter, EditorRequired]
+ public int Day { get; set; }
+ [Parameter, EditorRequired]
+ public int Month { get; set; }
+ [Parameter, EditorRequired]
+ public int Year { get; set; }
+ [Parameter, EditorRequired]
+ public List<IScheduleItemSummaryDto> Schedule { get; set; } = [];
+
+ protected override void OnParametersSet()
+ {
+ base.OnParametersSet();
+ }
+}

TutorLizard.Blazor/Components/ScheduleForDay.razor.css

@@ -0,0 +1,18 @@
+.schedule-container {
+ background-color: slateblue;
+ padding: 1rem;
+ border-radius: 1rem;
+}
+
+ .schedule-container h3 {
+ color:white;
+ margin: 0;
+ text-align: center;
+ padding-bottom: 1rem;
+}
+
+.schedule-list {
+ border-radius: .5rem;
+ display: flex;
+ flex-direction: column;
+}