[Invoices] Add sorting ability

app/assets/stylesheets/components/_buttons.scss

@@ -196,3 +196,43 @@ form .flex-auto + input[type='submit'] {
     }
   }
 }
+
+.sort-button {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  width: 100%;
+  font-weight: 600;
+  transition: color 0.125s ease-in-out;
+  gap: 0.5rem;
+
+  &.sort-button--right {
+    justify-content: end;
+    flex-direction: row-reverse;
+  }
+
+  &:hover,
+  &:focus {
+    color: map-get($palette, info);
+  }
+
+  & svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+    opacity: 0;
+    transition:
+      opacity 0.125s ease-in-out,
+      transform 0.125s ease-in-out;
+  }
+
+  &:hover svg,
+  &:focus svg {
+    opacity: 1;
+  }
+
+  &.sort-button--active svg {
+    opacity: 1;
+  }
+}

app/controllers/invoices_controller.rb

@@ -50,7 +50,19 @@ def index
 
     relation = relation.search_description(params[:q]) if params[:q].present?
 
-    @invoices = relation.order(created_at: :desc)
+    allowed_sorts = {
+      "created_at" => "invoices.created_at",
+      "status" => "invoices.status",
+      "sponsors.name" => "sponsors.name",
+      "amount_due" => "invoices.amount_due"
+    }
+    allowed_directions = %w[asc desc]
+
+    sort_column = allowed_sorts[params[:sort]] || "invoices.created_at"
+    sort_direction = allowed_directions.include?(params[:direction]) ? params[:direction] : "desc"
+
+    relation = relation.joins(:sponsor) if sort_column == "sponsors.name"
+    relation = relation.order("#{sort_column} #{sort_direction}")
 
     @sponsor = Sponsor.new(event: @event)
     @invoice = Invoice.new(sponsor: @sponsor, event: @event)
@@ -89,6 +101,8 @@ def index
         @invoices[i].state_text = "Sent"
         @stats[:pending] += @invoices[i].item_amount
       end
+    else
+      @invoices = relation
     end
   end
 

app/views/events/_sort_table_header.html.erb

@@ -0,0 +1,17 @@
+<% @active = params[:sort] == sort || (params[:sort].nil? && defined?(default) && default) %>
+
+<%= link_to(
+      upsert_query_params(
+        sort: sort,
+        direction: params[:sort] == sort ?
+          (params[:direction] == "asc" ? "desc" : "asc") :
+          params[:direction] || "asc"
+      ),
+  class: "sort-button #{@active ? 'sort-button--active' : ''} #{'sort-button--right' if defined?(right) && right}"
+    ) do %>
+  <%= defined?(display) && display ? display : sort.humanize %>
+  <%= inline_icon(
+        params[:direction] == "desc" ? "down-caret" : "up-caret",
+    size: 16
+      ) %>
+<% end %>

app/views/invoices/index.html.erb

@@ -67,10 +67,18 @@
 <table>
   <thead>
     <tr>
-      <th>Status</th>
-      <th>Date</th>
-      <th>To</th>
-      <th class="text-right">Amount</th>
+      <th>
+        <%= render "events/sort_table_header", sort: "status" %>
+      </th>
+      <th>
+        <%= render "events/sort_table_header", sort: "date", default: true %>
+      </th>
+      <th>
+        <%= render "events/sort_table_header", sort: "sponsors.name", display: "To" %>
+      </th>
+      <th>
+        <%= render "events/sort_table_header", sort: "amount_due", right: true, display: "Amount" %>
+      </th>
       <th></th>
     </tr>
   </thead>