mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 04:12:45 +00:00 
			
		
		
		
	Implement UserList
This commit is contained in:
		
							
								
								
									
										71
									
								
								web/app/static/js/nopaque/lists/Userlist.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										71
									
								
								web/app/static/js/nopaque/lists/Userlist.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,71 @@
 | 
			
		||||
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']
 | 
			
		||||
};
 | 
			
		||||
		Reference in New Issue
	
	Block a user