Add status filter to schemes pages

app/helpers/filters_helper.rb

@@ -46,6 +46,16 @@ module FiltersHelper
     }.freeze
   end
 
+  def scheme_status_filters
+    {
+      "incomplete" => "Incomplete",
+      "active" => "Active",
+      "deactivating_soon" => "Deactivating soon",
+      "reactivating_soon" => "Reactivating soon",
+      "deactivated" => "Deactivated",
+    }.freeze
+  end
+
   def selected_option(filter, filter_type)
     return false unless session[session_name_for(filter_type)]
 

app/views/organisations/schemes.html.erb

@@ -11,21 +11,24 @@
   ) %>
   <h2 class="govuk-visually-hidden">Supported housing schemes</h2>
 <% end %>
+<div class="app-filter-layout" data-controller="filter-layout">
+  <% if SchemePolicy.new(current_user, nil).create? %>
+    <%= govuk_button_link_to "Create a new supported housing scheme", new_scheme_path, html: { method: :post } %>
+  <% end %>
+
+  <%= govuk_details(
+    classes: "govuk-!-width-two-thirds",
+    summary_text: "What is a supported housing scheme?",
+    text: "A supported housing scheme (also known as a ‘supported housing service’) provides shared or self-contained housing for a particular client group, for example younger or vulnerable people. A single scheme can contain multiple units, for example bedrooms in shared houses or a bungalow with 3 bedrooms.",
+  ) %>
+  <%= render partial: "schemes/scheme_filters" %>
+  <div class="app-filter-layout__content">
+    <%= render SearchComponent.new(current_user:, search_label: "Search by scheme name, code, postcode or location name", value: @searched) %>
 
-<% if SchemePolicy.new(current_user, nil).create? %>
-  <%= govuk_button_link_to "Create a new supported housing scheme", new_scheme_path, html: { method: :post } %>
-<% end %>
-
-<%= govuk_details(
-  classes: "govuk-!-width-two-thirds",
-  summary_text: "What is a supported housing scheme?",
-  text: "A supported housing scheme (also known as a ‘supported housing service’) provides shared or self-contained housing for a particular client group, for example younger or vulnerable people. A single scheme can contain multiple units, for example bedrooms in shared houses or a bungalow with 3 bedrooms.",
-) %>
-
-<%= render SearchComponent.new(current_user:, search_label: "Search by scheme name, code, postcode or location name", value: @searched) %>
-
-<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
+    <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
 
-<%= render partial: "schemes/scheme_list", locals: { schemes: @schemes, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
+    <%= render partial: "schemes/scheme_list", locals: { schemes: @schemes, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
 
-<%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "schemes" } %>
+    <%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "schemes" } %>
+  </div>
+</div>

app/views/schemes/_scheme_filters.html.erb

@@ -0,0 +1,29 @@
+<div class="app-filter-layout__filter">
+  <div class="app-filter">
+    <div class="app-filter__header">
+      <h2 class="govuk-heading-m">Filters</h2>
+    </div>
+
+    <div class="app-filter__content">
+      <%= form_with url: schemes_path, html: { method: :get } do |f| %>
+        <div class="govuk-grid-row" style="white-space: nowrap">
+          <p class="govuk-grid-column-one-half">
+            <%= filters_applied_text(@filter_type) %>
+          </p>
+          <p class="govuk-!-text-align-right govuk-grid-column-one-half">
+            <%= reset_filters_link(@filter_type) %>
+          </p>
+        </div>
+
+        <%= render partial: "filters/checkbox_filter",
+                   locals: {
+                    f:,
+                    options: scheme_status_filters,
+                    label: "Status",
+                    category: "status",
+                  } %>
+        <%= f.govuk_submit "Apply filters", class: "govuk-!-margin-bottom-0" %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/schemes/index.html.erb

@@ -8,11 +8,15 @@
 <% if SchemePolicy.new(current_user, nil).create? %>
   <%= govuk_button_link_to "Create a new supported housing scheme", new_scheme_path, html: { method: :post } %>
 <% end %>
+<div class="app-filter-layout" data-controller="filter-layout">
+  <%= render partial: "schemes/scheme_filters" %>
+  <div class="app-filter-layout__content">
+    <%= render SearchComponent.new(current_user:, search_label: "Search by scheme name, code, postcode or location name", value: @searched) %>
 
-<%= render SearchComponent.new(current_user:, search_label: "Search by scheme name, code, postcode or location name", value: @searched) %>
+    <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
 
-<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
+    <%= render partial: "schemes/scheme_list", locals: { schemes: @schemes, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
 
-<%= render partial: "schemes/scheme_list", locals: { schemes: @schemes, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
-
-<%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "schemes" } %>
+    <%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "schemes" } %>
+  </div>
+</div>

spec/features/schemes_spec.rb

@@ -63,6 +63,39 @@ RSpec.describe "Schemes scheme Features" do
             end
           end
         end
+
+        context "when filtering schemes" do
+          context "when no filters are selected" do
+            it "displays the filters component with no clear button" do
+              expect(page).to have_content("No filters applied")
+              expect(page).not_to have_content("Clear")
+            end
+          end
+
+          context "when I have selected filters" do
+            before do
+              check("Active")
+              check("Incomplete")
+              click_button("Apply filters")
+            end
+
+            it "displays the filters component with a correct count and clear button" do
+              expect(page).to have_content("2 filters applied")
+              expect(page).to have_content("Clear")
+            end
+
+            context "when clearing the filters" do
+              before do
+                click_link("Clear")
+              end
+
+              it "clears the filters and displays the filter component as before" do
+                expect(page).to have_content("No filters applied")
+                expect(page).not_to have_content("Clear")
+              end
+            end
+          end
+        end
       end
     end
   end