class UserList extends RessourceList { static options = { item: ` <tr class="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 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> `.trim(), ressourceMapper: user => { return { 'id': user.id, 'id-1': user.id, 'username': user.username, 'email': user.email, 'last-seen': new Date(user.last_seen).toLocaleString("en-US"), 'member-since': user.member_since, 'role': user.role.name }; }, sortValueName: 'member-since', valueNames: [ {data: ['id']}, {data: ['member-since']}, 'email', 'id-1', 'last-seen', 'role', 'username' ] }; constructor(listElement, options = {}) { super(listElement, {...UserList.options, ...options}); } init(users) { super._init(Object.values(users)); } onclick(event) { let action; let actionButtonElement; let deleteModal; let deleteModalElement; let tmp; let userElement; let userId; userElement = event.target.closest('tr[data-id]'); if (userElement === null) {return;} userId = userElement.dataset.id; actionButtonElement = event.target.closest('.action-button[data-action]'); action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action; switch (action) { case 'delete': tmp = document.createElement('div'); tmp.innerHTML = ` <div class="modal"> <div class="modal-content"> <h4>Confirm user deletion</h4> <p>Do you really want to delete user <b>${userId}</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> `.trim(); deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild); 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': window.location.href = `/admin/users/${userId}`; break; default: break; } } }