Skip to content

Commit

Permalink
HWPV-187: Update claims index page (#638)
Browse files Browse the repository at this point in the history 
Co-authored-by: Paul Solecki <51918433+psoleckimoj@users.noreply.github.com>
  • Loading branch information
@ashleygyngell @psoleckimoj
ashleygyngell and psoleckimoj authored Aug 8, 2024
1 parent e600e7b commit d6a823a
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 128 deletions.
26 changes: 16 additions & 10 deletions app/assets/javascripts/claims-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,29 +36,36 @@ $(document).ready(function () {
alert('An error occurred when searching for claims.') // eslint-disable-line no-undef
}
},

columns: [
{ data: 'Reference', render: cleanColumnOutput, orderable: false },
{ data: 'Name', render: cleanColumnOutput, orderable: false },
{ data: 'DateSubmittedFormatted', orderable: true },
{ data: 'DateOfJourneyFormatted', orderable: true },
{ data: 'UpdatedDateFormatted', orderable: true },
{ data: 'DisplayStatus', orderable: false },
{ title: 'Ref no.', data: 'Reference', render: cleanColumnOutput, orderable: false },
{ title: 'Name', data: 'Name', render: cleanColumnOutput, orderable: false },
{ title: 'Submitted', data: 'DateSubmittedFormatted', orderable: true },
{ title: 'Visit date', data: 'DateOfJourneyFormatted', orderable: true },
{ title: 'Updated date', data: 'UpdatedDateFormatted', orderable: true },
{ title: 'Status', data: 'DisplayStatus', orderable: false },
{
title: 'Claim type',
data: 'ClaimType',
orderable: false,
createdCell: function (td, cellData, rowData, row, col) {
$(td).html('<span class=\'tag ' + rowData.ClaimType + '\'>' + rowData.ClaimTypeDisplayName + '</span>')
if (rowData.ClaimTypeDisplayName === 'Repeat') {
$(td).html('<span class="moj-badge moj-badge--green">' + rowData.ClaimTypeDisplayName + '</span>')
} else {
$(td).html('<span class="moj-badge">' + rowData.ClaimTypeDisplayName + '</span>')
}
}
},
{
title: '',
data: 'ClaimId',
orderable: false,
createdCell: function (td, cellData, rowData, row, col) {
$(td).html("<a id='claim" + rowData.ClaimId + "' href='/claim/" + rowData.ClaimId + "'>View</a>")
}
}
],
// TODO: update pagination to match design
pagingType: 'first_last_numbers',

columnDefs: [
{
Expand All @@ -67,10 +74,9 @@ $(document).ready(function () {
searchable: false
}
],

drawCallback: function () {
const total = $('#claims_info').text().split(' ')[5]
$('.badge').text(total)
$('.moj-notification-badge').text(total)
},

language: {
Expand Down
42 changes: 33 additions & 9 deletions app/assets/sass/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,19 @@ $govuk-global-styles: true;
$moj-page-width: 1170px;
$govuk-page-width: $moj-page-width;

$moj-page-width: 1170px;
$govuk-page-width: $moj-page-width;

@import '../../../node_modules/govuk-frontend/govuk/all';
@import '../../../node_modules/@ministryofjustice/frontend/moj/objects/all';
@import '../../../node_modules/@ministryofjustice/frontend/moj/settings/measurements';
@import '../../../node_modules/@ministryofjustice/frontend/moj/components/header/header';
@import '../../../node_modules/@ministryofjustice/frontend/moj/components/primary-navigation/primary-navigation';
@import '../../../node_modules/@ministryofjustice/frontend/moj/components/sortable-table/sortable-table';
@import '../../../node_modules/@ministryofjustice/frontend/moj/components/badge/badge';
@import '../../../node_modules/@ministryofjustice/frontend/moj/components/notification-badge/notification-badge';
@import '../../../node_modules/@ministryofjustice/frontend/moj/components/search/search';

@import '../../../node_modules/@ministryofjustice/frontend/moj/components/ticket-panel/_ticket-panel';

// Path to assets for use with the file-url function
Expand All @@ -35,13 +43,20 @@ $path: "/public/images/";
// override datatable styles

table.dataTable thead th {
padding-left: inherit;
padding-right: inherit;
color: #005ea5;
padding-left: 0px!important;
padding-right: 0px!important;
}

table.dataTable tbody td {
padding-left: inherit;
padding-right: inherit;
padding-left: 0px;
padding-right: 0px;
}


table.dataTable tbody tr {
padding-left: 0px;
padding-right: 0px;
}

table.col-2 td:first-child {
Expand All @@ -62,16 +77,18 @@ table.no-pad-right td {
margin-top: 40px;
}

.dataTable {
border-bottom: none!important;;
margin-bottom: 1em!important
}

.table-short-column {
width: 200px;
}

.search {
padding: 15px 0 0 0;
}

.search input.form-control {
width: 200px;
display: flex;
align-items: flex-end;
}

.rejection-reason {
Expand Down Expand Up @@ -622,6 +639,10 @@ ul.sub-tabs li a.active span.badge {
margin-bottom: 0.3125em;
}

.sorting_disabled {
max-width: 200px;
}

@media (min-width: 641px) {
.heading-small {
font-size: 19px;
Expand Down Expand Up @@ -743,6 +764,9 @@ ul.sub-tabs li a.active span.badge {
font-size: 19px;
}

.govuk-tabs__tab {
color: black
}
.config-description {
color: $govuk-secondary-text-colour;
width: 53%;
Expand Down
4 changes: 2 additions & 2 deletions app/services/data/get-claim-list-and-count.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ module.exports = function (status, advanceClaims, offset, limit, user, sortType,
.then(function (claims) {
const claimsToReturn = []
return Promise.each(claims, function (claim) {
claim.DateSubmittedFormatted = moment(claim.DateSubmitted).format('DD/MM/YYYY - HH:mm')
claim.DateSubmittedFormatted = moment(claim.DateSubmitted).format('DD/MM/YYYY')
claim.DateOfJourneyFormatted = moment(claim.DateOfJourney).format('DD/MM/YYYY')
claim.UpdatedDateFormatted = moment(claim.LastUpdated).format('DD/MM/YYYY - HH:mm')
claim.UpdatedDateFormatted = moment(claim.LastUpdated).format('DD/MM/YYYY')
claim.DisplayStatus = statusFormatter(claim.Status)
claim.Name = claim.FirstName + ' ' + claim.LastName
if (claim.Status === claimStatusEnum.APPROVED_ADVANCE_CLOSED.value) {
Expand Down
18 changes: 18 additions & 0 deletions app/services/nunjucks-setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,24 @@ module.exports = function (app, developmentMode) {
return arr1.concat(arr2)
})

njkEnv.addFilter('tableTitle', function (active) {
if (!active) {
return 'New'
} else if (active === 'ADVANCE-APPROVED') {
return 'Advance pending'
} else if (active === 'ADVANCE-PENDING-INFORMATION') {
return 'Advance awaiting information'
} else return active
})

njkEnv.addFilter('removeDashes', function (str) {
if (typeof str === 'string') {
return str.replace(/-/g, ' ')
} else {
return str
}
})

const getMojFilters = require('@ministryofjustice/frontend/moj/filters/all')

const mojFilters = getMojFilters()
Expand Down
2 changes: 2 additions & 0 deletions app/views/includes/scripts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
<script src="/public/javascripts/application.js"></script>
<script src="/assets/govuk/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
<script src="/assets/jquery.js"></script>
<script>window.MOJFrontend.initAll()</script>
176 changes: 69 additions & 107 deletions app/views/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
{% extends "includes/layout_new.html" %}
{% extends "includes/layout_new.html" %}

{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %}
{% from "moj/components/badge/macro.njk" import mojBadge %}
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
{% from "moj/components/notification-badge/macro.njk" import mojNotificationBadge %}
{% from "moj/components/search/macro.njk" import mojSearch %}

{% block pageTitle %}
{% if serviceName %} {{ serviceName }} {% endif %}
Expand All @@ -7,120 +15,74 @@
{% set activeMainNav = 'claims' %}

{% block content %}

<div class="column-one-half search">
<form action="/search">
<label for="input-search-query">
<input type="text" name="q" class="form-control" id="input-search-query">
</label>
<input type="submit" class="button" value="Search" id="search">
<a id="advanced-search" href="/advanced-search-input" class="link margin-left">Advanced search</a>
</form>
<br>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<div class="govuk-heading-xl">Claims</div>
</div>

<div>
{% if active == undefined %}
<br><a href="/?status=NEW/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=NEW/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'UPDATED' %}
<br><a href="/?status=UPDATED/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=UPDATED/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'PENDING' %}
<br><a href="/?status=PENDING/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=PENDING/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE'%}
<br><a href="/?status=ADVANCE/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=ADVANCE/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE-APPROVED' %}
<br><a href="/?status=ADVANCE-APPROVED/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=ADVANCE-APPROVED/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE-UPDATED' %}
<br><a href="/?status=ADVANCE-UPDATED/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=ADVANCE-UPDATED/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE-PENDING-INFORMATION' %}
<br><a href="/?status=ADVANCE-PENDING-INFORMATION/updated" class="link margin-left margin-right">Order By Last Updated</a>
<a href="/?status=ADVANCE-PENDING-INFORMATION/visit" class="link margin-left">Order By Visit Date</a>

{% elif active == 'NEW/updated' %}
<br><a href="/" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=NEW/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'UPDATED/updated' %}
<br><a href="/?status=UPDATED" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=UPDATED/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'PENDING/updated' %}
<br><a href="/?status=PENDING" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=PENDING/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE/updated'%}
<br><a href="/?status=ADVANCE" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=ADVANCE/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE-APPROVED/updated' %}
<br><a href="/?status=ADVANCE-APPROVED" class="link margin-left">Order By Date Submitted</a>
<a href="/?status=ADVANCE-APPROVED/visit" class="link margin-left margin-right">Order By Visit Date</a>
{% elif active == 'ADVANCE-UPDATED/updated' %}
<br><a href="/?status=ADVANCE-UPDATED" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=ADVANCE-UPDATED/visit" class="link margin-left">Order By Visit Date</a>
{% elif active == 'ADVANCE-PENDING-INFORMATION/updated' %}
<br><a href="/?status=ADVANCE-PENDING-INFORMATION" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=ADVANCE-PENDING-INFORMATION/visit" class="link margin-left">Order By Visit Date</a>

{% elif active == 'NEW/visit' %}
<br><a href="/" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=NEW/updated" class="link margin-left">Order By Last Updated</a>
{% elif active == 'UPDATED/visit' %}
<br><a href="/?status=UPDATED" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=UPDATED/updated" class="link margin-left">Order By Last Updated</a>
{% elif active == 'PENDING/visit' %}
<br><a href="/?status=PENDING" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=PENDING/updated" class="link margin-left">Order By Last Updated</a>
{% elif active == 'ADVANCE/visit'%}
<br><a href="/?status=ADVANCE" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=ADVANCE/updated" class="link margin-left">Order By Last Updated</a>
{% elif active == 'ADVANCE-APPROVED/visit' %}
<br><a href="/?status=ADVANCE-APPROVED" class="link margin-left">Order By Date Submitted</a>
<a href="/?status=ADVANCE-APPROVED/updated" class="link margin-left margin-right">Order By Last Updated</a>
{% elif active == 'ADVANCE-UPDATED/visit' %}
<br><a href="/?status=ADVANCE-UPDATED" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=ADVANCE-UPDATED/updated" class="link margin-left">Order By Last Updated</a>
{% elif active == 'ADVANCE-PENDING-INFORMATION/visit' %}
<br><a href="/?status=ADVANCE-PENDING-INFORMATION" class="link margin-left margin-right">Order By Date Submitted</a>
<a href="/?status=ADVANCE-PENDING-INFORMATION/updated" class="link margin-left">Order By Last Updated</a>
{% endif %}

<div class="govuk-grid-column-one-half search">
{{ mojSearch({
action: '/search',
method: 'get',
classes: 'govuk-!-width-two-thirds',
input: {
id: 'input-search-query',
name: 'q'
},
button: {
text: 'Search'
}
}) }}
<a id="advanced-search" href="/advanced-search-input" class=" margin-left govuk-!-width-one-third">Advanced
search</a>
</div>
</div>

<ul class="sub-tabs">
<li><a href="/" {% if active == undefined or active == 'NEW/updated' or active == 'NEW/visit' %} class="active">New <span class="badge"></span>{% else %}>New{% endif %}</a></li>
<li><a href="/?status=UPDATED"{% if active == 'UPDATED' or active == 'UPDATED/updated' or active == 'UPDATED/visit' %} class="active">Updated <span class="badge"></span>{% else %}>Updated{% endif %}</a></li>
<li><a href="/?status=PENDING"{% if active == 'PENDING' or active == 'PENDING/updated' or active == 'PENDING/visit' %} class="active">Pending <span class="badge"></span>{% else %}>Pending{% endif %}</a></li>
<li><a href="/?status=ADVANCE"{% if active == 'ADVANCE' or active == 'ADVANCE/updated' or active == 'ADVANCE/visit' %} class="active">Advance <span class="badge"></span>{% else %}>Advance{% endif %}</a></li>
<li><a href="/?status=ADVANCE-APPROVED"{% if active == 'ADVANCE-APPROVED' or active == 'ADVANCE-APPROVED/updated' or active == 'ADVANCE-APPROVED/visit' %} class="active">Advance pending<span class="badge"></span>{% else %}>Advance pending{% endif %}</a></li>
<li><a href="/?status=ADVANCE-UPDATED"{% if active == 'ADVANCE-UPDATED' or active == 'ADVANCE-UPDATED/updated' or active == 'ADVANCE-UPDATED/visit' %} class="active">Advance updated<span class="badge"></span>{% else %}>Advance updated{% endif %}</a></li>
<li><a href="/?status=ADVANCE-PENDING-INFORMATION"{% if active == 'ADVANCE-PENDING-INFORMATION' or active == 'ADVANCE-PENDING-INFORMATION/updated' or active == 'ADVANCE-PENDING-INFORMATION/visit' %} class="active">Advance awaiting information<span class="badge"></span>{% else %}>Advance awaiting information{% endif %}</a></li>
<div class="govuk-tabs" data-module="govuk-tabs">
<ul class="govuk-tabs__list">
<li {% if active==undefined or active=='NEW/updated' or active=='NEW/visit' %}
class="govuk-tabs__list-item govuk-tabs__list-item--selected">{% else %} class="govuk-tabs__list-item">{% endif
%}<a href="/" {% if active==undefined or active=='NEW/updated' or active=='NEW/visit' %}
class="active govuk-tabs__tab">New<span class="moj-notification-badge margin-left"></span>{% else %}>New{% endif
%}</a></li>
<li class="govuk-tabs__list-item"><a href="/?status=PENDING" {% if active=='PENDING' or active=='PENDING/updated' or
active=='PENDING/visit' %} class="active govuk-tabs__tab">Pending<span
class="moj-notification-badge margin-left"></span>{% else %}>Pending{% endif %}</a></li>
<li class="govuk-tabs__list-item"><a href="/?status=UPDATED" {% if active=='UPDATED' or active=='UPDATED/updated' or
active=='UPDATED/visit' %} class="active govuk-tabs__tab">Updated<span
class="moj-notification-badge margin-left"></span>{% else %}>Updated{% endif %}</a></li>
<li class="govuk-tabs__list-item"><a href="/?status=ADVANCE" {% if active=='ADVANCE' or active=='ADVANCE/updated' or
active=='ADVANCE/visit' %} class="active govuk-tabs__tab">Advance<span
class="moj-notification-badge margin-left"></span>{% else %}>Advance{% endif %}</a></li>
<li class="govuk-tabs__list-item"><a href="/?status=ADVANCE-APPROVED" {% if active=='ADVANCE-APPROVED' or
active=='ADVANCE-APPROVED/updated' or active=='ADVANCE-APPROVED/visit' %} class="active govuk-tabs__tab">Advance
pending<span class="moj-notification-badge margin-left"></span>{% else %}>Advance pending{% endif %}</a></li>
<li class="govuk-tabs__list-item"><a href="/?status=ADVANCE-UPDATED" {% if active=='ADVANCE-UPDATED' or
active=='ADVANCE-UPDATED/updated' or active=='ADVANCE-UPDATED/visit' %} class="active govuk-tabs__tab">Advance
updated<span class="moj-notification-badge margin-left"></span>{% else %}>Advance updated{% endif %}</a></li>
<li class="govuk-tabs__list-item"><a href="/?status=ADVANCE-PENDING-INFORMATION" {% if
active=='ADVANCE-PENDING-INFORMATION' or active=='ADVANCE-PENDING-INFORMATION/updated' or
active=='ADVANCE-PENDING-INFORMATION/visit' %} class="active govuk-tabs__tab">Advance awaiting information<span
class="moj-notification-badge margin-left"></span>{% else %}>Advance awaiting information{% endif %}</a></li>
</ul>
<div class="govuk-tabs__panel">
<h2 class="govuk-heading-m">{{ active | tableTitle | removeDashes | capitalize }}</h2>
{{ govukTable({
attributes: {
'data-module': 'moj-sortable-table',
'id': 'claims' }
}) }}
</div>
</div>

<table id="claims" class="table">
<thead>
<tr>
<th>Ref no.</th>
<th>Name</th>
<th>Submitted</th>
<th>Visit Date</th>
<th>Updated Date</th>
<th>Status</th>
<th>Claim type</th>
<th></th>
</tr>
</thead>
</table>

{% if user %}
<p>
<a href="{{ user.assistedDigitalUrl }}">Submit a claim on behalf of a claimant</a>
</p>
{% endif %}
{% if user %}
<p>
<a href="{{ user.assistedDigitalUrl }}">Submit a claim on behalf of a claimant</a>
</p>
{% endif %}

{% endblock %}

{% block bodyEnd %}
{% include "includes/index-scripts.html" %}
{% include "includes/index-scripts.html" %}
{% endblock %}

0 comments on commit d6a823a

Please sign in to comment.