class JobList extends RessourceList { static autoInit() { for (let jobListElement of document.querySelectorAll('.job-list:not(.no-autoinit)')) { new JobList(jobListElement); } } static options = { initialHtmlGenerator: (id) => { return ` <div class="input-field"> <i class="material-icons prefix">search</i> <input id="${id}-search" class="search" type="search"></input> <label for="${id}-search">Search job</label> </div> <table> <thead> <tr> <th>Service</th> <th>Title and Description</th> <th>Status</th> <th></th> </tr> </thead> <tbody class="list"></tbody> </table> <ul class="pagination"></ul> `.trim(); }, item: ` <tr class="clickable 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 waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a> <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="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 }; }, sortArgs: ['creation-date', {order: 'desc'}], 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 actionButtonElement = event.target.closest('.action-button'); let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action; let jobElement = event.target.closest('tr'); let jobId = jobElement.dataset.id; switch (action) { case 'delete-request': { Utils.deleteJobRequest(this.userId, jobId); break; } case 'view': { window.location.href = `/jobs/${jobId}`; break; } default: { break; } } } onPatch(patch) { let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`); let filteredPatch = patch.filter(operation => re.test(operation.path)); for (let operation of filteredPatch) { switch(operation.op) { case 'add': { let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`); if (re.test(operation.path)) {this.add(operation.value);} break; } case 'remove': { let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`); if (re.test(operation.path)) { let [match, jobId] = operation.path.match(re); this.remove(jobId); } break; } case 'replace': { let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`); if (re.test(operation.path)) { let [match, jobId, valueName] = operation.path.match(re); this.replace(jobId, valueName, operation.value); } break; } default: { break; } } } } }