[FEATURE] [MER-3807] My assignments student view (#5250)

* rename /assignments route to /schedule * add assignments liveview v0.1 + add link to student sidebar * add hero banner * implement Assignments dark figma design + extend SectionResourceDepot.grade_pages to support extra query conditions * merge student settings with raw assignments * solve route conflict between student and instructor liveview * merge student data into assignment + update UI with student data per assignment * toggle completed pages visibility * refactor toggle_visibility_button and move it to Utils module * implement temporary assigns and manual gc to reduce memory usage * navigate to page * add request path for prologue pages * slim assigns to reduce memory usage * add page icon based on assignment purpose and completion state * add light mode * change visible and hidden icons to grab current color * add tests * remove typo * fix flaky test
Simon-Initiative · Nov 14, 2024 · b42cf95 · b42cf95
1 parent 302be58
commit b42cf95
Show file tree

Hide file tree

Showing 19 changed files with 865 additions and 44 deletions.
diff --git a/assets/static/images/gradients/assignments-bg.png b/assets/static/images/gradients/assignments-bg.png
diff --git a/lib/oli/delivery/paywall.ex b/lib/oli/delivery/paywall.ex
@@ -791,12 +791,16 @@ defmodule Oli.Delivery.Paywall do
                fragment(
                  """
                    CASE
-                     WHEN ? = 'deferred' THEN 1
-                     WHEN ? = 'direct' THEN 2
-                     ELSE 3
+                     WHEN ? = 'bypass' THEN 1
+                     WHEN ? = 'deferred' THEN 2
+                     WHEN ? = 'direct' THEN 3
+                     WHEN ? = 'invalidated' THEN 4
+                     ELSE 5
                    END
                  """,
                  p.type,
+                 p.type,
+                 p.type,
                  p.type
                )},
               {:desc, p.generation_date}

diff --git a/lib/oli/delivery/sections/section_resource_depot.ex b/lib/oli/delivery/sections/section_resource_depot.ex
@@ -69,13 +69,25 @@ defmodule Oli.Delivery.Sections.SectionResourceDepot do
 
   @doc """
   Returns a list of SectionResource records for all graded pages for a given section.
+
+  An optional keyword list can be passed to extend the filtering conditions.
+
+  Example:
+    SectionResourceDepot.graded_pages(some_section_id, [hidden: false])
   """
-  def graded_pages(section_id) do
+  def graded_pages(section_id, additional_query_conditions \\ []) do
     init_if_necessary(section_id)
 
     page = Oli.Resources.ResourceType.id_for_page()
 
-    Depot.query(@depot_desc, section_id, graded: true, resource_type_id: page)
+    query_conditions =
+      Keyword.merge([graded: true, resource_type_id: page], additional_query_conditions)
+
+    Depot.query(
+      @depot_desc,
+      section_id,
+      query_conditions
+    )
     |> Enum.sort_by(& &1.numbering_index)
   end
 

diff --git a/lib/oli_web/components/delivery/layouts.ex b/lib/oli_web/components/delivery/layouts.ex
@@ -520,6 +520,16 @@ defmodule OliWeb.Components.Delivery.Layouts do
         <:text>Notes</:text>
       </.nav_link>
 
+      <.nav_link
+        id="assignments_nav_link"
+        href={path_for(:assignments, @section, @preview_mode, @sidebar_expanded)}
+        is_active={@active_tab == :assignments}
+        sidebar_expanded={@sidebar_expanded}
+      >
+        <:icon><Icons.assignments is_active={@active_tab == :assignments} /></:icon>
+        <:text>Assignments</:text>
+      </.nav_link>
+
       <.nav_link
         :if={@section.contains_explorations}
         id="explorations_nav_link"
@@ -611,14 +621,26 @@ defmodule OliWeb.Components.Delivery.Layouts do
     "#"
   end
 
-  defp path_for(:schedule, %Section{slug: section_slug}, preview_mode, sidebar_expanded) do
+  defp path_for(:assignments, %Section{slug: section_slug}, preview_mode, sidebar_expanded) do
     if preview_mode do
       ~p"/sections/#{section_slug}/preview/assignments"
     else
       ~p"/sections/#{section_slug}/assignments?#{%{sidebar_expanded: sidebar_expanded}}"
     end
   end
 
+  defp path_for(:assignments, _section, _preview_mode, _sidebar_expanded) do
+    "#"
+  end
+
+  defp path_for(:schedule, %Section{slug: section_slug}, preview_mode, sidebar_expanded) do
+    if preview_mode do
+      ~p"/sections/#{section_slug}/preview/student_schedule"
+    else
+      ~p"/sections/#{section_slug}/student_schedule?#{%{sidebar_expanded: sidebar_expanded}}"
+    end
+  end
+
   defp path_for(:schedule, _section, _preview_mode, _sidebar_expanded) do
     "#"
   end

diff --git a/lib/oli_web/components/delivery/utils.ex b/lib/oli_web/components/delivery/utils.ex
@@ -11,6 +11,8 @@ defmodule OliWeb.Components.Delivery.Utils do
   alias Oli.Delivery.Sections.Section
   alias Oli.Accounts
   alias Oli.Accounts.{User, Author, SystemRole}
