more component refactoring

Management.Web/Pages/Course/Course.razor

@@ -3,7 +3,7 @@
 @using CanvasModel.Courses
 @using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
 @using LocalModels
-@using Management.Web.Shared.Module.Assignment
+@using Management.Web.Pages.Course.Module.Assignment
 @using Management.Web.Shared.Components
 
 @inject FileStorageManager fileStorageManager

Management.Web/Pages/Course/CourseCalendar/Day/AssignmentInDay.razor

@@ -1,10 +1,11 @@
-@using Management.Web.Shared.Module.Assignment
+@using Management.Web.Course.Module.Assignment
 
 @inject DragContainer dragContainer
 @inject NavigationManager Navigation
 @inject AssignmentEditorContext assignmentContext
 
 @inject MyLogger<AssignmentInDay> logger
+
 @inherits DroppableAssignment
 
 @code {
@@ -31,7 +32,7 @@
     dragContainer.DropCallback = null;
   }
 
-  private void OnClick() 
+  private void OnClick()
   {
     if(planner.LocalCourse != null)
     {

Management.Web/Pages/Course/CourseDetails.razor

@@ -1,6 +1,6 @@
 
 @using CanvasModel.EnrollmentTerms
-@using Management.Web.Shared.Module
+@using Management.Web.Pages.Course.Module
 @using Management.Web.Pages.Course.CourseCalendar
 
 @inject CanvasService canvas

Management.Web/Pages/Course/Module/Assignment/AssignmentListItem.razor

@@ -0,0 +1,201 @@
+@using Management.Web.Shared.Components
+@using Management.Web.Course.Module.Assignment
+@using CanvasModel.Assignments
+
+@inject DragContainer dragContainer
+@inject NavigationManager Navigation
+@inject AssignmentEditorContext assignmentContext
+
+@inherits DroppableAssignment
+
+@code {
+  [Parameter]
+  [EditorRequired]
+  public LocalModule Module { get; set; } = new();
+  protected override void OnInitialized()
+  {
+    planner.StateHasChanged += reload;
+  }
+  private void reload()
+  {
+    this.InvokeAsync(this.StateHasChanged);
+  }
+  public void Dispose()
+  {
+    planner.StateHasChanged -= reload;
+  }
+  private bool showAll { get; set; } = false;
+
+
+  private void HandleDragStart()
+  {
+    dragContainer.DropCallback = DropCallback;
+  }
+
+  private void HandleDragEnd()
+  {
+    dragContainer.DropCallback = null;
+  }
+
+  private CanvasAssignment? assignmentInCanvas => planner
+    .CanvasAssignments?
+    .FirstOrDefault(
+      a => a.Name == Assignment.Name
+    );
+
+  private bool existsInCanvas =>
+    assignmentInCanvas != null;
+  private void OnClick()
+  {
+    assignmentContext.Assignment = Assignment;
+    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name + "/assignment/" + Assignment.Name);
+  }
+
+  private bool NeedsToBeUpdatedInCanvas => planner.LocalCourse != null
+    && planner.LocalCourse.Settings.CanvasId != null
+    && planner.CanvasAssignments != null
+    && planner.CanvasModules != null
+    && assignmentInCanvas != null
+    && Assignment.NeedsUpdates(
+      (CanvasAssignment)assignmentInCanvas,
+      Assignment.GetCanvasAssignmentGroupId(planner.LocalCourse.Settings.AssignmentGroups)
+    );
+}
+
+<div
+  draggable="true"
+  @ondragstart="HandleDragStart"
+  @ondragend="HandleDragEnd"
+  @onclick="OnClick"
+  role="button"
+>
+  <div class="card">
+    <div class="card-body p-0">
+      <div class="card-title pt-2 px-2 m-0">
+        <div class="row mx-1">
+          <div class="col offset-2 offset-lg-1 ">
+            <h4 class="text-center m-0">
+              @Assignment.Name
+            </h4>
+          </div>
+          <div class="col-2 col-lg-1 text-end">
+            @if(existsInCanvas)
+            {
+              @if(NeedsToBeUpdatedInCanvas)
+              {
+                <SyncIcon />
+              }
+              else
+              {
+                <CheckIcon />
+              }
+            }
+            else
+            {
+              <SyncIcon />
+            }
+          </div>
+        </div>
+      </div>
+
+      @if(
+        planner.LocalCourse != null
+        && existsInCanvas
+        && NeedsToBeUpdatedInCanvas
+        && assignmentInCanvas != null
+      )
+      {
+        <div class="mx-3 text-body-tertiary">
+          @Assignment.GetUpdateReason(
+            (CanvasAssignment)assignmentInCanvas,
+            Assignment.GetCanvasAssignmentGroupId(planner.LocalCourse.Settings.AssignmentGroups))
+        </div>
+      }
+      @if(!existsInCanvas)
+      {
+        <div class="mx-3 text-body-tertiary">
+          no assignment with same name in canvas
+        </div>
+      }
+
+      @if(!showAll)
+      {
+        <div class="card-text overflow-hidden p-2" style="max-height: 5rem;">
+          <div>Points: @Assignment.PointsPossible</div>
+          <div>Due At: @Assignment.DueAt</div>
+        </div>
+       }
+       else
+       {
+          <div class="card-text">
+            <div class="px-3 py-1 bg-dark-subtle my-1">
+
+            @((MarkupString) @Assignment.GetDescriptionHtml())
+            </div>
+
+            <section class="px-3">
+              <div>Points: @Assignment.PointsPossible</div>
+              <div>Due At: @Assignment.DueAt</div>
+              <div>Lock At: @Assignment.LockAt</div>
+              <div>Submission Types:</div>
+              <ul>
+                @foreach(var type in Assignment.SubmissionTypes)
+                {
+                  <li>
+                    @type
+                  </li>
+                }
+              </ul>
+            </section>
+          </div>
+       }
+
+
+      @if(!showAll)
+      {
+        <div
+          class="text-center fs-3 fw-bold lh-1 text-primary"
+          role="button"
+          @onclick:preventDefault="true"
+          @onclick:stopPropagation="true"
+          @onclick="() => showAll = true"
+        >
+          <svg
+            width="30"
+            height="30"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 10a2 2 0 11-4.001-.001A2 2 0 016 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0112 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0118 10z"
+              fill="var(--bs-primary)"
+            />
+          </svg>
+        </div>
+      }
+      else
+      {
+        <div
+          class="text-center fs-3 fw-bold lh-1 text-primary"
+          role="button"
+          @onclick:preventDefault="true"
+          @onclick:stopPropagation="true"
+          @onclick="() => showAll = false"
+        >
+          <svg
+            width="30"
+            height="30"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 10a2 2 0 11-4.001-.001A2 2 0 016 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0112 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0118 10z"
+              fill="var(--bs-primary)"
+            />
+          </svg>
+        </div>
+      }
+
+    </div>
+  </div>
+</div>

Management.Web/Pages/Course/Module/Assignment/DroppableAssignment.razor.cs

@@ -0,0 +1,88 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Management.Web.Course.Module.Assignment;
+public class DroppableAssignment : ComponentBase
+{
+  [Inject]
+  protected CoursePlanner planner { get; set; } = default!;
+
+  [Parameter, EditorRequired]
+  public LocalAssignment Assignment { get; set; } = default!;
+  private void dropOnDate(DateTime dropDate)
+  {
+    if (planner.LocalCourse == null) return;
+    var currentModule = planner
+      .LocalCourse
+      .Modules
+      .First(m =>
+        m.Assignments.Contains(Assignment)
+      ) ?? throw new Exception("in day callback, could not find module");
+
+
+    var defaultDueTimeDate = new DateTime(
+      year: dropDate.Year,
+      month: dropDate.Month,
+      day: dropDate.Day,
+      hour: planner.LocalCourse.Settings.DefaultDueTime.Hour,
+      minute: planner.LocalCourse.Settings.DefaultDueTime.Minute,
+      second: 0
+    );
+
+    var moduleWithUpdatedAssignment = currentModule with
+    {
+      Assignments = currentModule.Assignments.Select(a =>
+        a.Name != Assignment.Name // we are only changing the due date, so the name should be the same
+        ? a
+        : a with
+        {
+          DueAt = defaultDueTimeDate
+        }
+      )
+    };
+    var updatedModules = planner.LocalCourse.Modules
+      .Select(m =>
+        m.Name == moduleWithUpdatedAssignment.Name
+          ? moduleWithUpdatedAssignment
+          : m
+      );
+    var newCourse = planner.LocalCourse with
+    {
+      Modules = updatedModules
+    };
+    planner.LocalCourse = newCourse;
+  }
+  private void dropOnModule(LocalModule module)
+  {
+    if (planner.LocalCourse == null) return;
+    var newModules = planner.LocalCourse.Modules.Select(m =>
+      m.Name != module.Name
+        ? m with
+        {
+          Assignments = m.Assignments.Where(a => a.Name != Assignment.Name).DistinctBy(a => a.Name)
+        }
+        : m with
+        {
+          Assignments = m.Assignments.Append(Assignment).DistinctBy(a => a.Name)
+        }
+    );
+
+    var newCourse = planner.LocalCourse with
+    {
+      Modules = newModules
+    };
+    planner.LocalCourse = newCourse;
+  }
+
+  protected void DropCallback(DateTime? dropDate, LocalModule? module)
+  {
+    if (module == null)
+    {
+      dropOnDate(dropDate ?? Assignment.DueAt);
+    }
+    else
+    {
+      dropOnModule(module);
+    }
+  }
+
+}

Management.Web/Pages/Course/Module/ModuleDetail.razor

@@ -0,0 +1,173 @@
+@using Management.Web.Shared.Components
+@using Management.Web.Shared.Components.Quiz
+@using Management.Web.Pages.Course.Module
+@using LocalModels
+@using BlazorMonaco
+@using BlazorMonaco.Editor
+
+@inject CoursePlanner configurationManagement
+@inject CoursePlanner planner
+@inject DragContainer dragContainer
+
+@code {
+  [Parameter, EditorRequired]
+  public LocalModule Module { get; set; } = default!;
+  private bool dragging { get; set; } = false;
+  private bool publishing = false;
+  private string _notes { get; set; } = "";
+  private string notes
+  {
+    get => _notes;
+    set
+    {
+      if (value != _notes)
+      {
+        _notes = value;
+        if (planner.LocalCourse != null)
+        {
+          var newModule = Module with { Notes = _notes };
+          var newModules = planner.LocalCourse.Modules.Select(
+          m => m.Name == newModule.Name
+          ? newModule
+          : m
+          );
+          planner.LocalCourse = planner.LocalCourse with
+            {
+              Modules = newModules
+            };
+        }
+      }
+    }
+  }
+
+
+  protected override void OnInitialized()
+  {
+    if (_notes == string.Empty)
+    {
+      _notes = Module.Notes;
+    }
+    planner.StateHasChanged += reload;
+  }
+  private void reload()
+  {
+
+    this.InvokeAsync(this.StateHasChanged);
+  }
+  public void Dispose()
+  {
+    planner.StateHasChanged -= reload;
+  }
+
+  private string accordionId
+  {
+    get => Module.Name.Replace(" ", "").Replace("#", "") + "-AccordionItem";
+  }
+
+  void OnDragEnter()
+  {
+    dragging = true;
+  }
+  void OnDragLeave()
+  {
+    dragging = false;
+  }
+
+  void OnDrop()
+  {
+    dragging = false;
+    if (dragContainer.DropCallback == null)
+    {
+      System.Console.WriteLine("no drop callback set");
+      return;
+    }
+    dragContainer.DropCallback?.Invoke(null, Module);
+  }
+
+  private bool isSyncedWithCanvas => planner
+    .CanvasModules?
+    .FirstOrDefault(
+      cm => cm.Name == Module.Name
+    ) != null;
+  private async Task Publish()
+  {
+    publishing = true;
+    await planner.CreateModule(Module);
+    publishing = false;
+  }
+}
+
+<div class="@("accordion-item " + (dragging ? "" : ""))" @ondrop="@(() => OnDrop())" @ondragenter="OnDragEnter"
+  @ondragleave="OnDragLeave" ondragover="event.preventDefault();">
+  <h2 class="accordion-header">
+    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+      data-bs-target="@("#" + accordionId)" aria-controls="@accordionId">
+      <div class="w-100 d-flex justify-content-between pe-3">
+        <div>
+          @Module.Name
+        </div>
+        @if (isSyncedWithCanvas)
+        {
+          <CheckIcon />
+        }
+        else
+        {
+          <SyncIcon />
+        }
+      </div>
+    </button>
+
+  </h2>
+  <div id="@accordionId" class="accordion-collapse collapse">
+    <div class="accordion-body pt-1">
+      @* <textarea
+      class="form-control"
+      @bind="notes"
+      @bind:event="oninput"
+      placeholder="notes for the module"
+      rows="6"
+      /> *@
+      <div class="row m-1">
+        <div class="col my-auto">
+          <RenameModule Module="Module" />
+        </div>
+        <div class="col my-auto">
+          @if(publishing)
+          {
+            <Spinner />
+          }
+          else
+          {
+            if(!isSyncedWithCanvas)
+            {
+              <button
+                class="btn btn-outline-primary"
+                @onclick="Publish"
+                disabled="@publishing"
+              >
+                Add to Canvas
+              </button>
+            }
+          }
+        </div>
+        <div class="col-auto my-auto">
+          <NewQuiz Module="Module" />
+          <NewAssignment Module="Module" />
+        </div>
+      </div>
+      <h5>Assignments</h5>
+
+      <div class="row">
+        @foreach (var a in Module.Assignments)
+        {
+          <AssignmentListItem Assignment="a" Module="Module" />
+        }
+        <br>
+        @foreach (var quiz in Module.Quizzes)
+        {
+          <QuizListItem Quiz="quiz" />
+        }
+      </div>
+    </div>
+  </div>
+</div>

Management.Web/Pages/Course/Module/Modules.razor

@@ -0,0 +1,50 @@
+@using Management.Web.Pages.Course.Module
+@using System.Linq
+@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
+
+@inject CoursePlanner planner
+
+@code {
+  private bool showNewModule { get; set; } = false;
+  protected override void OnInitialized()
+  {
+    planner.StateHasChanged += reload;
+  }
+  private void reload()
+  {
+    this.InvokeAsync(this.StateHasChanged);
+  }
+  public void Dispose()
+  {
+    planner.StateHasChanged -= reload;
+  }
+}
+
+<div class="row justify-content-end mb-1">
+  <div class="col-auto">
+    @if (!showNewModule)
+    {
+      <button class="btn btn-outline-secondary" @onclick="() => showNewModule = true">New Module</button>
+    }
+    else
+    {
+      <button class="btn btn-outline-secondary" @onclick="() => showNewModule = false">Hide New Module</button>
+    }
+  </div>
+</div>
+
+@if (showNewModule)
+{
+  <NewModule OnSubmit="() => showNewModule = false" />
+}
+
+@if (planner.LocalCourse != null)
+{
+  <div class="accordion" id="modulesAccordion">
+
+  @foreach (var module in planner.LocalCourse.Modules)
+  {
+    <ModuleDetail Module="module" />
+  }
+  </div>
+}

Management.Web/Pages/Course/Module/NewAssignment.razor

@@ -0,0 +1,95 @@
+@using Management.Web.Shared.Components
+@using Management.Web.Shared.Components.Forms
+
+@inject CoursePlanner planner
+
+
+@code {
+
+  [Parameter]
+  [EditorRequired]
+  public LocalModule Module { get; set; } = default!;
+
+  [Required]
+  [StringLength(50, ErrorMessage = "Name too long (50 character limit).")]
+  private string Name { get; set; } = "";
+
+  private Modal? modal { get; set; } = null;
+
+  private void submitHandler()
+  {
+    System.Console.WriteLine("new assignment");
+    var newAssignment = new LocalAssignment
+    {
+      Name = Name,
+      Description = "",
+      @* LockAtDueDate = true, *@
+      Rubric = new RubricItem[] { },
+      LockAt = null,
+      DueAt = DateTime.Now,
+      SubmissionTypes = new string[] { AssignmentSubmissionType.ONLINE_TEXT_ENTRY },
+      LocalAssignmentGroupName = selectedAssignmentGroup?.Name,
+    };
+
+    if(planner.LocalCourse != null)
+    {
+      var newModules =planner.LocalCourse.Modules.Select(m => 
+        m.Name != Module.Name 
+          ? m 
+          : Module with 
+          {
+            Assignments=Module.Assignments.Append(newAssignment)
+          }
+        );
+      planner.LocalCourse = planner.LocalCourse with 
+      {
+        Modules=newModules
+      };
+    }
+    Name = "";
+    modal?.Hide();
+  }
+
+  private void setAssignmentGroup(LocalAssignmentGroup? group)
+  {
+    selectedAssignmentGroup = group;
+  }
+  private LocalAssignmentGroup? selectedAssignmentGroup { get; set; }
+}
+
+<button 
+  class="btn btn-outline-secondary" 
+  @onclick="() => modal?.Show()"
+>
+  + Assignment
+</button>
+
+<Modal @ref="modal">
+  <Title>New Assignment</Title>
+  <Body>
+    <form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
+      <label for="Assignment Name">Name</label>
+      <input id="moduleName" class="form-control" @bind="Name" />
+    </form>
+    <br>
+    <label class="form-label">Assignment Group</label>
+    @if(planner != null)
+    {
+      <ButtonSelect
+        Label="Assignment Group"
+        Options="planner.LocalCourse?.Settings.AssignmentGroups ?? []"
+        GetName="(g) => g?.Name"
+        OnSelect="(g) => setAssignmentGroup(g)"
+      />
+    }
+  </Body>
+  <Footer>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      @onclick="submitHandler"
+    >
+      Create Assignment
+    </button>
+  </Footer>
+</Modal>

Management.Web/Pages/Course/Module/NewModule.razor

@@ -0,0 +1,38 @@
+@inject CoursePlanner planner
+@inject CanvasService canvas
+
+@code {
+
+  [Required]
+  [StringLength(50, ErrorMessage = "Name too long (50 character limit).")]
+  private string Name { get; set; } = "";
+
+  [Parameter]
+  public EventCallback OnSubmit { get; set; }
+
+  private async Task submitHandler()
+  {
+    if(planner.LocalCourse != null && Name != "")
+    {
+      var newModule = new LocalModule
+      {
+        Name=Name
+      };
+
+      planner.LocalCourse = planner.LocalCourse with 
+      {
+        Modules = planner.LocalCourse.Modules.Append(newModule)
+      };
+    }
+    Name = "";
+    await OnSubmit.InvokeAsync();
+  }
+}
+
+<h1>New Module</h1>
+
+<form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
+  <label for="moduleName">Name:</label>
+  <input id="moduleName" class="form-control" @bind="Name" />
+  <button class="btn btn-primary">Save</button>
+</form>

Management.Web/Pages/Course/Module/NewQuiz.razor

@@ -0,0 +1,92 @@
+@using Management.Web.Shared.Components
+@using Management.Web.Shared.Components.Forms
+
+@inject CoursePlanner planner
+@code {
+
+  [Parameter]
+  [EditorRequired]
+  public LocalModule Module { get; set; } = default!;
+
+  [Required]
+  [StringLength(50, ErrorMessage = "Name too long (50 character limit).")]
+  private string Name { get; set; } = "";
+
+  private Modal? modal { get; set; } = null;
+
+  private void submitHandler()
+  {
+    Console.WriteLine("new quiz");
+    Console.WriteLine(selectedAssignmentGroup);
+    if(Name.Trim() == string.Empty)
+    {
+      return;
+    }
+
+
+    var newQuiz = new LocalQuiz
+    {
+      Name=Name,
+      Description = "",
+      LocalAssignmentGroupName = selectedAssignmentGroup?.Name,
+    };
+    if(planner.LocalCourse != null)
+    {
+      var newModules = planner.LocalCourse.Modules.Select(m => 
+        m.Name != Module.Name 
+          ? m 
+          : Module with 
+          {
+            Quizzes=Module.Quizzes.Append(newQuiz)
+          }
+        );
+      planner.LocalCourse = planner.LocalCourse with 
+      {
+        Modules=newModules
+      };
+    }
+    modal?.Hide();
+  }
+
+  private void setAssignmentGroup(LocalAssignmentGroup? group)
+  {
+    selectedAssignmentGroup = group;
+  }
+  private LocalAssignmentGroup? selectedAssignmentGroup { get; set; }
+}
+
+<button
+  class="btn btn-outline-secondary"
+  @onclick="() => modal?.Show()"
+>
+  + Quiz
+</button>
+
+<Modal @ref="modal">
+  <Title>New Quiz</Title>
+  <Body>
+    <form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
+      <label for="Assignment Name">Name</label>
+      <input id="moduleName" class="form-control" @bind="Name" />
+    </form>
+    <br>
+    <label class="form-label">Assignment Group</label>
+    @if(planner != null && planner.LocalCourse != null)
+    {
+      <ButtonSelect
+        Label="Assignment Group"
+        Options="planner.LocalCourse.Settings.AssignmentGroups"
+        GetName="(g) => g?.Name"
+        OnSelect="(g) => setAssignmentGroup(g)"
+      />
+    }
+  </Body>
+  <Footer>
+    <button
+      class="btn btn-primary"
+      @onclick="submitHandler"
+    >
+      CreateQuiz
+    </button>
+  </Footer>
+</Modal>

Management.Web/Pages/Course/Module/QuizListItem.razor

@@ -0,0 +1,68 @@
+@using Management.Web.Shared.Components
+@using Management.Web.Shared.Components.Quiz
+
+@inject DragContainer dragContainer
+@inject QuizEditorContext quizContext
+@inject NavigationManager Navigation
+
+@inherits DroppableQuiz
+
+@code {
+  private void HandleDragStart()
+  {
+    dragContainer.DropCallback = dropCallback;
+  }
+
+  private void HandleDragEnd()
+  {
+    dragContainer.DropCallback = null;
+  }
+  private bool existsInCanvas => 
+    planner.CanvasQuizzes != null 
+      ? Quiz.QuizIsCreated(planner.CanvasQuizzes) 
+      : false;
+
+
+  private void OnClick() 
+  {
+    quizContext.Quiz = Quiz;
+    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name + "/quiz/" + Quiz.Name);
+  }
+}
+
+
+
+<div 
+  draggable="true"
+  @ondragstart="HandleDragStart"
+  @ondragend="HandleDragEnd"
+  @onclick="OnClick"
+  role="button"
+>
+  <div class="card">
+    <div class="card-body p-0">
+      <div class="card-title pt-2 px-2 m-0 d-flex justify-content-between">
+        <h4>@Quiz.Name</h4>
+          @if(existsInCanvas)
+          {
+            <CheckIcon />
+          }
+          else
+          {
+            <SyncIcon />
+          }
+      </div>
+      @if(!existsInCanvas)
+      {
+        <div class="mx-3 text-body-tertiary">
+          no quiz with same name in canvas
+        </div>
+      }
+
+      <div class="card-text overflow-hidden p-2">
+        <div>Due At: @Quiz.DueAt</div>
+      </div>
+    </div>
+
+  </div>
+</div>

