nopaque/app/static/js/nopaque/RessourceLists/RessourceList.js

class RessourceList {
  /* A wrapper class for the list.js list.
   * This class is not meant to be used directly, instead it should be used as
   * a base class for concrete ressource list implementations.
   */
  constructor(listElement, options = {}) {
    let i;

    if (!(listElement.hasAttribute('id'))) {
      for (i = 0; true; i++) {
        if (document.querySelector(`ressource-list-${i}`)) {continue;}
        listElement.id = `ressource-list-${i}`;
        break;
      }
    }
    this.listjs = new List(listElement, {...RessourceList.options, ...options});
    this.listjs.list.innerHTML = `
      <tr>
        <td class="row" colspan="100%">
          <div class="col s12">&nbsp;</div>
          <div class="col s3 m2 xl1">
            <div class="preloader-wrapper active">
              <div class="spinner-layer spinner-green-only">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div>
                <div class="gap-patch">
                  <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col s9 m6 xl5">
            <span class="card-title">Waiting for data...</span>
            <p>This list is not initialized yet.</p>
          </div>
        </td>
      </tr>
    `.trim();
    this.listjs.list.style.cursor = 'pointer';
    this.userId = listElement.dataset.userId;
    if (typeof this.onclick === 'function') {this.listjs.list.addEventListener('click', event => this.onclick(event));}
    if (this.userId) {
      app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
      app.getUserById(this.userId).then(
        user => this.init(user),
        error => {throw JSON.stringify(error);}
      );
    }
  }

  _init(ressources) {
    this.listjs.clear();
    this.add(Object.values(ressources));
    let emptyListElementHTML = `
      <tr class="show-if-only-child">
        <td colspan="100%">
          <span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
          <p>No ressource available.</p>
        </td>
      </tr>
    `.trim();
    this.listjs.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
  }

  init(user) {throw 'Not implemented';}

  usersPatchHandler(patch) {throw 'Not implemented';}

  preprocessRessource() {throw 'Not implemented'}

  add(values) {
    let ressources = Array.isArray(values) ? values : [values];
    ressources = ressources.map(ressource => this.preprocessRessource(ressource));
    this.listjs.add(ressources, () => {
      this.listjs.sort('id', {order: 'desc'});
    });
  }

  remove(id) {
    this.listjs.remove('id', id);
  }

  replace(id, valueName, newValue) {
      this.listjs.get('id', id)[0].values({[valueName]: newValue});
  }
}
RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};