Table sorting

assets/css/app.css

@@ -6,6 +6,7 @@
 @import './live/form.css';
 @import './live/registration.css';
 @import './pages/privacy.css';
+@import './live/table.css';
 
 /* Alerts and form errors used by phx.new */
 .alert {
@@ -146,5 +147,7 @@ larger .alert p {
 }
 
 main.container {
-  margin-top: 4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

assets/css/live/table.css

@@ -0,0 +1,7 @@
+.table_header {
+  min-width: 11rem;
+}
+
+.table_header a {
+  color: black;
+}

lib/osuuspuutarha/orders.ex

@@ -101,4 +101,12 @@ defmodule Osuuspuutarha.Orders do
   def change_order(%Order{} = order, attrs \\ %{}) do
     Order.changeset(order, attrs)
   end
+
+  def get_sorted_by(:asc, column) do
+    Repo.all(Order |> order_by({:asc, ^column}))
+  end
+
+  def get_sorted_by(:desc, column) do
+    Repo.all(Order |> order_by({:desc, ^column}))
+  end
 end

lib/osuuspuutarha_web/live/order_live/index.ex

@@ -6,7 +6,7 @@ defmodule OsuuspuutarhaWeb.OrderLive.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, :orders, list_orders())}
+    {:ok, assign(socket, :orders, Orders.list_orders())}
   end
 
   @impl true
@@ -34,15 +34,25 @@ defmodule OsuuspuutarhaWeb.OrderLive.Index do
     |> assign(:order, nil)
   end
 
+  defp apply_action(socket, :sorted_asc, %{"column" => column}) do
+    socket
+    |> assign(:page_title, "Tilaukset")
+    |> assign(:orders, Orders.get_sorted_by(:asc, String.to_atom(column)))
+    |> assign(:column, String.to_atom(column))
+  end
+
+  defp apply_action(socket, :sorted_desc, %{"column" => column}) do
+    socket
+    |> assign(:page_title, "Tilaukset")
+    |> assign(:orders, Orders.get_sorted_by(:desc, String.to_atom(column)))
+    |> assign(:column, String.to_atom(column))
+  end
+
   @impl true
   def handle_event("delete", %{"id" => id}, socket) do
     order = Orders.get_order!(id)
     {:ok, _} = Orders.delete_order(order)
 
-    {:noreply, assign(socket, :orders, list_orders())}
+    {:noreply, assign(socket, :orders, Orders.list_orders())}
-  end
-
-  defp list_orders do
-    Orders.list_orders()
   end
 end

lib/osuuspuutarha_web/live/order_live/index.html.heex

@@ -15,24 +15,90 @@
   </.modal>
 <% end %>
 
-<%= link "Lataa Excel-taulukkona", to: Routes.exports_order_path(@socket, :index), class: "btn btn-default" %>
+<%= link "Lataa Excel-taulukkona", to: Routes.exports_order_path(@socket, :index) %>
 
 <table>
   <thead>
     <tr>
