feat(frontend): add sorting by subject or date

README.md

@@ -2,7 +2,7 @@
 
 ExMR - Exam Managment Resource
 
-To start your Phoenix server:
+o start your Phoenix server:
 
 - Run `mix setup` to install and setup dependencies
 - Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`

lib/exmr_web/live/exam_live/index.ex

@@ -6,7 +6,12 @@ defmodule ExmrWeb.ExamLive.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, stream(socket, :exams, Exams.list_exams())}
+    socket =
+      socket
+      |> assign(:exams, Exams.list_exams())
+      |> assign(:sort_by, "date")
+
+    {:ok, socket}
   end
 
   @impl true
@@ -34,14 +39,37 @@ defmodule ExmrWeb.ExamLive.Index do
 
   @impl true
   def handle_info({ExmrWeb.ExamLive.FormComponent, {:saved, exam}}, socket) do
-    {:noreply, stream_insert(socket, :exams, exam)}
+    socket =
+      socket
+      |> assign(:exams, [exam | socket.assigns.exams])
+
+    {:noreply, socket}
   end
 
   @impl true
-  def handle_event("delete", %{"id" => id}, socket) do
+  def handle_event("remove", %{"id" => id}, socket) do
     exam = Exams.get_exam!(id)
     {:ok, _} = Exams.delete_exam(exam)
 
-    {:noreply, stream_delete(socket, :exams, exam)}
+    socket =
+      socket
+      |> update(:exams, fn exams ->
+        Enum.reject(exams, fn l -> l.id == exam.id end)
+      end)
+
+    {:noreply, socket}
+  end
+
+  def handle_event("sort", %{"by" => sort_by}, socket) do
+    exams = sort_items(socket.assigns.exams, sort_by)
+    {:noreply, assign(socket, exams: exams, sort_by: sort_by)}
+  end
+
+  defp sort_items(items, "subject") do
+    Enum.sort_by(items, & &1.subject)
+  end
+
+  defp sort_items(items, "date") do
+    Enum.sort_by(items, & &1.date, &Date.before?/2)
   end
 end

lib/exmr_web/live/exam_live/index.html.heex

@@ -1,5 +1,11 @@
 <.header>
   Listing Exams
+  <div>
+    <button phx-click="sort" phx-value-by="subject" class="font-light">Sort by Subject</button>
+    <a>|</a>
+
+    <button phx-click="sort" phx-value-by="date" class="font-light">Sort by Date</button>
+  </div>
   <:actions>
     <.link patch={~p"/exams/new"}>
       <.button>New Exam</.button>
@@ -7,28 +13,21 @@
   </:actions>
 </.header>
 
-<.table
+<div class="divide-y">
-  id="exams"
+  <div :for={exam <- @exams} class="py-2 flex gap-2">
-  rows={@streams.exams}
+    <div class="grow">
-  row_click={fn {_id, exam} -> JS.navigate(~p"/exams/#{exam}") end}
+      <div class="font-bold"><%= exam.subject %></div>
->
+      <div class="font-sm"><%= exam.date %></div>
-  <:col :let={{_id, exam}} label="Subject"><%= exam.subject %></:col>
-  <:col :let={{_id, exam}} label="Date"><%= exam.date %></:col>
-  <:action :let={{_id, exam}}>
-    <div class="sr-only">
-      <.link navigate={~p"/exams/#{exam}"}>Show</.link>
     </div>
-    <.link patch={~p"/exams/#{exam}/edit"}>Edit</.link>
+    <button
-  </:action>
+      phx-click="remove"
-  <:action :let={{id, exam}}>
+      phx-value-id={exam.id}
-    <.link
+      class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-3 rounded-md"
-      phx-click={JS.push("delete", value: %{id: exam.id}) |> hide("##{id}")}
-      data-confirm="Are you sure?"
     >
-      Delete
+      Remove
-    </.link>
+    </button>
-  </:action>
+  </div>
-</.table>
+</div>
 
 <.modal :if={@live_action in [:new, :edit]} id="exam-modal" show on_cancel={JS.patch(~p"/exams")}>
   <.live_component