mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-22 21:13:16 +00:00
Update admin dashboard, add mass account deletes
This commit is contained in:
parent
12ea6f1950
commit
b8426ccea7
1 changed files with 328 additions and 228 deletions
|
@ -100,12 +100,17 @@
|
||||||
<b-spinner class="mb-4"></b-spinner>
|
<b-spinner class="mb-4"></b-spinner>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="list-group list-group-scroll">
|
<div v-else class="list-group list-group-scroll">
|
||||||
<a
|
<div
|
||||||
v-for="(item, index) in accounts"
|
v-for="(item, index) in accounts"
|
||||||
class="list-group-item"
|
class="list-group-item">
|
||||||
:href="`/i/admin/users/show/${item.user_id}`">
|
|
||||||
|
|
||||||
<div class="d-flex align-items-center mr-1">
|
<div class="d-flex align-items-center mr-1">
|
||||||
|
<div class="custom-control custom-checkbox account-select-check">
|
||||||
|
<input type="checkbox" class="custom-control-input" :id="'ac:' + item.id" :disabled="item.status && item.status == 'deleted' || item.hasOwnProperty('is_admin') && item.is_admin" @@change="handleAccountSelected($event, item, index)">
|
||||||
|
<label class="custom-control-label" :for="'ac:' + item.id"></label>
|
||||||
|
</div>
|
||||||
|
<template v-if="item.hasOwnProperty('user_id')">
|
||||||
|
<a :href="`/i/admin/users/show/${item.user_id}`" class="d-flex flex-row align-items-center">
|
||||||
<img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
|
<img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
|
||||||
<div v-if="item.status && item.status == 'deleted'">
|
<div v-if="item.status && item.status == 'deleted'">
|
||||||
<span v-text="item.username" class="font-weight-bold text-danger">Loading...</span>
|
<span v-text="item.username" class="font-weight-bold text-danger">Loading...</span>
|
||||||
|
@ -115,6 +120,21 @@
|
||||||
<div v-text="item.username" class="font-weight-bold">Loading...</div>
|
<div v-text="item.username" class="font-weight-bold">Loading...</div>
|
||||||
<div v-if="item.note_text" v-text="renderNote(item.note_text)" class="note">Loading...</div>
|
<div v-if="item.note_text" v-text="renderNote(item.note_text)" class="note">Loading...</div>
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<span class="d-flex flex-row align-items-center">
|
||||||
|
<img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
|
||||||
|
<div v-if="item.status && item.status == 'deleted'">
|
||||||
|
<span v-text="item.username" class="font-weight-bold text-danger">Loading...</span>
|
||||||
|
<span class="ml-2 badge badge-danger">Deleted</span>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div v-text="item.username" class="font-weight-bold">Loading...</div>
|
||||||
|
<div v-if="item.note_text" v-text="renderNote(item.note_text)" class="note">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
@ -122,11 +142,20 @@
|
||||||
<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
|
<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
|
|
||||||
<a v-if="pagination.accounts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreAccounts()">Load more</a>
|
<a v-if="pagination.accounts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreAccounts()">Load more</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<template v-if="loaded.accounts && accountsSelected && accountsSelected.length">
|
||||||
|
<a
|
||||||
|
class="btn btn-danger font-weight-bold btn-block mt-n4 mb-3"
|
||||||
|
href="#"
|
||||||
|
@@click.prevent="handleSelectedDeletes">
|
||||||
|
Delete Selected Accounts
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
|
@ -248,7 +277,8 @@
|
||||||
},
|
},
|
||||||
accounts: [],
|
accounts: [],
|
||||||
posts: [],
|
posts: [],
|
||||||
instances: []
|
instances: [],
|
||||||
|
accountsSelected: []
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -298,7 +328,6 @@
|
||||||
loadMorePosts() {
|
loadMorePosts() {
|
||||||
axios.get(this.pagination.posts)
|
axios.get(this.pagination.posts)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
res.data.data.map(a => console.log(a.id));
|
|
||||||
this.posts.push(...res.data.data);
|
this.posts.push(...res.data.data);
|
||||||
this.pagination.posts = res.data.next_page_url;
|
this.pagination.posts = res.data.next_page_url;
|
||||||
})
|
})
|
||||||
|
@ -326,10 +355,81 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
renderNote(val) {
|
renderNote(val) {
|
||||||
|
if(!val) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
if(val.length > 60) {
|
if(val.length > 60) {
|
||||||
return val.slice(0, 60) + ' ...';
|
return val.slice(0, 60) + ' ...';
|
||||||
}
|
}
|
||||||
return val;
|
return val;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAccountSelected(event, item, idx) {
|
||||||
|
if(event.target.checked) {
|
||||||
|
this.accountsSelected.push(...[item]);
|
||||||
|
} else {
|
||||||
|
this.accountsSelected = this.accountsSelected.filter(a => {
|
||||||
|
return a.id !== item.id;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleSelectedDeletes() {
|
||||||
|
let wrapper = document.createElement('div');
|
||||||
|
let title = document.createElement('div');
|
||||||
|
let list = document.createElement('ul');
|
||||||
|
list.classList.add('list-group')
|
||||||
|
title.innerHTML = '<p class="font-weight-bold text-danger">Are you sure you want to delete the following accounts:</p>';
|
||||||
|
wrapper.appendChild(title);
|
||||||
|
this.accountsSelected.map(a => {
|
||||||
|
let el = document.createElement('li');
|
||||||
|
el.classList.add('list-group-item')
|
||||||
|
el.classList.add('text-left')
|
||||||
|
el.innerHTML = `<div class="media align-items-center">
|
||||||
|
<img src="${a.avatar}" width="40" height="40" class="rounded-circle mr-3" onerror="this.src='/storage/avatars/default.png';this.onerror=null;" />
|
||||||
|
<div class="media-body">
|
||||||
|
<p class="mb-0 username font-weight-bold">${a.username}</p>
|
||||||
|
<div class="note small text-muted">${this.renderNote(a.note_text)}</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
list.appendChild(el)
|
||||||
|
})
|
||||||
|
wrapper.appendChild(list);
|
||||||
|
swal({
|
||||||
|
title: 'Confirm',
|
||||||
|
content: wrapper,
|
||||||
|
icon: 'warning',
|
||||||
|
buttons: {
|
||||||
|
cancel: "Cancel",
|
||||||
|
delete: {
|
||||||
|
text: "Delete",
|
||||||
|
value: "delete",
|
||||||
|
className: "swal-button--danger"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(async (val) => {
|
||||||
|
if (val === 'delete') {
|
||||||
|
swal({
|
||||||
|
title: 'Deleting accounts...',
|
||||||
|
icon: 'success',
|
||||||
|
timer: 3000,
|
||||||
|
});
|
||||||
|
await axios.all(this.accountsSelected.map((acct) => this.deleteAccountById(acct)));
|
||||||
|
this.fetchAccounts();
|
||||||
|
setTimeout(() => {
|
||||||
|
let checkboxes = document.querySelectorAll('input[type=checkbox]')
|
||||||
|
checkboxes.forEach(checkbox => checkbox.checked = false)
|
||||||
|
this.accountsSelected = [];
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteAccountById(account) {
|
||||||
|
await axios.post('/i/admin/users/delete/' + account.user_id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue