add submission status filters

app/controllers/templates_controller.rb

@@ -10,6 +10,11 @@ class TemplatesController < ApplicationController
     submissions = submissions.active if @template.deleted_at.blank?
     submissions = Submissions.search(submissions, params[:q])
 
+    @base_submissions = submissions
+
+    submissions = submissions.pending if params[:status] == 'pending'
+    submissions = submissions.completed if params[:status] == 'completed'
+
     @pagy, @submissions = pagy(submissions.preload(:submitters).order(id: :desc))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path

app/models/submission.rb

@@ -48,6 +48,8 @@ class Submission < ApplicationRecord
            through: :template, source: :documents_attachments
 
   scope :active, -> { where(deleted_at: nil) }
+  scope :pending, -> { joins(:submitters).where(submitters: { completed_at: nil }).distinct }
+  scope :completed, -> { left_joins(:submitters).where.not(submitters: { completed_at: nil }).distinct }
 
   enum :source, {
     invite: 'invite',

app/views/icons/_clock.html.erb

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+  <path d="M12 7v5l3 3" />
+</svg>

app/views/icons/_list.html.erb

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M9 6l11 0" />
+  <path d="M9 12l11 0" />
+  <path d="M9 18l11 0" />
+  <path d="M5 6l0 .01" />
+  <path d="M5 12l0 .01" />
+  <path d="M5 18l0 .01" />
+</svg>

app/views/shared/_search_input.html.erb

@@ -1,7 +1,10 @@
-<form action="<%= request.path %>" method="get" class="items-center hidden md:flex">
+<form action="<%= url_for %>" method="get" class="items-center hidden md:flex">
+  <% if params[:status].present? %>
+    <input name="status" value="<%= params[:status] %>" class="hidden">
+  <% end %>
   <% if params[:q].present? %>
     <div class="relative">
-      <a href="<%= request.path %>" title="Clear" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
+      <a href="<%= url_for(params.to_unsafe_h.except(:q)) %>" title="Clear" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
         &times;
       </a>
     </div>

app/views/templates/show.html.erb

@@ -1,9 +1,10 @@
 <%= render 'title', template: @template %>
+<% is_show_tabs = @pagy.pages > 1 || params[:status].present? %>
 <% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 || params[:q].present? %>
-  <div class="flex justify-between mb-6 md:items-end flex-col md:flex-row">
+  <div class="flex justify-between md:items-end flex-col md:flex-row <%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
     <p class="text-3xl font-bold">Submissions</p>
-    <div class="flex space-x-2 mt-3 md:mt-0">
-      <% if params[:q].present? || @pagy.pages > 1 %>
+    <div class="flex md:space-x-2 mt-3 md:mt-0">
+      <% if params[:q].present? || params[:status].present? || @pagy.pages > 1 %>
         <%= render 'shared/search_input' %>
       <% end %>
       <%= link_to new_template_submissions_export_path(@template), class: 'order-3 md:order-1 btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
@@ -24,6 +25,37 @@
     </div>
   </div>
 <% end %>
+<% if is_show_tabs %>
+  <div class="flex items-center md:items-end flex-col space-y-2 md:space-y-0 md:flex-row md:space-x-2 mb-4">
+    <a href="<%= url_for(params.to_unsafe_h.except(:status)) %>" class="<%= params[:status].blank? ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
+      <div class="flex items-center space-x-1">
+        <%= svg_icon('list', class: 'w-5 h-5') %>
+        <span class="font-normal">All</span>
+      </div>
+      <div class="badge badge-neutral badge-outline font-medium">
+        <%= params[:status].blank? ? @pagy.count : @base_submissions.count %>
+      </div>
+    </a>
+    <a href="<%= url_for(params.to_unsafe_h.merge(status: :pending)) %>" class="<%= params[:status] == 'pending' ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
+      <div class="flex items-center space-x-1">
+        <%= svg_icon('clock', class: 'w-5 h-5') %>
+        <span class="font-normal">Pending</span>
+      </div>
+      <div class="badge badge-neutral badge-outline font-medium">
+        <%= params[:status] == 'pending' ? @pagy.count : @base_submissions.pending.count %>
+      </div>
+    </a>
+    <a href="<%= url_for(params.to_unsafe_h.merge(status: :completed)) %>" class="<%= params[:status] == 'completed' ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
+      <div class="flex items-center space-x-1">
+        <%= svg_icon('circle_check', class: 'w-5 h-5') %>
+        <span class="font-normal">Completed</span>
+      </div>
+      <div class="badge badge-neutral badge-outline font-medium">
+        <%= params[:status] == 'completed' ? @pagy.count : @base_submissions.completed.count %>
+      </div>
+    </a>
+  </div>
+<% end %>
 <% if @submissions.present? %>
   <div class="space-y-4">
     <%= render partial: 'submission', collection: @submissions %>