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">
<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 govuk-link govuk-link--no-visited-state" 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 govuk-link govuk-link--no-visited-state" 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 govuk-link govuk-link--no-visited-state" 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 govuk-link govuk-link--no-visited-state" 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) }}```
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="javascriptdefault">
```js 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```
</div>
</div>
</div>
## 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](/reports/async-reports-integration)
Render your stored async request data to the frontend using `UserReportsListUtils`
```js
// 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 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 govuk-link govuk-link--no-visited-state" 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 govuk-link govuk-link--no-visited-state" 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 govuk-link govuk-link--no-visited-state" 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) }}```
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="javascriptrequested">
```js 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```
</div>
</div>
</div>