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

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, };