challenge accepted

src/VL.Challenge.Blazor.Client/Models/Tasks/AgendaModel.cs

@@ -4,6 +4,14 @@ namespace VL.Challenge.Common.Tasks;
 
 public class AgendaModel : List<List<VLTask>>
 {
+    public AgendaModel(List<VLTask> tasks)
+    {
+        this.Insert(0, tasks);
+    }
+    public AgendaModel()
+    {
+    }
+
     public void Remove(int taskId)
     {
         foreach (var group in this)

src/VL.Challenge.Blazor.Client/Pages/Index.razor

@@ -3,9 +3,12 @@
 @using VL.Challenge.Blazor.Client.Components.Users;
 @using VL.Challenge.Blazor.Client.Services;
 
+
 @inject IUserContext _userContext;
 @inject IUserApi _userApi;
 
+
+
 <div class="container">
     @if (_userContext.LoggingId == null)
     {

src/VL.Challenge.Blazor.Client/Pages/Tasks/AgendaPage.razor

@@ -3,6 +3,7 @@
 @using VL.Challenge.Blazor.Client.Components
 @using VL.Challenge.Blazor.Client.Services;
 @using VL.Challenge.Common.Tasks;
+@using VL.Challenge.Domain.Entities;
 
 @inject IUserApi _userApi;
 @inject ITaskApi _taskApi;
@@ -12,6 +13,9 @@
 
 <div class="container">
     <div class="row justify-content-between">
+
+        <WeekCalendar></WeekCalendar>
+
         <div class="col-1">
             <h3>Tasks</h3>
         </div>
@@ -23,48 +27,26 @@
     {
         <div class="row">
             <div class="accordion">
-                @foreach (var group in _agenda)
+                       @foreach (var group in _agenda)
                 {
-                    <div class="accordion-item">
-                        <Collapsable IsCollapsed="false">
-                            <Header>Overlaps</Header>
-                            <Content>
-                                <table class="table">
-                                    <thead>
-                                        <tr>
-                                            <th>Subject</th>
-                                            <th>Description</th>
-                                            <th>StartTime</th>
-                                            <th>EndTime</th>
-                                            <th>Update</th>
-                                            <th>Delete</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @foreach (var task in group)
-                                        {
-                                            <tr>
-                                                <th>@task.Subject</th>
-                                                <th>@task.Description</th>
-                                                <th>@task.StartTime</th>
-                                                <th>@task.EndTime</th>
-                                                <th>
-                                                    <a class="btn btn-primary" href="@($"/tasks/update/{task.Id}")">
-                                                        Update
-                                                    </a>
-                                                </th>
-                                                <th>
-                                                    <button class="btn btn-outline-danger" @onclick="() => Delete(task.Id)">
-                                                        Delete
-                                                    </button>
-                                                </th>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
-                            </Content>
-                        </Collapsable>
-                    </div>
+                    <MudDataGrid T="VLTask" ReadOnly="false" Items="group" Filterable="false" SortMode="@SortMode.None"
+                             Groupable="false" EditMode="DataGridEditMode.Form" Bordered="true"
+                             Dense="true" EditTrigger="DataGridEditTrigger.Manual">
+                        <Columns>
+                            <PropertyColumn Property="x => x.Id" />
+                            <PropertyColumn Property="x => x.Description" />
+                            <PropertyColumn Property="x => x.Date"  />
+                            <PropertyColumn Property="x => x.StartTime"  />
+                            <PropertyColumn Property="x => x.EndTime" />
+                            <PropertyColumn Property="x => x.Subject"  />
+                            <TemplateColumn Hidden="false" CellClass="d-flex justify-end">
+                                <CellTemplate>
+                                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
+                                </CellTemplate>
+                            </TemplateColumn>
+                        </Columns>
+                    </MudDataGrid>
+
                 }
             </div>
         </div>
@@ -82,7 +64,8 @@
             _navigationManager.NavigateTo("/");
             return;
         }
-        var agenda = await _userApi.GetAgenda(_userContext.LoggingId.Value);
+        //var agenda = await _userApi.GetAgenda(_userContext.LoggingId.Value);
+        var agenda = await _userApi.GetData();
         if (agenda == null)
         {
             _toaster.Add("Oops", $"Agenda for user with id '{_userContext.LoggingId.Value}' not found", UiColor.Danger);
@@ -92,6 +75,21 @@
 
         _agenda = agenda;
     }
+    private List<string> _events = new();
+    void StartedEditingItem(VLTask item)
+    {
+        _events.Insert(0, $"Event = StartedEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
+    }
+
+    void CanceledEditingItem(VLTask item)
+    {
+        _events.Insert(0, $"Event = CanceledEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
+    }
+
+    void CommittedItemChanges(VLTask item)
+    {
+        _events.Insert(0, $"Event = CommittedItemChanges, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
+    }
 
     private async Task Delete(int id)
     {

src/VL.Challenge.Blazor.Client/Program.cs

@@ -3,6 +3,7 @@
 using VL.Challenge.Blazor.Client;
 using VL.Challenge.Blazor.Client.Services;
 using Options = Microsoft.Extensions.Options.Options;
+using MudBlazor.Services;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
@@ -17,5 +18,6 @@
 builder.Services.AddSingleton<Toaster>();
 builder.Services.AddSingleton<IToaster>(x => x.GetRequiredService<Toaster>());
 builder.Services.AddSingleton<IDataService, DataService>();
+builder.Services.AddMudServices();
 
 await builder.Build().RunAsync();

src/VL.Challenge.Blazor.Client/Services/UserApi.cs

@@ -1,4 +1,5 @@
-using VL.Challenge.Common.Models.Users;
+using System.Reflection;
+using VL.Challenge.Common.Models.Users;
 using VL.Challenge.Common.Tasks;
 using VL.Challenge.Common.Users;
 using VL.Challenge.Domain;
@@ -26,11 +27,26 @@ public UserApi(UserContext userContext, IDataService dataService)
             return Task.FromResult((AgendaModel?)null);
         }
         var agenda = new Agenda(user);
+        if (!agenda.Any())
+        {
+            //mock data
+            var tasks = Enumerable.Range(1, 4).Select(i => new VLTask(i, "Subject " + i, null, DateTime.Now, DateTime.Now.AddHours(2)));
+            //add mock data
+            agenda.AddConcurentTasks(tasks);
+        }
         var model = new AgendaModel();
+
         model.AddRange(agenda);
         return Task.FromResult((AgendaModel?)model);
     }
 
+    public Task<AgendaModel> GetData()
+    {
+        var tasks = Enumerable.Range(1, 4).Select(i => new VLTask(i, "Subject " + i, null, DateTime.Now, DateTime.Now.AddHours(2))).ToList();
+        var model = new AgendaModel(tasks);
+        return Task.FromResult(model);
+    }
+
     public Task<IEnumerable<UserListModel>> GetList()
     {
         var users = _dataService.GetAllUsers().Select(x => new UserListModel { Username = x.Username, Tasks = x.Tasks.Count });
@@ -65,6 +81,8 @@ public interface IUserApi
 {
     Task<AgendaModel?> GetAgenda(int id);
     Task<IEnumerable<UserListModel>> GetList();
+
+    Task<AgendaModel> GetData();
     Task<bool> Register(UserCreateModel model);
     Task Login(string username);
     void Logout();

src/VL.Challenge.Blazor.Client/Shared/MainLayout.razor

@@ -6,7 +6,7 @@
     <div class="sidebar">
         <NavMenu />
     </div>
-
+   
     <main>
         <div class="top-row px-4">
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
@@ -19,3 +19,6 @@
 </div>
 
 <ToasterComponent />
+<MudThemeProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />

src/VL.Challenge.Blazor.Client/Shared/WeekCalendar.razor

@@ -0,0 +1,79 @@
+<h3>WeekCalendar</h3>
+
+<div class="week-container"> 
+    @foreach (var Day in _weekCalendar.WeekDays)
+    {
+        if(IsCurrentDay(Day)){
+            <MudCard class="day-of-week today"  >
+                <MudCardHeader>
+                <CardHeaderContent>
+                    <MudText>Today is</MudText>
+                    <MudText Typo="Typo.h6" >@Day.DayOfWeek</MudText>             
+                </CardHeaderContent>
+            </MudCardHeader>
+                <MudCardContent>
+
+                    <MudText>@Day.ToString("dd MMMM yyyy")</MudText>
+                </MudCardContent>
+                <MudCardActions>
+                    <MudButton Variant="Variant.Text" Color="Color.Primary" @onclick="GetTasks">View Tasks</MudButton>
+                </MudCardActions>
+            </MudCard>
+        }else{
+            <MudCard class="day-of-week">
+                <MudCardHeader>
+                <CardHeaderContent>
+                    <MudText class="invisible">Today is</MudText>
+                    <MudText Typo="Typo.h6" >@Day.DayOfWeek</MudText>
+                </CardHeaderContent>
+            </MudCardHeader>
+                <MudCardContent>
+                    <MudText>@Day.ToString("dd MMMM yyyy")</MudText>
+                </MudCardContent>
+                <MudCardActions>
+                    <MudButton Variant="Variant.Text" Color="Color.Primary" @onclick="GetTasks" >View Tasks</MudButton>
+                </MudCardActions>
+            </MudCard>
+        }
+
+    }
+</div>
+<style>
+    .day-of-week {
+        width: 12% !important;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .week-container{
+        display: flex;
+        flex-direction: row;
+        margin-bottom:10px;
+    }
+    .today{
+        outline:auto;
+        outline-width:1px;
+        outline-color:aquamarine;
+    }
+    .invisible{
+        visibility:hidden;
+    }
+</style>
+
+@code {
+
+    public WeekCalendarModel _weekCalendar;
+    public DayOfWeek _currentDay;
+    protected override void OnInitialized()
+    {
+        _weekCalendar = new WeekCalendarModel();
+        _currentDay = _weekCalendar.CurrentDayOfWeek;
+    }
+    public bool IsCurrentDay(DateTime day){
+        if(day.DayOfWeek==_currentDay){
+            return true;
+        }
+        return false;
+    }
+
+    public void GetTasks(){}
+}

src/VL.Challenge.Blazor.Client/Shared/WeekCalendar.razor.css

@@ -0,0 +1,3 @@
+.day-of-week {
+    width: 12% !important;
+}

src/VL.Challenge.Blazor.Client/VL.Challenge.Blazor.Client.csproj

@@ -10,6 +10,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.11" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.11" PrivateAssets="all" />
     <PackageReference Include="Microsoft.Extensions.Http" Version="7.0.0" />
+    <PackageReference Include="MudBlazor" Version="6.16.0" />
   </ItemGroup>
 
   <ItemGroup>

src/VL.Challenge.Blazor.Client/VL.Challenge.Blazor.Client.csproj.user

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DebuggerFlavor>ProjectDebugger</DebuggerFlavor>
+  </PropertyGroup>
+  <PropertyGroup>
+    <ActiveDebugProfile>IIS Express</ActiveDebugProfile>
+  </PropertyGroup>
+</Project>

src/VL.Challenge.Blazor.Client/_Imports.razor

@@ -6,3 +6,6 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
+@using MudBlazor
+@using VL.Challenge.Blazor.Client.Shared;
+@using VL.Challenge.Domain.Entities

src/VL.Challenge.Blazor.Client/wwwroot/css/app.css

@@ -1,4 +1,4 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
+/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -99,3 +99,8 @@ a, .btn-link {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
+*/
+
+.day-of-week{
+    width:12%;
+}

src/VL.Challenge.Blazor.Client/wwwroot/index.html

@@ -6,10 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>VL.Challenge.Blazor</title>
     <base href="/" />
-    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
-    <link href="css/app.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="VL.Challenge.Blazor.Client.styles.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 </head>
 
 <body>
@@ -27,6 +28,7 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 </body>
 
 </html>

src/VL.Challenge.Domain/Agenda.cs

@@ -33,7 +33,7 @@ private static bool AreOverlap(VLTask earlier, VLTask later)
         return later.StartTime < earlier.EndTime;
     }
 
-    private void AddConcurentTasks(IEnumerable<VLTask> tasks)
+    public void AddConcurentTasks(IEnumerable<VLTask> tasks)
     {
         this.Add(tasks.ToList());
     }