diff --git a/app/frontend/assets/images/icon-cross.svg b/app/frontend/assets/images/icon-cross.svg new file mode 100644 index 000000000..645525f8c --- /dev/null +++ b/app/frontend/assets/images/icon-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/frontend/styles/_filter.scss b/app/frontend/styles/_filter.scss new file mode 100644 index 000000000..53e5c5821 --- /dev/null +++ b/app/frontend/styles/_filter.scss @@ -0,0 +1,109 @@ +.app-filter { + background-color: govuk-colour("light-grey"); + margin-bottom: govuk-spacing(2); + } + + .app-filter__header { + background-color: govuk-colour("light-grey"); + display: flex; + justify-content: space-between; + padding: govuk-spacing(2) govuk-spacing(3); + position: sticky; + top: 0; + z-index: 10; + + @include govuk-media-query($from: desktop) { + position: static; + } + + [class^=govuk-heading-] { + margin-bottom: 0; + } + } + + .app-filter__content { + padding: govuk-spacing(1) govuk-spacing(3) govuk-spacing(4); + } + + .app-filter__close { + @include govuk-font(19); + + -webkit-appearance: none; + background-color: transparent; + border: none; + border-radius: 0; + color: $govuk-text-colour; + cursor: pointer; + margin: #{govuk-spacing(1) * -1}; + padding: govuk-spacing(1); + + &:focus { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; + } + + // Fix unwanted button padding in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &::before { + background-image: url("../assets/images/icon-cross.svg"); + content: ""; + display: inline-block; + height: 14px; + margin-right: govuk-spacing(1); + position: relative; + top: -2px; // Alignment tweak + vertical-align: middle; + width: 14px; + } + + @include govuk-media-query(desktop) { + display: none; + } + } + + .app-filter-layout { + @include govuk-clearfix; + } + + .app-filter-layout__filter { + @include govuk-media-query(desktop) { + float: left; + min-width: govuk-grid-width("one-quarter"); + } + } + + .js-enabled .app-filter-layout__filter { + outline: 0 none; + + @include govuk-media-query($until: desktop) { + background-color: govuk-colour("light-grey"); + bottom: govuk-spacing(1); + border: 1px solid govuk-colour("mid-grey"); + max-width: 310px; + min-width: 260px; + width: 100%; + overflow-y: scroll; + position: fixed; + right: govuk-spacing(1); + top: govuk-spacing(1); + z-index: 100; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + } + } + } + + .app-filter-layout__content { + @include govuk-media-query(desktop) { + float: right; + max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)}); + width: 100%; + } + } \ No newline at end of file diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss index a89fa2cce..c3ff32075 100644 --- a/app/frontend/styles/application.scss +++ b/app/frontend/styles/application.scss @@ -24,6 +24,7 @@ $govuk-global-styles: true; @import "template"; @import "pagination"; @import "panel"; +@import "filter"; // App utilities .app-\!-colour-muted { diff --git a/app/views/case_logs/_log_filters.erb b/app/views/case_logs/_log_filters.erb new file mode 100644 index 000000000..bb02c44c5 --- /dev/null +++ b/app/views/case_logs/_log_filters.erb @@ -0,0 +1,30 @@ +
+
+
+
+
+

Filters

+ +
+
+
+ <%= form_with url: "/logs/filter", html: { method: :post }, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %> + <%= f.govuk_check_boxes_fieldset :status, legend: { text: "Status", size: "s"} do %> +
+ <% statuses = {in_progress: "In progress", submitted: "Completed", not_started: "Not started"} %> + <% statuses.map do |key, option| %> + <%= f.govuk_check_box "status", "#{key}", + label: { text: option }, + checked: filter_selected?(key), + size: "s" %> + <% end %> +
+ <% end %> + <%= f.govuk_submit "Apply filters", class: "govuk-!-margin-top-4" %> + <% end %> +
+
+
+
+
+
\ No newline at end of file diff --git a/app/views/case_logs/_log_list.html.erb b/app/views/case_logs/_log_list.html.erb index bf171cf51..a2fe5645c 100644 --- a/app/views/case_logs/_log_list.html.erb +++ b/app/views/case_logs/_log_list.html.erb @@ -1,88 +1,62 @@ -
-
-
-
-

Filters

-
-
-
- <%= form_with url: "/logs/filter", html: { method: :post }, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %> - <%= f.govuk_check_boxes_fieldset :status do %> - <% statuses = {in_progress: "In progress", submitted: "Completed", archived: "Not started"} %> - <% statuses.map do |key, option| %> - <%= f.govuk_check_box "status", "#{key}", - label: { text: option }, - checked: filter_selected?(key), - class: "govuk-checkboxes govuk-checkboxes--small" %> - <% end %> - <% end %> - <%= f.govuk_submit "Apply filters"%> +
+
+ + <%= pagy.count %> total <%= title.downcase %> + + Download (CSV) +
+
+ + + + + + + + + + <% if current_user.support? %> + + <% end %> - - - - -
-
-
- - <%= pagy.count %> total <%= title.downcase %> - - Download (CSV) -
-
-
LogTenantPropertyTenancy startsLog createdCompletedOwning organisationManaging organisation
- - - - - - - - - <% if current_user.support? %> - - - <% end %> - - - - <% case_logs.map do |log| %> - - - - - - - - <% if current_user.support? %> - - - <% end %> - - <% end %> - -
LogTenantPropertyTenancy startsLog createdCompletedOwning organisationManaging organisation
- <%= govuk_link_to log.id, case_log_path(log) %> - - <%= log.tenant_code? ? log.tenant_code : '–' %> - - <%= log.propcode? ? log.propcode : '–' %> - - <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : '–' %> - - <%= log.created_at.to_formatted_s(:govuk_date) %> - - <%= govuk_tag( - colour: log.status == 'completed' ? 'blue' : 'grey', - text: log.status.humanize - ) %> - - <%= log.owning_organisation.name %> - - <%= log.managing_organisation.name %> -
-
-
-
-
+ + + + <% case_logs.map do |log| %> + + + <%= govuk_link_to log.id, case_log_path(log) %> + + + <%= log.tenant_code? ? log.tenant_code : '–' %> + + + <%= log.propcode? ? log.propcode : '–' %> + + + <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : '–' %> + + + <%= log.created_at.to_formatted_s(:govuk_date) %> + + + <%= govuk_tag( + colour: log.status == 'completed' ? 'blue' : 'grey', + text: log.status.humanize + ) %> + + <% if current_user.support? %> + + <%= log.owning_organisation.name %> + + + <%= log.managing_organisation.name %> + + <% end %> + + <% end %> + + + + + diff --git a/app/views/case_logs/index.html.erb b/app/views/case_logs/index.html.erb index b1d40c173..5f1040274 100644 --- a/app/views/case_logs/index.html.erb +++ b/app/views/case_logs/index.html.erb @@ -5,11 +5,18 @@
+ <%= govuk_button_link_to 'Hide filters', "", secondary: true %> <%= govuk_button_to "Create a new lettings log", case_logs_path %> <%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
-<% if @case_logs.present? %> - <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %> - <%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %> -<% end %> +
+ <%= render partial: "log_filters"%> + <% if @case_logs.present? %> +
+ <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %> + <%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %> +
+ <% end %> +
+ diff --git a/spec/helpers/filters_helper_spec.rb b/spec/helpers/filters_helper_spec.rb index 1ef323ab0..1d44e4fa9 100644 --- a/spec/helpers/filters_helper_spec.rb +++ b/spec/helpers/filters_helper_spec.rb @@ -9,7 +9,7 @@ RSpec.describe FiltersHelper do end end - context "one filter is selected" do + context "when one filter is selected" do before do cookies[:case_logs_filters] = { "status": "in_progress" }.to_json end