From 43f89a068bcd73aa1a0763fa57654d19f2d35a51 Mon Sep 17 00:00:00 2001 From: Daniel Dye Date: Fri, 5 Apr 2024 16:45:07 +0100 Subject: [PATCH] Update Support Claims page - Add Claim::CardComponent - Add pagination count to Support Claims page heading and title - Add search bar to filter claims by reference number --- app/assets/stylesheets/components/_all.scss | 1 + .../stylesheets/components/claim/card.scss | 46 +++++++++++++++++++ app/components/claim/card_component.html.erb | 20 ++++++++ app/components/claim/card_component.rb | 9 ++++ app/queries/claims/claims_query.rb | 7 +++ .../claims/support/claims/index.html.erb | 46 +++++++++++-------- config/locales/en/claims/support/claims.yml | 2 +- .../support/claims/view_a_claim_spec.rb | 2 +- .../claims/support/claims/view_claims_spec.rb | 21 +++++---- 9 files changed, 123 insertions(+), 31 deletions(-) create mode 100644 app/assets/stylesheets/components/claim/card.scss create mode 100644 app/components/claim/card_component.html.erb create mode 100644 app/components/claim/card_component.rb diff --git a/app/assets/stylesheets/components/_all.scss b/app/assets/stylesheets/components/_all.scss index eaddcd914..706179696 100644 --- a/app/assets/stylesheets/components/_all.scss +++ b/app/assets/stylesheets/components/_all.scss @@ -1,3 +1,4 @@ +@import "claim/card"; @import "autocomplete"; @import "content_header"; @import "header"; diff --git a/app/assets/stylesheets/components/claim/card.scss b/app/assets/stylesheets/components/claim/card.scss new file mode 100644 index 000000000..81315ab50 --- /dev/null +++ b/app/assets/stylesheets/components/claim/card.scss @@ -0,0 +1,46 @@ +.claim-card { + display: flex; + flex-direction: column; + gap: govuk-spacing(1); + border-bottom: 1px solid $govuk-border-colour; + padding: govuk-spacing(2) 0; + margin-bottom: govuk-spacing(1); + + .claim-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + + .claim-card__header__name { + display: flex; + gap: govuk-spacing(1); + + &.govuk-heading-s { + margin-bottom: govuk-spacing(1); + } + } + } + + .claim-card__body { + display: flex; + justify-content: space-between; + gap: govuk-spacing(2); + + .claim-card__body__provider { + flex-grow: 1; + max-width: 66%; + } + + .claim-card__body__right { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + } + + .govuk-body-s { + margin-bottom: govuk-spacing(1); + } + } +} diff --git a/app/components/claim/card_component.html.erb b/app/components/claim/card_component.html.erb new file mode 100644 index 000000000..df9123c50 --- /dev/null +++ b/app/components/claim/card_component.html.erb @@ -0,0 +1,20 @@ +
+
+
+ <%= govuk_link_to claim.school.name, claims_support_claim_path(claim), no_visited_state: true %> + <%= claim.reference %> +
+
<%= render Claim::StatusTagComponent.new(claim:, classes: %w[govuk-body-s]) %>
+
+ +
+
+
<%= claim.provider.name %>
+
+ +
+
<%= l(claim.created_at.to_date, format: :short) %>
+
<%= humanized_money_with_symbol(claim.amount) %>
+
+
+
diff --git a/app/components/claim/card_component.rb b/app/components/claim/card_component.rb new file mode 100644 index 000000000..c17b3f28e --- /dev/null +++ b/app/components/claim/card_component.rb @@ -0,0 +1,9 @@ +class Claim::CardComponent < ApplicationComponent + attr_reader :claim + + def initialize(claim:, classes: [], html_attributes: {}) + super(classes:, html_attributes:) + + @claim = claim + end +end diff --git a/app/queries/claims/claims_query.rb b/app/queries/claims/claims_query.rb index b71ad56cf..185ab42e9 100644 --- a/app/queries/claims/claims_query.rb +++ b/app/queries/claims/claims_query.rb @@ -1,6 +1,7 @@ class Claims::ClaimsQuery < ApplicationQuery def call scope = Claims::Claim.submitted + scope = search_condition(scope) scope = school_condition(scope) scope = provider_condition(scope) scope.order_created_at_desc @@ -8,6 +9,12 @@ def call private + def search_condition(scope) + return scope if params[:search].blank? + + scope.where(Claims::Claim.arel_table[:reference].matches("%#{params[:search]}%")) + end + def school_condition(scope) return scope if params[:school_ids].blank? diff --git a/app/views/claims/support/claims/index.html.erb b/app/views/claims/support/claims/index.html.erb index aa729dceb..7800b0ab0 100644 --- a/app/views/claims/support/claims/index.html.erb +++ b/app/views/claims/support/claims/index.html.erb @@ -1,33 +1,39 @@ <%= render "claims/support/primary_navigation", current: :claims %> -<%= content_for :page_title, t(".heading") %> +<%= content_for :page_title, t(".heading", count: @pagy.count) %>
+

