Merge branch 'main' of https://github.com/communitiesuk/mhclg-data-collection-beta into main

Gemfile

@@ -26,10 +26,10 @@ group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem "byebug", platforms: %i[mri mingw x64_mingw]
   gem "capybara"
-  gem "pry-byebug"
   gem "dotenv-rails"
-  gem "selenium-webdriver"
   gem "factory_bot_rails"
+  gem "pry-byebug"
+  gem "selenium-webdriver"
   %w[rspec-core rspec-expectations rspec-mocks rspec-rails rspec-support].each do |lib|
     gem lib, git: "https://github.com/rspec/#{lib}.git", branch: "main"
   end
@@ -41,12 +41,12 @@ group :development do
   # Display performance information such as SQL time and flame graphs for each request in your browser.
   # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
   gem "listen", "~> 3.3"
+  gem "overcommit", ">= 0.37.0", require: false
   gem "rack-mini-profiler", "~> 2.0"
   gem "rubocop-govuk"
   gem "rubocop-performance", require: false
   gem "rubocop-rails"
   gem "scss_lint-govuk"
-  gem "overcommit", ">= 0.37.0", require: false
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

app/javascript/styles/_task-list.scss

@@ -0,0 +1,82 @@
+
+// Task list pattern
+
+.app-task-list {
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  @include govuk-media-query($from: tablet) {
+    min-width: 550px;
+  }
+}
+
+.app-task-list__section {
+  display: table;
+  @include govuk-font($size:24, $weight: bold);
+}
+
+.app-task-list__section-number {
+  display: table-cell;
+
+  @include govuk-media-query($from: tablet) {
+    min-width: govuk-spacing(6);
+    padding-right: 0;
+  }
+}
+
+.app-task-list__items {
+  @include govuk-font($size: 19);
+  @include govuk-responsive-margin(9, "bottom");
+  list-style: none;
+  padding-left: 0;
+  @include govuk-media-query($from: tablet) {
+    padding-left: govuk-spacing(6);
+  }
+}
+
+.app-task-list__item {
+  border-bottom: 1px solid $govuk-border-colour;
+  margin-bottom: 0 !important;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  @include govuk-clearfix;
+}
+
+.app-task-list__item:first-child {
+  border-top: 1px solid $govuk-border-colour;
+}
+
+.app-task-list__task-name {
+  display: block;
+  @include govuk-media-query($from: 450px) {
+    float: left;
+  }
+}
+
+// The `app-task-list__task-completed` class was previously used on the task
+// list for the completed tag (changed in 86c90ec) – it's still included here to
+// avoid breaking task lists in existing prototypes.
+.app-task-list__tag,
+.app-task-list__task-completed {
+  margin-top: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
+
+  @include govuk-media-query($from: 450px) {
+    float: right;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+
+//custom
+.app-task-list {
+  &__item:target {
+  }
+  &--no-numbers &__items {
+    @include govuk-media-query($from: tablet) {
+      padding-left: 0;
+    }
+  }
+}

app/javascript/styles/application.scss

@@ -10,3 +10,5 @@ $govuk-font-url-function: frontend-font-url;
 $govuk-image-url-function: frontend-image-url;
 
 @import "~govuk-frontend/govuk/all";
+
+@import '_task-list'

app/models/case_log.rb

@@ -1,3 +1,3 @@
 class CaseLog < ApplicationRecord
-  enum status: ["in progress", "submitted"]
+  enum status: { "in progress" => 0, "submitted" => 1 }
 end

app/views/case_logs/_tasklist.html.erb

@@ -0,0 +1,28 @@
+<%# Placeholder until we have a real form schema %>
+<%
+  sections = {
+    "About the household" => ["Household characteristics", "Household situation", "Household needs"],
+    "Tenancy and property information" => ["Tenancy information", "Property information"],
+    "Rent and charges" => ["Income & benefits", "Rent"],
+    "Local Authority" => ["Local authority"],
+    "Submission" => ["Declaration"]
+  }
+%>
+
+<ol class="app-task-list app-task-list--no-numbers">
+  <% sections.map do |section, subsections| %>
+    <li>
+      <h2 class="app-task-list__section">
+        <span class="app-task-list__section-number"><%= section %></span>
+      </h2>
+      <ul class="app-task-list__items">
+        <% subsections.map do |subsection| %>
+          <li class="app-task-list__item">
+            <a class="task-name" href="#"><%= subsection %></a>
+            <strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong>
+          </li>
+        <% end %>
+      </ul>
+    </li>
+  <% end %>
+</ol>

app/views/case_logs/show.html.erb

@@ -1,3 +1,15 @@
-<h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <h1 class="govuk-heading-xl">Tasklist for log
+      <%= @case_log.id %></h1>
 
-<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is <%= @case_log.status %></h2>
+    <h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is
+      <%= @case_log.status %></h2>
+    <p class="govuk-body govuk-!-margin-bottom-7">You've completed 0 of 9 sections.</p>
+    <p class="govuk-body govuk-!-margin-bottom-7">
+      <a href="#">Skip to next incomplete section</a>
+    </p>
+
+    <%= render "tasklist" %>
+  </div>
+</div>

spec/factories/case_log.rb

@@ -1,6 +1,6 @@
 FactoryBot.define do
   factory :case_log do
-    id { 342351 }
+    id { 342_351 }
     status { 0 }
   end
 end

spec/features/case_log_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe "Test Features" do
 
   it "Displays a tasklist header" do
     visit("/case_logs/342351")
-    expect(page).to have_content("Tasklist for log 342351")
+    expect(page).to have_content("Tasklist for log #{id}")
+    expect(page).to have_content("This submission is #{status}")
   end
 end

spec/spec_helper.rb

@@ -95,6 +95,5 @@ RSpec.configure do |config|
   #   # as the one that triggered the failure.
   #   Kernel.srand config.seed
 
-
   config.include FactoryBot::Syntax::Methods
 end