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

@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.Quiz
@using Management.Web.Pages.Course.Module
@using Management.Web.Pages.Course.Module.ModuleItems
@using Management.Web.Pages.Course.Module.NewItemsButtons
@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
    .CanvasData?
    .Modules
    .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">
      <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">
          <NewPage Module=Module />
          <NewQuiz Module="Module" />
          <NewAssignment Module="Module" />

        </div>
      </div>
      <h5>Assignments</h5>

      <div class="row">
        @* @foreach(var p in Module.Pages)
        {
          <PageListItem Page=p />
        }
        @foreach (var a in Module.Assignments)
        {
          <AssignmentListItem Assignment="a" Module="Module" />
        }
        <br>
        @foreach (var quiz in Module.Quizzes)
        {
          <QuizListItem Quiz="quiz" />
        } *@
        @foreach(var item in Module.GetSortedModuleItems())
        {
          @(item switch
          {
            LocalAssignment assignment => (@<AssignmentListItem Assignment="assignment" Module="Module" />),
            LocalQuiz quiz => (@<QuizListItem Quiz="quiz" />),
            LocalCoursePage page => (@<PageListItem Page=page />),
            _ => (@<div></div>)
          })
        }
      </div>
    </div>
  </div>
</div>