Sort lists by ressources creation date. CSS and HTML cleanup

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

@@ -13,7 +13,25 @@ class CorpusFileList extends RessourceList {
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, 'author', 'filename', 'publishing_year', 'title']
+    ressourceMapper: corpusFile => {
+      return {
+        id: corpusFile.id,
+        author: corpusFile.author,
+        creationDate: corpusFile.creation_date,
+        filename: corpusFile.filename,
+        publishingYear: corpusFile.publishing_year,
+        title: corpusFile.title
+      };
+    },
+    sortValueName: 'creationDate',
+    valueNames: [
+      {data: ['id']},
+      {data: ['creationDate']},
+      'author',
+      'filename',
+      'publishingYear',
+      'title'
+    ]
   };
 
 
@@ -115,15 +133,4 @@ class CorpusFileList extends RessourceList {
       }
     }
   }
-
-  preprocessRessource(corpusFile) {
-    return {
-      id: corpusFile.id,
-      author: corpusFile.author,
-      creationDate: corpusFile.creation_date,
-      filename: corpusFile.filename,
-      publishing_year: corpusFile.publishing_year,
-      title: corpusFile.title
-    };
-  }
 }

app/static/js/nopaque/RessourceLists/CorpusList.js

@@ -11,7 +11,23 @@ class CorpusList extends RessourceList {
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, {name: 'status', attr: 'data-status'}, 'description', 'title']
+    ressourceMapper: corpus => {
+      return {
+        id: corpus.id,
+        creationDate: corpus.creation_date,
+        description: corpus.description,
+        status: corpus.status,
+        title: corpus.title
+      };
+    },
+    sortValueName: 'creationDate',
+    valueNames: [
+      {data: ['id']},
+      {data: ['creationDate']},
+      {name: 'status', attr: 'data-status'},
+      'description',
+      'title'
+    ]
   };
 
 
@@ -107,14 +123,4 @@ class CorpusList extends RessourceList {
       }
     }
   }
-
-  preprocessRessource(corpus) {
-    return {
-      id: corpus.id,
-      creationDate: corpus.creation_date,
-      description: corpus.description,
-      status: corpus.status,
-      title: corpus.title
-    };
-  }
 }

app/static/js/nopaque/RessourceLists/JobInputList.js

@@ -8,7 +8,15 @@ class JobInputList extends RessourceList {
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, 'filename']
+    ressourceMapper: jobInput => {
+      return {
+        id: jobInput.id,
+        creationDate: jobInput.creation_date,
+        filename: jobInput.filename
+      };
+    },
+    sortValueName: 'creationDate',
+    valueNames: [{data: ['id']}, {data: ['creationDate']}, 'filename']
   };
 
 
@@ -43,12 +51,4 @@ class JobInputList extends RessourceList {
   }
 
   usersPatchHandler(patch) {return;}
-
-  preprocessRessource(jobInput) {
-    return {
-      id: jobInput.id,
-      creationDate: jobInput.creation_date,
-      filename: jobInput.filename
-    };
-  }
 }

app/static/js/nopaque/RessourceLists/JobList.js

