Refactor to include card title in component

Renames `AppPatientProgrammeVaccinationTableComponent` to `AppPatientProgrammeVaccinationCardComponent` and includes the card title within the new component because it depends on the presence of vaccination records.

Jira-Issue: MAV-3837

Author: stevehook

app/components/app_patient_programme_vaccination_card_component.html.erb

@@ -0,0 +1,47 @@
+<%= render AppCardComponent.new(section: true) do |card| %>
+  <% card.with_heading { vaccination_records.present? ? "Vaccination record" : "No vaccination record" } %>
+
+  <%= render programme_status_tag %>
+
+  <% if vaccination_records.present? %>
+    <%= govuk_table(html_attributes: { class: "nhsuk-table-responsive" }) do |table| %>
+      <% table.with_caption(text: "Vaccination records", size: "s") if show_caption %>
+
+      <% table.with_head do |head| %>
+        <% head.with_row do |row| %>
+          <% row.with_cell(text: "Vaccination date") %>
+          <% row.with_cell(text: "Age") %>
+          <% row.with_cell(text: "Programme") %>
+          <% row.with_cell(text: "Source") %>
+        <% end %>
+      <% end %>
+
+      <% table.with_body do |body| %>
+        <% vaccination_records.each do |vaccination_record| %>
+          <% body.with_row do |row| %>
+            <% row.with_cell do %>
+              <span class="nhsuk-table-responsive__heading">Vaccination date</span>
+              <%= link_to vaccination_record.performed_at.to_date.to_fs(:long),
+                          vaccination_record_path(vaccination_record) %>
+            <% end %>
+
+            <% row.with_cell do %>
+              <span class="nhsuk-table-responsive__heading">Age</span>
+              <%= formatted_age_when(vaccination_record) %>
+            <% end %>
+
+            <% row.with_cell do %>
+              <span class="nhsuk-table-responsive__heading">Programme</span>
+              <%= render AppProgrammeTagsComponent.new([vaccination_record.programme]) %>
+            <% end %>
+
+            <% row.with_cell do %>
+              <span class="nhsuk-table-responsive__heading">Source</span>
+              <%= vaccination_record_source(vaccination_record) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

…programme_vaccination_table_component.rb …_programme_vaccination_card_component.rbapp/components/app_patient_programme_vaccination_table_component.rb renamed to app/components/app_patient_programme_vaccination_card_component.rb app/components/app_patient_programme_vaccination_table_component.rb renamed to app/components/app_patient_programme_vaccination_card_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class AppPatientProgrammeVaccinationTableComponent < ViewComponent::Base
+class AppPatientProgrammeVaccinationCardComponent < ViewComponent::Base
   def initialize(patient, academic_year:, programme: nil, show_caption: false)
     @patient = patient
     @academic_year = academic_year

app/components/app_patient_programme_vaccination_table_component.html.erb

@@ -9,12 +9,12 @@
 
 <%= render AppPatientNavigationComponent.new(@patient, current_user.programmes, active: @programme.type.to_sym) %>
 
-<%= render AppCardComponent.new(section: true) do |card| %>
-  <% card.with_heading { "Vaccination record" } %>
-  <%= render AppPatientProgrammeVaccinationTableComponent.new(
-        @patient, academic_year: AcademicYear.current, show_caption: false, programme: @programme,
-      ) %>
-<% end %>
+<%= render AppPatientProgrammeVaccinationCardComponent.new(
+      @patient,
+      academic_year: AcademicYear.current,
+      show_caption: false,
+      programme: @programme,
+    ) %>
 
 <%= render AppCardComponent.new(section: true) do |card| %>
   <% card.with_heading { "Sessions" } %>

app/views/patients/programmes/show.html.erb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-describe AppPatientProgrammeVaccinationTableComponent do
-  subject { render_inline(component) }
+describe AppPatientProgrammeVaccinationCardComponent do
+  subject(:rendered) { render_inline(component) }
 
   let(:component) do
     described_class.new(patient, academic_year:, programme:, show_caption:)
@@ -12,6 +12,7 @@
   let(:programme) { Programme.hpv }
   let(:show_caption) { false }
 
+  it { should have_css(".nhsuk-card__heading", text: "No vaccination record") }
   it { should_not have_css(".nhsuk-table") }
 
   context "with a vaccination record" do
@@ -43,19 +44,23 @@
       )
     end
 
+    it { should have_css(".nhsuk-card__heading", text: "Vaccination record") }
+
     it { should have_css(".nhsuk-tag", text: "Not eligible") }
     it { should have_css(".nhsuk-table__header", text: "Vaccination date") }
     it { should have_css(".nhsuk-table__header", text: "Age") }
     it { should have_css(".nhsuk-table__header", text: "Programme") }
     it { should have_css(".nhsuk-table__header", text: "Source") }
 
     it { should have_link("1 January 2024") }
+
     it do
-      should have_css(
-               ".nhsuk-table",
-               text: "#{patient.age_years(now: performed_at)} years"
-             )
+      expect(rendered).to have_css(
+        ".nhsuk-table",
+        text: "#{patient.age_years(now: performed_at)} years"
+      )
     end
+
     it { should have_css(".nhsuk-table", text: "HPV") }
     it { should have_css(".nhsuk-table", text: "Recorded in Mavis") }
 
@@ -64,12 +69,14 @@
       let(:vaccination_record_programme) { Programme.flu }
 
       it { should_not have_link("1 January 2024") }
+
       it do
-        should_not have_css(
-                     ".nhsuk-table",
-                     text: "#{patient.age_years(now: performed_at)} years"
-                   )
+        expect(rendered).not_to have_css(
+          ".nhsuk-table",
+          text: "#{patient.age_years(now: performed_at)} years"
+        )
       end
+
       it { should_not have_css(".nhsuk-table", text: "HPV") }
       it { should_not have_css(".nhsuk-table", text: "Recorded in Mavis") }
     end
@@ -80,12 +87,14 @@
       let(:performed_at) { Time.zone.local(2022, 1, 1) }
 
       it { should_not have_link("1 January 2022") }
+
       it do
-        should_not have_css(
-                     ".nhsuk-table",
-                     text: "#{patient.age_years(now: performed_at)} years"
-                   )
+        expect(rendered).not_to have_css(
+          ".nhsuk-table",
+          text: "#{patient.age_years(now: performed_at)} years"
+        )
       end
+
       it { should_not have_css(".nhsuk-table", text: "Flu") }
       it { should_not have_css(".nhsuk-table", text: "Recorded in Mavis") }
     end

…amme_vaccination_table_component_spec.rb …ramme_vaccination_card_component_spec.rbspec/components/app_patient_programme_vaccination_table_component_spec.rb renamed to spec/components/app_patient_programme_vaccination_card_component_spec.rb spec/components/app_patient_programme_vaccination_table_component_spec.rb renamed to spec/components/app_patient_programme_vaccination_card_component_spec.rb

@@ -141,7 +141,7 @@ def then_i_see_the_childs_flu_vaccinations
     expect(page).to have_current_path(patient_programme_path(@patient, "flu"))
     expect(page).to have_css(
       "h3.nhsuk-card__heading",
-      text: "Vaccination record"
+      text: "No vaccination record"
     )
   end