canvasManagement/Management.Web/Pages/CoursePageForm/CoursePageForm.razor

@using Management.Web.Shared.Components
@using CanvasModel.Pages

@inject CoursePlanner planner
@inject CanvasService canvas
@inject NavigationManager Navigation
@inject PageEditorContext pageContext


@code {
  protected override void OnInitialized()
  {
    pageContext.StateHasChanged += reload;
    reload();
  }
  private void reload()
  {
    if (pageContext.Page != null)
    {
      name = pageContext.Page.Name;
    }
    this.InvokeAsync(this.StateHasChanged);
  }
  public void Dispose()
  {
    pageContext.StateHasChanged -= reload;
  }

  private string name { get; set; } = String.Empty;
  private bool addingPageToCanvas = false;
  private bool deletingPageFromCanvas = false;


  private CanvasPage? pageInCanvas =>
    planner.CanvasPages?.FirstOrDefault(a => a.Title == pageContext.Page?.Name);


  private string canvasPageUrl =>
    $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/assignments/{pageInCanvas?.PageId}";


  private void submitHandler()
  {
    if (pageContext.Page != null)
    {
      var newPage = pageContext.Page with
      {
        Name = name,
      };

      pageContext.SavePage(newPage);
    }
    pageContext.Page = null;
  }
  private async Task HandleDelete()
  {

  }

  private void handleNameChange(ChangeEventArgs e)
  {
    if (pageContext.Page != null)
    {
      var newPage = pageContext.Page with { Name = e.Value?.ToString() ?? "" };
      pageContext.SavePage(newPage);
    }
  }

  private async Task addToCanvas()
  {
    addingPageToCanvas = true;
    await pageContext.AddPageToCanvas();
    await planner.LoadCanvasData();
    addingPageToCanvas = false;
  }
  private async Task updateInCanvas()
  {
    if(pageInCanvas != null)
    {
      addingPageToCanvas = true;
      await pageContext.UpdateInCanvas(pageInCanvas.PageId);
      await planner.LoadCanvasData();
      addingPageToCanvas = false;
    }
  }


  private async Task deleteFromCanvas()
  {
    if (pageInCanvas == null
      || planner?.LocalCourse?.Settings.CanvasId == null
      || pageContext.Page == null
    )
      return;

    deletingPageFromCanvas = true;
    @* await canvas.Pages.Delete(
      (ulong)planner.LocalCourse.Settings.CanvasId,
      pageInCanvas.Id,
      assignmentContext.Assignment.Name
    ); *@
    await planner.LoadCanvasData();
    deletingPageFromCanvas = false;
    StateHasChanged();
  }
}

<div class="d-flex flex-column p-2 h-100  w-100" style="height: 100%;" >
  <div>
    @pageContext.Page?.Name
  </div>

  <section class="flex-grow-1 p-1 border rounded-4 bg-dark-subtle" style="min-height: 0;">
    @if (pageContext.Page != null)
    {
      <CoursePageMarkdownEditor />
    }
  </section>

  <div class="d-flex justify-content-end  p-3">
    @if (addingPageToCanvas || deletingPageFromCanvas)
    {
      <div>
        <Spinner />
      </div>
    }

    <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />
    <button
      class="btn btn-outline-secondary mx-3"
      disabled="@(addingPageToCanvas || deletingPageFromCanvas)"
      @onclick="addToCanvas"
    >
      Add To Canvas
    </button>
    @if (pageInCanvas != null)
    {
      <a
        class="btn btn-outline-secondary me-1"
        href="@canvasPageUrl"
        target="_blank"
        disabled="@(addingPageToCanvas || deletingPageFromCanvas)"
      >
        View in Canvas
      </a>
      <button
        class="btn btn-outline-secondary mx-3"
        disabled="@(addingPageToCanvas || deletingPageFromCanvas)"
        @onclick="updateInCanvas"
      >
        Update In Canvas
      </button>
      <ConfirmationModal
        Disabled="@(addingPageToCanvas || deletingPageFromCanvas)"
        Label="Delete from Canvas"
        Class="btn btn-outline-danger mx-3"
        OnConfirmAsync="deleteFromCanvas"
      />
    }
    <button class="btn btn-primary mx-2" @onclick="@(() => {
        pageContext.Page = null;
        Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
      })">
      Done
    </button>
  </div>


</div>