<%= t(".heading", count: @pagy.count) %>

+ + <%= govuk_button_to(t(".download_csv"), download_csv_claims_support_claims_path, method: :get) %> +
+
+
+
+
Filter
+
+
+
+
-

<%= t(".heading") %>

+ <%= render partial: "shared/search_form", locals: { + url: claims_support_claims_path, + label: { text: t(".search_label"), size: "s" }, + name: :search, + clear_search_url: claims_support_claims_path, + } %> - <% if @claims.any? %> - <%= govuk_button_to(t(".download_csv"), download_csv_claims_support_claims_path, method: :get) %> - - <%= govuk_table do |table| %> - <% table.with_head do |head| %> - <% head.with_row do |row| %> - <% row.with_cell(header: true, text: Claims::Claim.human_attribute_name(:id)) %> - <% row.with_cell(header: true, text: Claims::Claim.human_attribute_name(:status)) %> - <% end %> - <% end %> +
- <% table.with_body do |body| %> - <% @claims.each do |claim| %> - <% body.with_row do |row| %> - <% row.with_cell(text: govuk_link_to(claim.id, claims_support_claim_path(claim))) %> - <% row.with_cell(text: render(Claim::StatusTagComponent.new(claim:))) %> - <% end %> - <% end %> + <% if @claims.any? %> +
+ <% @claims.each do |claim| %> + <%= render Claim::CardComponent.new(claim:) %> <% end %> - <% end %> +
<%= govuk_pagination(pagy: @pagy) %> +

<%= t("pagination_info", from: @pagy.from, to: @pagy.to, count: @pagy.count) %>

diff --git a/config/locales/en/claims/support/claims.yml b/config/locales/en/claims/support/claims.yml index 1159153b4..e5cd73eb5 100644 --- a/config/locales/en/claims/support/claims.yml +++ b/config/locales/en/claims/support/claims.yml @@ -3,7 +3,7 @@ en: support: claims: index: - heading: Claims + heading: Claims (%{count}) download_csv: Download claims search_label: Search by claim reference show: diff --git a/spec/system/claims/support/claims/view_a_claim_spec.rb b/spec/system/claims/support/claims/view_a_claim_spec.rb index 931497147..595e47925 100644 --- a/spec/system/claims/support/claims/view_a_claim_spec.rb +++ b/spec/system/claims/support/claims/view_a_claim_spec.rb @@ -36,7 +36,7 @@ def when_i_visit_claim_index_page end def when_i_click_on_claim(claim) - click_on(claim.id) + click_on(claim.school.name) end def then_i_can_see_the_details_of_a_submitted_claim diff --git a/spec/system/claims/support/claims/view_claims_spec.rb b/spec/system/claims/support/claims/view_claims_spec.rb index c2c0bfa88..3a754685f 100644 --- a/spec/system/claims/support/claims/view_claims_spec.rb +++ b/spec/system/claims/support/claims/view_claims_spec.rb @@ -13,6 +13,7 @@ scenario "Support user visits the claims index page" do when_i_visit_claim_index_page then_i_see_a_list_of_submitted_claims + and_i_see_no_draft_claims end private @@ -27,15 +28,17 @@ def when_i_visit_claim_index_page end def then_i_see_a_list_of_submitted_claims - expect(page).to have_content("ID") - expect(page).to have_content("Status") - expect(page).to have_selector("tbody tr", count: 1) - - expect(page).not_to have_selector("td", text: claim_1.id) - - within("tbody tr:nth-child(1)") do - expect(page).to have_selector("td", text: claim_2.id) - expect(page).to have_selector("td", text: "Submitted") + within(".claim-card:nth-child(1)") do + expect(page).to have_content(claim_2.school.name) + expect(page).to have_content(claim_2.reference) + expect(page).to have_content("Submitted") + expect(page).to have_content(claim_2.provider.name) + expect(page).to have_content(I18n.l(claim_2.created_at.to_date, format: :short)) + expect(page).to have_content(claim_2.amount.format(no_cents_if_whole: true)) end end + + def and_i_see_no_draft_claims + expect(page).not_to have_content(claim_1.reference) + end end