From 8d83e0ecd4844264f66c3b36902b4c2af2a6f88e Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Wed, 15 Nov 2023 11:23:36 -0700
Subject: [PATCH] added monaco editor to assignment page

---
 .vscode/launch.json                           |  33 ++++
 .vscode/tasks.json                            |  41 +++++
 Management.Web/Pages/AssignmentFormPage.razor |   5 +-
 Management.Web/Pages/_Host.cshtml             |   8 +-
 .../AssignmentDescriptionEditor.razor         |  21 +--
 .../AssignmentForm/AssignmentForm.razor       | 170 +++++++++---------
 .../AssignmentForm/RubricMarkdownEditor.razor |  25 ++-
 .../Components/Forms/ButtonSelect.razor       |   6 +-
 .../Shared/Components/MonacoTextArea.razor    |  11 +-
 Management/Models/Local/LocalQuiz.cs          |   2 +
 Management/Models/Local/LocalQuizQuestion.cs  |   3 +-
 .../Models/Local/LocalQuizQuestionAnswer.cs   |   2 +-
 .../Services/Canvas/CanvasQuizService.cs      |   2 +-
 13 files changed, 201 insertions(+), 128 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 .vscode/tasks.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..e50248a
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,33 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": ".NET Core Launch (web)",
+      "type": "coreclr",
+      "request": "launch",
+      "preLaunchTask": "build",
+      "program": "${workspaceFolder}/Management.Web/bin/Debug/net8.0/Management.Web.dll",
+      "args": [],
+      "cwd": "${workspaceFolder}/Management.Web",
+      "stopAtEntry": false,
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+      },
+      "env": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "sourceFileMap": {
+        "/Views": "${workspaceFolder}/Views"
+      }
+    },
+    {
+      "name": ".NET Core Attach",
+      "type": "coreclr",
+      "request": "attach"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..a44ef38
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,41 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "build",
+        "${workspaceFolder}/Management.Web/Management.Web.csproj",
+        "/property:GenerateFullPaths=true",
+        "/consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "publish",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "publish",
+        "${workspaceFolder}/Management.Web/Management.Web.csproj",
+        "/property:GenerateFullPaths=true",
+        "/consoleloggerparameters:NoSummary;ForceNoAlign"
+      ],
+      "problemMatcher": "$msCompile"
+    },
+    {
+      "label": "watch",
+      "command": "dotnet",
+      "type": "process",
+      "args": [
+        "watch",
+        "run",
+        "--project",
+        "${workspaceFolder}/Management.Web/Management.Web.csproj"
+      ],
+      "problemMatcher": "$msCompile"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/Management.Web/Pages/AssignmentFormPage.razor b/Management.Web/Pages/AssignmentFormPage.razor
index 75b2ae2..96c9ff5 100644
--- a/Management.Web/Pages/AssignmentFormPage.razor
+++ b/Management.Web/Pages/AssignmentFormPage.razor
@@ -56,7 +56,7 @@
   }
 
 }
-
+<div style="height: 100vh;" class="m-0 p-1">
 @if (loading)
 {
   <Spinner />
@@ -65,4 +65,5 @@
 @if (planner.LocalCourse != null && assignmentContext.Assignment != null)
 {
   <AssignmentForm />
-}
\ No newline at end of file
+}
+</div>
\ No newline at end of file
diff --git a/Management.Web/Pages/_Host.cshtml b/Management.Web/Pages/_Host.cshtml
index 3b5bc76..77bda7d 100644
--- a/Management.Web/Pages/_Host.cshtml
+++ b/Management.Web/Pages/_Host.cshtml
@@ -18,15 +18,17 @@
     <link href="css/site.css" rel="stylesheet" />
     <link href="Management.Web.styles.css" rel="stylesheet" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+
     <link
         href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Kanit&family=Mukta&family=Roboto&family=Sofia+Sans+Condensed:wght@400;500&display=swap"
         rel="stylesheet">
 
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,600&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
 
+
+    <link rel="icon" type="image/png" href="favicon.png" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 
diff --git a/Management.Web/Shared/Components/AssignmentForm/AssignmentDescriptionEditor.razor b/Management.Web/Shared/Components/AssignmentForm/AssignmentDescriptionEditor.razor
index da5f9dd..1114ff5 100644
--- a/Management.Web/Shared/Components/AssignmentForm/AssignmentDescriptionEditor.razor
+++ b/Management.Web/Shared/Components/AssignmentForm/AssignmentDescriptionEditor.razor
@@ -42,9 +42,8 @@
     .AssignmentTemplates
     .FirstOrDefault(t => t.Id == TemplateId);
 
