Merge pull request #355 from communitiesuk/1009-logs-summary

app/controllers/case_logs_controller.rb

@@ -5,8 +5,7 @@ class CaseLogsController < ApplicationController
   before_action :find_resource, except: %i[create index edit]
 
   def index
-    @completed_case_logs = current_user.completed_case_logs
+    @case_logs = current_user.case_logs
-    @in_progress_case_logs = current_user.not_completed_case_logs
   end
 
   def create

app/views/case_logs/_log_list.html.erb

@@ -1,29 +1,46 @@
-<table class="govuk-table">
+<figure class="app-figure">
-  <caption class="govuk-table__caption govuk-table__caption--m"><%= title %></caption>
+  <figcaption id="<%= title.dasherize %>" class="app-figure__caption">
+    <b><%= case_logs.count %></b> <%= title.downcase %>
+  </figcaption>
+  <div class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
+    <table class="govuk-table">
       <thead class="govuk-table__head">
         <tr class="govuk-table__row">
-      <th scope="col" class="govuk-table__header">Log reference</th>
+          <th class="govuk-table__header" scope="col">Log</th>
-      <th scope="col" class="govuk-table__header">Postcode</th>
+          <th class="govuk-table__header" scope="col">Tenant</th>
-      <th scope="col" class="govuk-table__header">Tenant code</th>
+          <th class="govuk-table__header" scope="col">Property</th>
-      <th scope="col" class="govuk-table__header"><%= date_title %></th>
+          <th class="govuk-table__header" scope="col">Tenacy starts</th>
+          <th class="govuk-table__header" scope="col">Log created</th>
+          <th class="govuk-table__header" scope="col">Completed</th>
         </tr>
       </thead>
       <tbody class="govuk-table__body">
         <% case_logs.map do |log| %>
         <tr class="govuk-table__row">
-      <th scope="row" class="govuk-table__header">
+          <th class="govuk-table__header" scope="row">
             <%= govuk_link_to log.id, case_log_path(log) %>
           </th>
-      <td class="govuk-table__cell govuk-table__cell">
+          <td class="govuk-table__cell app-!-font-tabular">
-        <%= log.property_postcode %>
+            <%= log.tenant_code? ? log.tenant_code : '–' %>
           </td>
-      <td class="govuk-table__cell govuk-table__cell">
+          <td class="govuk-table__cell app-!-font-tabular">
-        <%= log.tenant_code %>
+            <%= log.propcode? ? log.propcode : '–' %>
           </td>
-      <td id="last-changed" class="govuk-table__cell">
+          <td class="govuk-table__cell">
-        <%= log.updated_at.to_formatted_s(:govuk_date) %>
+            <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : '–' %>
+          </td>
+          <td class="govuk-table__cell">
+            <%= log.created_at.to_formatted_s(:govuk_date) %>
+          </td>
+          <td class="govuk-table__cell">
+            <%= govuk_tag(
+              colour: log.status == 'completed' ? 'blue' : 'grey',
+              text: log.status.humanize
+            ) %>
           </td>
         </tr>
         <% end %>
       </tbody>
-</table>
+    </table>
+  </div>
+</figure>

app/views/case_logs/index.html.erb

@@ -1,21 +1,14 @@
-<% content_for :title, "Your logs" %>
+<% content_for :title, "Logs" %>
 
-<div class="govuk-grid-row">
+<h1 class="govuk-heading-l">
-  <div class="govuk-grid-column-two-thirds-from-desktop">
-    <h1 class="govuk-heading-l">
   <%= content_for(:title) %>
-    </h1>
+</h1>
 
-    <%= govuk_button_to "Create new log", case_logs_path %>
+<div class="govuk-button-group">
-
+  <%= govuk_button_to "Create a new lettings log", case_logs_path %>
-    <% if @in_progress_case_logs.present? %>
+  <%= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
-      <%= render partial: "log_list", locals: { case_logs: @in_progress_case_logs, title: "Logs you need to complete", date_title: "Last Changed" } %>
-    <% end %>
-
-    <% if @completed_case_logs.present? %>
-      <%= render partial: "log_list", locals: { case_logs: @completed_case_logs, title: "Logs you’ve submitted", date_title: "Date Submitted" } %>
-    <% end %>
-
-    <p><a href="#" class="govuk-link">See all completed logs (<%= @completed_case_logs.count %>)</a></p>
-  </div>
 </div>
