nopaque/app/static/js/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.
   */
  static autoInit() {
    const nopaqueRessourceListElements = document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)');
    let nopaqueRessourceListElement;

    for (nopaqueRessourceListElement of nopaqueRessourceListElements) {
      switch (nopaqueRessourceListElement.dataset.ressourceType) {
        case 'Corpus':
          new CorpusList(nopaqueRessourceListElement);
          break;
        case 'CorpusFile':
          new CorpusFileList(nopaqueRessourceListElement);
          break;
        case 'Job':
          new JobList(nopaqueRessourceListElement);
          break;
        case 'JobInput':
          new JobInputList(nopaqueRessourceListElement);
          break;
        case 'JobResult':
          new JobResultList(nopaqueRessourceListElement);
          break;
        case 'QueryResult':
          new QueryResultList(nopaqueRessourceListElement);
          break;
        case 'User':
          new UserList(nopaqueRessourceListElement);
          break;
        default:
          break;
      }
    }
  }
  static options = {page: 5, pagination: {innerWindow: 4, outerWindow: 1}};


  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;
      }
    }
    options = {
      ...{pagination: {item: `<li><a class="page" href="#${listElement.id}"></a></li>`}},
      ...options
    }
    if ('ressourceMapper' in options) {
      this.ressourceMapper = options.ressourceMapper;
      delete options.ressourceMapper;
    }
    if ('sortValueName' in options) {
      this.sortValueName = options.sortValueName;
      delete options.sortValueName;
    }
    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 = this.listjs.listContainer.dataset.userId;
    this.listjs.list.addEventListener('click', event => this.onclick(event));
    this.isInitialized = false;
    if (this.userId) {
      app.subscribeUser(this.userId).then((response) => {
        app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
      });
      app.getUser(this.userId).then((user) => {
        this.init(user);
        this.isInitialized = true;
      });
    }
  }

  _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';}

  onclick(event) {throw 'Not implemented';}

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

  add(ressources) {
    let values = Array.isArray(ressources) ? ressources : [ressources];

    if ('ressourceMapper' in this) {
      values = values.map(value => this.ressourceMapper(value));
    }
    this.listjs.add(values, () => {
      if ('sortValueName' in this) {
        this.listjs.sort(this.sortValueName, {order: 'desc'});
      }
    });
  }

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

  replace(id, valueName, newValue) {
      this.listjs.get('id', id)[0].values({[valueName]: newValue});
  }
}