-  private void handleNewDescription(ChangeEventArgs e)
+  private void handleNewDescription(string newDescription)
   {
-    var newDescription = e.Value?.ToString();
     if (newDescription != string.Empty)
     {
       descriptionForPreview = newDescription;
@@ -65,25 +64,17 @@
 
 @if(assignmentContext.Assignment != null && planner.LocalCourse != null)
 {
-  <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="row h-100">
     <div class="col-6">
-      <textarea 
+      @* <textarea 
         id="description" 
         class="form-control h-100" 
         rows=12
         @bind="description"
         @oninput="handleNewDescription"
-      />
+      /> *@
+
+      <MonacoTextArea Value="@description" OnChange="@handleNewDescription" />
     </div>
     <div class="col-6" @key="descriptionForPreview">
       @(preview)
diff --git a/Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor b/Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor
index 8a7c37f..e685608 100644
--- a/Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor
+++ b/Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor
@@ -159,7 +159,7 @@
     planner.CanvasAssignments?.FirstOrDefault(a => a.Name == assignmentContext.Assignment?.Name);
 
   private string canvasAssignmentUrl =>
-  $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/assignments/{assignmentInCanvas?.Id}";
+    $"https://snow.instructure.com/courses/{planner.LocalCourse?.Settings.CanvasId}/assignments/{assignmentInCanvas?.Id}";
 
   private async Task deleteFromCanvas()
   {
@@ -173,103 +173,105 @@
     await canvas.Assignments.Delete(
       (ulong)planner.LocalCourse.Settings.CanvasId, 
       assignmentInCanvas.Id,
-      assignmentContext.Assignment.Name);
+      assignmentContext.Assignment.Name
+    );
     await planner.LoadCanvasData();
     deletingAssignmentFromCanvas = false;
     StateHasChanged();
   }
 }
 
-@assignmentContext.Assignment?.Name
 
-@if (assignmentContext.Assignment != null)
-{
-  <div class="m-1">
-  <label class="form-label">
-    Name
-  </label>
-  <input class="form-control" @bind="name" @oninput="handleNameChange" />
-</div>
-  <ButtonSelect 
-    Label="Assignment Group" 
-    Options="planner.LocalCourse?.Settings.AssignmentGroups" 
-    GetName="(g) => g?.Name"
-    OnSelect="(g) => setAssignmentGroup(g)" 
-    SelectedOption="selectedAssignmentGroup" 
-  />
-  <div class="m-1">
-    <AssignmentDescriptionEditor />
+
+<div class="d-flex flex-column h-100">
+  <div>
+    @assignmentContext.Assignment?.Name
+  </div>
+  <div class="flex-grow-1 d-flex flex-column">
+    @if (assignmentContext.Assignment != null)
+    {
+      <div class="m-1">
+        <label class="form-label">
+          Name
+        </label>
+        <input class="form-control" @bind="name" @oninput="handleNameChange" />
+      </div>
+
+        <ButtonSelect  
+          Label="Assignment Group" 
+          Options="planner.LocalCourse?.Settings.AssignmentGroups" 
+          GetName="(g) => g?.Name"
+          OnSelect="(g) => setAssignmentGroup(g)" 
+          SelectedOption="selectedAssignmentGroup" 
+        />
+      <div class="m-1 flex-grow-1">
+        <AssignmentDescriptionEditor />
+      </div>
+
+      <div class="form-check m-1">
+        <input class="form-check-input" id="lockAtDueDate" type="checkbox" @bind="lockAtDueDate"
+        @oninput="handleLockAtDueDateChange" />
+        <label class="form-check-label" for="lockAtDueDate">
+          Lock At Due Date
+        </label>
+      </div>
+      <div class="container">
+        <RubricMarkdownEditor />
+        <hr>
+        <div class="mx-5 px-5">
+          <SubmissionTypeSelector />
+        </div>
+      </div>
+    }
   </div>
 
-  <div class="form-check m-1">
-    <input class="form-check-input" id="lockAtDueDate" type="checkbox" @bind="lockAtDueDate"
-    @oninput="handleLockAtDueDateChange" />
-    <label class="form-check-label" for="lockAtDueDate">
-      Lock At Due Date
-    </label>
-  </div>
-  <div class="container">
-    <RubricMarkdownEditor />
-    <hr>
-    <div class="mx-5 px-5">
-      <SubmissionTypeSelector />
-    </div>
-  </div>
-}
+  <div class="d-flex justify-content-end  p-3">
 
-<div class="d-flex justify-content-end m-3">
+    <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />
 
-  <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />
-
-  <button 
-    class="btn btn-outline-secondary mx-3" 
-    disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-    @onclick="addToCanvas"
-  >
-    Add To Canvas
-  </button>
-  @if (assignmentInCanvas != null)
-  {
-    <a 
-      class="btn btn-outline-secondary me-1" 
-      href="@canvasAssignmentUrl" 
-      target="_blank"
-      disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-    >
-      View in Canvas
-    </a>
     <button 
       class="btn btn-outline-secondary mx-3" 
       disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-      @onclick="updateInCanvas"
+      @onclick="addToCanvas"
     >
-      Update In Canvas
+      Add To Canvas
     </button>
-    <ConfirmationModal 
-      Disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
-      Label="Delete from Canvas" 
-      Class="btn btn-outline-danger mx-3" 
-      OnConfirmAsync="deleteFromCanvas" 
-    />
-  }
-  <button class="btn btn-primary mx-2" @onclick="@(() => {
-      assignmentContext.Assignment = null;
-      Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
-    })">
-    Done
-  </button>
-</div>
+    @if (assignmentInCanvas != null)
+    {
+      <a 
+        class="btn btn-outline-secondary me-1" 
+        href="@canvasAssignmentUrl" 
+        target="_blank"
+        disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
+      >
+        View in Canvas
+      </a>
+      <button 
+        class="btn btn-outline-secondary mx-3" 
+        disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
+        @onclick="updateInCanvas"
+      >
+        Update In Canvas
+      </button>
+      <ConfirmationModal 
+        Disabled="@(addingAssignmentToCanvas || deletingAssignmentFromCanvas)"
+        Label="Delete from Canvas" 
+        Class="btn btn-outline-danger mx-3" 
+        OnConfirmAsync="deleteFromCanvas" 
+      />
+    }
+    <button class="btn btn-primary mx-2" @onclick="@(() => {
+        assignmentContext.Assignment = null;
+        Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name);
+      })">
+      Done
+    </button>
+  </div>
 
