updated quiz form edtor

Management.Web/Shared/Components/Quiz/EditableQuizAnswer.razor

@@ -0,0 +1,88 @@
+
+
+@code {
+  [Parameter, EditorRequired]
+  public LocalQuizQuestionAnswer Answer { get; set; } = default!;
+  [Parameter, EditorRequired]
+  public LocalQuizQuestion Question { get; set; } = default!;
+
+  [Parameter, EditorRequired]
+  public Action<LocalQuizQuestionAnswer> SaveAnswer { get; set; } = (_) => {};
+
+  private string _text { get; set; } = string.Empty;
+  private string text 
+  { 
+    get => _text;
+    set
+    {
+      _text = value;
+      SaveAnswer(Answer with { Text = _text });
+    }
+  }
+
+  protected override void OnParametersSet()
+  {
+    if(_text == string.Empty)
+      _text = Answer.Text;
+    base.OnParametersSet();
+  }
+
+  private void handleOneAnswerChange()
+  {
+    SaveAnswer(Answer with {Correct = !Answer.Correct});
+  }
+}
+
+
+<div class="row">
+  <div class="col-auto my-auto">
+    @if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
+    {
+      <div class="form-check form-switch">
+        <input 
+          class="form-check-input" 
+          type="checkbox"
+          role="switch" 
+          id="@("answer_" + Answer.Id)"
+          checked="@Answer.Correct"
+          @onchange="@(() => handleOneAnswerChange())"
+        >
+        <label 
+          class="form-check-label" 
+          for="@("answer_" + Answer.Id)"
+        >
+          Is Correct
+        </label>
+      </div>
+    }
+    @if(Question.QuestionType == QuestionType.MULTIPLE_CHOICE)
+    {
+      <div class="form-check">
+        <input 
+          class="form-check-input" 
+          type="radio" 
+          name="@("correct_answer_" + Question.Id)"
+          id="@("answer_" + Answer.Id)"
+          checked="@Answer.Correct"
+
+          @onchange="@(() => handleOneAnswerChange())"
+        >
+        <label
+          class="form-check-label" 
+          for="@("answer_" + Answer.Id)"
+        >
+          Is Correct
+        </label>
+      </div>
+    }
+  </div>
+  <div class="col">
+    <div class="m-1">
+      <textarea 
+        class="form-control"
+        @bind="text"
+        @bind:event="oninput"
+      />
+    </div>
+  </div>
+</div>

Management.Web/Shared/Components/Quiz/QuizForm.razor

