Tabelle: Tabelle mit Header-Zellen links (alternatives Design)

import h from 'hyperscript';
import randomId from '../../../javascripts/utils/random-id';

const hkkCompanyNumber = '20013461';

export default class TableFilter {
  constructor($el) {
    this.$el = $el;
    this.$inner = this.$el.querySelector('.table__inner');
    this.$rows = this.$el.querySelectorAll('[data-filter]');
    this.$tableHead = this.$el.querySelector('thead');

    this.id = randomId();
    this.NUMBER_FORMAT = /^[0-9]{8}$/;

    this.init();
  }

  init() {
    this.initInput();
    this.initRows();
    this.initEvents();
    this.initTableHead();
  }

  initTableHead() {
    this.$tableHead.classList.add('table__table-head--hidden');
  }

  initInput() {
    // Insert filter section
    this.$el.insertBefore(
      h('.table__filter',
        h('.form-group',
          h('label.label', { for: `table-filter-${this.id}` }, 'Ansprechpartner finden'),
          h('.form-group__inner',
            h('input.input.input--text', {
              id: `table-filter-${this.id}`,
              type: 'text',
              placeholder: '8-stellige Betriebsnummer',
              maxLength: 8,
            }),
          ),
        ),
      ),

      this.$inner,
    );

    // Define inputs
    this.$input = this.$el.querySelector(`#table-filter-${this.id}`);
  }

  initEvents() {
    this.$input.addEventListener('input', () => {
      if (this.NUMBER_FORMAT.test(this.$input.value)) {
        this.$input.setAttribute('aria-invalid', 'false');
        this.filter(this.$input.value);
      } else {
        this.$input.setAttribute('aria-invalid', 'true');
        this.reset();
      }
    });
  }

  initRows() {
    const $rows = [...this.$rows];

    $rows.forEach(($row) => {
      $row.classList.add('table__row--hidden');
    });
  }

  filter(number) {
    const parsedNumber = parseInt(number.slice(-3), 10);
    const $rows = [...this.$rows];

    $rows.forEach(($row) => {
      const rangeFrom = parseInt($row.dataset.filterFrom, 10);
      const rangeTo = parseInt($row.dataset.filterTo, 10);

      const rowMatches = parsedNumber >= rangeFrom && parsedNumber <= rangeTo;

      const fn = rowMatches ? 'remove' : 'add';
      $row.classList[fn]('table__row--hidden');
    });

    const message = this.$inner.querySelector('.table__message');
    if (message) {
      message.remove();
    }

    if (number === hkkCompanyNumber) {
      this.$message = h('p.table__message', 'Sie haben die Betriebsnummer der hkk eingegeben. Bitte geben Sie die Betriebsnummer Ihres Betriebes an.');
      this.$inner.appendChild(this.$message);
      this.$inner.querySelector('table').style.display = 'none';
    } else if (this.$el.querySelectorAll('.table__row--hidden').length === this.$rows.length) { // No results
      this.$message = h('p.table__message', 'Für diese Betriebsnummer existiert derzeit kein Ansprechpartner.');
      this.$inner.appendChild(this.$message);
      this.$tableHead.classList.add('table__table-head--hidden');
      this.$inner.querySelector('table').style.display = 'block';
    } else {
      this.$tableHead.classList.remove('table__table-head--hidden');
      this.$inner.querySelector('table').style.display = 'block';
    }
  }

  reset() {
    if (this.$message) this.$message.remove();
    this.initRows();
    this.initTableHead();
  }
}

// Initialize TableFilter
document
  .querySelectorAll('.js-table-filter')
  .forEach($el => new TableFilter($el));