DPR Platform components Catalogue

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

Contents 

    <div id="reports-catalogue" class="dpr-reports-wrapper">
    
      <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>
    
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1">Bookmarking search criteria</h3>
          <p class="govuk-body">If you regularly search for specific criteria, you can bookmark this search for quick access. Selecting the bookmark icon will add this search to your bookmarks. All your bookmarks will appear in the <a href="#homepage-widget" class="govuk-link govuk-link--no-visited-state">Bookmarks</a> section on the homepage.</p>
    
          <h3 class="govuk-heading-s govuk-!-margin-bottom-1">Show unauthorised reports in catalogue</h3>
          <p class="govuk-body">Retricted reports are removed from the catalogue by default. Toggle the "Show unauthorised reports" checkbox to show, or hide these reports from the catalogue</p>
    
        </div>
      </details>
    
      <div class="dpr-search" data-dpr-module="dpr-catalogue-search">
    
        <h2 class="govuk-heading-s govuk-!-margin-bottom-1"> Filter reports</h2>
    
        <div class="dpr-search-inputs">
    
          <div class="govuk-form-group">
    
            <input class="govuk-input dpr-search-box govuk-!-margin-bottom-0" id="" name="search" type="text" autocomplete="off" placeholder="Type to filter reports">
    
          </div>
    
          <div class="govuk-form-group govuk-!-margin-bottom-3">
    
            <fieldset class="govuk-fieldset" aria-label="undefined checkboxes">
    
              <div class="govuk-checkboxes dpr-show-unauthorised-checkbox govuk-checkboxes--small" 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>
    
        <table class="govuk-table dpr-search-table">
    
          <thead class="govuk-table__head">
            <tr class="govuk-table__row">
    
              <th scope="col" class="govuk-table__header dpr-product-head">Product</th>
    
              <th scope="col" class="govuk-table__header dpr-name-head">Name</th>
    
              <th scope="col" class="govuk-table__header dpr-description-head">Description</th>
    
              <th scope="col" class="govuk-table__header dpr-bookmark-head">Actions</th>
    
            </tr>
          </thead>
    
          <tbody class="govuk-table__body">
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 1</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 1 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-1-variantId-1-reports-list' data-report-id='test-report-1' data-id='variantId-1' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-4-test-report-3-reports-list-bookmark-label' for='test-report-1-variantId-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 2</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 2 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-2-variantId-2-reports-list' data-report-id='test-report-2' data-id='variantId-2' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-4-test-report-2-reports-list-bookmark-label' for='test-report-2-variantId-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 3</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 1 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-1-reports-list' data-report-id='test-report-3' data-id='variantId-3-1' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-3-1-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 3</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 2 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-2-reports-list' data-report-id='test-report-3' data-id='variantId-3-2' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-3-2-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
          </tbody>
        </table>
    
      </div>
    
      <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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-1-variantId-1-reports-list' data-report-id='test-report-1' data-id='variantId-1' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-4-test-report-3-reports-list-bookmark-label' for='test-report-1-variantId-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ],
        [
          { 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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-2-variantId-2-reports-list' data-report-id='test-report-2' data-id='variantId-2' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-4-test-report-2-reports-list-bookmark-label' for='test-report-2-variantId-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ],
        [
          { 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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-1-reports-list' data-report-id='test-report-3' data-id='variantId-3-1' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-3-1-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ],
        [
          { 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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-2-reports-list' data-report-id='test-report-3' data-id='variantId-3-2' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-3-2-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ]
      ]
    } %}
    
    {% set features = {
      filteringEnabled: true,
      unauthorisedToggleEnabled: true,
      howToUseEnabled: true,
      bookmarkingEnabled: true
    } %}
    
    
    {{ dprCatalogue({ data: data, features: features }) }}


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

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 CatalogueUtils from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/_catalogue/catalogue/utils'


export default function routes(services: Services): Router {

  ...

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

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">
    
      <div class="dpr-search" data-dpr-module="dpr-catalogue-search">
    
        <div class="dpr-search-inputs">
    
        </div>
    
        <table class="govuk-table dpr-search-table">
    
          <thead class="govuk-table__head">
            <tr class="govuk-table__row">
    
              <th scope="col" class="govuk-table__header dpr-product-head">Product</th>
    
              <th scope="col" class="govuk-table__header dpr-name-head">Name</th>
    
              <th scope="col" class="govuk-table__header dpr-description-head">Description</th>
    
              <th scope="col" class="govuk-table__header dpr-bookmark-head">Actions</th>
    
            </tr>
          </thead>
    
          <tbody class="govuk-table__body">
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 1</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 1 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-1-variantId-1-reports-list' data-report-id='test-report-1' data-id='variantId-1' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-4-test-report-3-reports-list-bookmark-label' for='test-report-1-variantId-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 2</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 2 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-2-variantId-2-reports-list' data-report-id='test-report-2' data-id='variantId-2' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-4-test-report-2-reports-list-bookmark-label' for='test-report-2-variantId-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 3</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 1</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 1 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-1-reports-list' data-report-id='test-report-3' data-id='variantId-3-1' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-3-1-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
            <tr class="govuk-table__row">
    
              <td class="govuk-table__cell">
                <p class='govuk-body-s'>Product 3</p>
              </td>
    
              <td class="govuk-table__cell">
                <div>
                  <p class='govuk-body-s govuk-!-margin-bottom-2'><strong>Variant 2</strong></p>
                  <strong class='govuk-tag dpr-request-status-tag dpr-request-status-tag--small'>Report</strong>
                </div>
              </td>
    
              <td class="govuk-table__cell">
                <div class='dpr-show-more' data-content='Variant 2 escription' data-dpr-module='show-more' data-length='200'>
                  <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>
                </div>
              </td>
    
              <td class="govuk-table__cell"><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>
                <div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>
                  <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-2-reports-list' data-report-id='test-report-3' data-id='variantId-3-2' data-report-type='report' data-csrf-token='csrfToken' null />
                  <label id='variantId-3-2-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>
                </div>
              </td>
    
            </tr>
    
          </tbody>
        </table>
    
      </div>
    
      <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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-1-variantId-1-reports-list' data-report-id='test-report-1' data-id='variantId-1' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-4-test-report-3-reports-list-bookmark-label' for='test-report-1-variantId-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ],
        [
          { 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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-2-variantId-2-reports-list' data-report-id='test-report-2' data-id='variantId-2' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-4-test-report-2-reports-list-bookmark-label' for='test-report-2-variantId-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ],
        [
          { 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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-1-reports-list' data-report-id='test-report-3' data-id='variantId-3-1' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-3-1-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-1-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ],
        [
          { 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><div class='dpr-bookmark dpr-bookmark-table' data-dpr-module='bookmark-toggle'>\n <input class='bookmark-input' aria-label='bookmark toggle' type='checkbox' id='test-report-3-variantId-3-2-reports-list' data-report-id='test-report-3' data-id='variantId-3-2' data-report-type='report' data-csrf-token='csrfToken' null />\n <label id='variantId-3-2-test-report-3-reports-list-bookmark-label' for='test-report-3-variantId-3-2-reports-list'><span class='dpr-bookmark-label govuk-body-s'>Add bookmark</span></label>\n</div>" }
        ]
      ]
    } %}
    
    {% set features = {
      filteringEnabled: false,
      unauthorisedToggleEnabled: false,
      howToUseEnabled: false
    } %}
    
    
    {{ dprCatalogue({ data: data, features: features }) }}


    import CatalogueUtils from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/_catalogue/catalogue/utils'
    
    export default function routes(services) {
      app.get('/catalogue', (req, res, next) => async (req, res) => {
        const catalogue = await CatalogueUtils.init({
          res,
          services,
          features: {
            filteringEnabled: false,
            unauthorisedToggleEnabled: false,
            howToUseEnabled: false,
          },
        })
    
        res.render('catalogue.njk', {
          catalogue,
        })
      })
    }