@@ -1,17 +1,39 @@
 class JobList extends RessourceList {
   static options = {
     item: `
-      <tr>
-        <td><a class="btn-floating disabled"><i class="nopaque-icons service service-color darken service-icon"></i></a></td>
+      <tr class="service-color lighten">
+        <td><a class="btn-floating disabled"><i class="nopaque-icons service-color darken serviceDuplicate1 service-icon"></i></a></td>
         <td><b class="title"></b><br><i class="description"></i></td>
         <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
         <td class="right-align">
           <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
-          <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
+          <a class="action-button btn-floating serviceDuplicate2 service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, {name: 'service', attr: 'data-service'}, {name: 'status', attr: 'data-status'}, 'description', 'title']
+    ressourceMapper: job => {
+      return {
+        id: job.id,
+        creationDate: job.creation_date,
+        description: job.description,
+        service: job.service,
+        serviceDuplicate1: job.service,
+        serviceDuplicate2: job.service,
+        status: job.status,
+        title: job.title
+      };
+    },
+    sortValueName: 'creationDate',
+    valueNames: [
+      {data: ['id']},
+      {data: ['creationDate']},
+      {data: ['service']},
+      {name: 'serviceDuplicate1', attr: 'data-service'},
+      {name: 'serviceDuplicate2', attr: 'data-service'},
+      {name: 'status', attr: 'data-status'},
+      'description',
+      'title'
+    ]
   };
 
 
@@ -109,15 +131,4 @@ class JobList extends RessourceList {
       }
     }
   }
-
-  preprocessRessource(job) {
-    return {
-      id: job.id,
-      creationDate: job.creation_date,
-      description: job.description,
-      service: job.service,
-      status: job.status,
-      title: job.title
-    };
-  }
 }

app/static/js/nopaque/RessourceLists/JobResultList.js

@@ -9,7 +9,36 @@ class JobResultList extends RessourceList {
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, 'description', 'filename']
+    ressourceMapper: jobResult => {
+      let description;
+
+      if (jobResult.filename.endsWith('.pdf.zip')) {
+        description = 'PDF files with text layer';
+      } else if (jobResult.filename.endsWith('.txt.zip')) {
+        description = 'Raw text files';
+      } else if (jobResult.filename.endsWith('.vrt.zip')) {
+        description = 'VRT compliant files including the NLP data';
+      } else if (jobResult.filename.endsWith('.xml.zip')) {
+        description = 'TEI compliant files';
+      } else if (jobResult.filename.endsWith('.poco.zip')) {
+        description = 'HOCR and image files for post correction (PoCo)';
+      } else {
+        description = 'All result files created during this job';
+      }
+      return {
+        id: jobResult.id,
+        creationDate: jobResult.creation_date,
+        description: description,
+        filename: jobResult.filename
+      };
+    },
+    sortValueName: 'creationDate',
+    valueNames: [
+      {data: ['id']},
+      {data: ['creationDate']},
+      'description',
+      'filename'
+    ]
   };
 
 
@@ -63,28 +92,4 @@ class JobResultList extends RessourceList {
       }
     }
   }
-
-  preprocessRessource(jobResult) {
-    let description;
-
-    if (jobResult.filename.endsWith('.pdf.zip')) {
-      description = 'PDF files with text layer';
-    } else if (jobResult.filename.endsWith('.txt.zip')) {
-      description = 'Raw text files';
-    } else if (jobResult.filename.endsWith('.vrt.zip')) {
-      description = 'VRT compliant files including the NLP data';
-    } else if (jobResult.filename.endsWith('.xml.zip')) {
-      description = 'TEI compliant files';
-    } else if (jobResult.filename.endsWith('.poco.zip')) {
-      description = 'HOCR and image files for post correction (PoCo)';
-    } else {
-      description = 'All result files created during this job';
-    }
-    return {
-      id: jobResult.id,
-      creationDate: jobResult.creation_date,
-      description: description,
-      filename: jobResult.filename
-    };
-  }
 }

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

@@ -10,7 +10,25 @@ class QueryResultList extends RessourceList {
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title']
+    ressourceMapper: queryResult => {
+      return {
+        id: queryResult.id,
+        corpusTitle: queryResult.corpus_title,
+        creationDate: queryResult.creation_date,
+        description: queryResult.description,
+        query: queryResult.query,
+        title: queryResult.title
+      };
+    },
+    sortValueName: 'creationDate',
+    valueNames: [
+      {data: ['id']},
+      {data: ['creationDate']},
+      'corpusTitle',
+      'description',
+      'query',
+      'title'
+    ]
   };
 
 
@@ -108,15 +126,4 @@ class QueryResultList extends RessourceList {
       }
     }
   }
-
-  preprocessRessource(queryResult) {
-    return {
-      id: queryResult.id,
-      corpus_title: queryResult.corpus_title,
-      creationDate: queryResult.creation_date,
-      description: queryResult.description,
-      query: queryResult.query,
-      title: queryResult.title
-    };
-  }
 }

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

@@ -35,7 +35,7 @@ class RessourceList {
       }
     }
   }
-  static options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]};
+  static options = {page: 5, pagination: {innerWindow: 4, outerWindow: 1}};
 
 
   constructor(listElement, options = {}) {
@@ -48,6 +48,18 @@ class RessourceList {
         break;
       }
     }
+    options = {
+      ...{pagination: {item: `<li><a class="page" href="#${listElement.id}"></a></li>`}},
+      ...options
+    }
+    if ('ressourceMapper' in options) {
+      this.ressourceMapper = options.ressourceMapper;
+      delete options.ressourceMapper;
+    }
+    if ('sortValueName' in options) {
+      this.sortValueName = options.sortValueName;
+      delete options.sortValueName;
+    }
     this.listjs = new List(listElement, {...RessourceList.options, ...options});
     this.listjs.list.innerHTML = `
       <tr>
@@ -107,11 +119,16 @@ class RessourceList {
 
   preprocessRessource() {throw 'Not implemented'}
 
-  add(values) {
-    let ressources = Array.isArray(values) ? values : [values];
-    ressources = ressources.map(ressource => this.preprocessRessource(ressource));
-    this.listjs.add(ressources, () => {
-      this.listjs.sort('id', {order: 'desc'});
+  add(ressources) {
+    let values = Array.isArray(ressources) ? ressources : [ressources];
+
+    if ('ressourceMapper' in this) {
+      values = values.map(value => this.ressourceMapper(value));
+    }
+    this.listjs.add(values, () => {
+      if ('sortValueName' in this) {
+        this.listjs.sort(this.sortValueName, {order: 'desc'});
+      }
     });
   }
 

app/static/js/nopaque/RessourceLists/UserList.js

@@ -2,7 +2,7 @@ class UserList extends RessourceList {
   static options = {
     item: `
       <tr>
-        <td><span class="id_"></span></td>
+        <td><span class="idDuplicate"></span></td>
         <td><span class="username"></span></td>
         <td><span class="email"></span></td>
         <td><span class="last_seen"></span></td>
@@ -14,7 +14,26 @@ class UserList extends RessourceList {
         </td>
       </tr>
     `.trim(),
-    valueNames: [{data: ['id']}, 'id_', 'username', 'email', 'last_seen', 'role']
+    ressourceMapper: user => {
+      return {
+        id: user.id,
+        idDuplicate: user.id,
+        username: user.username,
+        email: user.email,
+        last_seen: new Date(user.last_seen).toLocaleString("en-US"),
+        role: user.role.name
+      };
+    },
+    sortValueName: 'memberSince',
+    valueNames: [
+      {data: ['id']},
+      {data: ['memberSince']},
+      'email',
+      'idDuplicate',
+      'last_seen',
+      'role',
+      'username'
+    ]
   };
 
 
@@ -78,15 +97,4 @@ class UserList extends RessourceList {
         break;
     }
   }
-
-  preprocessRessource(user) {
-    return {
-      id: user.id,
-      id_: user.id,
-      username: user.username,
-      email: user.email,
-      last_seen: new Date(user.last_seen).toLocaleString("en-US"),
-      role: user.role.name
-    };
-  }
 }