From a921fd6f904d388d080c987025d97589d727640f Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Wed, 2 Aug 2023 14:37:24 -0600
Subject: [PATCH] updated assignments preview

---
 .../Shared/Components/CheckIcon.razor         |  20 +++
 .../Shared/Components/SyncIcon.razor          |  40 ++++++
 .../Module/Assignment/AssignmentDetails.razor | 128 ++++++++++++------
 .../Shared/Module/ModuleDetail.razor          |   5 +-
 4 files changed, 149 insertions(+), 44 deletions(-)
 create mode 100644 Management.Web/Shared/Components/CheckIcon.razor
 create mode 100644 Management.Web/Shared/Components/SyncIcon.razor

diff --git a/Management.Web/Shared/Components/CheckIcon.razor b/Management.Web/Shared/Components/CheckIcon.razor
new file mode 100644
index 0000000..28e1c0c
--- /dev/null
+++ b/Management.Web/Shared/Components/CheckIcon.razor
@@ -0,0 +1,20 @@
+<svg 
+  width="24px" 
+  height="24px" 
+  viewBox="0 0 24 24" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path 
+    stroke="var(--bs-success-border-subtle)" 
+    d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" 
+    stroke-width="2"
+  />
+  <path 
+    stroke="var(--bs-success-border-subtle)" 
+    d="M9 12L10.6828 13.6828V13.6828C10.858 13.858 11.142 13.858 11.3172 13.6828V13.6828L15 10" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+  />
+</svg>
\ No newline at end of file
diff --git a/Management.Web/Shared/Components/SyncIcon.razor b/Management.Web/Shared/Components/SyncIcon.razor
new file mode 100644
index 0000000..cac5057
--- /dev/null
+++ b/Management.Web/Shared/Components/SyncIcon.razor
@@ -0,0 +1,40 @@
+<svg 
+  class="d-inline"
+  width="24px" 
+  height="24px" 
+  viewBox="0 0 24 24" 
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_429_11068)">
+    <path 
+      stroke="var(--bs-danger-border-subtle)" 
+      d="M3 11.9998C3 7.02925 7.02944 2.99982 12 2.99982C14.8273 2.99982 17.35 4.30348 19 6.34248" 
+      stroke-width="2.5" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"/>
+    <path 
+      stroke="var(--bs-danger-border-subtle)" 
+      d="M19.5 2.99982L19.5 6.99982L15.5 6.99982" 
+      stroke-width="2.5" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"/>
+    <path 
+      stroke="var(--bs-danger-border-subtle)" 
+      d="M21 11.9998C21 16.9704 16.9706 20.9998 12 20.9998C9.17273 20.9998 6.64996 19.6962 5 17.6572" 
+      stroke-width="2.5" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"/>
+    <path 
+      stroke="var(--bs-danger-border-subtle)" 
+      d="M4.5 20.9998L4.5 16.9998L8.5 16.9998" 
+      stroke-width="2.5" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_429_11068">
+    <rect width="24" height="24" fill="white"/>
+  </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/Management.Web/Shared/Module/Assignment/AssignmentDetails.razor b/Management.Web/Shared/Module/Assignment/AssignmentDetails.razor
index 62045ad..b927656 100644
--- a/Management.Web/Shared/Module/Assignment/AssignmentDetails.razor
+++ b/Management.Web/Shared/Module/Assignment/AssignmentDetails.razor
@@ -25,7 +25,8 @@
   {
     planner.StateHasChanged -= reload;
   }