+  alias OliWeb.Icons
+  alias Phoenix.LiveView.JS
   alias Lti_1p3.Tool.ContextRoles
   alias Lti_1p3.Tool.PlatformRoles
 
@@ -299,6 +301,41 @@ defmodule OliWeb.Components.Delivery.Utils do
     """
   end
 
+  attr :target_selector, :string, required: true, doc: "CSS Selector of the elements to hide/show"
+
+  def toggle_visibility_button(assigns) do
+    ~H"""
+    <button
+      id="hide_completed_button"
+      phx-click={hide_completed(@target_selector)}
+      class="self-stretch justify-center items-center gap-2 flex"
+    >
+      <div class="w-4 h-4"><Icons.hidden /></div>
+      <span>Hide Completed</span>
+    </button>
+    <button
+      id="show_completed_button"
+      phx-click={show_completed(@target_selector)}
+      class="hidden self-stretch justify-center items-center gap-2"
+    >
+      <div class="w-4 h-4"><Icons.visible /></div>
+      <span>Show Completed</span>
+    </button>
+    """
+  end
+
+  def hide_completed(target_selector) do
+    JS.hide()
+    |> JS.hide(to: target_selector)
+    |> JS.show(to: "#show_completed_button", display: "flex")
+  end
+
+  def show_completed(target_selector) do
+    JS.hide()
+    |> JS.show(to: target_selector, display: "flex")
+    |> JS.show(to: "#hide_completed_button", display: "flex")
+  end
+
   @doc """
   Returns the course week number of a resource based on the section start date.
   It considers that weeks start on Sunday, regardless of the section start date that could be any day of the week.

diff --git a/lib/oli_web/icons.ex b/lib/oli_web/icons.ex
@@ -20,6 +20,7 @@ defmodule OliWeb.Icons do
   def flag(assigns) do
     ~H"""
     <svg
+      role="flag icon"
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
@@ -98,16 +99,25 @@ defmodule OliWeb.Icons do
     """
   end
 
+  attr :class, :string, default: "fill-[#0CAF61] dark:fill-[#12E56A]"
+
   def square_checked(assigns) do
     ~H"""
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <svg
+      role="square checked icon"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
       <path
         d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H17.925L15.925 5H5V19H19V12.05L21 10.05V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z"
-        class="fill-[#0CAF61] dark:fill-[#12E56A]"
+        class={@class}
       />
       <path
         d="M11.7 16.025L6 10.325L7.425 8.9L11.7 13.175L20.875 4L22.3 5.425L11.7 16.025Z"
-        class="fill-[#0CAF61] dark:fill-[#12E56A]"
+        class={@class}
       />
     </svg>
     """
@@ -464,6 +474,7 @@ defmodule OliWeb.Icons do
   def world(assigns) do
     ~H"""
     <svg
+      role="world icon"
       width="20"
       height="20"
       viewBox="0 0 20 20"
@@ -837,6 +848,63 @@ defmodule OliWeb.Icons do
 
   attr :is_active, :boolean, default: false
 
+  def assignments(%{is_active: true} = assigns) do
+    ~H"""
+    <svg
+      role="active assignments icon"
+      class="dark:fill-white fill-black/70 dark:stroke-white stroke-black/70"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1_19943)">
+        <path
+          d="M4.16602 11.666H15.8327L12.0827 7.91602L15.8327 4.16602H4.16602V17.4993"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_19943">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+    """
+  end
+
+  def assignments(%{is_active: false} = assigns) do
+    ~H"""
+    <svg
+      role="assignments icon"
+      class="dark:stroke-[#B8B4BF] stroke-black/70"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1_19943)">
+        <path
+          d="M4.16602 11.666H15.8327L12.0827 7.91602L15.8327 4.16602H4.16602V17.4993"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_19943">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+    """
+  end
+
+  attr :is_active, :boolean, default: false
+
   def practice(%{is_active: true} = assigns) do
     ~H"""
     <svg
@@ -1158,7 +1226,7 @@ defmodule OliWeb.Icons do
       viewBox="0 0 19 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      class="dark:stroke-white stroke-black/70"
+      stroke="currentColor"
     >
       <g clip-path="url(#clip0_2850_70040)">
         <path
@@ -1176,7 +1244,7 @@ defmodule OliWeb.Icons do
       </g>
       <defs>
         <clipPath id="clip0_2850_70040">
-          <rect width="18" height="18" fill="white" transform="translate(0.5)" />
+          <rect width="18" height="18" fill="currentColor" transform="translate(0.5)" />
         </clipPath>
       </defs>
     </svg>
@@ -1186,12 +1254,12 @@ defmodule OliWeb.Icons do
   def hidden(assigns) do
     ~H"""
     <svg
-      class="dark:stroke-white stroke-black/70"
       role="hidden icon"
       width="19"
+      fill="none"
+      stroke="currentColor"
       height="18"
       viewBox="0 0 19 18"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clip-path="url(#clip0_2850_70060)">
@@ -1216,12 +1284,7 @@ defmodule OliWeb.Icons do
       </g>
       <defs>
         <clipPath id="clip0_2850_70060">
-          <rect
-            width="18"
-            height="18"
-            class="dark:fill-white fill-black/70"
-            transform="translate(0.5)"
-          />
+          <rect width="18" fill="currentColor" height="18" transform="translate(0.5)" />
         </clipPath>
       </defs>
     </svg>