more component refactoring

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>