Browse Source

Add log summary component

pull/795/head
Paul Robert Lloyd 3 years ago committed by baarkerlounger
parent
commit
8dff637cf9
  1. 67
      app/components/log_summary_component.html.erb
  2. 13
      app/components/log_summary_component.rb
  3. 23
      app/frontend/styles/_log.scss
  4. 23
      app/frontend/styles/_metadata.scss
  5. 2
      app/frontend/styles/application.scss
  6. 76
      app/views/case_logs/_log_list.html.erb
  7. 8
      spec/requests/case_logs_controller_spec.rb

67
app/components/log_summary_component.html.erb

@ -0,0 +1,67 @@
<article class="app-log-summary">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<header class="app-log-summary__header">
<h2 class="app-log-summary__title">
<%= govuk_link_to case_log_path(log) do %>
<span class="govuk-visually-hidden">Log </span><%= log.id %>
<% end %>
</h2>
<% if log.tenancycode? or log.propcode? %>
<dl class="app-metadata app-metadata--inline">
<% if log.tenancycode? %>
<div class="app-metadata__item">
<dt class="app-metadata__term">Tenant</dt>
<dd class="app-metadata__definition"><%= log.tenancycode %></dd>
</div>
<% end %>
<% if log.propcode? %>
<div class="app-metadata__item">
<dt class="app-metadata__term">Property</dt>
<dd class="app-metadata__definition"><%= log.propcode %></dd>
</div>
<% end %>
</dl>
<% end %>
</header>
<% if log.needstype? or log.startdate? %>
<p class="govuk-body govuk-!-margin-bottom-2">
<% if log.needstype? %>
<%= log.is_general_needs? ? "General needs" : "Supported housing" %><br>
<% end %>
<% if log.startdate? %>
Tenancy starts <time datetime="<%= log.startdate.iso8601 %>"><%= log.startdate.to_formatted_s(:govuk_date) %></time>
<% end %>
</p>
<% end %>
<% if current_user.support? %>
<% if log.owning_organisation or log.managing_organisation %>
<dl class="app-metadata">
<div class="app-metadata__item">
<dt class="app-metadata__term">Owned by</dt>
<dd class="app-metadata__definition"><%= log.owning_organisation&.name %></dd>
</div>
<div class="app-metadata__item">
<dt class="app-metadata__term">Managed by</dt>
<dd class="app-metadata__definition"><%= log.managing_organisation&.name %></dd>
</div>
</dl>
<% end %>
<% end %>
</div>
<footer class="govuk-grid-column-one-half app-log-summary__footer">
<p class="govuk-body govuk-!-margin-bottom-2">
<%= log_status %>
</p>
<p class="govuk-body">
Created <time datetime="<%= log.created_at.iso8601 %>"><%= log.created_at.to_formatted_s(:govuk_date) %></time>
<% if log.created_by %>
<span class="app-log-summary__footer--actor">by <%= log.created_by.name || log.created_by.email %></span>
<% end %>
</p>
</footer>
</div>
</article>

13
app/components/log_summary_component.rb

@ -0,0 +1,13 @@
class LogSummaryComponent < ViewComponent::Base
attr_reader :current_user, :log
def initialize(current_user:, log:)
@current_user = current_user
@log = log
super
end
def log_status
helpers.status_tag(log.status)
end
end

23
app/frontend/styles/_log.scss

@ -0,0 +1,23 @@
.app-log-summary {
border-top: 1px solid $govuk-border-colour;
padding-top: govuk-spacing(3);
}
.app-log-summary__header {
align-items: baseline;
display: flex;
}
.app-log-summary__title {
margin: 0 govuk-spacing(3) govuk-spacing(2) 0;
}
@include govuk-media-query(tablet) {
.app-log-summary__footer {
text-align: right;
}
.app-log-summary__footer--actor {
display: block;
}
}

23
app/frontend/styles/_metadata.scss

