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

@using Markdig

@inject CoursePlanner planner

@code 
{
  [Parameter]
  public string Description { get; set; } = default!;
  [Parameter]
  public bool UseTemplate { get; set; }
  [Parameter]
  public string? TemplateId { get; set; }
  [Parameter]
  public Dictionary<string, string> VariableValues { get; set; } = new Dictionary<string, string>();

  [Parameter]
  public EventCallback<string> DescriptionChanged { get; set; }

  [Parameter]
  public EventCallback<bool> UseTemplateChanged { get; set; }

  [Parameter]
  public EventCallback<string?> TemplateIdChanged { get; set; }

  [Parameter]
  public EventCallback<Dictionary<string, string>> VariableValuesChanged { get; set; }

  private AssignmentTemplate? selectedTemplate => 
    planner
    .LocalCourse?
    .AssignmentTemplates
    .FirstOrDefault(t => t.Id == TemplateId);
  public string Preview => Markdown.ToHtml(Description);

}


<div class="form-check form-switch">
  <input 
    class="form-check-input" 
    type="checkbox"
    role="switch" 
    id="useTemplateForDescription"
    checked="@UseTemplate"
    @onchange="async (e) => 
      await UseTemplateChanged.InvokeAsync((bool)(e.Value ?? false))"
  >
  <label 
    class="form-check-label" 
    for="useTemplateForDescription"
  >
    use template for description
  </label>
</div>

@if(UseTemplate)
{
  @if(planner.LocalCourse != null)
  {
    <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" 
            value="@TemplateId"
            @onchange="async (e) =>
              await TemplateIdChanged.InvokeAsync(e.Value?.ToString())"
          >
            <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="async (e) => 
                  {
                    var newValue = e.Value?.ToString() ?? String.Empty;
                    var newDictionary = new Dictionary<string, string>(VariableValues);
                    newDictionary[variable] = newValue;
                    
                    await VariableValuesChanged.InvokeAsync(newDictionary);
                  }
                "
              />
            </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"
        value="@Description"
        rows=12
        @oninput="async (e) => 
          await DescriptionChanged.InvokeAsync(e.Value?.ToString() ?? String.Empty)"
      />
    </div>
    <div class="col">
      @((MarkupString) Preview)

    </div>
  </div>
}