canvasManagement/Management.Web/Shared/Module/ModuleDetail.razor

@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.Quiz
@using Management.Web.Shared.Module.Assignment
@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 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.Id == Module.CanvasId
    ) != null;
}

<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">
          <h5>Assignments</h5>
        </div>
        <div class="col-auto">
          <NewQuiz
            Module="Module" 
          />
          <NewAssignment 
            Module="Module" 
          />
        </div>
      </div>
      
      <div class="row">
      @foreach (var a in Module.Assignments)
      {
        <AssignmentDetails Assignment="a" Module="Module" />
      }
      <br>
      @foreach(var quiz in Module.Quizzes)
      {
        <QuizDetail Quiz="quiz" />
      }
      </div>
    </div>
  </div>
</div>