Navigate to next and prev occurrence

This commit adds next/prev navigation links between occurrences. This
can be used in addition to the occurrence selector which has been
present since the beginning.

Author: crbelaus

lib/error_tracker/web/components/core_components.ex

@@ -131,7 +131,7 @@ defmodule ErrorTracker.Web.CoreComponents do
     """
   end
 
-  attr :name, :string, values: ~w[bell bell-slash]
+  attr :name, :string, values: ~w[bell bell-slash arrow-left arrow-right]
 
   def icon(assigns = %{name: "bell"}) do
     ~H"""
@@ -167,4 +167,38 @@ defmodule ErrorTracker.Web.CoreComponents do
     </svg>
     """
   end
+
+  def icon(assigns = %{name: "arrow-left"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M14 8a.75.75 0 0 1-.75.75H4.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 1.06L4.56 7.25h8.69A.75.75 0 0 1 14 8Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
+
+  def icon(assigns = %{name: "arrow-right"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
 end

lib/error_tracker/web/live/show.ex

@@ -126,9 +126,27 @@ defmodule ErrorTracker.Web.Live.Show do
       |> Ecto.assoc(:occurrences)
       |> Repo.aggregate(:count)
 
+    next_occurrence =
+      base_query
+      |> where([o], o.id > ^current_occurrence.id)
+      |> order_by([o], asc: o.id)
+      |> limit(1)
+      |> select([:id, :error_id, :inserted_at])
+      |> Repo.one()
+
+    prev_occurrence =
+      base_query
+      |> where([o], o.id < ^current_occurrence.id)
+      |> order_by([o], desc: o.id)
+      |> limit(1)
+      |> select([:id, :error_id, :inserted_at])
+      |> Repo.one()
+
     socket
     |> assign(:occurrences, occurrences)
     |> assign(:total_occurrences, total_occurrences)
+    |> assign(:next, next_occurrence)
+    |> assign(:prev, prev_occurrence)
   end
 
   defp related_occurrences(query, num_results) do

lib/error_tracker/web/live/show.html.heex

@@ -97,6 +97,19 @@
           </option>
         </select>
       </form>
+
+      <nav class="grid grid-cols-2 gap-2 mt-2">
+        <div class="text-left">
+          <.link :if={@prev} patch={occurrence_path(@socket, @prev, @search)}>
+            <.icon name="arrow-left" /> Prev
+          </.link>
+        </div>
+        <div class="text-right">
+          <.link :if={@next} patch={occurrence_path(@socket, @next, @search)}>
+            Next <.icon name="arrow-right" />
+          </.link>
+        </div>
+      </nav>
     </.section>
 
     <.section title="Error kind">

priv/static/app.css

@@ -766,6 +766,10 @@ select {
   border-width: 0;
 }
 
+.static {
+  position: static;
+}
+
 .absolute {
   position: absolute;
 }
@@ -841,6 +845,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -873,6 +881,11 @@ select {
   display: none;
 }
 
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
 .\!h-4 {
   height: 1rem !important;
 }
@@ -925,6 +938,10 @@ select {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }