Enable auto initialization for ressource lists

2025-11-03 20:02:47 +00:00 · 2021-12-02 11:16:06 +01:00
parent f977c808ec
commit 962e58f2d3
9 changed files with 63 additions and 48 deletions
--- a/app/static/js/nopaque/RessourceLists/CorpusFileList.js
+++ b/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);
  }

--- a/app/static/js/nopaque/RessourceLists/QueryResultList.js
+++ b/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) {
--- a/app/static/js/nopaque/RessourceLists/RessourceList.js
+++ b/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});
-    this.list.list.innerHTML = `
+    let i;
+
+    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.list.sort('id', {order: 'desc'});
+    this.listjs.add(ressources, () => {
+      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}]};
--- a/app/templates/_scripts.html.j2
+++ b/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>
--- a/app/templates/admin/user.html.j2
+++ b/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 %}
--- a/app/templates/admin/users.html.j2
+++ b/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 %}
--- a/app/templates/corpora/corpus.html.j2
+++ b/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 %}
--- a/app/templates/jobs/job.html.j2
+++ b/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 %}
--- a/app/templates/main/dashboard.html.j2
+++ b/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 %}