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

@using Markdig

@inject CoursePlanner planner
@inject AssignmentEditorContext assignmentContext

@code
{
  protected override void OnInitialized()
  {
    assignmentContext.StateHasChanged += reload;
    reload();
  }
  private void reload()
  {
    if (assignmentContext.Assignment != null)
    {
      Description = assignmentContext.Assignment.Description;
      Preview = Markdown.ToHtml(Description);
      TemplateId = assignmentContext.Assignment.TemplateId;
      UseTemplate = TemplateId != null && TemplateId != "";
      VariableValues = assignmentContext.Assignment.TemplateVariables;
      this.InvokeAsync(this.StateHasChanged);
    }
  }
  public void Dispose()
  {
    assignmentContext.StateHasChanged -= reload;
  }

  public string Description { get; set; } = default!;
  public bool? UseTemplate { get; set; } = null;

  public string? TemplateId { get; set; }

  public Dictionary<string, string> VariableValues { get; set; } = new Dictionary<string, string>();

  private AssignmentTemplate? selectedTemplate =>
    planner
    .LocalCourse?
    .AssignmentTemplates
    .FirstOrDefault(t => t.Id == TemplateId);

  public string Preview { get; set; } = String.Empty;

  private void saveDescription(ChangeEventArgs e)
  {
    if(assignmentContext.Assignment != null)
    {
      var newAssignment = assignmentContext.Assignment with 
      {
        Description = e.Value?.ToString() ?? ""
      };
      assignmentContext.SaveAssignment(newAssignment);
    }
  }

  private void saveTemplateId(ChangeEventArgs e)
  {
    if(assignmentContext.Assignment != null)
    {
      var newTemplateId = e.Value?.ToString();
      var newAssignment = assignmentContext.Assignment with 
      {
        Description = e.Value?.ToString() ?? ""
      };
      assignmentContext.SaveAssignment(newAssignment);
    }
  }


}

@if(assignmentContext.Assignment != null && planner.LocalCourse != null)
{
  <div class="form-check form-switch">
    <input 
      class="form-check-input" 
      type="checkbox" 
      role="switch" 
      id="useTemplateForDescription"
      @bind="UseTemplate"
    />
    <label class="form-check-label" for="useTemplateForDescription">
      use template for description
    </label>
  </div>

  @if (UseTemplate ?? false)
  {
    <div class="row justify-content-around">
      <div class="col-auto text-center">
        <form @onsubmit:preventDefault="true">
          <label for="templateSelect">Templates</label>
          <select 
            id="templateSelect" 
            class="form-select" 
            @bind="TemplateId"
            @oninput="saveTemplateId"
          >
            <option value=""></option>
            @foreach (var template in planner.LocalCourse.AssignmentTemplates)
            {
              <option value="@template.Id">@template.Name</option>
            }
          </select>
        </form>
      </div>
      <div class="col-auto">
        VARIABLES:
        @if (selectedTemplate != null)
        {
          var variables = AssignmentTemplate.GetVariables(selectedTemplate.Markdown);
          @foreach (var variable in variables)
          {
            <div class="my-1">
              <label class="form-label">
                @variable
              </label>
              <input 
                class="form-control" 
                value="@VariableValues.GetValueOrDefault(variable, String.Empty)" 
                @oninput="@((e) => 
                  {
                    var newValue = e.Value?.ToString() ?? String.Empty;
                    var newDictionary = new Dictionary<string, string>(VariableValues);
                    newDictionary[variable] = newValue;

                    var newAssignment = assignmentContext.Assignment with 
                    {
                      TemplateVariables = newDictionary
                    };
                    assignmentContext.SaveAssignment(newAssignment);
                  })"
                />
            </div>
          }
        }
      </div>
    </div>
    
  }
  else
  {

    <div class="row">
    <div class="col">
      <label for="description" class="form-label">
        Description
      </label>
    </div>
    <div class="col">
      HTML Preview
    </div>
  </div>
    <div class="row">
      <div class="col">
        <textarea 
          id="description" 
          class="form-control" 
          rows=12
          @bind="Description"
          @oninput="saveDescription"
        />
      </div>
      <div class="col">
        @((MarkupString)Preview)
      </div>
    </div>
  }
}