Enable auto initialization for ressource lists

app/static/js/nopaque/RessourceLists/CorpusFileList.js

@@ -5,7 +5,6 @@ class CorpusFileList extends RessourceList {
   }
 
   init(user) {
-    console.log(user);
     this._init(user.corpora[this.corpusId].files);
   }
 

app/static/js/nopaque/RessourceLists/QueryResultList.js

@@ -4,7 +4,7 @@ class QueryResultList extends RessourceList {
   }
 
   init(user) {
-    super.init(user.query_results);
+    super._init(user.query_results);
   }
 
   onclick(event) {

app/static/js/nopaque/RessourceLists/RessourceList.js

@@ -4,8 +4,17 @@ class RessourceList {
    * a base class for concrete ressource list implementations.
    */
   constructor(listElement, options = {}) {
-    this.list = new List(listElement, {...RessourceList.options, ...options});
+    let i;
-    this.list.list.innerHTML = `
+
+    if (!(listElement.hasAttribute('id'))) {
+      for (i = 0; true; i++) {
+        if (document.querySelector(`ressource-list-${i}`)) {continue;}
+        listElement.id = `ressource-list-${i}`;
+        break;
+      }
+    }
+    this.listjs = new List(listElement, {...RessourceList.options, ...options});
+    this.listjs.list.innerHTML = `
       <tr>
         <td class="row" colspan="100%">
           <div class="col s12">&nbsp;</div>
@@ -31,9 +40,9 @@ class RessourceList {
         </td>
       </tr>
     `.trim();
-    this.list.list.style.cursor = 'pointer';
+    this.listjs.list.style.cursor = 'pointer';
     this.userId = listElement.dataset.userId;
-    if (typeof this.onclick === 'function') {this.list.list.addEventListener('click', event => this.onclick(event));}
+    if (typeof this.onclick === 'function') {this.listjs.list.addEventListener('click', event => this.onclick(event));}
     if (this.userId) {
       app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
       app.getUserById(this.userId).then(
@@ -44,7 +53,7 @@ class RessourceList {
   }
 
   _init(ressources) {
-    this.list.clear();
+    this.listjs.clear();
     this.add(Object.values(ressources));
     let emptyListElementHTML = `
       <tr class="show-if-only-child">
@@ -54,7 +63,7 @@ class RessourceList {
         </td>
       </tr>
     `.trim();
-    this.list.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
+    this.listjs.list.insertAdjacentHTML('afterbegin', emptyListElementHTML);
   }
 
   init(user) {throw 'Not implemented';}
@@ -66,17 +75,17 @@ class RessourceList {
   add(values) {
     let ressources = Array.isArray(values) ? values : [values];
     ressources = ressources.map(ressource => this.preprocessRessource(ressource));
-    this.list.add(ressources, () => {
+    this.listjs.add(ressources, () => {
-      this.list.sort('id', {order: 'desc'});
+      this.listjs.sort('id', {order: 'desc'});
     });
   }
 
   remove(id) {
-    this.list.remove('id', id);
+    this.listjs.remove('id', id);
   }
 
   replace(id, valueName, newValue) {
-      this.list.get('id', id)[0].values({[valueName]: newValue});
+      this.listjs.get('id', id)[0].values({[valueName]: newValue});
   }
 }
 RessourceList.options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};

app/templates/_scripts.html.j2

@@ -16,7 +16,7 @@
           "js/nopaque/RessourceDisplays/JobDisplay.js" %}
 <script src="{{ ASSET_URL }}"></script>
 {% endassets %}
-{% assets output="js/nopaque/RessourceLists.min.bundle.js",
+{% assets filters='rjsmin', output="js/nopaque/RessourceLists.min.bundle.js",
           "js/nopaque/RessourceLists/RessourceList.js",
           "js/nopaque/RessourceLists/CorpusList.js",
           "js/nopaque/RessourceLists/CorpusFileList.js",
@@ -41,5 +41,32 @@
   app.getUserById(currentUserId).then(user => {}, error => {throw JSON.stringify(error)});
   {% endif %}
   nopaque.Forms.init();
+  for (let nopaqueRessourceListElement of document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)')) {
+    switch (nopaqueRessourceListElement.dataset.ressourceType) {
+      case 'Corpus':
+        new CorpusList(nopaqueRessourceListElement);
+        break;
+      case 'CorpusFile':
+        new CorpusFileList(nopaqueRessourceListElement);
+        break;
+      case 'Job':
+        new JobList(nopaqueRessourceListElement);
+        break;
+      case 'JobInput':
+        new JobInputList(nopaqueRessourceListElement);
+        break;
+      case 'JobResult':
+        new JobResultList(nopaqueRessourceListElement);
+        break;
+      case 'QueryResult':
+        new QueryResultList(nopaqueRessourceListElement);
+        break;
+      case 'User':
+        new UserList(nopaqueRessourceListElement);
+        break;
+      default:
+        break;
+    }
+  }
   for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {app.flash(flashedMessage[1], flashedMessage[0]);}
 </script>

app/templates/admin/user.html.j2

@@ -37,7 +37,7 @@
       </div>
     </div>
 
-<div class="col s12 l6" id="corpora" data-user-id="{{ user.hashid }}">
+<div class="col s12 l6 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ user.hashid }}">
   <h3>Corpora</h3>
   <div class="card">
     <div class="card-content">
@@ -65,7 +65,7 @@
   </div>
 </div>
 
-<div class="col s12 l6" id="jobs" data-user-id="{{ user.hashid }}">
+<div class="col s12 l6 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ user.hashid }}">
   <h3>Jobs</h3>
   <div class="card">
     <div class="card-content">
@@ -74,7 +74,7 @@
         <input id="search-job" class="search" type="search"></input>
         <label for="search-job">Search job</label>
       </div>
-      <table class="highlight ressource-list">
+      <table class="highlight">
         <thead>
           <tr>
             <th><span class="sort" data-sort="service">Service</span></th>
@@ -108,11 +108,3 @@
   </div>
 </div>
 {% endblock modals %}
-
-{% block scripts %}
-{{ super() }}
-<script>
-  let corpusList = new CorpusList(document.querySelector('#corpora'));
-  let jobList = new JobList(document.querySelector('#jobs'));
-</script>
-{% endblock scripts %}

app/templates/admin/users.html.j2

@@ -8,7 +8,7 @@
       <h1 id="title">{{ title }}</h1>
     </div>
 
-    <div class="col s12" id="users">
+    <div class="col s12 nopaque-ressource-list no-autoinit" data-ressource-type="User" id="users">
       <div class="card">
         <div class="card-content">
           <div class="input-field">
@@ -16,7 +16,7 @@
             <input id="search-user" class="search" type="text"></input>
             <label for="search-user">Search user</label>
           </div>
-          <table class="highlight ressource-list">
+          <table class="highlight">
             <thead>
               <tr>
                 <th class="sort" data-sort="id">Id</th>
@@ -40,7 +40,7 @@
 {% block scripts %}
 {{ super() }}
 <script>
-  let userList = new UserList(document.querySelector('#users'), {page: 10});
+  let userList = new UserList(document.querySelector('#users'));
   userList.init({{ dict_users|tojson }});
 </script>
 {% endblock scripts %}

app/templates/corpora/corpus.html.j2

@@ -72,7 +72,7 @@
       </div>
     </div>
 
-    <div class="col s12" id="corpus-files" data-corpus-id="{{ corpus.hashid }}" data-user-id="{{ corpus.user.hashid }}">
+    <div class="col s12 nopaque-ressource-list" data-corpus-id="{{ corpus.hashid }}" data-ressource-type="CorpusFile" data-user-id="{{ corpus.user.hashid }}">
       <div class="card">
         <div class="card-content">
           <span class="card-title" id="files">Corpus files</span>
@@ -122,6 +122,5 @@
 {{ super() }}
 <script>
   let corpusDisplay = new CorpusDisplay(document.querySelector('#corpus-display'));
-  let corpusFileList = new CorpusFileList(document.querySelector('#corpus-files'));
 </script>
 {% endblock scripts %}

app/templates/jobs/job.html.j2

@@ -87,7 +87,7 @@
       </div>
     </div>
 
-    <div class="col s12" id="job-inputs" data-job-id="{{ job.hashid }}" data-user-id="{{ job.user.hashid }}">
+    <div class="col s12 nopaque-ressource-list" data-job-id="{{ job.hashid }}" data-ressource-type="JobInput" data-user-id="{{ job.user.hashid }}">
       <div class="card">
         <div class="card-content">
           <div class="row">
@@ -112,7 +112,7 @@
       </div>
     </div>
 
-    <div class="col s12" id="job-results" data-job-id="{{ job.hashid }}" data-user-id="{{ job.user.hashid }}">
+    <div class="col s12 nopaque-ressource-list" data-job-id="{{ job.hashid }}" data-ressource-type="JobResult" data-user-id="{{ job.user.hashid }}">
       <div class="card">
         <div class="card-content">
           <div class="row">
@@ -172,7 +172,5 @@
 {{ super() }}
 <script>
   let jobDisplay = new JobDisplay(document.querySelector('#job-display'));
-  let jobInputList = new JobInputList(document.querySelector('#job-inputs'));
-  let jobResultList = new JobResultList(document.querySelector('#job-results'));
 </script>
 {% endblock scripts %}

app/templates/main/dashboard.html.j2

@@ -18,7 +18,7 @@
             <li class="tab col s6"><a href="#query-results">Query results</a></li>
           </ul>
         </div>
-        <div class="col s12" data-user-id="{{ current_user.hashid }}" id="corpora">
+        <div class="col s12 nopaque-ressource-list" data-ressource-type="Corpus" data-user-id="{{ current_user.hashid }}" id="corpora">
           <div class="card">
             <div class="card-content">
               <div class="input-field">
@@ -26,7 +26,7 @@
                 <input id="search-corpus" class="search" type="search"></input>
                 <label for="search-corpus">Search corpus</label>
               </div>
-              <table class="highlight ressource-list">
+              <table class="highlight">
                 <thead>
                   <tr>
                     <th></th>
@@ -48,7 +48,7 @@
             </div>
           </div>
         </div>
-        <div class="col s12" id="query-results">
+        <div class="col s12 nopaque-ressource-list" data-ressource-type="QueryResult" data-user-id="{{ current_user.hashid }}" id="query-results">
           <div class="card">
             <div class="card-content">
               <div class="input-field">
@@ -56,7 +56,7 @@
                 <input id="search-query-results" class="search" type="search"></input>
                 <label for="search-query-results">Search query result</label>
               </div>
-              <table class="highlight ressource-list">
+              <table class="highlight">
                 <thead>
                   <tr>
                     <th>
@@ -89,7 +89,7 @@
       </div>
     </div>
 
-    <div class="col s12" data-user-id="{{ current_user.hashid }}" id="jobs">
+    <div class="col s12 nopaque-ressource-list" data-ressource-type="Job" data-user-id="{{ current_user.hashid }}" id="jobs">
       <h3>My Jobs</h3>
       <p>A job is the execution of a service provided by nopaque. You can create any number of jobs and let them be processed simultaneously.</p>
       <div class="card">
@@ -99,7 +99,7 @@
             <input id="search-job" class="search" type="search"></input>
             <label for="search-job">Search job</label>
           </div>
-          <table class="highlight ressource-list">
+          <table class="highlight">
             <thead>
               <tr>
                 <th><span class="sort" data-sort="service">Service</span></th>
@@ -174,12 +174,3 @@
   </div>
 </div>
 {% endblock modals %}
-
-{% block scripts %}
-{{ super() }}
-<script>
-  let corpusList = new CorpusList(document.querySelector('#corpora'));
-  let jobList = new JobList(document.querySelector('#jobs'));
-  //let queryResultList = new QueryResultList(document.querySelector('#query-results'));
-</script>
-{% endblock scripts %}