Pagination

5 files changed, 63 insertions, 23 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 6b5c4a6..8b221d0 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -50,12 +50,15 @@ body {
 }
 
 .row {
-  margin-top: 6px;
+  margin-top: 4px;
   display: flex;
-  align-items: center;
+  flex-direction: row; /* Milligram only does this in mid-big screens */
 }
 .row--padded {
-  margin-top: 12px;
+  margin-top: 10px;
+}
+.row-center {
+  justify-content: center
 }
 .row-left {
   flex-direction: row;
diff --git a/lib/waev/export.ex b/lib/waev/export.ex
index 2fd80f5..72ed00d 100644
--- a/lib/waev/export.ex
+++ b/lib/waev/export.ex
@@ -52,7 +52,7 @@ defmodule Waev.Export do
     end
   end
 
-  defstruct id: nil, left: nil, right: nil, messages: []
+  defstruct id: nil, left: nil, right: nil, messages: [], pagination: nil
 
   def list do
     case File.ls(path()) do
@@ -124,15 +124,17 @@ defmodule Waev.Export do
             end
           end)
 
-        {:ok,
-         %{
-           e
-           | messages:
-               e.messages
-               |> Enum.reverse()
-               |> Enum.drop((page - 1) * size)
-               |> Enum.take(size)
-         }}
+        pagination =
+          {:ok,
+           %{
+             e
+             | messages:
+                 e.messages
+                 |> Enum.reverse()
+                 |> Enum.drop((page - 1) * size)
+                 |> Enum.take(size),
+               pagination: %{page: page, size: size, pages: ceil(Enum.count(e.messages) / size)}
+           }}
 
       false ->
         :error
diff --git a/lib/waev_web/controllers/exports_controller.ex b/lib/waev_web/controllers/exports_controller.ex
index 8d16cb5..a5a1f51 100644
--- a/lib/waev_web/controllers/exports_controller.ex
+++ b/lib/waev_web/controllers/exports_controller.ex
@@ -7,7 +7,7 @@ defmodule WaevWeb.ExportsController do
 
     case Waev.Export.get(id, page, size) do
       {:ok, export} ->
-        render(conn, "show.html", id: id, export: export, page: page, size: size)
+        render(conn, "show.html", id: id, export: export)
 
       :error ->
         conn
diff --git a/lib/waev_web/templates/exports/show.html.eex b/lib/waev_web/templates/exports/show.html.eex
index 948c125..ef35265 100644
--- a/lib/waev_web/templates/exports/show.html.eex
+++ b/lib/waev_web/templates/exports/show.html.eex
@@ -11,7 +11,7 @@
   </div>
 <% else %>
   <%= for {date, blocks} <- process_messages(@export.messages) do %>
-    <div class="row row--padded">
+    <div class="row row-center row--padded">
       <div class="middle-box">
         <%= date %>
       </div>
@@ -53,4 +53,4 @@
     <% end %>
   <% end %>
 <% end %>
-<%= pagination_bar(assigns, @page, @size) %>
+<%= pagination_bar(assigns, @export.pagination) %>
diff --git a/lib/waev_web/views/exports_view.ex b/lib/waev_web/views/exports_view.ex
index 62eefc1..9175122 100644
--- a/lib/waev_web/views/exports_view.ex
+++ b/lib/waev_web/views/exports_view.ex
@@ -114,15 +114,50 @@ defmodule WaevWeb.ExportsView do
     String.replace(text, "\n", "<br />")
   end
 
-  def pagination_bar(assigns, page, size) do
-    prev = if page == 0, do: 0, else: page - 1
-    # TODO max
-    next = page + 1
+  def pagination_bar(assigns, %{page: page, size: size, pages: pages}) do
+    offset = 1 # How many buttons to see in each side
+    path = fn page ->
+      ~E"""
+      <%= Routes.exports_path(@conn, :show, @id, page: page, size: size) %>
+      """
+    end
+
+    btn = fn enabled, page, text ->
+      ~E"""
+      <a class="button button-clear"
+         <%= if enabled do %>
+           href="<%= path.(page) %>"
+         <% else %>
+           disabled
+         <% end %>>
+        <%= text %>
+      </a>
+      """
+    end
 
     ~E"""
-    <div>
-    <a href="<%= Routes.exports_path(@conn, :show, @id, page: prev, size: size) %>">Left</a>
-    <a href="<%= Routes.exports_path(@conn, :show, @id, page: next, size: size) %>">Right</a>
+    <div class="row row-center row--padded">
+      <%= btn.(page != 1, page-1, "<") %>
+      <%= if (page > 1 + offset) do %>
+        <%= btn.(true, 1, "1") %>
+      <% end %>
+      <%= if (page > 1 + offset + 1) do %>
+        ...
+      <% end %>
+      <%= for p <- max(1, page-offset) .. min(pages, page+offset) do %>
+        <%= if (p == page) do %>
+          <a disabled class="button"><%= page %></a>
+        <% else %>
+          <%= btn.(p != page, p, p) %>
+        <% end %>
+      <% end %>
+      <%= if (page < pages - offset - 1) do %>
+        ...
+      <% end %>
+      <%= if (page < pages - offset) do %>
+        <%= btn.(true, pages, pages) %>
+      <% end %>
+      <%= btn.(page != pages, page+1, ">") %>
     </div>
     """
   end