Management.Web/Pages/Course/Module/RenameModule.razor

@@ -0,0 +1,66 @@
+@using Management.Web.Shared.Components
+
+@inject CoursePlanner planner
+
+@code {
+
+  [Parameter]
+  [EditorRequired]
+  public LocalModule Module { get; set; } = default!;
+  private Modal? modal { get; set; } = null;
+  private string Name { get; set; } = string.Empty;
+
+  protected override void OnParametersSet()
+  {
+    if (Name == string.Empty)
+      Name = Module.Name;
+  }
+
+  private void submitHandler()
+  {
+    if (planner.LocalCourse == null)
+      return;
+
+    var newModule = Module with
+    {
+      Name = Name
+    };
+
+    // Module is the not renamed version
+    var newModules = planner.LocalCourse.Modules.Select(
+      m => m.Name == Module.Name
+        ? newModule
+        : m
+    ).ToArray();
+
+    planner.LocalCourse = planner.LocalCourse with
+    {
+      Modules = newModules
+    };
+    Name = "";
+    modal?.Hide();
+  }
+}
+
+<button 
+  class="btn btn-outline-secondary"
+  @onclick="() => modal?.Show()"
+>
+  Rename
+</button>
+
+<Modal @ref="modal">
+  <Title>Rename Module</Title>
+
+  <Body>
+    <form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
+      <label for="moduleName">Name</label>
+      <input id="moduleName" class="form-control" @bind="Name" />
+    </form>
+  </Body>
+  <Footer>
+    <button type="button" class="btn btn-primary" @onclick="submitHandler">
+      Rename
+    </button>
+  </Footer>
+</Modal>