nopaque/app/static/js/ResourceLists/ResourceList.js

var ResourceLists = {};

ResourceLists.autoInit = () => {
  for (let propertyName in ResourceLists) {
    let property = ResourceLists[propertyName];
    // Call autoInit of all properties that are subclasses of `ResourceLists.BaseList`.
    // This does not include `ResourceLists.BaseList` itself.
    if (property.prototype instanceof ResourceLists.BaseList) {
      // Check if the static `htmlClass` property is defined.
      if (property.htmlClass === undefined) {return;}
      // Gather all HTML elements that have the `this.htmlClass` class
      // and do not have the `no-autoinit` class.
      let listElements = document.querySelectorAll(`.${property.htmlClass}:not(.no-autoinit)`);
      // Create an instance of this class for each display element.
      for (let listElement of listElements) {new property(listElement);}
    }
  }
};

ResourceLists.defaultOptions = {
  page: 5,
  pagination: {
    innerWindow: 2,
    outerWindow: 2
  }
};

ResourceLists.BaseList = class BaseList {
  /* 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 resource list implementations.
   */

  static htmlClass;

  constructor(listContainerElement, options = {}) {
    if ('items' in options) {
      throw '"items" is not supported as an option, define it as a getter in the list class';
    }
    if ('valueNames' in options) {
      throw '"valueNames" is not supported as an option, define it as a getter in the list class';
    }
    let _options = Utils.mergeObjectsDeep(
      {item: this.item, valueNames: this.valueNames},
      ResourceLists.defaultOptions,
      options
    );
    this.listContainerElement = listContainerElement;
    this.initListContainerElement();
    this.listjs = new List(listContainerElement, _options);
  }

  add(resources, callback) {
    let tmp = Array.isArray(resources) ? resources : [resources];
    let values = tmp.map((resource) => {
      return this.mapResourceToValue(resource);
    });
    this.listjs.add(values, (items) => {
      this.sort();
      if (typeof callback === 'function') {
        callback(items);
      }
    });
  }

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

  replace(id, key, value) {
    let item = this.listjs.get('id', id)[0];
    item.values({[key]: value});
  }

  // #region Mandatory getters and methods to implement
  get item() {throw 'Not implemented';}

  get valueNames() {throw 'Not implemented';}

  initListContainerElement() {throw 'Not implemented';}
  // #endregion
  
  // #region Optional methods to implement
  mapResourceToValue(resource) {return resource;}

  sort() {return;}
  // #endregion
}