Change List.js integration and rename service-icon css

app/static/js/RessourceLists/CorpusFileList.js

@@ -6,12 +6,12 @@ class CorpusFileList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search corpus file</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search corpus file</label>
         </div>
         <table>
           <thead>
@@ -28,19 +28,6 @@ class CorpusFileList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><span class="filename"></span></td>
-        <td><span class="author"></span></td>
-        <td><span class="title"></span></td>
-        <td><span class="publishing-year"></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
-          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (corpusFile) => {
       return {
         'id': corpusFile.id,
@@ -51,20 +38,35 @@ class CorpusFileList extends RessourceList {
         'title': corpusFile.title
       };
     },
-    sortArgs: ['creation-date', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      'author',
-      'filename',
-      'publishing-year',
-      'title'
-    ]
+    sortParams: ['creation-date', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><span class="filename"></span></td>
+          <td><span class="author"></span></td>
+          <td><span class="title"></span></td>
+          <td><span class="publishing-year"></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
+            <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
+            <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        'author',
+        'filename',
+        'publishing-year',
+        'title'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...CorpusFileList.options, ...options});
-    this.corpusId = listElement.dataset.corpusId;
+  constructor(listContainerElement, options={}) {
+    super(listContainerElement, _.merge({}, CorpusFileList.options, options));
+    this.corpusId = listContainerElement.dataset.corpusId;
   }
 
   init(user) {
@@ -72,10 +74,12 @@ class CorpusFileList extends RessourceList {
   }
 
   onClick(event) {
+    let corpusFileElement = event.target.closest('tr');
+    if (corpusFileElement === null) {return;}
+    let corpusFileId = corpusFileElement.dataset.id;
+    if (corpusFileId === undefined) {return;}
     let actionButtonElement = event.target.closest('.action-button');
     let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
-    let corpusFileElement = event.target.closest('tr');
-    let corpusFileId = corpusFileElement.dataset.id;
     switch (action) {
       case 'delete': {
         Utils.deleteCorpusFileRequest(this.userId, this.corpusId, corpusFileId);

app/static/js/RessourceLists/CorpusList.js

@@ -1,12 +1,4 @@
 class CorpusList extends RessourceList {
-  static instances = [];
-
-  static getInstance(elem) {
-    return CorpusList.instances.find((instance) => {
-      return instance.listjs.list === elem;
-    });
-  }
-
   static autoInit() {
     for (let corpusListElement of document.querySelectorAll('.corpus-list:not(.no-autoinit)')) {
       new CorpusList(corpusListElement);
@@ -14,12 +6,12 @@ class CorpusList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search corpus</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search corpus</label>
         </div>
         <table>
           <thead>
@@ -35,17 +27,6 @@ class CorpusList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
-        <td><b class="title"></b><br><i class="description"></i></td>
-        <td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (corpus) => {
       return {
         'id': corpus.id,
@@ -55,19 +36,31 @@ class CorpusList extends RessourceList {
         'title': corpus.title
       };
     },
-    sortArgs: ['creation-date', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      {name: 'status', attr: 'data-corpus-status'},
-      'description',
-      'title'
-    ]
+    sortParams: ['creation-date', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
+          <td><b class="title"></b><br><i class="description"></i></td>
+          <td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
+            <a class="action-button btn-floating service-color darken waves-effect waves-light" data-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        {name: 'status', attr: 'data-status'},
+        'description',
+        'title'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...CorpusList.options, ...options});
-    CorpusList.instances.push(this);
+  constructor(listContainerElement, options={}) {
+    super(listContainerElement, _.merge({}, CorpusList.options, options));
   }
 
   init(user) {
@@ -75,10 +68,12 @@ class CorpusList extends RessourceList {
   }
 
   onClick(event) {
+    let corpusElement = event.target.closest('tr');
+    if (corpusElement === null) {return;}
+    let corpusId = corpusElement.dataset.id;
+    if (corpusId === undefined) {return;}
     let actionButtonElement = event.target.closest('.action-button');
     let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
-    let corpusElement = event.target.closest('tr');
-    let corpusId = corpusElement.dataset.id;
     switch (action) {
       case 'delete-request': {
         Utils.deleteCorpusRequest(this.userId, corpusId);

app/static/js/RessourceLists/JobInputList.js

@@ -6,12 +6,12 @@ class JobInputList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search job input</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search job input</label>
         </div>
         <table>
           <thead>
@@ -25,14 +25,6 @@ class JobInputList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><span class="filename"></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (jobInput) => {
       return {
         'id': jobInput.id,
@@ -40,17 +32,27 @@ class JobInputList extends RessourceList {
         'filename': jobInput.filename
       };
     },
-    sortArgs: ['filename', {order: 'asc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      'filename'
-    ]
+    sortParams: ['filename', {order: 'asc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><span class="filename"></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        'filename'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...JobInputList.options, ...options});
-    this.jobId = listElement.dataset.jobId;
+  constructor(listContainerElement, options={}) {
+    super(listContainerElement, _.merge({}, JobInputList.options, options));
+    this.jobId = listContainerElement.dataset.jobId;
   }
 
   init(user) {
@@ -58,10 +60,12 @@ class JobInputList extends RessourceList {
   }
 
   onClick(event) {
+    let jobInputElement = event.target.closest('tr');
+    if (jobInputElement === null) {return;}
+    let jobInputId = jobInputElement.dataset.id;
+    if (jobInputId === undefined) {return;}
     let actionButtonElement = event.target.closest('.action-button');
     let action = actionButtonElement === null ? 'download' : actionButtonElement.dataset.action;
-    let jobInputElement = event.target.closest('tr');
-    let jobInputId = jobInputElement.dataset.id;
     switch (action) {
       case 'download': {
         window.location.href = `/jobs/${this.jobId}/inputs/${jobInputId}/download`;

app/static/js/RessourceLists/JobList.js

@@ -6,12 +6,12 @@ class JobList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search job</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search job</label>
         </div>
         <table>
           <thead>
@@ -27,44 +27,43 @@ class JobList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable service-color lighten">
-        <td><a class="btn-floating disabled"><i class="service-1 nopaque-icons service-color darken service-icon"></i></a></td>
-        <td><b class="title"></b><br><i class="description"></i></td>
-        <td><span class="status badge new job-status-color job-status-text" data-badge-caption=""></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (job) => {
       return {
         'id': job.id,
         'creation-date': job.creation_date,
         'description': job.description,
         'service': job.service,
-        'service-1': job.service,
-        'service-2': job.service,
         'status': job.status,
         'title': job.title
       };
     },
-    sortArgs: ['creation-date', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      {data: ['service']},
-      {name: 'service-1', attr: 'data-service'},
-      {name: 'service-2', attr: 'data-service'},
-      {name: 'status', attr: 'data-job-status'},
-      'description',
-      'title'
-    ]
+    sortParams: ['creation-date', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable service-scheme">
+          <td><a class="btn-floating"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
+          <td><b class="title"></b><br><i class="description"></i></td>
+          <td><span class="badge new job-status-color job-status-text status" data-badge-caption=""></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
+            <a class="action-button btn-floating darken waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        {data: ['service']},
+        {name: 'status', attr: 'data-status'},
+        'description',
+        'title'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...JobList.options, ...options});
+  constructor(listContainerElement, options={}) {
+    super(listContainerElement, _.merge({}, JobList.options, options));
+    console.log(this);
   }
 
   init(user) {
@@ -72,10 +71,12 @@ class JobList extends RessourceList {
   }
 
   onClick(event) {
+    let jobElement = event.target.closest('tr');
+    if (jobElement === null) {return;}
+    let jobId = jobElement.dataset.id;
+    if (jobId === undefined) {return;}
     let actionButtonElement = event.target.closest('.action-button');
     let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
-    let jobElement = event.target.closest('tr');
-    let jobId = jobElement.dataset.id;
     switch (action) {
       case 'delete-request': {
         Utils.deleteJobRequest(this.userId, jobId);

app/static/js/RessourceLists/JobResultList.js

@@ -6,12 +6,12 @@ class JobResultList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search job result</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search job result</label>
         </div>
         <table>
           <thead>
@@ -26,15 +26,6 @@ class JobResultList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><span class="description"></span></td>
-        <td><span class="filename"></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (jobResult) => {
       return {
         'id': jobResult.id,
@@ -43,18 +34,29 @@ class JobResultList extends RessourceList {
         'filename': jobResult.filename
       };
     },
-    sortArgs: ['filename', {order: 'asc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      'description',
-      'filename'
-    ]
+    sortParams: ['filename', {order: 'asc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><span class="description"></span></td>
+          <td><span class="filename"></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating waves-effect waves-light" data-action="download"><i class="material-icons">file_download</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        'description',
+        'filename'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...JobResultList.options, ...options});
-    this.jobId = listElement.dataset.jobId;
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, {...JobResultList.options, ...options});
+    this.jobId = listContainerElement.dataset.jobId;
   }
 
   init(user) {
@@ -62,10 +64,12 @@ class JobResultList extends RessourceList {
   }
 
   onClick(event) {
+    let jobResultElement = event.target.closest('tr');
+    if (jobResultElement === null) {return;}
+    let jobResultId = jobResultElement.dataset.id;
+    if (jobResultId === undefined) {return;}
     let actionButtonElement = event.target.closest('.action-button');
     let action = actionButtonElement === null ? 'download' : actionButtonElement.dataset.action;
-    let jobResultElement = event.target.closest('tr');
-    let jobResultId = jobResultElement.dataset.id;
     switch (action) {
       case 'download': {
         window.location.href = `/jobs/${this.jobId}/results/${jobResultId}/download`;

app/static/js/RessourceLists/PublicUserList.js

@@ -6,12 +6,12 @@ class PublicUserList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search user</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search user</label>
         </div>
         <table>
           <thead>
@@ -30,19 +30,6 @@ class PublicUserList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><img alt="user-image" class="circle responsive-img avatar" style="width:50%"></td>
-        <td><b><span class="username"></span><b></td>
-        <td><span class="full-name"></span></td>
-        <td><span class="location"></span></td>
-        <td><span class="organization"></span></td>
-        <td><span class="corpora-online"></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (user) => {
       return {
         'id': user.id,
@@ -55,21 +42,36 @@ class PublicUserList extends RessourceList {
         'corpora-online': '0'
       };
     },
-    sortArgs: ['member-since', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['member-since']},
-      {name: 'avatar', attr: 'src'},
-      'username',
-      'full-name',
-      'location',
-      'organization',
-      'corpora-online'
-    ]
+    sortParams: ['member-since', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><img alt="user-image" class="circle responsive-img avatar" style="width:50%"></td>
+          <td><b><span class="username"></span><b></td>
+          <td><span class="full-name"></span></td>
+          <td><span class="location"></span></td>
+          <td><span class="organization"></span></td>
+          <td><span class="corpora-online"></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['member-since']},
+        {name: 'avatar', attr: 'src'},
+        'username',
+        'full-name',
+        'location',
+        'organization',
+        'corpora-online'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...PublicUserList.options, ...options});
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, {...PublicUserList.options, ...options});
   }
 
   init(users) {

app/static/js/RessourceLists/RessourceList.js

@@ -16,64 +16,69 @@ class RessourceList {
     UserList.autoInit();
   }
 
-  static options = {page: 5, pagination: {innerWindow: 2, outerWindow: 2}};
+  static options = {
+    listContainerInnerHTMLGenerator: null,
+    ressourceMapper: null,
+    sortParams: null,
+    listjs: {
+      page: 5,
+      pagination: {
+        innerWindow: 2,
+        outerWindow: 2
+      }
+    }
+  };
 
-  constructor(listElement, options = {}) {
-    if (!(listElement.hasAttribute('id'))) {
+  constructor(listContainerElement, options={}) {
+    let mergedOptions = _.merge({}, RessourceList.options, options);
+    this.isInitialized = false;
+    this.listContainerInnerHTMLGenerator = mergedOptions.listContainerInnerHTMLGenerator;
+    this.ressourceMapper = mergedOptions.ressourceMapper;
+    this.sortParams = mergedOptions.sortParams;
+    this.userId = listContainerElement.dataset.userId;
+    // #region Make sure listElement has an id
+    if (!listContainerElement.hasAttribute('id')) {
       let i;
       for (i = 0; true; i++) {
         if (document.querySelector(`#ressource-list-${i}`)) {continue;}
-        listElement.id = `ressource-list-${i}`;
+        listContainerElement.id = `ressource-list-${i}`;
         break;
       }
     }
-    options = {
-      ...RessourceList.options,
-      ...options
+    // #endregion
+    if (this.listContainerInnerHTMLGenerator !== null && listContainerElement.textContent.trim() === '') {
+      this.listContainerInnerHTMLGenerator(listContainerElement);
     }
-    if ('ressourceMapper' in options && typeof options.ressourceMapper === 'function') {
-      this.ressourceMapper = options.ressourceMapper;
-      delete options.ressourceMapper;
-    }
-    if ('initialHtmlGenerator' in options && typeof options.initialHtmlGenerator === 'function') {
-      this.initialHtmlGenerator = options.initialHtmlGenerator;
-      listElement.innerHTML = this.initialHtmlGenerator(listElement.id);
-      delete options.initialHtmlGenerator;
-    }
-    if ('sortArgs' in options) {
-      this.sortArgs = options.sortArgs;
-      delete options.sortArgs;
-    }
-    this.listjs = new List(listElement, {...RessourceList.options, ...options});
+    this.listjs = new List(listContainerElement, mergedOptions.listjs);
+    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
     this.listjs.list.innerHTML = `
       <tr>
-        <td class="row" colspan="100%">
-          <div class="col s12">&nbsp;</div>
-          <div class="col s3 m2 xl1">
-            <div class="preloader-wrapper active">
-              <div class="spinner-layer spinner-green-only">
-                <div class="circle-clipper left">
-                  <div class="circle"></div>
-                </div>
-                <div class="gap-patch">
-                  <div class="circle"></div>
-                </div>
-                <div class="circle-clipper right">
-                  <div class="circle"></div>
+        <td colspan="100%">
+          <div class="row">
+            <div class="col s12">&nbsp;</div>
+            <div class="col s3 m2 xl1">
+              <div class="preloader-wrapper active">
+                <div class="spinner-layer spinner-green-only">
+                  <div class="circle-clipper left">
+                    <div class="circle"></div>
+                  </div>
+                  <div class="gap-patch">
+                    <div class="circle"></div>
+                  </div>
+                  <div class="circle-clipper right">
+                    <div class="circle"></div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="col s9 m6 xl5">
-            <span class="card-title">Waiting for data...</span>
-            <p>This list is not initialized yet.</p>
+            <div class="col s9 m6 xl5">
+              <span class="card-title">Waiting for data...</span>
+              <p>This list is not initialized yet.</p>
+            </div>
           </div>
         </td>
       </tr>
     `.trim();
-    this.userId = this.listjs.listContainer.dataset.userId;
-    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
-    this.isInitialized = false;
     if (this.userId) {
       app.subscribeUser(this.userId)
         .then((response) => {
@@ -113,12 +118,12 @@ class RessourceList {
 
   add(ressources) {
     let values = Array.isArray(ressources) ? ressources : [ressources];
-    if ('ressourceMapper' in this) {
+    if (this.ressourceMapper !== null) {
       values = values.map((value) => {return this.ressourceMapper(value);});
     }
     this.listjs.add(values, () => {
-      if ('sortArgs' in this) {
-        this.listjs.sort(...this.sortArgs);
+      if (this.sortParams !== null) {
+        this.listjs.sort(...this.sortParams);
       }
     });
   }

app/static/js/RessourceLists/SpacyNLPPipelineModelList.js

@@ -6,12 +6,12 @@ class SpaCyNLPPipelineModelList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search SpaCy NLP Pipeline Model</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search SpaCy NLP Pipeline Model</label>
         </div>
         <table>
           <thead>
@@ -26,26 +26,6 @@ class SpaCyNLPPipelineModelList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
-        <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
-        <td>
-          <div class="switch action-switch center-align" data-action="share-request">
-            <span class="share"></span>
-            <label>
-              <input type="checkbox" class="is_public">
-              <span class="lever"></span>
-              public
-            </label>
-          </div>
-        </td>
-        <td class="right-align">
-          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (spaCyNLPPipelineModel) => {
       return {
         'id': spaCyNLPPipelineModel.id,
@@ -62,25 +42,47 @@ class SpaCyNLPPipelineModelList extends RessourceList {
         'is_public': spaCyNLPPipelineModel.is_public ? 'True' : 'False'
       };
     },
-    sortArgs: ['creation-date', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      {name: 'publisher-url', attr: 'href'},
-      {name: 'publishing-url', attr: 'href'},
-      'description',
-      'publisher',
-      'publishing-url-2',
-      'publishing-year',
-      'title',
-      'title-2',
-      'version',
-      {name: 'is_public', attr: 'data-checked'}
-    ]
+    sortParams: ['creation-date', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
+          <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
+          <td>
+            <div class="switch action-switch center-align" data-action="share-request">
+              <span class="share"></span>
+              <label>
+                <input type="checkbox" class="is_public">
+                <span class="lever"></span>
+                public
+              </label>
+            </div>
+          </td>
+          <td class="right-align">
+            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
+            <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        {name: 'publisher-url', attr: 'href'},
+        {name: 'publishing-url', attr: 'href'},
+        'description',
+        'publisher',
+        'publishing-url-2',
+        'publishing-year',
+        'title',
+        'title-2',
+        'version',
+        {name: 'is_public', attr: 'data-checked'}
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...SpaCyNLPPipelineModelList.options, ...options});
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, {...SpaCyNLPPipelineModelList.options, ...options});
     this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
   }
 

app/static/js/RessourceLists/TesseractOCRPipelineModelList.js

@@ -6,12 +6,12 @@ class TesseractOCRPipelineModelList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search Tesseract OCR Pipeline Model</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search Tesseract OCR Pipeline Model</label>
         </div>
         <table>
           <thead>
@@ -26,26 +26,6 @@ class TesseractOCRPipelineModelList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
-        <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
-        <td>
-          <div class="switch action-switch center-align" data-action="share-request">
-            <span class="share"></span>
-            <label>
-              <input type="checkbox" class="is_public">
-              <span class="lever"></span>
-              public
-            </label>
-          </div>
-        </td>
-        <td class="right-align">
-          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (tesseractOCRPipelineModel) => {
       return {
         'id': tesseractOCRPipelineModel.id,
@@ -62,25 +42,47 @@ class TesseractOCRPipelineModelList extends RessourceList {
         'is_public': tesseractOCRPipelineModel.is_public ? 'True' : 'False'
       };
     },
-    sortArgs: ['creation-date', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['creation-date']},
-      {name: 'publisher-url', attr: 'href'},
-      {name: 'publishing-url', attr: 'href'},
-      'description',
-      'publisher',
-      'publishing-url-2',
-      'publishing-year',
-      'title',
-      'title-2',
-      'version',
-      {name: 'is_public', attr: 'data-checked'}
-    ]
+    sortParams: ['creation-date', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
+          <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
+          <td>
+            <div class="switch action-switch center-align" data-action="share-request">
+              <span class="share"></span>
+              <label>
+                <input type="checkbox" class="is_public">
+                <span class="lever"></span>
+                public
+              </label>
+            </div>
+          </td>
+          <td class="right-align">
+            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
+            <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['creation-date']},
+        {name: 'publisher-url', attr: 'href'},
+        {name: 'publishing-url', attr: 'href'},
+        'description',
+        'publisher',
+        'publishing-url-2',
+        'publishing-year',
+        'title',
+        'title-2',
+        'version',
+        {name: 'is_public', attr: 'data-checked'}
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...TesseractOCRPipelineModelList.options, ...options});
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, {...TesseractOCRPipelineModelList.options, ...options});
     this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
   }
 

app/static/js/RessourceLists/UserList.js

@@ -6,12 +6,12 @@ class UserList extends RessourceList {
   }
 
   static options = {
-    initialHtmlGenerator: (id) => {
-      return `
+    listContainerInnerHTMLGenerator: (listContainerElement) => {
+      listContainerElement.innerHTML = `
         <div class="input-field">
           <i class="material-icons prefix">search</i>
-          <input id="${id}-search" class="search" type="search"></input>
-          <label for="${id}-search">Search user</label>
+          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
+          <label for="${listContainerElement.id}-search">Search user</label>
         </div>
         <table>
           <thead>
@@ -29,20 +29,6 @@ class UserList extends RessourceList {
         <ul class="pagination"></ul>
       `.trim();
     },
-    item: `
-      <tr class="clickable hoverable">
-        <td><span class="id-1"></span></td>
-        <td><span class="username"></span></td>
-        <td><span class="email"></span></td>
-        <td><span class="last-seen"></span></td>
-        <td><span class="role"></span></td>
-        <td class="right-align">
-          <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating waves-effect waves-light" data-action="edit"><i class="material-icons">edit</i></a>
-          <a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
-        </td>
-      </tr>
-    `.trim(),
     ressourceMapper: (user) => {
       return {
         'id': user.id,
@@ -54,20 +40,36 @@ class UserList extends RessourceList {
         'role': user.role.name
       };
     },
-    sortArgs: ['member-since', {order: 'desc'}],
-    valueNames: [
-      {data: ['id']},
-      {data: ['member-since']},
-      'email',
-      'id-1',
-      'last-seen',
-      'role',
-      'username'
-    ]
+    sortParams: ['member-since', {order: 'desc'}],
+    listjs: {
+      item: `
+        <tr class="clickable hoverable">
+          <td><span class="id-1"></span></td>
+          <td><span class="username"></span></td>
+          <td><span class="email"></span></td>
+          <td><span class="last-seen"></span></td>
+          <td><span class="role"></span></td>
+          <td class="right-align">
+            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete"><i class="material-icons">delete</i></a>
+            <a class="action-button btn-floating waves-effect waves-light" data-action="edit"><i class="material-icons">edit</i></a>
+            <a class="action-button btn-floating waves-effect waves-light" data-action="view"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim(),
+      valueNames: [
+        {data: ['id']},
+        {data: ['member-since']},
+        'email',
+        'id-1',
+        'last-seen',
+        'role',
+        'username'
+      ]
+    }
   };
 
-  constructor(listElement, options = {}) {
-    super(listElement, {...UserList.options, ...options});
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, {...UserList.options, ...options});
   }
 
   init(users) {
@@ -75,10 +77,12 @@ class UserList extends RessourceList {
   }
 
   onClick(event) {
+    let userElement = event.target.closest('tr');
+    if (userElement === null) {return;}
+    let userId = userElement.dataset.id;
+    if (userId === undefined) {return;}
     let actionButtonElement = event.target.closest('.action-button');
     let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
-    let userElement = event.target.closest('tr');
-    let userId = userElement.dataset.id;
     switch (action) {
       case 'delete': {
         Utils.deleteUserRequest(userId);