class RessourceList extends List { constructor(idOrElement, subscriberList, type, options) { if (!type || !["Corpus", "CorpusFile", "Job", "JobInput", "QueryResult", "User"].includes(type)) { throw "Unknown Type!"; } super(idOrElement, {...RessourceList.options['common'], ...RessourceList.options[type], ...(options ? options : {})}); if (subscriberList) {subscriberList.push(this);} this.type = type; } _init(ressources) { this.clear(); this._add(Object.values(ressources)); this.sort("creation_date", {order: "desc"}); } _update(patch) { let item, pathArray; for (let operation of patch) { /* "/{ressourceName}/{ressourceId}/..." -> ["{ressourceId}", "..."] */ pathArray = operation.path.split("/").slice(2); switch(operation.op) { case "add": if (pathArray.includes("results")) {break;} this._add([operation.value]); break; case "remove": this.remove("id", pathArray[0]); break; case "replace": item = this.get("id", pathArray[0])[0]; switch(pathArray[1]) { case "status": item.values({status: operation.value, "analyse-link": ["analysing", "prepared", "start analysis"].includes(operation.value) ? `/corpora/${pathArray[0]}/analyse` : ""}); break; default: break; } default: break; } } } _add(values, callback) { this.add(values.map(x => RessourceList.dataMappers[this.type](x)), callback); // Initialize modal and tooltipped elements in list M.AutoInit(this.listContainer); } } RessourceList.dataMappers = { // A data mapper describes entitys rendered per row. One key value pair holds // the data to be rendered in the list.js table. Key has to correspond // with the ValueNames defined below in RessourceList.options ValueNames. // Links are declared with double ticks(") around them. The key for links // have to correspond with the class of an <a> element in the // RessourceList.options item blueprint. /* ### Corpus mapper ### */ Corpus: corpus => ({ creation_date: corpus.creation_date, description: corpus.description, id: corpus.id, link: `/corpora/${corpus.id}`, status: corpus.status, title: corpus.title, title1: corpus.title, "analyse-link": ["analysing", "prepared", "start analysis"].includes(corpus.status) ? `/corpora/${corpus.id}/analyse` : "", "delete-link": `/corpora/${corpus.id}/delete`, "delete-modal": `delete-corpus-${corpus.id}-modal`, "delete-modal-trigger": `delete-corpus-${corpus.id}-modal`, }), /* ### CorpusFile mapper ### TODO: replace delete-modal with delete-onclick */ CorpusFile: corpus_file => ({ author: corpus_file.author, filename: corpus_file.filename, link: `${corpus_file.corpus_id}/files/${corpus_file.id}`, publishing_year: corpus_file.publishing_year, title: corpus_file.title, title1: corpus_file.title, "delete-link": `/corpora/${corpus_file.corpus_id}/files/${corpus_file.id}/delete`, "delete-modal": `delete-corpus-file-${corpus_file.id}-modal`, "delete-modal-trigger": `delete-corpus-file-${corpus_file.id}-modal`, "download-link": `${corpus_file.corpus_id}/files/${corpus_file.id}/download`, }), /* ### Job mapper ### */ Job: job => ({ creation_date: job.creation_date, description: job.description, id: job.id, link: `/jobs/${job.id}`, service: job.service, status: job.status, title: job.title, title1: job.title, "delete-link": `/jobs/${job.id}/delete`, "delete-modal": `delete-job-${job.id}-modal`, "delete-modal-trigger": `delete-job-${job.id}-modal`, }), /* ### JobInput mapper ### */ JobInput: job_input => ({ filename: job_input.filename, id: job_input.job_id, "download-link": `${job_input.job_id}/inputs/${job_input.id}/download` }), /* ### QueryResult mapper ### */ QueryResult: query_result => ({ corpus_name: query_result.query_metadata.corpus_name, description: query_result.description, id: query_result.id, link: `/corpora/result/${query_result.id}`, query: query_result.query_metadata.query, title: query_result.title, "delete-link": `/corpora/result/${query_result.id}/delete`, "delete-modal": `delete-query-result-${query_result.id}-modal`, "delete-modal-trigger": `delete-query-result-${query_result.id}-modal`, "inspect-link": `/corpora/result/${query_result.id}/inspect`, }), /* ### User mapper ### */ User: user => ({ confirmed: user.confirmed, email: user.email, id: user.id, link: `users/${user.id}`, role_id: user.role_id, username: user.username, username2: user.username, "delete-link": `/admin/users/${user.id}/delete`, "delete-modal": `delete-user-${user.id}-modal`, "delete-modal-trigger": `delete-user-${user.id}-modal`, }), }; RessourceList.options = { // common list.js options for 5 rows per page etc. common: { page: 5, pagination: [ { name: "paginationTop", paginationClass: "paginationTop", innerWindow: 4, outerWindow: 1 }, { paginationClass: "paginationBottom", innerWindow: 4, outerWindow: 1, }, ], }, // extended list.js options for 10 rows per page etc. extended: { page: 10, pagination: [ { name: "paginationTop", paginationClass: "paginationTop", innerWindow: 8, outerWindow: 1 }, { paginationClass: "paginationBottom", innerWindow: 8, outerWindow: 1, }, ], }, /* Type specific List.js options. Usually only "item" and "valueNames" gets * defined here but it is possible to define other List.js options. * item: https://listjs.com/api/#item * valueNames: https://listjs.com/api/#valueNames */ Corpus: { item: `<tr> <td> <a class="btn-floating disabled"> <i class="material-icons service">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> <div class="right-align"> <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete"> <i class="material-icons">delete</i> </a> <a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Edit"> <i class="material-icons">edit</i> </a> <a class="btn-floating tooltipped waves-effect waves-light analyse-link" data-position="top" data-tooltip="Analyse"> <i class="material-icons">search</i> </a> </div> <div class="modal delete-modal"> <div class="modal-content"> <h4>Confirm corpus deletion</h4> <p>Do you really want to delete the corpus <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a> </div> </div> </td> </tr>`, valueNames: [ "creation_date", "description", "title", "title1", {data: ["id"]}, {name: "analyse-link", attr: "href"}, {name: "delete-link", attr: "href"}, {name: "delete-modal-trigger", attr: "data-target"}, {name: "delete-modal", attr: "id"}, {name: "link", attr: "href"}, {name: "status", attr: "data-status"}, ] }, CorpusFile: { item: `<tr> <td class="filename" style="word-break: break-word;"></td> <td class="author" style="word-break: break-word;"></td> <td class="title" style="word-break: break-word;"></td> <td class="publishing_year" style="word-break: break-word;"></td> <td> <div class="right-align"> <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete"> <i class="material-icons">delete</i> </a> <a class="btn-floating tooltipped waves-effect waves-light download-link" data-position="top" data-tooltip="Download"> <i class="material-icons">file_download</i> </a> <a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Edit"> <i class="material-icons">edit</i> </a> </div> <div class="modal delete-modal"> <div class="modal-content"> <h4>Confirm corpus file deletion</h4> <p>Do you really want to delete the corpus file <b class="title1"></b>? It 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 delete-link"><i class="material-icons left">delete</i>Delete</a> </div> </div> </td> </tr>`, valueNames: [ "author", "filename", "publishing_year", "title", "title1", {name: "delete-link", attr: "href"}, {name: "delete-modal-trigger", attr: "data-target"}, {name: "delete-modal", attr: "id"}, {name: "download-link", attr: "href"}, {name: "link", attr: "href"}, ], }, Job: { 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> <div class="right-align"> <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete"> <i class="material-icons">delete</i> </a> <a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Go to job"> <i class="material-icons">send</i> </a> </div> <div class="modal delete-modal"> <div class="modal-content"> <h4>Confirm job deletion</h4> <p>Do you really want to delete the job <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a> </div> </div> </td> </tr>`, valueNames: [ "creation_date", "description", "title", "title1", {data: ["id"]}, {name: "delete-link", attr: "href"}, {name: "delete-modal-trigger", attr: "data-target"}, {name: "delete-modal", attr: "id"}, {name: "link", attr: "href"}, {name: "service", attr: "data-service"}, {name: "status", attr: "data-status"}, ], }, JobInput: { item : `<tr> <td class="filename"></td> <td class="right-align"> <a class="btn-floating tooltipped waves-effect waves-light download-link" data-position="top" data-tooltip="Download"> <i class="material-icons">file_download</i> </a> </td> </tr>`, valueNames: [ "filename", "id", {name: "download-link", attr: "href"}, ], }, QueryResult: { item: `<tr> <td> <b class="title"></b><br> <i class="description"></i><br> </td> <td> <span class="corpus_name"></span><br> <span class="query"></span> </td> <td> <div class="right-align"> <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete"> <i class="material-icons">delete</i> </a> <a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Info"> <i class="material-icons">info</i> </a> <a class="btn-floating tooltipped waves-effect waves-light inspect-link" data-position="top" data-tooltip="Analyse"> <i class="material-icons">search</i> </a> </div> <div class="modal delete-modal"> <div class="modal-content"> <h4>Confirm query result deletion</h4> <p>Do you really want to delete the query result <b class="title1"></b>? It 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 delete-link"><i class="material-icons left">delete</i>Delete</a> </div> </div> </td> </tr>`, valueNames: [ "corpus_name", "description", "query", "title", "title2", {data: ["id"]}, {name: "delete-link", attr: "href"}, {name: "delete-modal-trigger", attr: "data-target"}, {name: "delete-modal", attr: "id"}, {name: "inspect-link", attr: "href"}, {name: "link", attr: "href"}, ], }, User: { item: `<tr> <td class="username"></td> <td class="email"></td> <td class="role_id"></td> <td class="confirmed"></td> <td class="id"></td> <td> <div class="right-align"> <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete"> <i class="material-icons">delete</i> </a> <a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Go to user"> <i class="material-icons">send</i> </a> </div> <div class="modal delete-modal"> <div class="modal-content"> <h4>Confirm corpus deletion</h4> <p>Do you really want to delete the job <b class="title1"></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 delete-link"><i class="material-icons left">delete</i>Delete</a> </div> </div> </td> </tr>`, valueNames: [ "username", "username2", "email", "role_id", "confirmed", "id", {name: "link", attr: "href"}, {name: "delete-link", attr: "href"}, {name: "delete-modal-trigger", attr: "data-target"}, {name: "delete-modal", attr: "id"}, ], }, }; export { RessourceList, };