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() {
    CorpusList.autoInit();
    CorpusFileList.autoInit();
    JobList.autoInit();
    JobInputList.autoInit();
    JobResultList.autoInit();
    PublicUserList.autoInit();
    SpaCyNLPPipelineModelList.autoInit();
    TesseractOCRPipelineModelList.autoInit();
    UserList.autoInit();
  }

  static options = {
    listContainerInnerHTMLGenerator: null,
    ressourceMapper: null,
    sortParams: null,
    listjs: {
      page: 5,
      pagination: {
        innerWindow: 2,
        outerWindow: 2
      }
    }
  };

  constructor(listContainerElement, options={}) {
    let mergedOptions = _.merge({}, RessourceList.options, options);
    this.isInitialized = false;
    this.listContainerInnerHTMLGenerator = mergedOptions.listContainerInnerHTMLGenerator;
    this.ressourceMapper = mergedOptions.ressourceMapper;
    this.sortParams = mergedOptions.sortParams;
    this.userId = listContainerElement.dataset.userId;
    // #region Make sure listElement has an id
    if (!listContainerElement.hasAttribute('id')) {
      let i;
      for (i = 0; true; i++) {
        if (document.querySelector(`#ressource-list-${i}`)) {continue;}
        listContainerElement.id = `ressource-list-${i}`;
        break;
      }
    }
    // #endregion
    if (this.listContainerInnerHTMLGenerator !== null && listContainerElement.textContent.trim() === '') {
      this.listContainerInnerHTMLGenerator(listContainerElement);
    }
    this.listjs = new List(listContainerElement, mergedOptions.listjs);
    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
    this.listjs.list.innerHTML = `
      <tr>
        <td colspan="100%">
          <div class="row">
            <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>
          </div>
        </td>
      </tr>
    `.trim();
    if (this.userId) {
      app.subscribeUser(this.userId)
        .then((response) => {
          app.socket.on('PATCH', (patch) => {
            if (this.isInitialized) {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));
    this.listjs.list.insertAdjacentHTML(
      'afterbegin',
      `
        <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()
    );
  }

  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 (this.ressourceMapper !== null) {
      values = values.map((value) => {return this.ressourceMapper(value);});
    }
    this.listjs.add(values, () => {
      if (this.sortParams !== null) {
        this.listjs.sort(...this.sortParams);
      }
    });
  }

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

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