@ -0,0 +1,23 @@
.app-metadata {
@include govuk-font($size: 16, $tabular: true);
color: $govuk-secondary-text-colour;
margin-top: 0;
&--inline {
display: flex;
gap: govuk-spacing(3);
margin: 0;
}
&__item {
display: flex;
}
&__term {
margin-right: govuk-spacing(1);
}
&__definition {
margin-left: 0;
}
}

2
app/frontend/styles/application.scss

@ -30,6 +30,8 @@ $govuk-breakpoints: (
@import "filter-layout";
@import "header";
@import "input";
@import "log";
@import "metadata";
@import "related-navigation";
@import "section-skip-link";
@import "table-group";

76
app/views/case_logs/_log_list.html.erb

@ -1,68 +1,8 @@
<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
<%= govuk_table do |table| %>
<%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %>
<%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "logs", path: request.path)) %>
<%= govuk_link_to "Download (CSV)", "#{request.path}.csv", type: "text/csv" %>
<% end %>
<%= table.head do |head| %>
<%= head.row do |row| %>
<% row.cell(header: true, text: "Log", html_attributes: {
scope: "col",
}) %>
<% row.cell(header: true, text: "Tenant", html_attributes: {
scope: "col",
}) %>
<% row.cell(header: true, text: "Property", html_attributes: {
scope: "col",
}) %>
<% row.cell(header: true, text: "Tenancy starts", html_attributes: {
scope: "col",
}) %>
<% row.cell(header: true, text: "Log created", html_attributes: {
scope: "col",
}) %>
<% row.cell(header: true, text: "Log status", html_attributes: {
scope: "col",
}) %>
<% if current_user.support? %>
<% row.cell(header: true, text: "Owning organisation", html_attributes: {
scope: "col",
}) %>
<% row.cell(header: true, text: "Managing organisation", html_attributes: {
scope: "col",
}) %>
<% end %>
<% end %>
<% end %>
<%= table.body do |body| %>
<% case_logs.map do |log| %>
<%= body.row do |row| %>
<% row.cell(header: true, html_attributes: {
scope: "row",
}) do %>
<%= govuk_link_to case_log_path(log) do %>
<span class="govuk-visually-hidden">Log </span><%= log.id %>
<% end %>
<% end %>
<% row.cell(
text: log.tenancycode? ? log.tenancycode : "–",
classes: "app-!-font-tabular",
) %>
<% row.cell(
text: log.propcode? ? log.propcode : "–",
classes: "app-!-font-tabular",
) %>
<% row.cell(text: log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–") %>
<% row.cell(text: log.created_at.to_formatted_s(:govuk_date)) %>
<% row.cell do %>
<%= status_tag(log.status) %>
<% end %>
<% if current_user.support? %>
<% row.cell(text: log.owning_organisation&.name) %>
<% row.cell(text: log.managing_organisation&.name) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
</section>
<h2 class="govuk-body">
<%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "logs", path: request.path)) %>
<%= govuk_link_to "Download (CSV)", "#{request.path}.csv", type: "text/csv" %>
</h2>
<% case_logs.map do |log| %>
<%= render(LogSummaryComponent.new(current_user:, log:)) %>
<% end %>

8
spec/requests/case_logs_controller_spec.rb

@ -172,10 +172,10 @@ RSpec.describe CaseLogsController, type: :request do
sign_in user
end
it "does have organisation columns" do
it "does have organisation values" do
get "/logs", headers: headers, params: {}
expect(page).to have_content("Owning organisation")
expect(page).to have_content("Managing organisation")
expect(page).to have_content("Owned by")
expect(page).to have_content("Managed by")
end
it "shows case logs for all organisations" do
@ -449,7 +449,7 @@ RSpec.describe CaseLogsController, type: :request do
end
it "shows a table of logs" do
expect(CGI.unescape_html(response.body)).to match(/<table class="govuk-table">/)
expect(CGI.unescape_html(response.body)).to match(/<article class="app-log-summary">/)
expect(CGI.unescape_html(response.body)).to match(/logs/)
end

Loading…
Cancel
Save