From 0f263df9b28b30a56f78df0eb4e38b9edd6b4776 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 13 Jan 2021 12:10:31 +0100
Subject: [PATCH] User CorpusList and QueryResultList in Corpus analysis
 service page.

---
 web/app/templates/main/dashboard.html.j2      |  2 +-
 .../services/corpus_analysis.html.j2          | 36 +++++++------------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/web/app/templates/main/dashboard.html.j2 b/web/app/templates/main/dashboard.html.j2
index 686c8438..539d70c2 100644
--- a/web/app/templates/main/dashboard.html.j2
+++ b/web/app/templates/main/dashboard.html.j2
@@ -59,7 +59,7 @@
                 <input id="search-query-results" class="search" type="search"></input>
                 <label for="search-query-results">Search query result</label>
               </div>
-              <table class="highlight responsive-table">
+              <table class="highlight ressource-list">
                 <thead>
                   <tr>
                     <th>
diff --git a/web/app/templates/services/corpus_analysis.html.j2 b/web/app/templates/services/corpus_analysis.html.j2
index 9c684786..91b82889 100644
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/web/app/templates/services/corpus_analysis.html.j2
@@ -29,17 +29,16 @@
       <p>Nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags. The results can either be displayed as text or abstract visualizations.</p>
     </div>
 
-    <div class="col s12">
+    <div class="col s12" id="corpora">
       <h2>My Corpora</h2>
       <div class="card">
-        <div class="card-content" id="corpora">
+        <div class="card-content">
           <div class="input-field">
             <i class="material-icons prefix">search</i>
             <input id="search-corpus" class="search" type="search"></input>
             <label for="search-corpus">Search corpus</label>
           </div>
-          <ul class="pagination paginationTop"></ul>
-          <table>
+          <table class="highlight ressource-list">
             <thead>
               <tr>
                 <th></th>
@@ -53,7 +52,7 @@
             </thead>
             <tbody class="list"></tbody>
           </table>
-          <ul class="pagination paginationBottom"></ul>
+          <ul class="pagination"></ul>
         </div>
         <div class="card-action right-align">
           <a class="waves-effect waves-light btn" href="{{ url_for('corpora.import_corpus') }}"><i class="material-icons right">import_export</i>Import Corpus</a>
@@ -62,17 +61,16 @@
       </div>
     </div>
 
-    <div class="col s12">
+    <div class="col s12" id="query-results">
       <h2>My query results</h2>
       <div class="card">
-        <div class="card-content" id="query-results">
+        <div class="card-content">
           <div class="input-field">
             <i class="material-icons prefix">search</i>
             <input id="search-query-results" class="search" type="search"></input>
             <label for="search-query-results">Search query result</label>
           </div>
-          <ul class="pagination paginationTop"></ul>
-          <table class="highlight responsive-table">
+          <table class="highlight ressource-list">
             <thead>
               <tr>
                 <th>
@@ -83,19 +81,12 @@
                   <span class="sort" data-sort="corpus">Corpus</span> and<br>
                   <span class="sort" data-sort="query">Query</span>
                 </th>
-                <th>{# Actions #}</th>
+                <th></th>
               </tr>
             </thead>
-            <tbody class="list">
-              <tr class="show-if-only-child">
-                <td colspan="5">
-                  <span class="card-title"><i class="material-icons left">folder</i>Nothing here...</span>
-                  <p>No query results yet imported.</p>
-                </td>
-              </tr>
-            </tbody>
+            <tbody class="list"></tbody>
           </table>
-          <ul class="pagination paginationBottom"></ul>
+          <ul class="pagination"></ul>
         </div>
         <div class="card-action right-align">
           <a class="btn waves-effect waves-light" href="{{ url_for('corpora.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a>
@@ -108,9 +99,8 @@
 
 {% block scripts %}
 {{ super() }}
-<script type="module">
-  import {RessourceList} from '../../static/js/nopaque.lists.js';
-  let corpusList = new RessourceList("corpora", nopaque.corporaSubscribers, "Corpus");
-  let queryResultList = new RessourceList("query-results", nopaque.queryResultsSubscribers, "QueryResult");
+<script>
+  let corpusList = new CorpusList(document.querySelector('#corpora'));
+  let queryResultList = new QueryResultList(document.querySelector('#query-results'));
 </script>
 {% endblock scripts %}