fradrive/templates/table/layout.julius

(function collonadeClosure() {
  'use strict';

  window.utils = window.utils || {};

  window.utils.asyncTable = function(wrapper) {

    var tableIdent = #{String dbtIdent};
    var shortCircuitHeader = #{String (toPathPiece HeaderDBTableShortcircuit)};

    var ths = [];
    var pagination;
    var pagesizeForm;

    function init() {
      var table = wrapper.querySelector('#' + tableIdent);
      if (!table) {
        return;
      }

      ths = Array.from(table.querySelectorAll('th.sortable'));
      pagination = wrapper.querySelector('#' + tableIdent + '-pagination');
      pagesizeForm = wrapper.querySelector('#' + tableIdent + '-pagesize-form');

      setupListeners();
      wrapper.classList.add('js-initialized');
    }

    function setupListeners() {
      ths.forEach(function(th) {
        th.addEventListener('click', clickHandler);
      });

      if (pagination) {
        var pageLinks = Array.from(pagination.querySelectorAll('.page-link'));
        pageLinks.forEach(function(p) {
          p.addEventListener('click', clickHandler);
        });
      }

      if (pagesizeForm) {
        var pagesizeSelect = pagesizeForm.querySelector('[name=' + tableIdent + '-pagesize]')
        pagesizeSelect.addEventListener('change', changeHandler);
      }
    }

    function removeListeners() {
      ths.forEach(function(th) {
        th.removeEventListener('click', clickHandler);
      });

      if (pagination) {
        var pageLinks = Array.from(pagination.querySelectorAll('.page-link'));
        pageLinks.forEach(function(p) {
          p.removeEventListener('click', clickHandler);
        });
      }

      if (pagesizeForm) {
        var pagesizeSelect = pagesizeForm.querySelector('[name=' + tableIdent + '-pagesize]')
        pagesizeSelect.removeEventListener('change', changeHandler);
      }
    }

    function clickHandler(event) {
      event.preventDefault();
      var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this));
      updateTableFrom(url);
    }

    function getClickDestination(el) {
      if (!el.querySelector('a')) {
        return '';
      }
      return el.querySelector('a').getAttribute('href');
    }

    function changeHandler(event) {
      var currentTableUrl = wrapper.dataset.currentUrl || window.location.href;
      var url = getUrlWithUpdatedPagesize(currentTableUrl, event.target.value);
      url = getUrlWithResetPagenumber(url);
      updateTableFrom(url);
    }

    function getUrlWithUpdatedPagesize(url, pagesize) {
      if (url.indexOf('pagesize') >= 0) {
        return url.replace(/pagesize=(\d+)/, 'pagesize=' + pagesize);
      } else if (url.indexOf('?') >= 0) {
        return url += '&' + tableIdent + '-pagesize=' + pagesize;
      }

      return url += '?' + tableIdent + '-pagesize=' + pagesize;
    }

    function getUrlWithResetPagenumber(url) {
      return url.replace(/-page=\d+/, '-page=0');
    }

    function updateWrapperContents(newHtml) {
      wrapper.innerHTML = newHtml;
      wrapper.classList.remove("js-initialized");

      // setup the wrapper and its components to behave async again
      window.utils.asyncTable(wrapper);

      // make sure to hide any new submit buttons
      document.dispatchEvent(new CustomEvent('setup', {
        detail: {
          scope: wrapper,
          module: 'autoSubmit'
        }
      }));
    }

    // fetches new sorted table from url with params and replaces contents of current table
    function updateTableFrom(url) {

      fetch(url, {
        credentials: 'same-origin',
        headers: {
          'Accept': 'text/html',
          [shortCircuitHeader]: tableIdent
        }
      }).then(function(response) {
        if (!response.ok) {
          throw new Error('Looks like there was a problem fetching ' + url + '. Status Code: ' + response.status);
        }
        return response.text();
      }).then(function(data) {
        wrapper.dataset.currentUrl = url;
        removeListeners();
        updateWrapperContents(data);
      }).catch(function(err) {
        console.error(err);
      });
    }

    init();
  };
})();

document.addEventListener('DOMContentLoaded', function() {
  var selector = '#' + #{String $ dbtIdent} + '-table-wrapper:not(.js-initialized)';
  var wrapper = document.querySelector(selector);
  if (wrapper) {
    window.utils.asyncTable(wrapper);
  }
});