nopaque/app/static/js/RessourceLists/JobList.js

class JobList extends RessourceList {
  static options = {
    item: `
      <tr class="hoverable service-color lighten">
        <td><a class="btn-floating disabled"><i class="service-1 nopaque-icons service-color darken service-icon"></i></a></td>
        <td><b class="title"></b><br><i class="description"></i></td>
        <td><span class="status badge new job-status-color job-status-text" 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="service-2 action-button btn-floating nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
        </td>
      </tr>
    `.trim(),
    ressourceMapper: job => {
      return {
        'id': job.id,
        'creation-date': job.creation_date,
        'description': job.description,
        'service': job.service,
        'service-1': job.service,
        'service-2': job.service,
        'status': job.status,
        'title': job.title
      };
    },
    sortValueName: 'creation-date',
    valueNames: [
      {data: ['id']},
      {data: ['creation-date']},
      {data: ['service']},
      {name: 'service-1', attr: 'data-service'},
      {name: 'service-2', attr: 'data-service'},
      {name: 'status', attr: 'data-job-status'},
      'description',
      'title'
    ]
  };


  constructor(listElement, options = {}) {
    super(listElement, {...JobList.options, ...options});
  }

  init(user) {
    this._init(user.jobs);
  }

  onclick(event) {
    let action;
    let actionButtonElement;
    let deleteModal;
    let deleteModalElement;
    let jobElement;
    let jobId;
    let tmp;

    jobElement = event.target.closest('tr[data-id]');
    if (jobElement === null) {return;}
    jobId = jobElement.dataset.id;
    actionButtonElement = event.target.closest('.action-button[data-action]');
    action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
    switch (action) {
      case 'delete':
        tmp = document.createElement('div');
        tmp.innerHTML = `
          <div class="modal">
            <div class="modal-content">
              <h4>Confirm job deletion</h4>
              <p>Do you really want to delete the job <b>${app.users[this.userId].jobs[jobId].title}</b>? All files will be permanently deleted!</p>
            </div>
            <div class="modal-footer">
              <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
              <a class="btn modal-close red waves-effect waves-light" href="/jobs/${jobId}/delete"><i class="material-icons left">delete</i>Delete</a>
            </div>
          </div>
        `.trim();
        deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
        deleteModal = M.Modal.init(
          deleteModalElement,
          {
            onCloseEnd: () => {
              deleteModal.destroy();
              deleteModalElement.remove();
            }
          }
        );
        deleteModal.open();
        break;
      case 'view':
        window.location.href = `/jobs/${jobId}`;
        break;
      default:
        break;
    }
  }

  onPATCH(patch) {
    let filteredPatch;
    let jobId;
    let match;
    let operation;
    let re;
    let valueName;

    re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`);
    filteredPatch = patch.filter(operation => re.test(operation.path));
    for (operation of filteredPatch) {
      switch(operation.op) {
        case 'add':
          re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {
            this.add(operation.value);
          }
          break;
        case 'remove':
          re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {
            [match, jobId] = operation.path.match(re);
            this.remove(jobId);
          }
          break;
        case 'replace':
          re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`);
          if (re.test(operation.path)) {
            [match, jobId, valueName] = operation.path.match(re);
            this.replace(jobId, valueName, operation.value);
          }
          break;
        default:
          break;
      }
    }
  }
}