improved rubric editor

Management.Web/Shared/Module/Assignment/AssignmentDetails.razor

@@ -84,7 +84,28 @@
         {
           <div>Not synced with canvas</div>
         }
-        <code>@JsonSerializer.Serialize(Assignment.rubric)</code>
+        <div class="ms-3">
+
+          <div class="row  p-1">
+            <div class="col border-end my-auto text-end">
+              Label
+            </div>
+            <div class="col my-auto">
+              Points
+            </div>
+          </div>
+          @foreach(var rubricItem in Assignment.rubric)
+          {
+            <div class="row  p-1">
+              <div class="col border-end my-auto text-end">
+                @rubricItem.Label
+              </div>
+              <div class="col my-auto">
+                @rubricItem.Points
+              </div>
+            </div>
+          }
+        </div>
       </div>
 
     </div>

Management.Web/Shared/Module/Assignment/AssignmentForm.razor

@@ -40,13 +40,17 @@
 
   private void submitHandler()
   {
+    var totalRubricPoints = rubric
+      .Where(r => !r.Label.Contains(RubricItem.extraCredit))
+      .Select(s => s.Points)
+      .Sum();
     var newAssignment = Assignment with 
     {
       description=description,
       lock_at_due_date=lockAtDueDate,
       rubric=rubric,
+      points_possible=totalRubricPoints,
     };
-    System.Console.WriteLine(JsonSerializer.Serialize(newAssignment));
 
     if(planner.LocalCourse != null)
     {

Management.Web/Shared/Module/Assignment/RubricEditor.razor

@@ -28,6 +28,32 @@
     SetRubric(newRubric);
     StateHasChanged();
   }
+  private void MoveUp(RubricItem item)
+  {
+    var rubricList = Rubric.ToList();
+    var index = rubricList.IndexOf(item);
+
+    if(index > 0)
+    {
+      var previous = rubricList[index - 1];
+      rubricList[index - 1] = item;
+      rubricList[index] = previous;
+      SetRubric(rubricList);
+    }
+  }
+  private void MoveDown(RubricItem item)
+  {
+    var rubricList = Rubric.ToList();
+    var index = rubricList.IndexOf(item);
+
+    if(index < rubricList.Count())
+    {
+      var next = rubricList[index + 1];
+      rubricList[index + 1] = item;
+      rubricList[index] = next;
+      SetRubric(rubricList);
+    }
+  }
 }
 
 <br>
@@ -35,15 +61,22 @@
 <ul class="list-group">
   @foreach (var rubricItem in Rubric)
   {
-    <RubricEditorItem RubricItem="rubricItem" OnUpdate="editItem" />
+    <RubricEditorItem 
+      RubricItem="rubricItem" 
+      OnUpdate="editItem"
+      MoveUp="() => MoveUp(rubricItem)"
+      MoveDown="() => MoveDown(rubricItem)"
+    />
   }
 </ul>
 
-<button
+<div class="text-end my-1">
+  <button
     @onclick:preventDefault="true"
     @onclick="addItem"
     type="button"
     class="btn btn-outline-primary"
->
+  >
     + rubric item
-</button>
+  </button>
+</div>

Management.Web/Shared/Module/Assignment/RubricEditorItem.razor

@@ -8,6 +8,10 @@
 
   [Parameter, EditorRequired]
   public Action<RubricItem> OnUpdate { get; set; } = default!;
+  [Parameter, EditorRequired]
+  public Action MoveUp { get; set; } = default!;
+  [Parameter, EditorRequired]
+  public Action MoveDown { get; set; } = default!;
   private void editItem(string label, int points)
   {
     var newRubricItem = RubricItem with
@@ -16,7 +20,6 @@
       Points = points
     };
     OnUpdate(newRubricItem);
-
   }
 }
 
@@ -25,7 +28,12 @@
 >
   <div class="row">
     <div class="col">
-      <label for="rubricLabel">Label</label>
+      <label 
+        for="rubricLabel"
+        class="form-label"
+      >
+        Label
+      </label>
       <input 
         class="form-control"
         id="rubricLabel"
@@ -35,7 +43,12 @@
       />
     </div>
     <div class="col">
-      <label for="rubricPoints">Points</label>
+      <label
+        for="rubricPoints"
+        class="form-label"
+      >
+        Points
+      </label>
       <input 
         class="form-control"
         id="rubricPoints"
@@ -48,5 +61,62 @@
         type="number" 
       />
     </div>
+    <div class="col-auto">
+      <label 
+        class="form-check-label" 
+        for="flexCheckDefault"
+      >
+        Extra Credit
+      </label>
+      <div class="form-check form-switch">
+        <input 
+          class="form-check-input" 
+          type="checkbox" 
+          checked="@RubricItem.Label.Contains(RubricItem.extraCredit)" 
+          @oninput="@(e => {
+            bool value = (bool) (e.Value ?? false);
+            var newLabel = value
+              ? RubricItem.extraCredit + RubricItem.Label
+              : RubricItem.Label.Replace(RubricItem.extraCredit, "");
+            editItem(newLabel, RubricItem.Points);
+          })" 
+          id="extraCredit"
+          name="extraCredit"
+          role="switch"
+        >
+      </div>
+    </div>
+    <div class="col-auto">
+      <div >
+        <svg 
+          width="2em" 
+          height="2em" 
+          viewBox="-0.5 0 25 25" 
+          fill="none"
+          stroke="rgb(173, 181, 189)"
+          xmlns="http://www.w3.org/2000/svg"
+          role="button"
+          @onclick="MoveUp"
+        >
+          <path d="M8 13.8599L10.87 10.8C11.0125 10.6416 11.1868 10.5149 11.3815 10.4282C11.5761 10.3415 11.7869 10.2966 12 10.2966C12.2131 10.2966 12.4239 10.3415 12.6185 10.4282C12.8132 10.5149 12.9875 10.6416 13.13 10.8L16 13.8599" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M3 7.41992L3 17.4199C3 19.6291 4.79086 21.4199 7 21.4199H17C19.2091 21.4199 21 19.6291 21 17.4199V7.41992C21 5.21078 19.2091 3.41992 17 3.41992H7C4.79086 3.41992 3 5.21078 3 7.41992Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <div>
+        <svg 
+          width="2em" 
+          height="2em" 
+          viewBox="-0.5 0 25 25" 
+          fill="none"
+          stroke="rgb(173, 181, 189)"
+          xmlns="http://www.w3.org/2000/svg"
+          role="button"
+          @onclick="MoveDown"
+        >
+          <path d="M16 10.99L13.1299 14.05C12.9858 14.2058 12.811 14.3298 12.6166 14.4148C12.4221 14.4998 12.2122 14.5437 12 14.5437C11.7878 14.5437 11.5779 14.4998 11.3834 14.4148C11.189 14.3298 11.0142 14.2058 10.87 14.05L8 10.99"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M21 17.4199V7.41992C21 5.21078 19.2091 3.41992 17 3.41992L7 3.41992C4.79086 3.41992 3 5.21078 3 7.41992V17.4199C3 19.6291 4.79086 21.4199 7 21.4199H17C19.2091 21.4199 21 19.6291 21 17.4199Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>
   </div>
 </li>

Management/Models/LocalAssignment.cs

@@ -1,5 +1,6 @@
 public record RubricItem
 {
+  public static readonly string extraCredit = "(Extra Credit) ";
   public string Id { get; set; } = "";
   public string Label { get; set; } = "";
   public int Points { get; set; } = 0;