Implement UserList

web/app/static/js/nopaque/lists/Userlist.js

+class UserList extends RessourceList {
+  constructor(listElement, options = {}) {
+    super(listElement, {...UserList.options, ...options});
+    users = undefined;
+  }
+
+  init(users) {
+    this.users = users;
+    super.init(users);
+  }
+
+  onclick(event) {
+    let ressourceElement = event.target.closest('tr');
+    if (ressourceElement === null) {return;}
+    let userId = ressourceElement.dataset.id;
+    let actionButtonElement = event.target.closest('.action-button');
+    let action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
+    switch (action) {
+      case 'delete':
+        let deleteModalHTML = `<div class="modal">
+                                 <div class="modal-content">
+                                   <h4>Confirm user deletion</h4>
+                                   <p>Do you really want to delete the corpus <b>${this.users[userId].username}</b>? All files will be permanently deleted!</p>
+                                 </div>
+                                 <div class="modal-footer">
+                                   <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
+                                   <a class="btn modal-close red waves-effect waves-light" href="/admin/users/${userId}/delete"><i class="material-icons left">delete</i>Delete</a>
+                                 </div>
+                               </div>`;
+        let deleteModalParentElement = document.querySelector('main');
+        deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
+        let deleteModalElement = deleteModalParentElement.lastChild;
+        let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
+        deleteModal.open();
+        break;
+      case 'edit':
+        window.location.href = `/admin/users/${userId}/edit`;
+        break;
+      case 'view':
+        if (userId !== '-1') {window.location.href = `/admin/users/${userId}`;}
+        break;
+      default:
+        console.error(`Unknown action: ${action}`);
+        break;
+    }
+  }
+
+  preprocessRessource(user) {
+    return {id: user.id,
+            id_: user.id,
+            username: user.username,
+            email: user.email,
+            last_seen: new Date(user.last_seen * 1000).toLocaleString("en-US"),
+            role: user.role.name};
+  }
+}
+UserList.options = {
+  item: `<tr>
+           <td><span class="id_"></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 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="edit" data-position="top" data-tooltip="Edit"><i class="material-icons">edit</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>
+           </td>
+         </tr>`,
+  valueNames: [{data: ['id']}, 'id_', 'username', 'email', 'last_seen', 'role']
+};