DPR Platform components Catalogue

Open this example (Catalogue (example)) in a new window

Contents 

    <div id="reports-catalogue" class="dpr-reports-wrapper" aria-labelledby="dpr-reports-catalogue-heading">
      <h2 id="dpr-reports-catalogue-heading" class="govuk-heading-l govuk-!-margin-bottom-4">Reports catalogue</h2>
    
      <details class="govuk-details">
        <summary class="govuk-details__summary">
          <span class="govuk-details__summary-text">
            How to use
          </span>
        </summary>
        <div class="govuk-details__text">
    
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1">Viewing a report</h3>
          <p class="govuk-body">Select the name of the report to start a request to view a report.</p>
    
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1">Filtering the catalogue</h3>
          <p class="govuk-body">Filter the report catalogue by typing in the filter input box below. The catalogue will show listings that match your filter by name, description, type and product.</p>
    
        </div>
      </details>
    
      <div class='dpr-catalogue-filters' data-dpr-module='dpr-catalogue-filters'>
        <div class='dpr-catalogue-filters--heading'>
          <div class="dpr-catalogue-filters__search">
    
            <div class="dpr-search" data-dpr-module="dpr-catalogue-search">
              <div class="dpr-search-inputs">
    
                <div class="govuk-form-group">
                  <label class="govuk-label govuk-!-font-weight-bold govuk-!-margin-bottom-2" for="undefined_search_input">
                    Filter by key word
                  </label>
    
                  <input class="govuk-input dpr-search-box govuk-!-margin-bottom-0" id="undefined_search_input" name="search" type="text" autocomplete="off" placeholder="Type to filter reports" data-table-id="">
    
                </div>
    
              </div>
            </div>
    
          </div>
        </div>
        <div class='dpr-catalogue-filters--content'>
    
          <div class="dpr-interactive-filters-accordion">
            <details class="govuk-details">
              <summary class="govuk-details__summary">
                <span class="govuk-details__summary-text">
                  Show more filters
                </span>
              </summary>
              <div class="govuk-details__text">
    
                <div class='dpr-catalogue-filters--content-filters'>
    
                  <div class="dpr-catalogue-filters__type-filter">
    
                    <div class="dpr-unauthorised-toggle" data-dpr-module="dpr-catalogue-type-filter">
    
                      <div class="govuk-form-group">
    
                        <fieldset class="govuk-fieldset">
    
                          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                            Report type
    
                          </legend>
    
                          <div class="govuk-radios govuk-radios--small" id="dpr-report-type-filters" aria-label="Filter by report type radio button" data-table-id="" data-module="govuk-radios">
    
                            <div class="govuk-radios__item">
                              <input class="govuk-radios__input" id="report-type" name="report-type" type="radio" value="all">
                              <label class="govuk-label govuk-radios__label" for="report-type">
                                All
                              </label>
    
                            </div>
    
                            <div class="govuk-radios__item">
                              <input class="govuk-radios__input" id="report-type-2" name="report-type" type="radio" value="report">
                              <label class="govuk-label govuk-radios__label" for="report-type-2">
                                Report
                              </label>
    
                            </div>
    
                            <div class="govuk-radios__item">
                              <input class="govuk-radios__input" id="report-type-3" name="report-type" type="radio" value="dashboard">
                              <label class="govuk-label govuk-radios__label" for="report-type-3">
                                Dashboard
                              </label>
    
                            </div>
    
                          </div>
    
                        </fieldset>
    
                      </div>
    
                    </div>
    
                  </div>
    
                  <div class="dpr-catalogue-filters__unauth-toggle">
    
                    <div class="dpr-unauthorised-toggle" data-dpr-module="dpr-catalogue-show-unauthorised">
    
                      <div class="govuk-form-group">
    
                        <fieldset class="govuk-fieldset">
    
                          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                            Show/hide reports
    
                          </legend>
    
                          <div class="govuk-checkboxes dpr-show-unauthorised-checkbox govuk-checkboxes--small" id="dpr-toggle-filters" aria-label="Show unauthorised reports checkboxes" data-table-id="" data-module="govuk-checkboxes">
    
                            <div class="govuk-checkboxes__item">
                              <input class="govuk-checkboxes__input" id="show-unauthorised" name="Show unauthorised reports" type="checkbox" value="show-unauthorised">
                              <label class="govuk-label govuk-checkboxes__label" for="show-unauthorised">
                                Show unauthorised reports
                              </label>
    
                            </div>
    
                          </div>
    
                        </fieldset>
    
                      </div>
    
                    </div>
    
                  </div>
                </div>
    
              </div>
            </details>
    
          </div>
        </div>
      </div>
    
      <p class="dpr-catalogue-totals govuk-body govuk-!-margin-bottom-5">Showing <strong id="total-shown"></strong> of <strong id="total-amount"></strong> reports</p>
    
      <table class="govuk-table dpr-search-table" id="">
    
        <tbody class="govuk-table__body">
    
        </tbody>
      </table>
    
      <div>
    


    
    {%- from "dpr/components/_catalogue/catalogue/view.njk" import dprCatalogue -%}
    
    {% set data = {
      head: [
        { text: "Product", classes: "dpr-product-head" },
        { text: "Name",classes: "dpr-name-head" },
        { text: "Description", classes: "dpr-description-head" },
        { text: "Actions", classes: "dpr-bookmark-head" }
      ],
      rows: [
        [
          { html: "<p class='govuk-body-s'>Product 1</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 1 description' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant name 1 description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-1/variantId-1/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ],
        [
          { html: "<p class='govuk-body-s'>Product 2</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 2 description' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant 2 description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-2/variantId-2/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ],
        [
          { html: "<p class='govuk-body-s'>Product 3</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 1 description' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant 1 description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-3/variantId-3-1/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ],
        [
          { html: "<p class='govuk-body-s'>Product 3</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 2 description' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant 2 description</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-3/variantId-3-2/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ]
      ],
      id: 'dpr-reports-catalogue'
    } %}
    
    {% set features = {
      unauthorisedToggleEnabled: true,
      bookmarkingEnabled: true
    } %}
    
    
    {{ dprCatalogue({ data: data, features: features }) }}


    import { initCatalogue } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/catalogueUtils'
    
    export function routes(services) {
      app.get('/catalogue', (req, res, next) => async (req, res) => {
        const catalogue = await initCatalogue({
          res,
          services,
        })
    
        res.render('catalogue.njk', {
          catalogue,
        })
      })
    }
    
    export default routes

Overview

The catalogue component is used to:

  • view report variants in a list.
  • view report information such as product, variant name, and description in the list.
  • filter the list columns by string.
  • request variants from the list.
  • bookmark variants from the list.

This component supports the DPR platform functionality by providing a unified way of listing and navigating reports

When to use

Use this component when you have integrated the DPR plaform into your service and want to:

  • View a list of your reports
  • be able to request those reports.
  • bookmark a report from the list.

When not to use

Do not use this component if you want more control over how your report listing should look.

How to use

This component requires you have followed the async reporting integration steps

Its recommended to use the Catalogue utility helper to initialise the data needed to populate the list with the correct layout and feature set. Import the utility and initialise the data in the route before rendering your page:

// server/routes/index.ts

import { initCatalogue } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/catalogueUtils'


export function routes(services: Services): Router {

  ...

  router.get('/path/to/catalogue', (req, res) => {
    const catalogue = await initCatalogue({ res, services })
    res.render('reports-catalogue.njk', {
      catalogue
    })
  })
}

export default routes

This will give you the arguments to simply apply as components arguments in the HTML:

{ dprCatalogue(catalogue) }

Configure features

The following features can be disabled using the features configuration:

  • How to use section
  • Filtering
  • Toggle unauthorised.
  • Bookmarking

This example demonstrates how to disable all default catalogue features.

NOTE: Bookmarking must be disabled via javascript using the catalogue utility helper.

Open this example (Catalogue with feature config (example)) in a new window

Contents 

    <div id="reports-catalogue" class="dpr-reports-wrapper" aria-labelledby="dpr-reports-catalogue-heading">
      <h2 id="dpr-reports-catalogue-heading" class="govuk-heading-l govuk-!-margin-bottom-4">Reports catalogue</h2>
    
      <details class="govuk-details">
        <summary class="govuk-details__summary">
          <span class="govuk-details__summary-text">
            How to use
          </span>
        </summary>
        <div class="govuk-details__text">
    
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1">Viewing a report</h3>
          <p class="govuk-body">Select the name of the report to start a request to view a report.</p>
    
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1">Filtering the catalogue</h3>
          <p class="govuk-body">Filter the report catalogue by typing in the filter input box below. The catalogue will show listings that match your filter by name, description, type and product.</p>
    
        </div>
      </details>
    
      <div class='dpr-catalogue-filters' data-dpr-module='dpr-catalogue-filters'>
        <div class='dpr-catalogue-filters--heading'>
          <div class="dpr-catalogue-filters__search">
    
            <div class="dpr-search" data-dpr-module="dpr-catalogue-search">
              <div class="dpr-search-inputs">
    
                <div class="govuk-form-group">
                  <label class="govuk-label govuk-!-font-weight-bold govuk-!-margin-bottom-2" for="undefined_search_input">
                    Filter by key word
                  </label>
    
                  <input class="govuk-input dpr-search-box govuk-!-margin-bottom-0" id="undefined_search_input" name="search" type="text" autocomplete="off" placeholder="Type to filter reports" data-table-id="">
    
                </div>
    
              </div>
            </div>
    
          </div>
        </div>
        <div class='dpr-catalogue-filters--content'>
    
          <div class="dpr-interactive-filters-accordion">
            <details class="govuk-details">
              <summary class="govuk-details__summary">
                <span class="govuk-details__summary-text">
                  Show more filters
                </span>
              </summary>
              <div class="govuk-details__text">
    
                <div class='dpr-catalogue-filters--content-filters'>
    
                  <div class="dpr-catalogue-filters__type-filter">
    
                    <div class="dpr-unauthorised-toggle" data-dpr-module="dpr-catalogue-type-filter">
    
                      <div class="govuk-form-group">
    
                        <fieldset class="govuk-fieldset">
    
                          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                            Report type
    
                          </legend>
    
                          <div class="govuk-radios govuk-radios--small" id="dpr-report-type-filters" aria-label="Filter by report type radio button" data-table-id="" data-module="govuk-radios">
    
                            <div class="govuk-radios__item">
                              <input class="govuk-radios__input" id="report-type" name="report-type" type="radio" value="all">
                              <label class="govuk-label govuk-radios__label" for="report-type">
                                All
                              </label>
    
                            </div>
    
                            <div class="govuk-radios__item">
                              <input class="govuk-radios__input" id="report-type-2" name="report-type" type="radio" value="report">
                              <label class="govuk-label govuk-radios__label" for="report-type-2">
                                Report
                              </label>
    
                            </div>
    
                            <div class="govuk-radios__item">
                              <input class="govuk-radios__input" id="report-type-3" name="report-type" type="radio" value="dashboard">
                              <label class="govuk-label govuk-radios__label" for="report-type-3">
                                Dashboard
                              </label>
    
                            </div>
    
                          </div>
    
                        </fieldset>
    
                      </div>
    
                    </div>
    
                  </div>
    
                  <div class="dpr-catalogue-filters__unauth-toggle">
    
                    <div class="dpr-unauthorised-toggle" data-dpr-module="dpr-catalogue-show-unauthorised">
    
                      <div class="govuk-form-group">
    
                        <fieldset class="govuk-fieldset">
    
                          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                            Show/hide reports
    
                          </legend>
    
                          <div class="govuk-checkboxes dpr-show-unauthorised-checkbox govuk-checkboxes--small" id="dpr-toggle-filters" aria-label="Show unauthorised reports checkboxes" data-table-id="" data-module="govuk-checkboxes">
    
                            <div class="govuk-checkboxes__item">
                              <input class="govuk-checkboxes__input" id="show-unauthorised" name="Show unauthorised reports" type="checkbox" value="show-unauthorised">
                              <label class="govuk-label govuk-checkboxes__label" for="show-unauthorised">
                                Show unauthorised reports
                              </label>
    
                            </div>
    
                          </div>
    
                        </fieldset>
    
                      </div>
    
                    </div>
    
                  </div>
                </div>
    
              </div>
            </details>
    
          </div>
        </div>
      </div>
    
      <p class="dpr-catalogue-totals govuk-body govuk-!-margin-bottom-5">Showing <strong id="total-shown"></strong> of <strong id="total-amount"></strong> reports</p>
    
      <table class="govuk-table dpr-search-table" id="">
    
        <tbody class="govuk-table__body">
    
        </tbody>
      </table>
    
      <div>
    


    
    {%- from "dpr/components/_catalogue/catalogue/view.njk" import dprCatalogue -%}
    
    {% set data = {
      head: [
        { text: "Product", classes: "dpr-product-head" },
        { text: "Name",classes: "dpr-name-head" },
        { text: "Description", classes: "dpr-description-head" },
        { text: "Actions", classes: "dpr-bookmark-head" }
      ],
      rows: [
        [
          { html: "<p class='govuk-body-s'>Product 1</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 1 escription' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant name 1 escription</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-1/variantId-1/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ],
        [
          { html: "<p class='govuk-body-s'>Product 2</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 2 escription' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant 2 escription</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-2/variantId-2/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ],
        [
          { html: "<p class='govuk-body-s'>Product 3</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 1 escription' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant 1 escription</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-3/variantId-3-1/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ],
        [
          { html: "<p class='govuk-body-s'>Product 3</p>" },
          { html: "<div>\n <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>\n <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>\n</div>" },
          { html: "<div class='dpr-show-more' data-content='Variant 2 escription' data-dpr-module='show-more' data-length='200'>\n <div class='dpr-show-more-content'>Variant 2 escription</div><a class='dpr-show-hide-button govuk-link--no-visited-state' href='#'>show more</a>\n </div>" },
          { html: "<a class='dpr-user-list-action govuk-link--no-visited-state govuk-!-margin-bottom-1' href='/async/report/test-report-3/variantId-3-2/request'>Request report</a><a href='#'' class='govuk-link govuk-link--no-visited-state dpr-bookmark-link dpr-user-list-action' id='dashboard-visualisations-chart-examples-data-quality-reports-list' data-dpr-module='bookmark-button' data-id='chart-examples-data-quality' data-report-id='dashboard-visualisations' data-report-type='dashboard' data-base-url='/embedded/platform' data-csrf-token='csrfToken' data-link-type='add' style='opacity: 1;'>Add bookmark</a>" }
        ]
      ],
      id: 'dpr-reports-catalogue'
    } %}
    
    {% set features = {
      unauthorisedToggleEnabled: false,
      bookmarkingEnabled: true
    } %}
    
    
    {{ dprCatalogue({ data: data, features: features }) }}


    import { initCatalogue } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/catalogueUtils'
    
    export function routes(services) {
      app.get('/catalogue', (req, res, next) => async (req, res) => {
        const catalogue = await initCatalogue({
          res,
          services,
          features: {
            bookmarkingEnabled: true,
            unauthorisedToggleEnabled: false,
          },
        })
    
        res.render('catalogue.njk', {
          catalogue,
        })
      })
    }
    
    export default routes