+
+<% if @case_logs.present? %>
+  <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs" } %>
+<% end %>

app/views/layouts/application.html.erb

@@ -28,7 +28,7 @@
     <% end %>
   </head>
 
-  <body class="govuk-template__body ">
+  <body class="govuk-template__body app-template--wide">
     <script>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
     </script>
@@ -43,7 +43,7 @@
         if current_user.nil?
           component.navigation_item(text: 'Sign in', href: user_session_path)
         elsif
-          component.navigation_item(text: 'Your logs', href: case_logs_path)
+          component.navigation_item(text: 'Logs', href: case_logs_path)
           component.navigation_item(text: 'Your organisation', href: "/organisations/#{current_user.organisation.id}")
           component.navigation_item(text: 'Your account', href: user_path(current_user))
           component.navigation_item(text: 'Sign out', href: destroy_user_session_path, options: { data: {turbo_method: :delete}, method: :delete })

app/webpacker/styles/_figure.scss

@@ -0,0 +1,10 @@
+.app-figure {
+  margin: 0;
+}
+
+.app-figure__caption {
+  @include govuk-font($size: 19);
+  border-top: 1px solid $govuk-border-colour;
+  margin-bottom: govuk-spacing(6);
+  padding-top: govuk-spacing(4);
+}

app/webpacker/styles/_table-group.scss

