canvasManagement/Management.Web/Pages/QuizFormPage.razor

@page "/course/{CourseName}/quiz/{QuizName}"

@using CanvasModel.EnrollmentTerms
@using CanvasModel.Quizzes
@using Management.Web.Shared.Components.AssignmentForm
@using Management.Web.Shared.Course
@using Management.Web.Shared.Module.Assignment.Templates
@using Management.Web.Shared.Semester
@using CanvasModel.Courses
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@using LocalModels
@using Management.Web.Shared.Module.Assignment
@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.Quiz.Markdown

@inject FileStorageManager fileStorageManager
@inject CanvasService canvas
@inject CoursePlanner planner
@inject QuizEditorContext quizContext
@inject ILogger<QuizFormPage> logger
@inject NavigationManager Navigation

@code {
  [Parameter]
  public string? CourseName { get; set; } = default!;
  [Parameter]
  public string? QuizName { get; set; } = default!;

  private bool loading { get; set; } = true;
  private bool addingQuizToCanvas = false;

  protected override void OnInitialized()
  {
    quizContext.StateHasChanged += reload;
  }
  private void reload()
  {
    this.InvokeAsync(this.StateHasChanged);
  }
  public void Dispose()
  {
    quizContext.StateHasChanged -= reload;
  }
  protected override async Task OnInitializedAsync()
  {
    if (loading)
    {
      loading = false;
      logger.LogInformation($"loading quiz {CourseName} {QuizName}");
      if (planner.LocalCourse == null)
      {
        var courses = await fileStorageManager.LoadSavedCourses();
        planner.LocalCourse = courses.First(c => c.Settings.Name == CourseName);
        logger.LogInformation($"set course to '{planner.LocalCourse?.Settings.Name}'");
      }

      if (quizContext.Quiz == null)
      {
        var quiz = planner
        .LocalCourse?
        .Modules
        .SelectMany(m => m.Quizzes)
        .FirstOrDefault(q => q.Name == QuizName);

        quizContext.Quiz = quiz;
        logger.LogInformation($"set quiz to '{quizContext.Quiz?.Name}'");
      }
      StateHasChanged();

      if (planner.CanvasQuizzes == null)
      {
        await planner.LoadCanvasData();
      }

      base.OnInitialized();
      StateHasChanged();
    }
  }

  private void deleteQuiz()
  {
    quizContext.DeleteQuiz();
    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
  }

  private async Task addToCanvas()
  {
    addingQuizToCanvas = true;
    await quizContext.AddQuizToCanvas();
    await planner.LoadCanvasData();
    addingQuizToCanvas = false;
  }
  private void done()
  {
    quizContext.Quiz = null;
    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
  }

  private CanvasQuiz? quizInCanvas => planner.CanvasQuizzes?.FirstOrDefault(q => q.Title == quizContext.Quiz?.Name);

  private string canvasQuizUrl =>
  $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/quizzes/{quizInCanvas?.Id}";

  private int? quizPoints => quizContext.Quiz?.Questions.Sum(q => q.Points);
}

<div class="d-flex flex-column py-3" style="height: 100vh;">

  <section>
    <div class="row justify-content-between">
      <div class="col-auto my-auto">
        <button class="btn btn-outline-secondary" @onclick="done">
          ← go back
        </button>
      </div>
      <div class="col-auto my-auto">
        <h2>
          @quizContext.Quiz?.Name
        </h2>
      </div>

      @if (quizContext.Quiz == null)
      {
        <div class="col-auto">
          <Spinner />
        </div>
      }
      <div class="col-auto me-3">
        <h3>
          Points: @quizPoints
        </h3>
        @if (quizInCanvas != null)
        {
          @if (quizInCanvas?.Published == true)
          {
            <div class="text-success">
              Published!
            </div>
          }
          else
          {
            <div class="text-danger">
              Not Published
            </div>
          }
        }
      </div>
    </div>
  </section>

  <section
    class="flex-grow-1 w-100 d-flex justify-content-center overflow-y-auto overflow-x-hidden  border rounded-4 bg-dark-subtle py-3 px-1"
    style="min-height: 10%;max-width: 100%;">
    <div class="w-100" style="max-width: 120em; max-height: 100%;">
      @if (quizContext.Quiz != null)
      {
        <MarkdownQuizForm />
      }
    </div>
  </section>

  <hr>
  <section>
    @if (quizContext.Quiz != null)
    {
      <div class="row justify-content-end">
        <div class="col-auto">
          <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirm="deleteQuiz"
            Disabled="@addingQuizToCanvas" />
          <button class="btn btn-outline-secondary me-1" @onclick="addToCanvas" disabled="@addingQuizToCanvas">
            Add to Canvas
          </button>
          @if (quizInCanvas != null)
          {
            <a class="btn btn-outline-secondary me-1" href="@canvasQuizUrl" target="_blank">
              View in Canvas
            </a>
          }
          <button class="btn btn-primary" @onclick="done" disabled="@addingQuizToCanvas">
            Done
          </button>
        </div>
      </div>
    }

    @if (addingQuizToCanvas)
    {
      <Spinner />
    }
  </section>
</div>