canvasManagement/Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor

@using Management.Web.Shared.Components

@inject CoursePlanner planner
@inject AssignmentEditorContext assignmentContext

@code
{
  private IEnumerable<RubricItem> displayRubric { get; set; } = new RubricItem[] { };
  private string _rubricText = "";
  private string rubricText
  {
    get => _rubricText;
    set
    {
      _rubricText = value;

      try
      {
        var parsedRubric = LocalAssignment.ParseRubricMarkdown(value);
        displayRubric = parsedRubric;
        error = null;
        if (assignmentContext.Assignment != null)
        {
          var newAssignment = assignmentContext.Assignment with
            {
              Rubric = parsedRubric,
            };
          assignmentContext.SaveAssignment(newAssignment);
        }
      }
      catch (RubricMarkdownParseException parseError)
      {
        error = parseError.Message;
      }

      StateHasChanged();
    }
  }
  private int rubricReloadKey = 0;

  private string? error { get; set; } = null;

  protected override void OnInitialized()
  {
    assignmentContext.StateHasChanged += reload;
    reload();
  }
  private void reload()
  {
    if (assignmentContext.Assignment != null)
    {
      if (rubricText == string.Empty)
      {
        rubricText = assignmentContext.Assignment.RubricToMarkdown();
      }
    }
    this.InvokeAsync(this.StateHasChanged);
  }

  public void Dispose()
  {
    assignmentContext.StateHasChanged -= reload;
  }

  private int requiredPoints => displayRubric.Where(r => !r.IsExtraCredit).Select(r => r.Points).Sum();
  private int extraCreditPoints => displayRubric.Where(r => r.IsExtraCredit).Select(r => r.Points).Sum();
}

<br>
<div class="row">
  <h4 class="text-center">Rubric</h4>
</div>

<div class="row">
  <div class="col-6">
    @* <textarea id="description" class="form-control h-100" rows=12 @bind="rubricText" @bind:event="oninput" /> *@
    <MonacoTextArea Value="@rubricText" OnChange="@((t) => rubricText = t)" />
  </div>
  <div class="col-6">
    @if (error != null)
    {
      <p class="text-danger text-truncate">Error: @error</p>
    }

    <div class="row border-bottom">
      <div class="col-6 text-end">Label</div>
      <div class="col-3 text-center">Points</div>
      <div class="col-3 text-center">Extra Credit</div>
    </div>
    @foreach (var item in displayRubric)
    {
      <div class="row border-bottom">
        <div class="col-6 text-end">@item.Label</div>
        <div class="col-3 text-center">@item.Points</div>
        <div class="col-3 text-center">@item.IsExtraCredit</div>
      </div>
    }
    <div class="text-end">
      <div>
        Required Points: @requiredPoints
      </div>
      <div>
        Extra Credit Points @extraCreditPoints
      </div>
    </div>
  </div>
</div>