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 YamlManager yamlManager
@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 yamlManager.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>