-@if (addingAssignmentToCanvas || deletingAssignmentFromCanvas)
-{
-  <Spinner />
-}
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
\ No newline at end of file
+  @if (addingAssignmentToCanvas || deletingAssignmentFromCanvas)
+  {
+    <div>
+      <Spinner />
+    </div>
+  }
+</div>
\ No newline at end of file
diff --git a/Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor b/Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor
index da59838..370294b 100644
--- a/Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor
+++ b/Management.Web/Shared/Components/AssignmentForm/RubricMarkdownEditor.razor
@@ -5,7 +5,7 @@
 
 @code
 {
-  private IEnumerable<RubricItem> displayRubric { get; set; } = new RubricItem[] {};
+  private IEnumerable<RubricItem> displayRubric { get; set; } = new RubricItem[] { };
   private string _rubricText = "";
   private string rubricText
   {
@@ -22,9 +22,9 @@
         if (assignmentContext.Assignment != null)
         {
           var newAssignment = assignmentContext.Assignment with
-          {
-            Rubric = parsedRubric,
-          };
+            {
+              Rubric = parsedRubric,
+            };
           assignmentContext.SaveAssignment(newAssignment);
         }
       }
@@ -49,7 +49,7 @@
   {
     if (assignmentContext.Assignment != null)
     {
-      if(rubricText == string.Empty)
+      if (rubricText == string.Empty)
       {
         rubricText = assignmentContext.Assignment.RubricToMarkdown();
       }
@@ -68,31 +68,26 @@
 
 <br>
 <div class="row">
-    <h4 class="text-center">Rubric</h4>
+  <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" 
-    />
+    @* <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)
+    @foreach (var item in displayRubric)
     {
       <div class="row border-bottom">
         <div class="col-6 text-end">@item.Label</div>
diff --git a/Management.Web/Shared/Components/Forms/ButtonSelect.razor b/Management.Web/Shared/Components/Forms/ButtonSelect.razor
index 4f978f2..8dbf30d 100644
--- a/Management.Web/Shared/Components/Forms/ButtonSelect.razor
+++ b/Management.Web/Shared/Components/Forms/ButtonSelect.razor
@@ -13,7 +13,7 @@
   public Action<T?> OnSelect { get; set; } = default!;
 
   [Parameter]
-  public T? SelectedOption { get; set; }
+  public T? SelectedOption { get; set; }  
 
   private string htmlLabel => Label.Replace("-", "");
 
@@ -30,10 +30,10 @@
   }
 }
 
-<div>
+<div key="@GetName(SelectedOption)">
   @foreach(var option in Options)
   {
-    <button 
+    <button
       class="@getButtonClass(option)" 
       @onclick="() => onSelect(option)"
     >
diff --git a/Management.Web/Shared/Components/MonacoTextArea.razor b/Management.Web/Shared/Components/MonacoTextArea.razor
index 483a27c..66ee22c 100644
--- a/Management.Web/Shared/Components/MonacoTextArea.razor
+++ b/Management.Web/Shared/Components/MonacoTextArea.razor
@@ -9,6 +9,8 @@
   [Parameter, EditorRequired]
   public Action<string> OnChange { get; set; }
 
+  private string randomId = "monaco-editor-" + BitConverter.ToString(new byte[16].Select(b => (byte)new Random().Next(256)).ToArray()).Replace("-", "");
+
 
   private StandaloneCodeEditor _editor = null!;
   
@@ -25,8 +27,11 @@
       LineDecorationsWidth = 0,
       WordWrap = "on",
       AutomaticLayout = true,
-      FontFamily = "DM Mono, monospace",
+      FontFamily = "Roboto-mono",
       FontSize = 16,
+      Padding = new EditorPaddingOptions() {
+        Top = 10
+      }
     };
   }
 
