mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 12:22:47 +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