@@ -0,0 +1,44 @@
+.app-table-group {
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: govuk-spacing(-3) govuk-spacing(-3) govuk-spacing(3);
+  padding: 0 govuk-spacing(3);
+  scrollbar-color: $govuk-text-colour govuk-colour("light-grey");
+
+  .govuk-table {
+    margin-bottom: -1px;
+  }
+
+  .govuk-table__header,
+  .govuk-table__cell {
+    white-space: nowrap;
+  }
+
+  &::-webkit-scrollbar {
+    height: govuk-spacing(1);
+    width: govuk-spacing(1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $govuk-text-colour;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: govuk-colour("light-grey");
+  }
+}
+
+.app-table-group:focus {
+  box-shadow: 0 0 0 #{$govuk-focus-width * 2} $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-colour("black");
+}
+
+.app-table-group:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+.app-table-group:focus-visible {
+  box-shadow: 0 0 0 #{$govuk-focus-width * 2} $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-colour("black");
+}

app/webpacker/styles/_template.scss

@@ -0,0 +1,5 @@
+.app-template--wide {
+  .govuk-width-container {
+    @include govuk-width-container(1100px);
+  }
+}

app/webpacker/styles/application.scss

@@ -13,13 +13,29 @@ $govuk-global-styles: true;
 @import "~govuk-frontend/govuk/all";
 
 @import "accessible-autocomplete";
+@import "figure";
 @import "input";
 @import "related-navigation";
 @import "section-skip-link";
-@import "task-list";
 @import "tab-navigation";
+@import "table-group";
+@import "task-list";
+@import "template";
 
-// Overrides
+// App utilities
 .app-\!-colour-muted {
   color: $govuk-secondary-text-colour !important;
 }
+
+.app-\!-font-tabular {
+  @include govuk-font($size: false, $tabular: true);
+}
+
+// Overrides
+.govuk-button-group {
+  align-items: center;
+}
+
+.govuk-tag {
+  white-space: nowrap;
+}

config/forms/2021_2022.json

@@ -7,7 +7,7 @@
       "label": "Before you start",
       "subsections": {
         "setup": {
-          "label": "Set up your lettings log",
+          "label": "Set up this lettings log",
           "pages": {
             "organisation_details": {
               "header": "Organisation details",
@@ -5640,7 +5640,7 @@
               "questions": {
                 "declaration": {
                   "check_answer_label": "",
-                  "header": "Submit your lettings log ",
+                  "header": "Submit this lettings log ",
                   "hint_text": "",
                   "type": "checkbox",
                   "answer_options": {

spec/features/form/form_navigation_spec.rb

@@ -26,10 +26,10 @@ RSpec.describe "Form Navigation" do
     sign_in user
   end
 
-  describe "Create new log" do
+  describe "Create a new lettings log" do
     it "redirects to the task list for the new log" do
       visit("/logs")
-      click_button("Create new log")
+      click_button("Create a new lettings log")
       id = CaseLog.order(created_at: :desc).first.id
       expect(page).to have_content("Log #{id}")
     end

spec/features/start_page_spec.rb

@@ -10,14 +10,14 @@ RSpec.describe "Start Page Features" do
       sign_in user
     end
 
-    it "takes you to your logs" do
+    it "takes you to logs" do
       visit("/")
       expect(page).to have_current_path("/logs")
     end
   end
 
   context "when the user is not signed in" do
-    it "takes you to sign in and then to your logs" do
+    it "takes you to sign in and then to logs" do
       visit("/")
       click_link("Start now")
       expect(page).to have_current_path("/users/sign-in?start=true")

spec/fixtures/forms/2021_2022.json

@@ -814,7 +814,7 @@
                 "questions": {
                   "declaration": {
                     "check_answer_label": "",
-                    "header": "Submit your lettings log ",
+                    "header": "Submit this lettings log ",
                     "type": "checkbox",
                     "answer_options": {
                       "declaration": {

spec/fixtures/forms/2022_2023.json

@@ -7,7 +7,7 @@
         "label": "Before you start",
         "subsections": {
           "setup": {
-            "label": "Set up your lettings log",
+            "label": "Set up this lettings log",
             "pages": {
               "renewal": {
                 "header": "",

spec/views/case_log_index_view_spec.rb

@@ -2,51 +2,18 @@ require "rails_helper"
 
 RSpec.describe "case_logs/index" do
   let(:in_progress_log) { FactoryBot.create(:case_log, :in_progress) }
-  let(:completed_log) { FactoryBot.create(:case_log, :completed) }
 
-  context "with an in progress log list" do
+  context "with a log list" do
     before do
-      assign(:in_progress_case_logs, [in_progress_log])
+      assign(:case_logs, [in_progress_log])
-      assign(:completed_case_logs, [])
       render
     end
 
-    it "renders a table for in progress logs only" do
+    it "renders a table for all logs" do
       expect(rendered).to match(/<table class="govuk-table">/)
-      expect(rendered).to match(/Logs you need to complete/)
+      expect(rendered).to match(/logs/)
-      expect(rendered).not_to match(/Logs you’ve submitted/)
+      expect(rendered).to match(in_progress_log.created_at.to_formatted_s(:govuk_date))
-      expect(rendered).to match(in_progress_log.tenant_code)
+      expect(rendered).to match(in_progress_log.status.humanize)
-      expect(rendered).to match(in_progress_log.property_postcode)
-    end
-  end
-
-  context "with a completed log list" do
-    before do
-      assign(:in_progress_case_logs, [])
-      assign(:completed_case_logs, [completed_log])
-      render
-    end
-
-    it "renders a table for in progress logs only" do
-      expect(rendered).to match(/<table class="govuk-table">/)
-      expect(rendered).to match(/Logs you’ve submitted/)
-      expect(rendered).not_to match(/Logs you need to complete/)
-      expect(rendered).to match(completed_log.tenant_code)
-      expect(rendered).to match(completed_log.property_postcode)
-    end
-  end
-
-  context "with a completed log list and an in_progress log list" do
-    before do
-      assign(:in_progress_case_logs, [in_progress_log])
-      assign(:completed_case_logs, [completed_log])
-      render
-    end
-
-    it "renders two tables, one for each status" do
-      expect(rendered).to match(/<table class="govuk-table">/)
-      expect(rendered).to match(/Logs you’ve submitted/)
-      expect(rendered).to match(/Logs you need to complete/)
     end
   end
 end