Job output list implementation

app/services/routes.py

@@ -6,6 +6,7 @@ from app import db, hashids
 from app.models import (
     Job,
     JobInput,
+    JobResult,
     JobStatus,
     TesseractOCRPipelineModel,
     SpaCyNLPPipelineModel
@@ -74,6 +75,8 @@ def tesseract_ocr_pipeline():
     version = request.args.get('version', service_manifest['latest_version'])
     if version not in service_manifest['versions']:
         abort(404)
+    job_results = JobResult.query.all()
+    choosable_job_ids = [job_result.job.hashid for job_result in job_results if job_result.job.service == "file-setup-pipeline" and job_result.filename.endswith('.pdf')]
     form = CreateTesseractOCRPipelineJobForm(prefix='create-job-form', version=version)
     if form.is_submitted():
         if not form.validate():
@@ -111,6 +114,7 @@ def tesseract_ocr_pipeline():
     return render_template(
         'services/tesseract_ocr_pipeline.html.j2',
         title=service_manifest['name'],
+        choosable_job_ids=choosable_job_ids,
         form=form,
         tesseract_ocr_pipeline_models=tesseract_ocr_pipeline_models,
         user_tesseract_ocr_pipeline_models_count=user_tesseract_ocr_pipeline_models_count

app/static/js/resource-lists/job-output-list.js

@@ -0,0 +1,137 @@
+nopaque.resource_lists.JobOutputList = class JobOutputList extends nopaque.resource_lists.ResourceList {
+  static htmlClass = 'job-output-list';
+
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, options);
+    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
+    this.isInitialized = false;
+    this.userId = listContainerElement.dataset.userId;
+    this.jobOutput = listContainerElement.dataset.jobOutput;
+    this.jobIds = listContainerElement.dataset.jobIds;
+    if (this.userId === undefined) {return;}
+    app.subscribeUser(this.userId).then((response) => {
+      app.socket.on('PATCH', (patch) => {
+        if (this.isInitialized) {this.onPatch(patch);}
+      });
+    });
+    app.getUser(this.userId).then((user) => {
+      let jobIds = JSON.parse(this.jobIds.replace(/'/g, '"'));
+      let job_results = {};
+      for (let jobId of jobIds) {
+        for (let jobResult of Object.values(user.jobs[jobId].results)) {
+          if (jobResult.mimetype === 'application/pdf') {
+            job_results[jobResult.id] = jobResult;
+            job_results[jobResult.id].description = user.jobs[jobId].description;
+            job_results[jobResult.id].title = user.jobs[jobId].title;
+          }
+        }
+      }
+      this.add(Object.values(job_results));
+      this.isInitialized = true;
+    });
+  }
+
+  get item() {
+    return `
+      <tr class="list-item clickable hoverable">
+        <td><span class="title"></span></td>
+        <td><span class="description"></span></td>
+        <td><span class="filename"></span></td>
+        <td class="right-align">
+          <a class="list-action-trigger btn-flat waves-effect waves-light" data-list-action="add"><i class="material-icons">add</i></a>
+        </td>
+      </tr>
+    `.trim();
+  }
+
+  get valueNames() {
+    return [
+      {data: ['id']},
+      {data: ['creation-date']},
+      'title',
+      'description',
+      'filename'
+    ];
+  }
+
+  initListContainerElement() {
+    if (!this.listContainerElement.hasAttribute('id')) {
+      this.listContainerElement.id = nopaque.Utils.generateElementId('job-output-list-');
+    }
+    let listSearchElementId = nopaque.Utils.generateElementId(`${this.listContainerElement.id}-search-`);
+    this.listContainerElement.innerHTML = `
+      <div class="input-field">
+        <i class="material-icons prefix">search</i>
+        <input id="${listSearchElementId}" class="search" type="text"></input>
+        <label for="${listSearchElementId}">Search job output</label>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Description</th>
+            <th>Filename</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody class="list"></tbody>
+      </table>
+      <ul class="pagination"></ul>
+    `;
+  }
+
+  mapResourceToValue(jobOutput) {
+    console.log(jobOutput);
+    return {
+      'id': jobOutput.id,
+      'creation-date': jobOutput.creationDate,
+      'title': jobOutput.title,
+      'description': jobOutput.description,
+      'filename': jobOutput.filename
+    };
+  }
+
+  sort() {
+    this.listjs.sort('title', {order: 'asc'});
+  }
+
+  onClick(event) {
+    let listItemElement = event.target.closest('.list-item[data-id]');
+    if (listItemElement === null) {return;}
+    let itemId = listItemElement.dataset.id;
+    let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
+    let listAction = listActionElement === null ? 'add' : listActionElement.dataset.listAction;
+    switch (listAction) {
+      case 'add': {
+        listActionElement.querySelector('i').textContent = 'done';
+        listActionElement.dataset.listAction = 'remove';
+        break;
+      }
+      case 'remove': {
+        listActionElement.querySelector('i').textContent = 'add';
+        listActionElement.dataset.listAction = 'add';
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  // onPatch(patch) {
+  //   let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([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/${this.jobId}/results/([A-Za-z0-9]*)$`);
+  //         if (re.test(operation.path)) {this.add(operation.value);}
+  //         break;
+  //       }
+  //       default: {
+  //         break;
+  //       }
+  //     }
+  //   }
+  // }
+};

app/templates/_base/scripts.html.j2

@@ -52,6 +52,7 @@
   'js/resource-lists/job-input-list.js',
   'js/resource-lists/job-list.js',
   'js/resource-lists/job-result-list.js',
+  'js/resource-lists/job-output-list.js',
   'js/resource-lists/public-corpus-list.js',
   'js/resource-lists/public-user-list.js',
   'js/resource-lists/spacy-nlp-pipeline-model-list.js',

app/templates/services/tesseract_ocr_pipeline.html.j2

@@ -37,6 +37,15 @@
 
     <div class="col s12">
       <h2>Submit a job</h2>
+      <div class="card">
+        <div class="card-content">
+          <p>Add an existing file from your workflow or add a new one below.</p>
+          <div class="job-output-list" data-user-id="{{ current_user.hashid}}" data-job-ids="{{ choosable_job_ids }}"></div>
+        </div>
+        <div class="card-action right-align">
+          <a class="waves-effect waves-light btn"><i class="material-icons right">send</i>Submit</a>
+        </div>
+      </div>
       <div class="card">
         <form class="create-job-form" enctype="multipart/form-data" method="POST">
           <div class="card-content">
@@ -51,6 +60,8 @@
               <div class="col s12 l5">
                 {{ wtf.render_field(form.pdf, accept='application/pdf', placeholder='Choose a PDF file') }}
               </div>
+            </div>
+            <div class="row">
               <div class="col s12 l4">
                 <div class="input-field">
                   <i class="material-icons prefix">language</i>