@@ -38,8 +43,8 @@
 }
 
 <StandaloneCodeEditor 
-  @ref="_editor" 
-  Id="sample-code-editor-123" 
+  @ref="_editor"
+  Id="@randomId"
   ConstructionOptions="EditorConstructionOptions" 
   OnDidChangeModelContent="OnDidChangeModelContent"
 />
\ No newline at end of file
diff --git a/Management/Models/Local/LocalQuiz.cs b/Management/Models/Local/LocalQuiz.cs
index fd2b49a..c56cc68 100644
--- a/Management/Models/Local/LocalQuiz.cs
+++ b/Management/Models/Local/LocalQuiz.cs
@@ -26,6 +26,8 @@ public record LocalQuiz
       .FirstOrDefault(g => g.Name == LocalAssignmentGroupName)?
       .CanvasId;
 
+  public string GetDescriptionHtml() => Markdig.Markdown.ToHtml(Description);
+  
   public string ToYaml()
   {
     var serializer = new SerializerBuilder().DisableAliases().Build();
diff --git a/Management/Models/Local/LocalQuizQuestion.cs b/Management/Models/Local/LocalQuizQuestion.cs
index 3b08b86..904511c 100644
--- a/Management/Models/Local/LocalQuizQuestion.cs
+++ b/Management/Models/Local/LocalQuizQuestion.cs
@@ -26,8 +26,9 @@ public record LocalQuizQuestion
         : $"[{correctIndicator}] ";
 
       // var textWithSpecificNewline = answer.Text.Replace(Environment.NewLine, Environment.NewLine + "   ");
+
       var multilineMarkdownCompatibleText = answer.Text.StartsWith("```")
-        ? Environment.NewLine + answer.Text
+        ? Environment.NewLine + answer.Text 
         : answer.Text;
       return $"{questionTypeIndicator}{multilineMarkdownCompatibleText}";
     });
diff --git a/Management/Models/Local/LocalQuizQuestionAnswer.cs b/Management/Models/Local/LocalQuizQuestionAnswer.cs
index 7468fd0..72b6a1e 100644
--- a/Management/Models/Local/LocalQuizQuestionAnswer.cs
+++ b/Management/Models/Local/LocalQuizQuestionAnswer.cs
@@ -19,7 +19,7 @@ public record LocalQuizQuestionAnswer
     return new LocalQuizQuestionAnswer()
     {
       Correct = isCorrect,
-      Text=text,
+      Text = text,
     };
   }
 }
diff --git a/Management/Services/Canvas/CanvasQuizService.cs b/Management/Services/Canvas/CanvasQuizService.cs
index 92dffa6..b35c9d8 100644
--- a/Management/Services/Canvas/CanvasQuizService.cs
+++ b/Management/Services/Canvas/CanvasQuizService.cs
@@ -41,7 +41,7 @@ public class CanvasQuizService(
       quiz = new
       {
         title = localQuiz.Name,
-        description = localQuiz.Description,
+        description = localQuiz.GetDescriptionHtml(),
         // assignment_group_id = "quiz", // TODO: support specific assignment groups
         // time_limit = localQuiz.TimeLimit,
         shuffle_answers = localQuiz.ShuffleAnswers,