-  private Modal? assignmentEditorModal {get; set;}
+  private Modal? assignmentEditorModal { get; set; }
+  private bool showAll { get; set; } = false;
 
   private void dropOnDate(DateTime dropDate)
   {
@@ -135,36 +136,61 @@
   <div class="card">
     <div class="card-body">
       <div class="card-title">
-        <h4 class="text-center">
-          @Assignment.name
-        </h4>
-        @if(isSyncedWithCanvas)
-        {
-          @if(planner.LocalCourse != null
-            && planner.LocalCourse.CanvasId != null
-            && planner.CanvasAssignments != null
-            && planner.CanvasModules != null 
-            && Assignment.NeedsUpdates(
-              planner.CanvasAssignments, 
-              planner.LocalCourse.AssignmentTemplates
-            )
-          )
+        <div class="row">
+          <div class="col">
+          </div>
+          <div class="col-8">
+            <h4 class="text-center">
+              @Assignment.name
+            </h4>
+            
+          </div>
+          <div class="col text-end">
+            @if(isSyncedWithCanvas)
+            {
+              @if(planner.LocalCourse != null
+                && planner.LocalCourse.CanvasId != null
+                && planner.CanvasAssignments != null
+                && planner.CanvasModules != null 
+                && Assignment.NeedsUpdates(
+                  planner.CanvasAssignments, 
+                  planner.LocalCourse.AssignmentTemplates
+                )
+              )
+              {
+                <SyncIcon />
+              }
+              else
+              {
+                <CheckIcon />
+              }
+            }
+            else
+            {
+              <div>Not Synced with Canvas</div>
+            }
+          </div>
+        </div>
+      </div>
+      @if(!showAll)
+      {
+        <div class="card-text overflow-hidden" style="max-height: 5rem;">
+          @* @if(Assignment.use_template)
           {
-            <div>Need to update canvas</div>
+            var html = Assignment.GetDescriptionHtml(planner.LocalCourse?.AssignmentTemplates);
+            @((MarkupString) html)
           }
           else
           {
-            <div>Canvas is up to date</div>
-          }
-        }
-        else
-        {
-          <div>Not Synced with Canvas</div>
-        }
-       </div>
-      <div class="card-text">
-        <div class="row">
-          <div class="col">
+            @Assignment.description
+          } *@
+          <div>Points: @Assignment.points_possible</div>
+          <div>Due At: @Assignment.due_at</div>
+        </div>
+       }
+       else
+       {
+          <div class="card-text">
             @if(Assignment.use_template)
             {
               var html = Assignment.GetDescriptionHtml(planner.LocalCourse?.AssignmentTemplates);
@@ -175,26 +201,18 @@
               @Assignment.description
             }
             
-          </div>
-          <div class="col-auto">
+            <hr>
             <div>Points: @Assignment.points_possible</div>
             <div>Due At: @Assignment.due_at</div>
             <div>Lock At: @Assignment.lock_at</div>
-            @if(Assignment.canvasId != null)
-            {
-              <div>Synced with canvas</div>
-            }
-            else
-            {
-              <div>Not synced with canvas</div>
-            }
-            <div class="text-center">
+            <br>
+            <h5>
               Rubric
-            </div>
+            </h5>
             @foreach(var rubricItem in Assignment.rubric)
             {
-              <div class="row  p-1">
-                <div class="col border-end my-auto text-end">
+              <div class="row m-0">
+                <div class="col border-end my-auto">
                   @rubricItem.Label
                 </div>
                 <div class="col-2 my-auto">
@@ -202,6 +220,7 @@
                 </div>
               </div>
             }
+            <br>
             <div>Submission Types:</div>
             <ul>
               @foreach(var type in Assignment.submission_types)
@@ -212,8 +231,33 @@
               }
             </ul>
           </div>
+       }
+      
+
+      @if(!showAll)
+      {
+        <div 
+          class="text-center" 
+          role="button" 
+          @onclick:preventDefault="true" 
+          @onclick:stopPropagation="true"
+          @onclick="() => showAll = true"
+        >
+          ...
         </div>
-      </div>
+      }
+      else
+      {
+        <div 
+          class="text-center" 
+          role="button" 
+          @onclick:preventDefault="true" 
+          @onclick:stopPropagation="true"
+          @onclick="() => showAll = false"
+        >
+          ...
+        </div>
+      }
 
     </div>
   </div>
diff --git a/Management.Web/Shared/Module/ModuleDetail.razor b/Management.Web/Shared/Module/ModuleDetail.razor
index 34cf62f..867bdb4 100644
--- a/Management.Web/Shared/Module/ModuleDetail.razor
+++ b/Management.Web/Shared/Module/ModuleDetail.razor
@@ -1,4 +1,5 @@
 
+@using Management.Web.Shared.Components
 @using Management.Web.Shared.Module.Assignment
 @using LocalModels
 
@@ -73,11 +74,11 @@
       </div>
       @if(isSyncedWithCanvas)
       {
-        <div>in canvas</div>
+        <CheckIcon />
       }
       else
       {
-        <div>not in canvas</div>
+        <SyncIcon />
       }
     </div>
     </button>