-      <th>Tilausmuoto</th>
+      <th class="table_header">
-      <th>Jakopaikka</th>
+      <%= cond do %> 
-      <th>Tilaaja</th>
+        <% @live_action == :sorted_desc && @column == :order_type -> %> <%= link "Tyyppi ↓", to: Routes.order_index_path(@socket, :sorted_asc, :order_type) %> 
-      <th>Osoite</th>
+        <% @live_action == :sorted_asc && @column == :order_type -> %> <%= link "Tyyppi ↑", to: Routes.order_index_path(@socket, :sorted_desc, :order_type) %>
-      <th>Puh.</th>
+        <% true -> %> <%= link "Tyyppi", to: Routes.order_index_path(@socket, :sorted_asc, :order_type) %> 
-      <th>Säpö</th>
+      <% end %>
-      <th>Jäsen?</th>
+      </th>
-      <th>Kaksi laskua?</th>
+      <th class="table_header">
-      <th>Parilliset viikot</th>
+      <%= cond do %> 
-      <th>Lisätty</th>
+        <% @live_action == :sorted_desc && @column == :location -> %> <%= link "Paikka ↓", to: Routes.order_index_path(@socket, :sorted_asc, :location) %> 
-      <th>Viimeisin muutos</th>
+        <% @live_action == :sorted_asc && @column == :location -> %> <%= link "Paikka ↑", to: Routes.order_index_path(@socket, :sorted_desc, :location) %>
+        <% true -> %> <%= link "Paikka", to: Routes.order_index_path(@socket, :sorted_asc, :location) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :lname -> %> <%= link "Tilaaja ↓", to: Routes.order_index_path(@socket, :sorted_asc, :lname) %> 
+        <% @live_action == :sorted_asc && @column == :lname -> %> <%= link "Tilaaja ↑", to: Routes.order_index_path(@socket, :sorted_desc, :lname) %>
+        <% true -> %> <%= link "Tilaaja", to: Routes.order_index_path(@socket, :sorted_asc, :lname) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :city -> %> <%= link "Osoite ↓", to: Routes.order_index_path(@socket, :sorted_asc, :city) %> 
+        <% @live_action == :sorted_asc && @column == :city -> %> <%= link "Osoite ↑", to: Routes.order_index_path(@socket, :sorted_desc, :city) %>
+        <% true -> %> <%= link "Osoite", to: Routes.order_index_path(@socket, :sorted_asc, :city) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :phone -> %> <%= link "Puh. ↓", to: Routes.order_index_path(@socket, :sorted_asc, :phone) %> 
+        <% @live_action == :sorted_asc && @column == :phone -> %> <%= link "Puh. ↑", to: Routes.order_index_path(@socket, :sorted_desc, :phone) %>
+        <% true -> %> <%= link "Puh.", to: Routes.order_index_path(@socket, :sorted_asc, :phone) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :email -> %> <%= link "Säpö ↓", to: Routes.order_index_path(@socket, :sorted_asc, :email) %> 
+        <% @live_action == :sorted_asc && @column == :email -> %> <%= link "Säpö ↑", to: Routes.order_index_path(@socket, :sorted_desc, :email) %>
+        <% true -> %> <%= link "Säpö", to: Routes.order_index_path(@socket, :sorted_asc, :email) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :is_member -> %> <%= link "Jäsen? ↓", to: Routes.order_index_path(@socket, :sorted_asc, :is_member) %> 
+        <% @live_action == :sorted_asc && @column == :is_member -> %> <%= link "Jäsen? ↑", to: Routes.order_index_path(@socket, :sorted_desc, :is_member) %>
+        <% true -> %> <%= link "Jäsen?", to: Routes.order_index_path(@socket, :sorted_asc, :is_member) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :split_invoice -> %> <%= link "Kaksi laskua? ↓", to: Routes.order_index_path(@socket, :sorted_asc, :split_invoice) %> 
+        <% @live_action == :sorted_asc && @column == :split_invoice -> %> <%= link "Kaksi laskua? ↑", to: Routes.order_index_path(@socket, :sorted_desc, :split_invoice) %>
+        <% true -> %> <%= link "Kaksi laskua?", to: Routes.order_index_path(@socket, :sorted_asc, :split_invoice) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :even_weeks -> %> <%= link "Parilliset viikot ↓", to: Routes.order_index_path(@socket, :sorted_asc, :even_weeks) %> 
+        <% @live_action == :sorted_asc && @column == :even_weeks -> %> <%= link "Parilliset viikot ↑", to: Routes.order_index_path(@socket, :sorted_desc, :even_weeks) %>
+        <% true -> %> <%= link "Parilliset viikot", to: Routes.order_index_path(@socket, :sorted_asc, :even_weeks) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :inserted_at -> %> <%= link "Lisätty ↓", to: Routes.order_index_path(@socket, :sorted_asc, :inserted_at) %> 
+        <% @live_action == :sorted_asc && @column == :inserted_at -> %> <%= link "Lisätty ↑", to: Routes.order_index_path(@socket, :sorted_desc, :inserted_at) %>
+        <% true -> %> <%= link "Lisätty", to: Routes.order_index_path(@socket, :sorted_asc, :inserted_at) %> 
+      <% end %>
+      </th>
+      <th class="table_header">
+      <%= cond do %> 
+        <% @live_action == :sorted_desc && @column == :updated_at -> %> <%= link "Viimeisin muutos ↓", to: Routes.order_index_path(@socket, :sorted_asc, :updated_at) %> 
+        <% @live_action == :sorted_asc && @column == :updated_at -> %> <%= link "Viimeisin muutos ↑", to: Routes.order_index_path(@socket, :sorted_desc, :updated_at) %>
+        <% true -> %> <%= link "Viimeisin muutos", to: Routes.order_index_path(@socket, :sorted_asc, :updated_at) %> 
+      <% end %>
+      </th>
 
-      <th></th>
+      <th class="table_header"></th>
     </tr>
   </thead>
   <tbody id="orders">

lib/osuuspuutarha_web/router.ex

@@ -40,6 +40,8 @@ defmodule OsuuspuutarhaWeb.Router do
     live "/tilaukset", OrderLive.Index, :index
     live "/tilaukset/uusi", OrderLive.Index, :new
     live "/tilaukset/:id/muokkaa", OrderLive.Index, :edit
+    live "/tilaukset/nouseva/:column", OrderLive.Index, :sorted_asc
+    live "/tilaukset/aleneva/:column", OrderLive.Index, :sorted_desc
 
     live "/tilaukset/:id", OrderLive.Show, :show
     live "/tilaukset/:id/nayta/muokkaa", OrderLive.Show, :edit