Async Report components Reports list
Contents
<div class="govuk-tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#my-bookmarks-tab">
Bookmarks (2)
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#requested-reports-tab">
Requested (3)
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#recently-viewed-tab">
Viewed (1)
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="my-bookmarks-tab">
<div id="dpr-bookmarks-list">
<div>
<div class="dpr-slide__header">
<p class="govuk-body-s dpr-slide__sub-text">Showing 2 of 2</p>
</div>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header dpr-req-product-head">Product</th>
<th scope="col" class="govuk-table__header dpr-bm-description-head">Description</th>
<th scope="col" class="govuk-table__header dpr-bm-actions-head">Actions</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Bookmarked variant</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 dpr-display-none'>undefined</p>
</div></td>
<td class="govuk-table__cell dpr-req-cell"><div class='dpr-show-more' data-content='Bookmarked variant 1 description' data-dpr-module='show-more' data-length='200'>
<div class='dpr-show-more-content'>Bookmarked variant description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-3/variantId-1/request'>Request report</a><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
<input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-1-bookmark-list' data-report-id='test-report-3' data-id='variantId-1' data-report-type='report' data-csrf-token='csrfToken' checked />
<label id='variantId-1-test-report-3-bookmark-list-bookmark-label' for='test-report-3-variantId-1-bookmark-list'><span class='dpr-bookmark-label govuk-body-s'>Remove bookmark</span></label>
</div></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell"><div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Bookmarked dashboard</strong></p>
<strong class='govuk-tag govuk-tag--purple dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Dashboard</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 dpr-display-none'>undefined</p>
</div></td>
<td class="govuk-table__cell dpr-req-cell"><div class='dpr-show-more' data-content='Bookmarked dashboard 1 description' data-dpr-module='show-more' data-length='200'>
<div class='dpr-show-more-content'>Bookmarked dashboard 1 description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/dashboard/test-report-1/test-dashboard-8/request'>Request dashboard</a><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
<input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-1-test-dashboard-8-bookmark-list' data-report-id='test-report-1' data-id='test-dashboard-8' data-report-type='dashboard' data-csrf-token='csrfToken' checked />
<label id='test-dashboard-8-test-report-1-bookmark-list-bookmark-label' for='test-report-1-test-dashboard-8-bookmark-list'><span class='dpr-bookmark-label govuk-body-s'>Remove bookmark</span></label>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="requested-reports-tab">
<div id="dpr-async-request-component" data-dpr-module="async-request-list" data-request-data='[{"reportId":"test-report-3","id":"variantId-1","executionId":"exId_1729765628165","tableId":"tblId_1729765628165","status":"FINISHED","type":"report","dataProductDefinitionsPath":""},{"reportId":"test-report-3","id":"variantId-4","executionId":"exId_1729765871851","tableId":"tblId_1729765871851","status":"EXPIRED","type":"report","dataProductDefinitionsPath":""},{"reportId":"test-report-3","id":"variantId-2","executionId":"exId_1729765694790","tableId":"tblId_1729765694790","status":"FAILED","type":"report","dataProductDefinitionsPath":""}]' data-csrf-token="csrfToken">
<div>
<div class="dpr-slide__header">
<p class="govuk-body-s dpr-slide__sub-text">Showing 3 of 3</p>
</div>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header dpr-req-product-head">Product</th>
<th scope="col" class="govuk-table__header dpr-req-description-head">Description</th>
<th scope="col" class="govuk-table__header dpr-req-filters-head">Filters</th>
<th scope="col" class="govuk-table__header dpr-req-status-head">Status</th>
<th scope="col" class="govuk-table__header dpr-req-actions-head">Actions</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell"><div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 1</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Ready at: 24/10/2024</p>
</div></td>
<td class="govuk-table__cell"><div class='dpr-show-more' data-content='this is the description for variant 1' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this is the description for variant 1</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell"><ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.3</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--green'>FINISHED</strong>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><a class='govuk-link govuk-link--no-visited-state' href='#'>Go to report</a></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Expired at: 24/10/2024</p>
</div></td>
<td class="govuk-table__cell"><div class='dpr-show-more' data-content='this is the description for variant 2' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this is the description for variant 2</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell"><ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.1</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--grey'>EXPIRED</strong>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status">
<div class='dpr-icon-wrapper__item-actions'>
<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href=''>Refresh</a>
<a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765871851'>Remove</a>
</div>
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Failed at: 24/10/2024</p>
</div></td>
<td class="govuk-table__cell"><div class='dpr-show-more' data-content='this is the description for variant 3' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this is the description for variant 3</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell"><ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 4: Inigo Montoya</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--red'>FAILED</strong>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status">
<div class='dpr-icon-wrapper__item-actions'>
<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='#'>Retry</a>
<a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765694790'>Remove</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="recently-viewed-tab">
<div id="dpr-recently-viewed-component" data-dpr-module="recently-viewed-list" data-request-data='[{"reportId":"test-report-3","id":"variantId-1","executionId":"exId_1729766362362","tableId":"tblId_1729766362362","status":"EXPIRED","type":"report"}]' data-csrf-token="csrfToken">
<div>
<div class="dpr-slide__header">
<p class="govuk-body-s dpr-slide__sub-text">Showing 1 of 1</p>
</div>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header dpr-req-product-head">Product</th>
<th scope="col" class="govuk-table__header dpr-req-description-head">Description</th>
<th scope="col" class="govuk-table__header dpr-req-filters-head">Filters</th>
<th scope="col" class="govuk-table__header dpr-req-status-head">Status</th>
<th scope="col" class="govuk-table__header dpr-req-actions-head">Actions</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report Name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Viewed report</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4'>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2'>Expired at: 23/04/2025</p>
</div>
</td>
<td class="govuk-table__cell">
<div class='dpr-show-more' data-content='this report has been viewed' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this report has been viewed</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div>
</td>
<td class="govuk-table__cell">
<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'>
<li class='govuk-body-s'>Field 1: value1.1</li>
<li class='govuk-body-s'>Sort Column: Field 1</li>
<li class='govuk-body-s'>Sort Direction: Ascending</li>
</ul>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--grey'>EXPIRED</strong></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status">
<div class='dpr-icon-wrapper__item-actions'>
<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href=''>Refresh</a>
<a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-viewed-report-button' href='#' data-execution-id='exId_1729766362362'>Remove</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{%- from "dpr/components/user-reports/view.njk" import dprUserReports -%}
{% set requestedReports = {
head: {
href: "./async-reports/requested"
},
tableData: {
rows: [
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 1</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Ready at: 24/10/2024</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this is the description for variant 1' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this is the description for variant 1</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.3</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--green'>FINISHED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<a class='govuk-link govuk-link--no-visited-state' href='#'>Go to report</a>",
classes: "dpr-req-cell dpr-req-cell__status"
}
],
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Expired at: 24/10/2024</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this is the description for variant 2' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this is the description for variant 2</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.1</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--grey'>EXPIRED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<div class='dpr-icon-wrapper__item-actions'>\n <a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href=''>Refresh</a>\n <a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765871851'>Remove</a>\n </div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
],
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Failed at: 24/10/2024</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this is the description for variant 3' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this is the description for variant 3</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 4: Inigo Montoya</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--red'>FAILED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<div class='dpr-icon-wrapper__item-actions'>\n <a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='#'>Retry</a>\n <a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765694790'>Remove</a>\n </div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
]
],
head: [
{
text: "Product",
classes: "dpr-req-product-head"
},
{
text: "Description",
classes: "dpr-req-description-head"
},
{
text: "Filters",
classes: "dpr-req-filters-head"
},
{
text: "Status",
classes: "dpr-req-status-head"
},
{
text: "Actions",
classes: "dpr-req-actions-head"
}
]
},
total: {
amount: 3,
shown: 3,
max: 20
},
meta: [
{
reportId: "test-report-3",
id: "variantId-1",
executionId: "exId_1729765628165",
tableId: "tblId_1729765628165",
status: "FINISHED",
type: "report",
dataProductDefinitionsPath: ""
},
{
reportId: "test-report-3",
id: "variantId-4",
executionId: "exId_1729765871851",
tableId: "tblId_1729765871851",
status: "EXPIRED",
type: "report",
dataProductDefinitionsPath: ""
},
{
reportId: "test-report-3",
id: "variantId-2",
executionId: "exId_1729765694790",
tableId: "tblId_1729765694790",
status: "FAILED",
type: "report",
dataProductDefinitionsPath: ""
}
],
csrfToken: "csrfToken",
maxRows: 20
}
%}
{% set viewedReports = {
head: {
href: "./async-reports/viewed"
},
tableData: {
rows: [
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report Name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Viewed report</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4'>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2'>Expired at: 23/04/2025</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this report has been viewed' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this report has been viewed</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.1</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--grey'>EXPIRED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<div class='dpr-icon-wrapper__item-actions'>\n <a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href=''>Refresh</a>\n <a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-viewed-report-button' href='#' data-execution-id='exId_1729766362362'>Remove</a>\n </div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
]
],
head: [
{
text: "Product",
classes: "dpr-req-product-head"
},
{
text: "Description",
classes: "dpr-req-description-head"
},
{
text: "Filters",
classes: "dpr-req-filters-head"
},
{
text: "Status",
classes: "dpr-req-status-head"
},
{
text: "Actions",
classes: "dpr-req-actions-head"
}
]
},
total: {
amount: 1,
shown: 1,
max: 20
},
meta: [
{
reportId: "test-report-3",
id: "variantId-1",
executionId: "exId_1729766362362",
tableId: "tblId_1729766362362",
status: "EXPIRED",
type: "report"
}
],
csrfToken: "csrfToken",
maxRows: 20
}
%}
{% set bookmarks = {
head: {
href: "./async-reports/bookmarks"
},
tableData: {
rows: [
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Bookmarked variant</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 dpr-display-none'>undefined</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='Bookmarked variant 1 description' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Bookmarked variant description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>",
classes: "dpr-req-cell"
},
{
html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-3/variantId-1/request'>Request report</a><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-1-bookmark-list' data-report-id='test-report-3' data-id='variantId-1' data-report-type='report' data-csrf-token='csrfToken' checked />\n <label id='variantId-1-test-report-3-bookmark-list-bookmark-label' for='test-report-3-variantId-1-bookmark-list'><span class='dpr-bookmark-label govuk-body-s'>Remove bookmark</span></label>\n</div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
],
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Bookmarked dashboard</strong></p>\n <strong class='govuk-tag govuk-tag--purple dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Dashboard</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 dpr-display-none'>undefined</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='Bookmarked dashboard 1 description' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Bookmarked dashboard 1 description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>",
classes: "dpr-req-cell"
},
{
html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/dashboard/test-report-1/test-dashboard-8/request'>Request dashboard</a><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-1-test-dashboard-8-bookmark-list' data-report-id='test-report-1' data-id='test-dashboard-8' data-report-type='dashboard' data-csrf-token='csrfToken' checked />\n <label id='test-dashboard-8-test-report-1-bookmark-list-bookmark-label' for='test-report-1-test-dashboard-8-bookmark-list'><span class='dpr-bookmark-label govuk-body-s'>Remove bookmark</span></label>\n</div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
]
],
head: [
{
text: "Product",
classes: "dpr-req-product-head"
},
{
text: "Description",
classes: "dpr-bm-description-head"
},
{
text: "Actions",
classes: "dpr-bm-actions-head"
}
]
},
total: {
amount: 2,
shown: 2,
max: 20
},
csrfToken: "csrfToken"
}
%}
{{ dprUserReports({
requestedReports: requestedReports,
viewedReports: viewedReports,
bookmarks: bookmarks
})}}
import UserReportsListUtils from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/user-reports/utils'
export default function routes (services: Services): Router {
...
router.get('/path/to/requested/reports/list/', (req, res) => {
const userReportsLists = await UserReportsListUtils.init({ res, req, services })
res.render('requested-reports.njk', {
userReportsLists
})
})
}
Overview
The report list component is used to:
- List requested reports
- List recently viewed reports
- List bookmarks
- Poll request status.
This component supports the async reports functionality by providing a way for user to navigate the through their requested reports.
When to use
Use this component when you have integrated async reports into your service and want to navigate:
- Requested reports.
- Recently viewed reports.
- Reports you have bookmarked.
When not to use
Do not use this component if you have not integrated async reports into your service.
How to use
This component requires you have followed the async reporting integration steps
Render your stored async request data to the frontend using UserReportsListUtils
// server/routes/index.ts
import UserReportsListUtils from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/user-reports/utils'
export default function routes(services: Services): Router {
...
router.get('/path/to/requested/reports/list/', (req, res) => {
const {
requestedReports,
viewedReports,
bookmarks,
} = await UserReportsListUtils.initLists({ res, req, services })
res.render('requested-reports.njk', {
title: 'DPR test site',
requestedReports,
viewedReports,
bookmarks
})
})
}
This will give you the arguments to simply apply as components arguments in the HTML:
dprUserReports({
requestedReports: requestedReports,
viewedReports: viewedReports,
bookmarks: bookmarks
})
View and navigate requested reports
Contents
<div class="govuk-tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#requested-reports-tab">
Requested (3)
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="requested-reports-tab">
<div id="dpr-async-request-component" data-dpr-module="async-request-list" data-request-data='[{"reportId":"test-report-3","id":"variantId-1","executionId":"exId_1729765628165","tableId":"tblId_1729765628165","status":"FINISHED","type":"report","dataProductDefinitionsPath":""},{"reportId":"test-report-3","id":"variantId-4","executionId":"exId_1729765871851","tableId":"tblId_1729765871851","status":"EXPIRED","type":"report","dataProductDefinitionsPath":""},{"reportId":"test-report-3","id":"variantId-2","executionId":"exId_1729765694790","tableId":"tblId_1729765694790","status":"FAILED","type":"report","dataProductDefinitionsPath":""}]' data-csrf-token="csrfToken">
<div>
<div class="dpr-slide__header">
<p class="govuk-body-s dpr-slide__sub-text">Showing 3 of 3</p>
</div>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header dpr-req-product-head">Product</th>
<th scope="col" class="govuk-table__header dpr-req-description-head">Description</th>
<th scope="col" class="govuk-table__header dpr-req-filters-head">Filters</th>
<th scope="col" class="govuk-table__header dpr-req-status-head">Status</th>
<th scope="col" class="govuk-table__header dpr-req-actions-head">Actions</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 1</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Ready at: 24/10/2024</p>
</div></td>
<td class="govuk-table__cell"><div class='dpr-show-more' data-content='this is the description for variant 1' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this is the description for variant 1</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell"><ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.3</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--green'>FINISHED</strong>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><a class='govuk-link govuk-link--no-visited-state' href='#'>Go to report</a></td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Expired at: 24/10/2024</p>
</div></td>
<td class="govuk-table__cell"><div class='dpr-show-more' data-content='this is the description for variant 2' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this is the description for variant 2</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell"><ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.1</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--grey'>EXPIRED</strong>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status">
<div class='dpr-icon-wrapper__item-actions'>
<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href=''>Refresh</a>
<a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765871851'>Remove</a>
</div>
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<div>
<p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>
<p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>
<strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>
<p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Failed at: 24/10/2024</p>
</div></td>
<td class="govuk-table__cell"><div class='dpr-show-more' data-content='this is the description for variant 3' data-dpr-module='show-more' data-length='175'>
<div class='dpr-show-more-content'>this is the description for variant 3</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>
</div></td>
<td class="govuk-table__cell"><ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 4: Inigo Montoya</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul></td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status"><strong class='govuk-tag dpr-request-status-tag govuk-tag--red'>FAILED</strong>
</td>
<td class="govuk-table__cell dpr-req-cell dpr-req-cell__status">
<div class='dpr-icon-wrapper__item-actions'>
<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='#'>Retry</a>
<a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765694790'>Remove</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{%- from "dpr/components/user-reports/view.njk" import dprUserReports -%}
{% set requestedReports = {
head: {
href: "./async-reports/requested"
},
tableData: {
rows: [
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 1</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Ready at: 24/10/2024</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this is the description for variant 1' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this is the description for variant 1</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.3</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--green'>FINISHED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<a class='govuk-link govuk-link--no-visited-state' href='#'>Go to report</a>",
classes: "dpr-req-cell dpr-req-cell__status"
}
],
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Expired at: 24/10/2024</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this is the description for variant 2' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this is the description for variant 2</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 1: value1.3</li><li class='govuk-body-s'>Field 2: value2.1</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--grey'>EXPIRED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<div class='dpr-icon-wrapper__item-actions'>\n <a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href=''>Refresh</a>\n <a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765871851'>Remove</a>\n </div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
],
[
{
html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-1'>Report name</p>\n <p class='govuk-body govuk-!-margin-bottom-2'><strong>Variant name 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small govuk-!-margin-bottom-4''>Report</strong>\n <p class='govuk-body-xs govuk-!-margin-bottom-0 govuk-!-margin-top-2 '>Failed at: 24/10/2024</p>\n</div>"
},
{
html: "<div class='dpr-show-more' data-content='this is the description for variant 3' data-dpr-module='show-more' data-length='175'>\n <div class='dpr-show-more-content'>this is the description for variant 3</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>"
},
{
html: "<ul class='dpr-card-group__item__filters-list govuk-!-margin-top-0 govuk-!-margin-bottom-0'><li class='govuk-body-s'>Field 4: Inigo Montoya</li><li class='govuk-body-s'>Sort Column: Field 1</li><li class='govuk-body-s'>Sort Direction: Ascending</li></ul>"
},
{
html: "<strong class='govuk-tag dpr-request-status-tag govuk-tag--red'>FAILED</strong>",
classes: "dpr-req-cell dpr-req-cell__status"
},
{
html: "<div class='dpr-icon-wrapper__item-actions'>\n <a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='#'>Retry</a>\n <a class='dpr-user-list-action govuk-link--no-visited-state dpr-remove-requested-report-button' href='#' data-execution-id='exId_1729765694790'>Remove</a>\n </div>",
classes: "dpr-req-cell dpr-req-cell__status"
}
]
],
head: [
{
text: "Product",
classes: "dpr-req-product-head"
},
{
text: "Description",
classes: "dpr-req-description-head"
},
{
text: "Filters",
classes: "dpr-req-filters-head"
},
{
text: "Status",
classes: "dpr-req-status-head"
},
{
text: "Actions",
classes: "dpr-req-actions-head"
}
]
},
total: {
amount: 3,
shown: 3,
max: 20
},
meta: [
{
reportId: "test-report-3",
id: "variantId-1",
executionId: "exId_1729765628165",
tableId: "tblId_1729765628165",
status: "FINISHED",
type: "report",
dataProductDefinitionsPath: ""
},
{
reportId: "test-report-3",
id: "variantId-4",
executionId: "exId_1729765871851",
tableId: "tblId_1729765871851",
status: "EXPIRED",
type: "report",
dataProductDefinitionsPath: ""
},
{
reportId: "test-report-3",
id: "variantId-2",
executionId: "exId_1729765694790",
tableId: "tblId_1729765694790",
status: "FAILED",
type: "report",
dataProductDefinitionsPath: ""
}
],
csrfToken: "csrfToken",
maxRows: 20
}
%}
{{ dprUserReports({
requestedReports: requestedReports
})}}
import UserReportsListUtils from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/user-reports/utils'
export default function routes (services: Services): Router {
...
router.get('/path/to/requested/reports/list/', (req, res) => {
const {
requestedReports,
} = await UserReportsListUtils.initLists({ res, req, services })
res.render('requested-reports.njk', {
requestedReports,
})
})
}