nopaque/web/app/static/js/nopaque.lists.js

class RessourceList {
  constructor(idOrElement, options = {}) {
    this.list = new List(idOrElement, {...RessourceList.options, ...options});
  }

  init(ressources) {
    this.list.clear();
    this.add(Object.values(ressources));
    this.list.sort('id', {order: 'desc'});
  }


  update(patch) {
    let item, pathArray;

    for (let operation of patch) {
      /*
       * '/{ressourceName}/{ressourceId}/{valueName}' -> ['{ressourceId}', {valueName}]
       * Example: '/jobs/1/status' -> ['1', 'status']
      */
      let [id, valueName] = operation.path.split("/").slice(2);
      switch(operation.op) {
        case 'add':
          this.add(operation.value);
          break;
        case 'remove':
          this.remove(id);
          break;
        case 'replace':
          this.replace(id, valueName, operation.value);
          break;
        default:
          break;
      }
    }
  }

  add(values) {
    /* WORKAROUND: Set a callback function ('() => {return;}') to force List.js
                   perform the add method asynchronous.
     * https://listjs.com/api/#add
     */
    this.list.add(values, () => {return;});
  }

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

  replace(id, valueName, newValue) {
    if (!this.list.valuesNames.includes(valueName)) {return;}
    let item = this.list.get('id', id);
    item.values({[valueName]: newValue});
  }
}


RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};


class CorpusList extends RessourceList {
  constructor(listElementId, options = {}) {
    let listElement = document.querySelector(`#${listElementId}`);
    super(listElement, {...CorpusList.options, ...options});
    listElement.addEventListener('click', (event) => {
      let actionButtonElement = event.target.closest('.action-button');
      if (actionButtonElement === null) {return;}
      let corpusId = event.target.closest('tr').dataset.id;
      let action = actionButtonElement.dataset.action;
      switch (action) {
        case 'analyse':
          window.location.href = nopaque.user.corpora[corpusId].analysis_url;
      }
    });
    nopaque.corporaSubscribers.push(this);
  }
}


CorpusList.options = {
  item: `<tr>
           <td><a class="btn-floating disabled"><i class="material-icons">book</i></a></td>
           <td><b class="title"></b><br><i class="description"></i></td>
           <td><span class="badge new status" data-badge-caption=""></span></td>
           <td class="right-align">
             <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="edit" data-position="top" data-tooltip="Edit"><i class="material-icons">edit</i></a>
             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="analyse" data-position="top" data-tooltip="Analyse"><i class="material-icons">search</i></a>
           </td>
         </tr>`,
  valueNames: [{data: ['id']}, {name: "status", attr: "data-status"}, 'description', 'title']
};


class JobList extends RessourceList {
  constructor(listElementId, options = {}) {
    let listElement = document.querySelector(`#${listElementId}`);
    super(listElement, {...JobList.options, ...options});
    nopaque.jobsSubscribers.push(this);
  }
}


JobList.options = {
  item: `<tr>
           <td><a class="btn-floating disabled"><i class="material-icons service"></i></a></td>
           <td><b class="title"></b><br><i class="description"></i></td>
           <td><span class="badge new status" data-badge-caption=""></span></td>
           <td class="right-align">
             <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
           </td>
         </tr>`,
  valueNames: [{data: ['id']}, {name: 'service', attr: 'data-service'}, {name: "status", attr: "data-status"}, 'description', 'title']
};


class QueryResultList extends RessourceList {
  constructor(listElementId, options = {}) {
    let listElement = document.querySelector(`#${listElementId}`);
    super(listElement, {...QueryResultList.options, ...options});
    nopaque.queryResultsSubscribers.push(this);
  }
}


QueryResultList.options = {
  item: `<tr>
           <td><b class="title"></b><br><i class="description"></i><br></td>
           <td><span class="corpus_title"></span><br><span class="query"></span></td>
           <td class="right-align">
             <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
             <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="analyse" data-position="top" data-tooltip="Analyse"><i class="material-icons">search</i></a>
           </td>
         </tr>`,
  valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title']
};

export { CorpusList, JobList, QueryResultList };