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)
    {
      if(description == string.Empty)
      {
        description = assignmentContext.Assignment.Description;
        descriptionForPreview = description;
        this.InvokeAsync(this.StateHasChanged);
      }
      if(TemplateId == string.Empty || TemplateId == null)
      {
        UseTemplate = TemplateId != null && TemplateId != "";
        TemplateId = assignmentContext.Assignment.TemplateId;
        VariableValues = assignmentContext.Assignment.TemplateVariables;
        this.InvokeAsync(this.StateHasChanged);
      }
    }
  }
  public void Dispose()
  {
    assignmentContext.StateHasChanged -= reload;
  }

  private string description { get; set; } = string.Empty;
  private string descriptionForPreview { get; set; } = string.Empty;
  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);

  private void handleNewDescription(ChangeEventArgs e)
  {
    var newDescription = e.Value?.ToString();
    if (newDescription != string.Empty)
    {
      descriptionForPreview = newDescription;
      if (assignmentContext.Assignment != null)
      {
        var newAssignment = assignmentContext.Assignment with
        {
          Description = newDescription
        };
        assignmentContext.SaveAssignment(newAssignment);
      }
    }
  }

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

  private MarkupString preview { get => (MarkupString)Markdown.ToHtml(descriptionForPreview); }

  private void handleTemplateChange(ChangeEventArgs e)
  {
    if (assignmentContext.Assignment != null)
    {
      Console.WriteLine("input");
      var newValue = bool.Parse(e.Value?.ToString() ?? "false");
      UseTemplate = newValue;
      StateHasChanged();
      if(!newValue)
      {
        TemplateId = string.Empty;
        VariableValues = new Dictionary<string, string>();
        assignmentContext.SaveAssignment(
          assignmentContext.Assignment with
          {
            TemplateId = TemplateId,
            TemplateVariables = VariableValues
          }
        );
      }
    }
  }
}

@if(assignmentContext.Assignment != null && planner.LocalCourse != null)
{
  <div class="form-check form-switch">
    <input 
      class="form-check-input" 
      type="checkbox" 
      role="switch" 
      id="useTemplateForDescription"
      checked="@UseTemplate"
      @oninput="handleTemplateChange"
    />
    <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="handleNewDescription"
        />
      </div>
      <div class="col" @key="descriptionForPreview">
        @(preview)
      </div>
    </div>
  }
}