Unify job input tables

web/app/jobs/tables.py

-from flask_table import Table, Col, LinkCol
-
-
-class JobInputTable(Table):
-    """
-    Declares the table describing colum by column.
-    """
-    classes = ['highlight', 'responsive-table']
-    filename = Col('Filename', column_html_attrs={'class': 'filename'},
-                   th_html_attrs={'class': 'sort',
-                                  'data-sort': 'filename'})
-    url = LinkCol('Download', 'jobs.download_job_input',
-                  url_kwargs=dict(job_id='job.id',
-                                  job_input_id='input_id'),
-                  anchor_attrs={'class': 'waves-effect waves-light btn-floating',
-                                'download': ''},
-                  text_fallback='<i class="material-icons">file_download</i>')
-
-
-class JobInputItem(object):
-    """
-    Describes one item like one row per table.
-    """
-
-    def __init__(self, filename, job, input_id):
-        self.filename = filename
-        self.job = job
-        self.input_id = input_id

web/app/jobs/views.py

@@ -3,10 +3,8 @@ from flask import (abort, current_app, flash, redirect, render_template,
 from flask_login import current_user, login_required
 from . import jobs
 from . import tasks
-from . tables import JobInputItem, JobInputTable
 from ..models import Job, JobInput, JobResult
 import os
-import html
 
 
 @jobs.route('/<int:job_id>')
@@ -15,15 +13,13 @@ def job(job_id):
     job = Job.query.get_or_404(job_id)
     if not (job.creator == current_user or current_user.is_administrator()):
         abort(403)
-    items = [JobInputItem(input.filename, job, input.id)
-             for input in job.inputs]
-    # Convert table object to html string and unescape <>& for al little hack to use icons in buttons
-    job_input_table = html.unescape(JobInputTable(items).__html__())
-    # Add class "list" to tbody element. Needed for "List.js"
-    job_input_table = job_input_table.replace('tbody', 'tbody class="list"', 1)
+    job_inputs = [dict(filename=input.filename,
+                       id=input.id,
+                       job_id=job.id)
+                  for input in job.inputs]
     return render_template('jobs/job.html.j2',
                            job=job,
-                           job_input_table=job_input_table,
+                           job_inputs=job_inputs,
                            title='Job')
 
 

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

 class RessourceList extends List {
   constructor(idOrElement, subscriberList, type, options={}) {
-    if (!["corpus", "job", "result", "user"].includes(type)) {
+    if (!["corpus", "job", "result", "user", "job_input"].includes(type)) {
       console.error("Unknown Type!");
       return;
     }
@@ -63,6 +63,15 @@ class RessourceList extends List {
 
 
 RessourceList.dataMapper = {
+  // ### Mapping Genera Info
+  //The Mapping 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.
+
+  // Mapping for corpus entities shown in the dashboard table.
   corpus: corpus => ({creation_date: corpus.creation_date,
                       description: corpus.description,
                       id: corpus.id,
@@ -70,6 +79,7 @@ RessourceList.dataMapper = {
                       "edit-link": `/corpora/${corpus.id}`,
                       status: corpus.status,
                       title: corpus.title}),
+  // Mapping for job entities shown in the dashboard table.
   job: job => ({creation_date: job.creation_date,
                 description: job.description,
                 id: job.id,
@@ -77,6 +87,12 @@ RessourceList.dataMapper = {
                 service: job.service,
                 status: job.status,
                 title: job.title}),
+  // Mapping for job input files shown in table on every job page
+  job_input: job_input => ({filename: job_input.filename,
+                            id: job_input.job_id,
+                            "download-link": `${job_input.job_id}/inputs/${job_input.id}/download`}),
+  // Mapping for imported result entities from corpus analysis.
+  // Shown in imported results table
   result: result => ({ query: result.query,
                        match_count: result.match_count,
                        corpus_name: result.corpus_name,
@@ -86,6 +102,7 @@ RessourceList.dataMapper = {
                        "details-link": `${result.id}/details`,
                        "inspect-link": `${result.id}/inspect`,
                        "delete-modal": `delete-result-${result.id}-modal`}),
+  // Mapping for user entities shown in admin table
   user: user => ({username: user.username,
                   email: user.email,
                   role_id: user.role_id,
@@ -96,7 +113,9 @@ RessourceList.dataMapper = {
 
 
 RessourceList.options = {
+  // common list.js options for 4 rows per page etc.
   common: {page: 4, pagination: {innerWindow: 8, outerWindow: 1}},
+  // extended list.js options for 10 rows per page etc.
   extended: {page: 10,
                  pagination: [
                  {
@@ -111,6 +130,8 @@ RessourceList.options = {
                     outerWindow: 1
                   }
                 ]},
+  // Corpus entity blueprint setting html strucuture per entity per row
+  // Link classes have to correspond with Links defined in the Mapping process
   corpus: {item: `<tr>
                     <td>
                       <a class="btn-floating disabled">
@@ -134,11 +155,18 @@ RessourceList.options = {
                       </a>
                     </td>
                   </tr>`,
-           valueNames: ["creation_date", "description", "title",
+  // Corpus Value Names per column. Have to correspond with the keys from the
+  // Mapping step above.
+           valueNames: ["creation_date",
+                        "description",
+                        "title",
                         {data: ["id"]},
                         {name: "analyse-link", attr: "href"},
                         {name: "edit-link", attr: "href"},
-                        {name: "status", attr: "data-status"}]},
+                        {name: "status", attr: "data-status"}]
+           },
+  // Job entity blueprint setting html strucuture per entity per row
+  // Link classes have to correspond with Links defined in the Mapping process
   job: {item: `<tr>
                  <td>
                    <a class="btn-floating disabled">
@@ -158,11 +186,30 @@ RessourceList.options = {
                   </a>
                  </td>
                </tr>`,
-        valueNames: ["creation_date", "description", "title",
+  // Job Value Names per column. Have to correspond with the keys from the
+  // Mapping step above.
+        valueNames: ["creation_date",
+                     "description",
+                     "title",
                      {data: ["id"]},
                      {name: "link", attr: "href"},
                      {name: "service", attr: "data-service"},
-                     {name: "status", attr: "data-status"}]},
+                     {name: "status", attr: "data-status"}]
+        },
+  job_input: {item : `<tr>
+                        <td class="filename"></td>
+                        <td class="actions">
+                          <a class="btn-floating download-link waves-effect waves-light"><i class="material-icons">file_download</i>
+                          </a>
+                        </td>
+                      </tr>`,
+              valueNames: ["filename",
+                           "id",
+                           {name: "download-link", attr: "href"}]
+              },
+  // Result (imported from corpus analysis) entity blueprint setting html
+  // strucuture per entity per row
+  // Link classes have to correspond with Links defined in the Mapping process
   result: {item: `<tr>
                     <td class="query"></td>
                     <td class="match_count"></td>
@@ -179,6 +226,8 @@ RessourceList.options = {
                       </a>
                     </td>
                   </tr>`,
+  // Result Value Names per column. Have to correspond with keys from the
+  // Mapping step above.
            valueNames: ["query",
                         "match_count",
                         "corpus_name",
@@ -187,7 +236,10 @@ RessourceList.options = {
                         "corpus_type",
                         {name: "details-link", attr: "href"},
                         {name: "inspect-link", attr: "href"},
-                        {name: "delete-modal", attr: "data-target"}]},
+                        {name: "delete-modal", attr: "data-target"}]
+           },
+  // User entity blueprint setting html strucuture per entity per row
+  // Link classes have to correspond with Links defined in the Mapping process
   user: {item: `<tr>
                   <td class="username"></td>
                   <td class="email"></td>
@@ -199,12 +251,15 @@ RessourceList.options = {
                   </a>
                   </td>
                 </tr>`,
+  // User Value Names per column. Have to correspond with keys from the
+  // Mapping step above.
          valueNames: ["username",
                       "email",
                       "role_id",
                       "confirmed",
                       "id",
-                      {name: "profile-link", attr: "href"}]}
+                      {name: "profile-link", attr: "href"}]
+         }
 };
 
 

web/app/templates/jobs/job.html.j2

@@ -86,9 +86,18 @@
           <p>Original input files.</p>
         </div>
         <div class="col s12 m10">
-          <div class="inputs row">
+          <div class="row">
             <ul class="pagination paginationTop"></ul>
-            {{ job_input_table }}
+            <table class="highlight responsive-table">
+              <thead>
+                <tr>
+                  <th class="sort" data-sort="filename">Filename</th>
+                  <th>{# Actions #}</th>
+                </tr>
+              </thead>
+              <tbody class="list">
+              </tbody>
+            </table>
             <ul class="pagination paginationBottom"></ul>
           </div>
         </div>
@@ -149,23 +158,10 @@
 
 <script>
 // job_input_table code
-var options = {page: 5,
-               pagination: [
-                 {
-                   name: "paginationTop",
-                   paginationClass: "paginationTop",
-                   innerWindow: 8,
-                   outerWindow: 1
-                 },
-                 {
-                    paginationClass: "paginationBottom",
-                    innerWindow: 8,
-                    outerWindow: 1
-                  }
-                ],
-               valueNames: ['filename']};
-  var jobInputList = new List('inputs', options);
-
+  var ressources = {{ job_inputs|tojson|safe }};
+  console.log(ressources);
+  var jobInputsList = new RessourceList("inputs", null, "job_input");
+  jobInputsList.addRessources(ressources);
 
   class InformationUpdater {
     constructor(jobId, foreignJobFlag) {