ccs-digitalmarketplace-govuk-frontend/digitalmarketplace/components/question/macros/checkbox-tree/checkbox-tree.js

Digital Marketplace GOV.UK Frontend contains the code you need to start building a user interface for Digital Marketplace.

class CheckboxTreeSummary {
  constructor ($summary) {
    this.$totalSelected = $summary.find('.dm-checkbox-tree__summary-total-selected')
    this.$totalSelectedText = $summary.find('.dm-checkbox-tree__summary-total-selected-text')
  }

  updateSelectedCount (numberSelected) {
    this.$totalSelected.text(numberSelected)

    if (numberSelected === 1) {
      this.$totalSelectedText.text('category selected.')
    } else {
      this.$totalSelectedText.text('categories selected.')
    }
  }
}

class CheckboxTreeSection {
  constructor (checkboxTree, $section) {
    this.checkboxTree = checkboxTree
    this.$section = $section
    this.$accordionButton = this.$section.find('button.govuk-accordion__section-button')
    this.checkboxes = this.$section.find('.govuk-checkboxes__input').get().map((element) => $(element))
    this.$summary = this.$section.find('.dm-checkbox-tree__options-number-selected')
  }

  init () {
    this._openSectionIfSelected()

    this.checkboxes.forEach(($checkbox) => {
      $checkbox.on('click', () => {
        this.checkboxTree.updateTotals($checkbox.val(), $checkbox.is(':checked'))
      })
    })
  }

  _selectedItems () {
    return this.checkboxes.filter(($checkbox) => $checkbox.is(':checked'))
  }

  _countSelected () {
    return this._selectedItems().length
  }

  _openSectionIfSelected () {
    if (this.$accordionButton.length && this._countSelected() > 0 && this.$accordionButton.attr('aria-expanded') === 'false') {
      this.$accordionButton.trigger('click')
    }
  }

  slectedItemValues () {
    return this._selectedItems().map(($checkbox) => $checkbox.val())
  }

  updateSelectedCount () {
    if (this.$summary.length) {
      const numberSelected = this._countSelected()

      if (numberSelected > 0) {
        this.$summary.text(`, ${numberSelected} selected`)
      } else {
        this.$summary.text('')
      }
    }
  }

  toggleCheckbox (value, isChecked) {
    this.checkboxes.forEach(($checkbox) => {
      if ($checkbox.val() === value) {
        $checkbox.prop('checked', isChecked)
      }
    })
  }
}

class CheckboxTree {
  constructor (checkboxTree) {
    this.$checkboxTree = $(checkboxTree)
    this.checkboxTreeSummary = new CheckboxTreeSummary(this.$checkboxTree.find('.dm-checkbox-tree__summary'))

    const checkboxTreeSections = this.$checkboxTree.find('.govuk-accordion__section').get().map((element) => new CheckboxTreeSection(this, $(element)))

    if (checkboxTreeSections.length) {
      this.checkboxTreeSections = checkboxTreeSections
    } else {
      this.checkboxTreeSections = [new CheckboxTreeSection(this, $('.dm-checkbox-tree__options'))]
    }
  }

  init () {
    this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.init())

    this._updateCheckboxTreeSummaryCount()
    this._updateCheckboxTreeSectionSelectedCounts()
  }

  _countSelected () {
    return new Set(this.checkboxTreeSections.map((checkboxTreeSection) => checkboxTreeSection.slectedItemValues()).flat()).size
  }

  _updateCheckboxTreeSummaryCount () {
    this.checkboxTreeSummary.updateSelectedCount(this._countSelected())
  }

  _updateCheckboxTreeSectionSelectedCounts () {
    this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.updateSelectedCount())
  }

  updateTotals (value, isChecked) {
    this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.toggleCheckbox(value, isChecked))

    this._updateCheckboxTreeSummaryCount()
    this._updateCheckboxTreeSectionSelectedCounts()
  }
}

export default CheckboxTree