@@ -3,6 +3,8 @@
 
 @code {
   private Modal? modal { get; set; }
+  private string name { get; set; } = "";
+  private string description { get; set; } = "";
 
   protected override void OnInitialized()
   {
@@ -12,7 +14,9 @@
   {
     if (quizContext.Quiz != null)
     {
-      //initialize
+      name = quizContext.Quiz.Name;
+      description = quizContext.Quiz.Description;
+
       modal?.Show();
       this.InvokeAsync(this.StateHasChanged);
     }
@@ -21,6 +25,76 @@
   {
     quizContext.StateHasChanged -= reload;
   }
+
+  private void addQuestion()
+  {
+    if(quizContext.Quiz != null)
+    {
+      var newQuestion = new LocalQuizQuestion
+      {
+        Id = Guid.NewGuid().ToString()
+      };
+      var newQuiz = quizContext.Quiz with
+      {
+        Questions = quizContext.Quiz.Questions.Append(newQuestion).ToArray()
+      };
+      quizContext.SaveQuiz(newQuiz);
+    }
+  }
+
+  private void removeQuestion()
+  {
+    if(quizContext.Quiz != null)
+    {
+      var newQuestion = new LocalQuizQuestion();
+      var newQuiz = quizContext.Quiz with
+      {
+        Questions = quizContext.Quiz.Questions.Take(quizContext.Quiz.Questions.Count() - 1)
+      };
+      quizContext.SaveQuiz(newQuiz);
+    }
+  }
+
+  private void updateQuestion(LocalQuizQuestion updatedQuestion)
+  {
+    if(quizContext.Quiz != null)
+    {
+      var newQuestions = quizContext.Quiz.Questions.Select(q => 
+        q.Id == updatedQuestion.Id
+          ? updatedQuestion
+          : q
+      );
+      var newQuiz = quizContext.Quiz with
+      {
+        Questions = newQuestions,
+      };
+      quizContext.SaveQuiz(newQuiz);
+    }
+  }
+
+  private void handleNewName(ChangeEventArgs e)
+  {
+    if(quizContext.Quiz != null)
+    {
+      var newQuiz = quizContext.Quiz with
+      {
+        Name = e.Value?.ToString() ?? ""
+      };
+      quizContext.SaveQuiz(newQuiz);
+    }
+  }
+  private void handleNewDescription(ChangeEventArgs e)
+  {
+    if(quizContext.Quiz != null)
+    {
+      var newQuiz = quizContext.Quiz with
+      {
+        Description = e.Value?.ToString() ?? ""
+      };
+      quizContext.SaveQuiz(newQuiz);
+    }
+  }
+
 }
 
 <Modal @ref="modal" OnHide="() => quizContext.Quiz = null" >
@@ -28,7 +102,51 @@
     @quizContext.Quiz?.Name
   </Title>
   <Body>
+    @if(quizContext.Quiz != null)
+    {
+      <div class="m-1">
+        <label class="form-label">
+          Name
+        </label>
+        <input 
+          class="form-control" 
+          @bind="name"
+          @oninput="handleNewName" 
+        />
+      </div>
+      <div class="m-1">
+        <label class="form-label">
+          Description
+        </label>
+        <textarea 
+          class="form-control" 
+          @bind="description"
+          @oninput="handleNewDescription" 
+        />
+      </div>
 
+      @foreach(var question in quizContext.Quiz.Questions)
+      {
+        <QuizQuestionForm 
+          @key="@question.Id" 
+          Question="question"
+          UpdateQuestion="updateQuestion"  
+        />
+      }
+
+      <button 
+        class="btn btn-outline-danger"
+        @onclick="removeQuestion"
+      >
+        - question
+      </button>
+      <button 
+        class="btn btn-outline-primary"
+        @onclick="addQuestion"
+      >
+        + question
+      </button>
+    }
   </Body>
   <Footer>
     <button 

Management.Web/Shared/Components/Quiz/QuizQuestionForm.razor

@@ -0,0 +1,157 @@
+@inject QuizEditorContext quizContext
+
+@code {
+  [Parameter, EditorRequired]
+  public LocalQuizQuestion Question { get; set; } = default!;
+  [Parameter, EditorRequired]
+  public Action<LocalQuizQuestion> UpdateQuestion { get; set; } = (_) => {};
+
+  protected override void OnParametersSet()
+  {
+    if(questionType == string.Empty)
+      questionType = Question.QuestionType;
+    if(text == string.Empty)
+      text = Question.Text;
+
+    if(answers.Count() == 0)
+      answers = Question.Answers;
+
+    base.OnParametersSet();
+  }
+  private string text { get; set; } = string.Empty;
+  private string questionType { get; set; } = string.Empty;
+  private IEnumerable<LocalQuizQuestionAnswer> answers { get; set; } = Enumerable.Empty<LocalQuizQuestionAnswer>();
+
+  private void handleTypeUpdate(string type)
+  {
+    if(quizContext.Quiz != null)
+    {
+      questionType = type;
+      var newQuestion = Question with 
+      {
+        QuestionType = questionType
+      };
+
+      UpdateQuestion(newQuestion);
+    }
+  }
+
+  private void addAnswer()
+  {
+    if(quizContext.Quiz != null)
+    {
+      var newAnswer = new LocalQuizQuestionAnswer
+        { Id = Guid.NewGuid().ToString() };
+      
+      answers = answers.Append(newAnswer);
+      UpdateQuestion(Question with { Answers = answers });
+    }
+  }
+
+  private void removeAnswer()
+  {
+
+    if(quizContext.Quiz != null)
+    {
+      var newAnswer = new LocalQuizQuestionAnswer
+        { Id = Guid.NewGuid().ToString() };
+      
+      answers = answers.Take(Question.Answers.Count() - 1);
+      UpdateQuestion(Question with { Answers = answers });
+    }
+  }
+
+  private void saveAnswer(LocalQuizQuestionAnswer newAnswer)
+  {
+    if(questionType == QuestionType.MULTIPLE_CHOICE && newAnswer.Correct)
+    {
+      answers = answers.Select(a => 
+       a.Id == newAnswer.Id
+          ? newAnswer
+          : a with { Correct = false }
+      ).ToArray();
+    }
+    else
+    {
+      answers = answers.Select(a => 
+        a.Id == newAnswer.Id
+          ? newAnswer
+          : a
+      ).ToArray();
+    }
+
+    UpdateQuestion(Question with { Answers = answers });
+  }
+}
+
+<div class="my-1 p-2 border border-3 rounded">
+
+  <div class="row">
+    <div class="col">
+      <label 
+        for="question_text"
+        class="form-label"
+      >
+        Question Text
+      </label>
+      <textarea 
+        class="form-control"
+        id="question_text"
+        name="question_text"
+        @bind="text"
+      />
+    </div>
+    <div class="col-auto">
+      @foreach(var typeOption in QuestionType.AllTypes)
+      {
+        <div class="form-check">
+          <input 
+            class="form-check-input" 
+            type="radio" 
+            name="@(Question.Id + "question_type")"
+            id="@(Question.Id + typeOption)"
+            value="@typeOption"
+            checked="@(typeOption == questionType)"
+            @onchange="() => handleTypeUpdate(typeOption)"
+          >
+          <label
+            class="form-check-label" 
+            for="@(Question.Id + typeOption)"
+          >
+            @typeOption
+          </label>
+        </div>
+      }
+    </div>
+  </div>
+  <div>Answers:</div>
+
+    @if(questionType == QuestionType.MULTIPLE_ANSWERS || questionType == QuestionType.MULTIPLE_CHOICE)
+    {
+
+      @foreach(var answer in answers)
+      {
+        <EditableQuizAnswer
+          Answer="answer" 
+          SaveAnswer="saveAnswer" 
+          Question="Question"
+        />
+      }
+      <button 
+        class="btn btn-outline-danger"
+        @onclick="removeAnswer"
+      >
+        - Remove Answer
+      </button>
+      <button 
+        class="btn btn-outline-primary"
+        @onclick="addAnswer"
+      >
+        + Add Answer
+      </button>
+      
+    }
+    <div>
+
+  </div>
+</div>