Async Report components Reports list
Contents
<div id="dpr-user-reports-list-component">
<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">
<h1 class="govuk-heading-m govuk-!-margin-bottom-2">Bookmarks</h1>
<div class="dpr-my-reports-help">
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help
</span>
</summary>
<div class="govuk-details__text">
</div>
</details>
</div>
<div data-list-root>
<div class="dpr-my-reports-totals">
<p class=" govuk-body">Showing
<strong data-total-shown>2</strong> of
<strong data-total-total>2</strong> reports
</p>
</div>
<div class="dpr-my-reports" data-dpr-module="dpr-my-reports" data-list-type="my-reports-bookmarks" data-csrf-token="">
<div class="dpr-my-reports__table dpr-my-reports__table--bookmarks " data-list>
<div class="dpr-my-reports__headings dpr-my-reports__row">
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--title">
<p class="govuk-heading-s">Product</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--description">
<p class="govuk-heading-s">Description</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--actions">
<p class="govuk-heading-s">Actions</p>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-' data-report-id='' data-id='' data-table-id='' data-execution-id='' data-status='' data-list-type='' data-csrf-token='' data-path='' aria-labelledby="row_Product-Name_Bookmark-1_">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Product-Name_Bookmark-1_" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Bookmark 1
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Product Name</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'></p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--description">
<div class="dpr-my-reports__item-description">
<p class="govuk-body">Example report bookmark</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="/dpr/request-report/report/request-examples/request-example-success/filters" class="govuk-link govuk-link--no-visited-state">Request report</a>
</li>
<li>
<a href="#" class="govuk-link govuk-link--no-visited-state" id="bm1-bm1.1-report" data-dpr-module="bookmark-button" data-id="bm1.1" data-report-id="bm1" data-report-type="report" data-csrf-token="csrfToken" data-endpoint="/dpr/my-reports/bookmarks" data-link-type="remove">
Remove bookmark
</a>
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-' data-report-id='' data-id='' data-table-id='' data-execution-id='' data-status='' data-list-type='' data-csrf-token='' data-path='' aria-labelledby="row_Product-Name_Bookmark-2_">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Product-Name_Bookmark-2_" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Bookmark 2
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Product Name</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
dashboard
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'></p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--description">
<div class="dpr-my-reports__item-description">
<p class="govuk-body">Example dashboard bookmark</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="/dpr/request-report/dashboard/mock-dashboards/test-dashboard-8/filters" class="govuk-link govuk-link--no-visited-state">Request dashboard</a>
</li>
<li>
<a href="#" class="govuk-link govuk-link--no-visited-state" id="bm2-bm2.1-report" data-dpr-module="bookmark-button" data-id="bm2.1" data-report-id="bm2" data-report-type="report" data-csrf-token="csrfToken" data-endpoint="/dpr/my-reports/bookmarks" data-link-type="remove">
Remove bookmark
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-empty-state class="dpr-hidden">
<div class="dpr-my-reports__empty-state">
<p class='govuk-body govuk-!-margin-bottom-0'><strong>You have 0 bookmarks reports</strong></p>
<p class="govuk-body govuk-!-margin-top-3">Bookmarking allows you curate a shortlist of your most used reports for easy access.</p>
<p class='govuk-body govuk-!-margin-bottom-0'>Add bookmarks by clicking the <strong>"Add bookmark"</strong> link next to a report in the catalogue, or in the report view.</p>
</div>
</div>
</div>
</div>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="requested-reports-tab">
<h1 class="govuk-heading-m govuk-!-margin-bottom-2">Requested reports</h1>
<div class="dpr-my-reports-help">
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help
</span>
</summary>
<div class="govuk-details__text">
<p class="govuk-body">List of reports that have been requested</p>
<h3>Table details</h3>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Product</h3>
<p class="govuk-body">Report and variant name information, including type and date information</p>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Filters</h3>
<p class="govuk-body">The filters that have been applied to the report as a request filter</p>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Status</h3>
<p class="govuk-body">The current status of a report:</p>
<ul>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--green">READY</strong> - the report has loaded and can be viewed</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--grey">EXPIRED</strong> - the report has expired and needs to be refreshed to be viewed</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--red">FAILED</strong> - the report has failed to load</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--orange">ABORTED</strong> - the report request was aborted and can be retried</li>
</ul>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Actions:</h3>
<p class="govuk-body">The actions available for the report</p>
<ul>
<li class="govuk-!-margin-bottom-1"><strong>Go to report/dashboard:</strong> View the report/dashboard</li>
<li class="govuk-!-margin-bottom-1"><strong>Refresh:</strong> Navigates the to request page with pre-filled existing filters to make a new request</li>
<li class="govuk-!-margin-bottom-1"><strong>Remove:</strong> Removes the report from the list</li>
<li class="govuk-!-margin-bottom-1"><strong>Retry:</strong> Navigates the to request page with pre-filled existing filters to make a new request</li>
</ul>
</div>
</details>
</div>
<div data-list-root>
<div class="dpr-my-reports-totals">
<p class=" govuk-body">Showing
<strong data-total-shown>3</strong> of
<strong data-total-total>3</strong> reports
</p>
</div>
<div class="dpr-my-reports" data-dpr-module="dpr-my-reports" data-list-type="my-reports-requested" data-csrf-token="csrfToken">
<div class="dpr-my-reports__table dpr-my-reports__table--requests " data-list>
<div class="dpr-my-reports__headings dpr-my-reports__row">
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--title">
<p class="govuk-heading-s">Product</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--filters">
<p class="govuk-heading-s">Filters</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--status">
<p class="govuk-heading-s">Status</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--actions">
<p class="govuk-heading-s">Actions</p>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729765871851' data-report-id='rr1.1' data-id='rr1' data-table-id='tblId_1729765871851' data-execution-id='exId_238947923' data-status='EXPIRED' data-list-type='requested' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Requested-report_Requested-report-1_tblId_1729765871851">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Requested-report_Requested-report-1_tblId_1729765871851" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Requested report 1
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Requested report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Expired at 24/10/2024 11:31</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 1</strong>: value1.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 01/02/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--yellow">
EXPIRED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/rr1/rr1.1/request?filters.field1=value1.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&sortColumn=field1&sortedAsc=true&filters.field2=value2.1" class="govuk-link govuk-link--no-visited-state">Refresh</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/requested-reports/remove-item/exId_238947923" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729765694790' data-report-id='rr2' data-id='rr2.1' data-table-id='tblId_1729765694790' data-execution-id='exId_238947924' data-status='FAILED' data-list-type='requested' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Requested-report_Requested-report-1_tblId_1729765694790">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Requested-report_Requested-report-1_tblId_1729765694790" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Requested report 1
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Requested report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Failed at 24/10/2024 11:28</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 1</strong>: value1.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.2
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 01/02/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 end</strong>: 04/05/2006
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 4</strong>: Inigo Montoya
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--red">
FAILED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/rr2/rr2.1/request/exId_238947923" class="govuk-link govuk-link--no-visited-state">Retry</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/requested-reports/remove-item/exId_238947924" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729766013077' data-report-id='rr3' data-id='rr3.1' data-table-id='tblId_1729766013077' data-execution-id='exId_238947925' data-status='ABORTED' data-list-type='requested' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Requested-report_Requested-report-3_tblId_1729766013077">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Requested-report_Requested-report-3_tblId_1729766013077" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Requested report 3
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Requested report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Aborted at 24/10/2024 11:33</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 1</strong>: value1.1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 01/02/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 end</strong>: 04/05/2006
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 6</strong>: Value 6.1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 7</strong>: 04/05/2007
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--orange">
ABORTED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/rr3/rr3.1/request?filters.field1=value1.1&filters.field2=value2.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&filters.field7=2007-05-04&sortColumn=field1&sortedAsc=true&filters.field6=Value+6.1" class="govuk-link govuk-link--no-visited-state">Retry</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/requested-reports/remove-item/exId_238947925" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
<div data-empty-state class="dpr-hidden">
<div class="dpr-my-reports__empty-state">
<p class='govuk-body govuk-!-margin-bottom-0'><strong>You have 0 requested reports</strong></p>
<p class="govuk-body govuk-!-margin-top-3 govuk-!-margin-bottom-0">To request a report click the <strong>"Request report"</strong> link next to a report in the catalogue</p>
</div>
</div>
</div>
</div>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="recently-viewed-tab">
<h1 class="govuk-heading-m govuk-!-margin-bottom-2">Recently viewed</h1>
<div class="dpr-my-reports-help">
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help
</span>
</summary>
<div class="govuk-details__text">
<p class="govuk-body">List of reports that have been recently viewed</p>
<h3>Table details</h3>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Product</h3>
<p class="govuk-body">Report and variant name information, including type and date information</p>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Filters</h3>
<p class="govuk-body">The filters that have been applied to the report as a request filter (in grey), and as an interactive filter (in blue):</p>
<ul class="dpr-card-group__item__filters-list">
<li class="govuk-body-s dpr-query-summary"><strong>Pre request filter:</strong> Value</li>
<li class="govuk-body-s dpr-interactive-query-summary"><strong>Interactive filter:</strong> Value</li>
</ul><br><br>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Status</h3>
<p class="govuk-body">The current status of a report:</p>
<ul>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--green">READY</strong> - the report has loaded and can be viewed</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--grey">EXPIRED</strong> - the report has expired and needs to be refreshed to be viewed</li>
</ul>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Actions:</h3>
<p class="govuk-body">The actions available for the report</p>
<ul>
<li class="govuk-!-margin-bottom-1"><strong>Go to report/dashboard:</strong> View the report/dashboard</li>
<li class="govuk-!-margin-bottom-1"><strong>Refresh:</strong> Navigates the to request page with pre-filled existing filters to make a new request</li>
<li class="govuk-!-margin-bottom-1"><strong>Remove:</strong> Removes the report from the list</li>
</ul>
</div>
</details>
</div>
<div data-list-root>
<div class="dpr-my-reports-totals">
<p class=" govuk-body">Showing
<strong data-total-shown>1</strong> of
<strong data-total-total>1</strong> reports
</p>
</div>
<div class="dpr-my-reports" data-dpr-module="dpr-my-reports" data-list-type="my-reports-viewed" data-csrf-token="csrfToken">
<div class="dpr-my-reports__table dpr-my-reports__table--requests " data-list>
<div class="dpr-my-reports__headings dpr-my-reports__row">
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--title">
<p class="govuk-heading-s">Product</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--filters">
<p class="govuk-heading-s">Filters</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--status">
<p class="govuk-heading-s">Status</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--actions">
<p class="govuk-heading-s">Actions</p>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729766465228' data-report-id='vr1' data-id='vr1.1' data-table-id='tblId_1729766465228' data-execution-id='exId_1729766362362' data-status='EXPIRED' data-list-type='viewed' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Viewed-report_Viewed-report-1_tblId_1729766465228">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Viewed-report_Viewed-report-1_tblId_1729766465228" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Viewed report 1
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Viewed report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Expired at 24/10/2024 11:41</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 05/09/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 end</strong>: 01/05/2007
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 4</strong>: Inigo Montoya
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 7</strong>: 04/05/2007
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--yellow">
EXPIRED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/vr1/vr1.1/request?filters.field2=value2.3&filters.field3.start=2003-09-05&filters.field3.end=2007-05-01&filters.field7=2007-05-04&sortColumn=field1&sortedAsc=true&filters.field4=Inigo+Montoya" class="govuk-link govuk-link--no-visited-state">Refresh</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/recently-viewed/remove-item/exId_1729766362362/table-id/tblId_1729766465228" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
<div data-empty-state class="dpr-hidden">
<div class="dpr-my-reports__empty-state">
<p class='govuk-body govuk-!-margin-bottom-0'><strong>You have 0 viewed reports</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%- from "dpr/components/my-reports/view.njk" import dprMyReports -%}
{% set myReportsData = {
"bookmarks": {
"title": "Bookmarks",
"listType": "bookmarks",
"headings": [
{
"key": "title",
"name": "Product",
"classes": "dpr-my-reports__cell--title",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
},
{
"key": "description",
"name": "Description",
"classes": "dpr-my-reports__cell--description",
"showIn": [
"bookmarks"
]
},
{
"key": "actions",
"name": "Actions",
"classes": "dpr-my-reports__cell--actions",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
}
],
"items": [
{
"title": {
"productName": "Product Name",
"reportName": "Bookmark 1",
"reportType": "report"
},
"description": "Example report bookmark",
"actions": {
"request": {
"href": "/dpr/request-report/report/request-examples/request-example-success/filters",
"reportType": "report"
},
"bookmark": {
"reportId": "bm1",
"id": "bm1.1",
"reportType": "report",
"csrfToken": "csrfToken",
"bookmarkActionEndpoint": "/dpr/my-reports/bookmarks",
"linkType": "remove",
"linkText": "Remove bookmark"
}
}
},
{
"title": {
"productName": "Product Name",
"reportName": "Bookmark 2",
"reportType": "dashboard"
},
"description": "Example dashboard bookmark",
"actions": {
"request": {
"href": "/dpr/request-report/dashboard/mock-dashboards/test-dashboard-8/filters",
"reportType": "dashboard"
},
"bookmark": {
"reportId": "bm2",
"id": "bm2.1",
"reportType": "dashboard",
"csrfToken": "csrfToken",
"bookmarkActionEndpoint": "/dpr/my-reports/bookmarks",
"linkType": "remove",
"linkText": "Remove bookmark"
}
}
}
],
"totals": {
"total": 2,
"shown": 2
}
},
"requested": {
"title": "Requested reports",
"listType": "requested",
"csrfToken": "csrfToken",
"headings": [
{
"key": "title",
"name": "Product",
"classes": "dpr-my-reports__cell--title",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
},
{
"key": "filters",
"name": "Filters",
"classes": "dpr-my-reports__cell--filters",
"showIn": [
"requested",
"viewed"
]
},
{
"key": "status",
"name": "Status",
"classes": "dpr-my-reports__cell--status",
"showIn": [
"requested",
"viewed"
]
},
{
"key": "actions",
"name": "Actions",
"classes": "dpr-my-reports__cell--actions",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
}
],
"items": [
{
"title": {
"productName": "Requested report",
"reportName": "Requested report 1",
"reportType": "report",
"timestamp": "Expired at 24/10/2024 11:31"
},
"filters": {
"prerequest": [
{
"name": "Field 1",
"value": "value1.3"
},
{
"name": "Field 2",
"value": "value2.1"
},
{
"name": "Field 3 start",
"value": "01/02/2003"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "EXPIRED",
"actions": {
"refresh": {
"href": "http://localhost:3010/embedded/platform/async/report/rr1/rr1.1/request?filters.field1=value1.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&sortColumn=field1&sortedAsc=true&filters.field2=value2.1"
},
"remove": {
"action": "/dpr/my-reports/requested-reports/remove-item/exId_238947923",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "rr1",
"reportId": "rr1.1",
"tableId": "tblId_1729765871851",
"executionId": "exId_238947923",
"path": "/dpr/my-reports",
"listType": "requested"
}
},
{
"title": {
"productName": "Requested report",
"reportName": "Requested report 1",
"reportType": "report",
"timestamp": "Failed at 24/10/2024 11:28"
},
"filters": {
"prerequest": [
{
"name": "Field 1",
"value": "value1.3"
},
{
"name": "Field 2",
"value": "value2.2"
},
{
"name": "Field 3 start",
"value": "01/02/2003"
},
{
"name": "Field 3 end",
"value": "04/05/2006"
},
{
"name": "Field 4",
"value": "Inigo Montoya"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "FAILED",
"actions": {
"retry": {
"href": "http://localhost:3010/embedded/platform/async/report/rr2/rr2.1/request/exId_238947923"
},
"remove": {
"action": "/dpr/my-reports/requested-reports/remove-item/exId_238947924",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "rr2.1",
"reportId": "rr2",
"tableId": "tblId_1729765694790",
"executionId": "exId_238947924",
"path": "/dpr/my-reports",
"listType": "requested"
}
},
{
"title": {
"productName": "Requested report",
"reportName": "Requested report 3",
"reportType": "report",
"timestamp": "Aborted at 24/10/2024 11:33"
},
"filters": {
"prerequest": [
{
"name": "Field 1",
"value": "value1.1"
},
{
"name": "Field 2",
"value": "value2.3"
},
{
"name": "Field 3 start",
"value": "01/02/2003"
},
{
"name": "Field 3 end",
"value": "04/05/2006"
},
{
"name": "Field 6",
"value": "Value 6.1"
},
{
"name": "Field 7",
"value": "04/05/2007"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "ABORTED",
"actions": {
"retry": {
"href": "http://localhost:3010/embedded/platform/async/report/rr3/rr3.1/request?filters.field1=value1.1&filters.field2=value2.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&filters.field7=2007-05-04&sortColumn=field1&sortedAsc=true&filters.field6=Value+6.1"
},
"remove": {
"action": "/dpr/my-reports/requested-reports/remove-item/exId_238947925",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "rr3.1",
"reportId": "rr3",
"tableId": "tblId_1729766013077",
"executionId": "exId_238947925",
"path": "/dpr/my-reports",
"listType": "requested"
}
}
],
"totals": {
"total": 3,
"shown": 3
}
},
"viewed": {
"title": "Recently viewed",
"listType": "viewed",
"csrfToken": "csrfToken",
"headings": [
{
"key": "title",
"name": "Product",
"classes": "dpr-my-reports__cell--title",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
},
{
"key": "filters",
"name": "Filters",
"classes": "dpr-my-reports__cell--filters",
"showIn": [
"requested",
"viewed"
]
},
{
"key": "status",
"name": "Status",
"classes": "dpr-my-reports__cell--status",
"showIn": [
"requested",
"viewed"
]
},
{
"key": "actions",
"name": "Actions",
"classes": "dpr-my-reports__cell--actions",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
}
],
"items": [
{
"title": {
"productName": "Viewed report",
"reportName": "Viewed report 1",
"reportType": "report",
"timestamp": "Expired at 24/10/2024 11:41"
},
"filters": {
"prerequest": [
{
"name": "Field 2",
"value": "value2.3"
},
{
"name": "Field 3 start",
"value": "05/09/2003"
},
{
"name": "Field 3 end",
"value": "01/05/2007"
},
{
"name": "Field 4",
"value": "Inigo Montoya"
},
{
"name": "Field 7",
"value": "04/05/2007"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "EXPIRED",
"actions": {
"refresh": {
"href": "http://localhost:3010/embedded/platform/async/report/vr1/vr1.1/request?filters.field2=value2.3&filters.field3.start=2003-09-05&filters.field3.end=2007-05-01&filters.field7=2007-05-04&sortColumn=field1&sortedAsc=true&filters.field4=Inigo+Montoya"
},
"remove": {
"action": "/dpr/my-reports/recently-viewed/remove-item/exId_1729766362362/table-id/tblId_1729766465228",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "vr1.1",
"reportId": "vr1",
"tableId": "tblId_1729766465228",
"executionId": "exId_1729766362362",
"path": "/dpr/my-reports",
"listType": "viewed"
}
}
],
"totals": {
"total": 1,
"shown": 1
}
}
} %}
{{ dprMyReports(myReportsData)}}
import { initMyReports } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/myReportsListUtils'
export function routes(services: Services): Router {
// ...
router.get('/path/to/requested/reports/list/', (req, res) => {
const myReportsData = await initMyReports({ res, req, services })
res.render('requested-reports.njk', {
myReportsData
})
})
}
export default routes
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 { initMyReports } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/myReportsListUtils'
export function routes(services: Services): Router {
...
router.get('/path/to/requested/reports/list/', (req, res) => {
const {
requested,
viewed,
bookmarks,
} = await initMyReports(req, res, this.services, { maxRows: 10 })
res.render('requested-reports.njk', {
title: 'DPR test site',
requested,
viewed,
bookmarks
})
})
}
export default routes
This will give you the arguments to simply apply as components arguments in the HTML:
dprMyReports({
requested: requested,
viewed: viewed,
bookmarks: bookmarks,
})
View and navigate requested reports
Contents
<div id="dpr-user-reports-list-component">
<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">
<h1 class="govuk-heading-m govuk-!-margin-bottom-2">Requested reports</h1>
<div class="dpr-my-reports-help">
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help
</span>
</summary>
<div class="govuk-details__text">
<p class="govuk-body">List of reports that have been requested</p>
<h3>Table details</h3>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Product</h3>
<p class="govuk-body">Report and variant name information, including type and date information</p>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Filters</h3>
<p class="govuk-body">The filters that have been applied to the report as a request filter</p>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Status</h3>
<p class="govuk-body">The current status of a report:</p>
<ul>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--green">READY</strong> - the report has loaded and can be viewed</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--grey">EXPIRED</strong> - the report has expired and needs to be refreshed to be viewed</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--red">FAILED</strong> - the report has failed to load</li>
<li class="govuk-!-margin-bottom-1"><strong class="govuk-tag dpr-request-status-tag govuk-tag--orange">ABORTED</strong> - the report request was aborted and can be retried</li>
</ul>
<h3 class="govuk-heading-s govuk-!-margin-bottom-1">Actions:</h3>
<p class="govuk-body">The actions available for the report</p>
<ul>
<li class="govuk-!-margin-bottom-1"><strong>Go to report/dashboard:</strong> View the report/dashboard</li>
<li class="govuk-!-margin-bottom-1"><strong>Refresh:</strong> Navigates the to request page with pre-filled existing filters to make a new request</li>
<li class="govuk-!-margin-bottom-1"><strong>Remove:</strong> Removes the report from the list</li>
<li class="govuk-!-margin-bottom-1"><strong>Retry:</strong> Navigates the to request page with pre-filled existing filters to make a new request</li>
</ul>
</div>
</details>
</div>
<div data-list-root>
<div class="dpr-my-reports-totals">
<p class=" govuk-body">Showing
<strong data-total-shown>3</strong> of
<strong data-total-total>3</strong> reports
</p>
</div>
<div class="dpr-my-reports" data-dpr-module="dpr-my-reports" data-list-type="my-reports-requested" data-csrf-token="csrfToken">
<div class="dpr-my-reports__table dpr-my-reports__table--requests " data-list>
<div class="dpr-my-reports__headings dpr-my-reports__row">
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--title">
<p class="govuk-heading-s">Product</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--filters">
<p class="govuk-heading-s">Filters</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--status">
<p class="govuk-heading-s">Status</p>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--head dpr-my-reports__cell--actions">
<p class="govuk-heading-s">Actions</p>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729765871851' data-report-id='rr1.1' data-id='rr1' data-table-id='tblId_1729765871851' data-execution-id='exId_238947923' data-status='EXPIRED' data-list-type='requested' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Requested-report_Requested-report-1_tblId_1729765871851">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Requested-report_Requested-report-1_tblId_1729765871851" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Requested report 1
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Requested report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Expired at 24/10/2024 11:31</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 1</strong>: value1.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 01/02/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--yellow">
EXPIRED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/rr1/rr1.1/request?filters.field1=value1.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&sortColumn=field1&sortedAsc=true&filters.field2=value2.1" class="govuk-link govuk-link--no-visited-state">Refresh</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/requested-reports/remove-item/exId_238947923" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729765694790' data-report-id='rr2' data-id='rr2.1' data-table-id='tblId_1729765694790' data-execution-id='exId_238947924' data-status='FAILED' data-list-type='requested' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Requested-report_Requested-report-1_tblId_1729765694790">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Requested-report_Requested-report-1_tblId_1729765694790" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Requested report 1
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Requested report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Failed at 24/10/2024 11:28</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 1</strong>: value1.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.2
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 01/02/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 end</strong>: 04/05/2006
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 4</strong>: Inigo Montoya
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--red">
FAILED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/rr2/rr2.1/request/exId_238947923" class="govuk-link govuk-link--no-visited-state">Retry</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/requested-reports/remove-item/exId_238947924" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__row-separator"></div>
<div class="dpr-my-reports__row" data-row-id='dpr-my-report-tblId_1729766013077' data-report-id='rr3' data-id='rr3.1' data-table-id='tblId_1729766013077' data-execution-id='exId_238947925' data-status='ABORTED' data-list-type='requested' data-csrf-token='' data-path='/dpr/my-reports' aria-labelledby="row_Requested-report_Requested-report-3_tblId_1729766013077">
<div class="dpr-my-reports__cell dpr-my-reports__cell--title">
<div class="dpr-my-reports__item-title">
<h2 id="row_Requested-report_Requested-report-3_tblId_1729766013077" class='dpr-my-reports__item-title--report-name govuk-heading-m'>
Requested report 3
</h2>
<h3 class='dpr-my-reports__item-title--product-name govuk-body govuk-heading-s'>Requested report</h3>
<div class="dpr-my-reports__item-title--report-type">
<strong class="govuk-tag">
report
</strong>
</div>
<p class='dpr-my-reports__item-title--ts govuk-body-s'>Aborted at 24/10/2024 11:33</p>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--filters">
<div class="dpr-my-reports__item-filters">
<ul class="dpr-my-reports__item-filters-list">
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 1</strong>: value1.1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 2</strong>: value2.3
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 start</strong>: 01/02/2003
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 3 end</strong>: 04/05/2006
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 6</strong>: Value 6.1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Field 7</strong>: 04/05/2007
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Column</strong>: Field 1
</li>
<li class="dpr-my-reports__item-filters-list-item dpr-my-reports__item-filters-list-item--pre">
<strong>Sort Direction</strong>: Ascending
</li>
</ul>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--status">
<div class="dpr-my-reports__status">
<strong class="govuk-tag govuk-tag--orange">
ABORTED
</strong>
</div>
</div>
<div class="dpr-my-reports__cell dpr-my-reports__cell--actions">
<ul class="dpr-my-reports__actions-list">
<li>
<a href="http://localhost:3010/embedded/platform/async/report/rr3/rr3.1/request?filters.field1=value1.1&filters.field2=value2.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&filters.field7=2007-05-04&sortColumn=field1&sortedAsc=true&filters.field6=Value+6.1" class="govuk-link govuk-link--no-visited-state">Retry</a>
</li>
<li>
<form method="post" action="/dpr/my-reports/requested-reports/remove-item/exId_238947925" data-remove-report-form>
<input type="hidden" name="returnTo" value="/">
<input type="hidden" name="_csrf" value="csrfToken">
<button type="submit" class="govuk-button dpr-button-link dpr-button-link" data-module="govuk-button">
Remove
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
<div data-empty-state class="dpr-hidden">
<div class="dpr-my-reports__empty-state">
<p class='govuk-body govuk-!-margin-bottom-0'><strong>You have 0 requested reports</strong></p>
<p class="govuk-body govuk-!-margin-top-3 govuk-!-margin-bottom-0">To request a report click the <strong>"Request report"</strong> link next to a report in the catalogue</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%- from "dpr/components/my-reports/view.njk" import dprMyReports -%}
{% set myReportsData = {
"requested": {
"title": "Requested reports",
"listType": "requested",
"csrfToken": "csrfToken",
"headings": [
{
"key": "title",
"name": "Product",
"classes": "dpr-my-reports__cell--title",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
},
{
"key": "filters",
"name": "Filters",
"classes": "dpr-my-reports__cell--filters",
"showIn": [
"requested",
"viewed"
]
},
{
"key": "status",
"name": "Status",
"classes": "dpr-my-reports__cell--status",
"showIn": [
"requested",
"viewed"
]
},
{
"key": "actions",
"name": "Actions",
"classes": "dpr-my-reports__cell--actions",
"showIn": [
"bookmarks",
"requested",
"viewed"
]
}
],
"items": [
{
"title": {
"productName": "Requested report",
"reportName": "Requested report 1",
"reportType": "report",
"timestamp": "Expired at 24/10/2024 11:31"
},
"filters": {
"prerequest": [
{
"name": "Field 1",
"value": "value1.3"
},
{
"name": "Field 2",
"value": "value2.1"
},
{
"name": "Field 3 start",
"value": "01/02/2003"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "EXPIRED",
"actions": {
"refresh": {
"href": "http://localhost:3010/embedded/platform/async/report/rr1/rr1.1/request?filters.field1=value1.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&sortColumn=field1&sortedAsc=true&filters.field2=value2.1"
},
"remove": {
"action": "/dpr/my-reports/requested-reports/remove-item/exId_238947923",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "rr1",
"reportId": "rr1.1",
"tableId": "tblId_1729765871851",
"executionId": "exId_238947923",
"path": "/dpr/my-reports",
"listType": "requested"
}
},
{
"title": {
"productName": "Requested report",
"reportName": "Requested report 1",
"reportType": "report",
"timestamp": "Failed at 24/10/2024 11:28"
},
"filters": {
"prerequest": [
{
"name": "Field 1",
"value": "value1.3"
},
{
"name": "Field 2",
"value": "value2.2"
},
{
"name": "Field 3 start",
"value": "01/02/2003"
},
{
"name": "Field 3 end",
"value": "04/05/2006"
},
{
"name": "Field 4",
"value": "Inigo Montoya"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "FAILED",
"actions": {
"retry": {
"href": "http://localhost:3010/embedded/platform/async/report/rr2/rr2.1/request/exId_238947923"
},
"remove": {
"action": "/dpr/my-reports/requested-reports/remove-item/exId_238947924",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "rr2.1",
"reportId": "rr2",
"tableId": "tblId_1729765694790",
"executionId": "exId_238947924",
"path": "/dpr/my-reports",
"listType": "requested"
}
},
{
"title": {
"productName": "Requested report",
"reportName": "Requested report 3",
"reportType": "report",
"timestamp": "Aborted at 24/10/2024 11:33"
},
"filters": {
"prerequest": [
{
"name": "Field 1",
"value": "value1.1"
},
{
"name": "Field 2",
"value": "value2.3"
},
{
"name": "Field 3 start",
"value": "01/02/2003"
},
{
"name": "Field 3 end",
"value": "04/05/2006"
},
{
"name": "Field 6",
"value": "Value 6.1"
},
{
"name": "Field 7",
"value": "04/05/2007"
},
{
"name": "Sort Column",
"value": "Field 1"
},
{
"name": "Sort Direction",
"value": "Ascending"
}
],
"interactive": []
},
"status": "ABORTED",
"actions": {
"retry": {
"href": "http://localhost:3010/embedded/platform/async/report/rr3/rr3.1/request?filters.field1=value1.1&filters.field2=value2.3&filters.field3.start=2003-02-01&filters.field3.end=2006-05-04&filters.field7=2007-05-04&sortColumn=field1&sortedAsc=true&filters.field6=Value+6.1"
},
"remove": {
"action": "/dpr/my-reports/requested-reports/remove-item/exId_238947925",
"csrfToken": "csrfToken",
"returnTo": "/"
}
},
"meta": {
"id": "rr3.1",
"reportId": "rr3",
"tableId": "tblId_1729766013077",
"executionId": "exId_238947925",
"path": "/dpr/my-reports",
"listType": "requested"
}
}
],
"totals": {
"total": 3,
"shown": 3
}
}
} %}
{{ dprMyReports(myReportsData)}}
import { initMyReports } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/myReportsListUtils'
export function routes(services: Services): Router {
// ...
router.get('/path/to/requested/reports/list/', (req, res) => {
const myReportsData = await initMyReports({ res, req, services })
res.render('requested-reports.njk', {
myReportsData
})
})
}
export default routes