UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-12-22 21:13:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update admin dashboard, add mass account deletes

Browse source
This commit is contained in:
Daniel Supernault 2023-05-21 06:44:15 -06:00
parent 12ea6f1950
commit b8426ccea7
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 328 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

556
resources/views/admin/home.blade.php
View file

@ -97,269 +97,369 @@
</div> </div>
</div> </div>
<div v-if="!loaded.accounts" class="card-body text-center"> <div v-if="!loaded.accounts" class="card-body text-center">
<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">
<img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/> <div class="custom-control custom-checkbox account-select-check">
<div v-if="item.status && item.status == 'deleted'"> <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)">
<span v-text="item.username" class="font-weight-bold text-danger">Loading...</span> <label class="custom-control-label" :for="'ac:' + item.id"></label>
<span class="ml-2 badge badge-danger">Deleted</span> </div>
</div> <template v-if="item.hasOwnProperty('user_id')">
<div v-else> <a :href="`/i/admin/users/show/${item.user_id}`" class="d-flex flex-row align-items-center">
<div v-text="item.username" class="font-weight-bold">Loading...</div> <img :src="item.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
<div v-if="item.note_text" v-text="renderNote(item.note_text)" class="note">Loading...</div> <div v-if="item.status && item.status == 'deleted'">
</div> <span v-text="item.username" class="font-weight-bold text-danger">Loading...</span>
</div> <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>
</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 class="d-flex" style="font-size: 13px;"> <div class="d-flex" style="font-size: 13px;">
<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>
<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 class="col-md-4">
<div class="card bg-default">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
<h5 class="h3 text-white mb-0">Posts</h5>
</div>
</div>
</div>
<div v-if="!loaded.posts" class="card-body text-center">
<b-spinner class="mb-4"></b-spinner>
</div>
<div v-else class="list-group list-group-scroll">
<a
v-for="(item, index) in posts"
class="list-group-item"
:href="`/i/web/post/${item.id}`">
<div v-if="item.account" class="d-flex align-items-center mr-1">
<img :src="item.account.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
<div>
<div v-text="item.account.acct" class="font-weight-bold">Loading...</div>
<div v-if="item.content" v-text="renderNote(item.content_text)" class="note">Loading...</div>
<div v-else class="badge badge-primary" v-text="item.pf_type" style="font-size:9px"></div>
</div>
</div>
<div v-else>
<div class="text-muted font-weight-bold">Deleted or unavailable post</div>
</div>
<div>
<div v-if="item.account" class="d-flex" style="font-size: 13px;">
<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
</div>
</div>
</a>
<a v-if="pagination.posts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMorePosts()">Load more</a>
</div>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="card bg-default">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
<h5 class="h3 text-white mb-0">Posts</h5>
</div>
</div>
</div>
<div v-if="!loaded.posts" class="card-body text-center">
<b-spinner class="mb-4"></b-spinner>
</div>
<div v-else class="list-group list-group-scroll">
<a
v-for="(item, index) in posts"
class="list-group-item"
:href="`/i/web/post/${item.id}`">
<div v-if="item.account" class="d-flex align-items-center mr-1">
<img :src="item.account.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';"/>
<div>
<div v-text="item.account.acct" class="font-weight-bold">Loading...</div>
<div v-if="item.content" v-text="renderNote(item.content_text)" class="note">Loading...</div>
<div v-else class="badge badge-primary" v-text="item.pf_type" style="font-size:9px"></div>
</div>
</div>
<div v-else>
<div class="text-muted font-weight-bold">Deleted or unavailable post</div>
</div>
<div>
<div v-if="item.account" class="d-flex" style="font-size: 13px;">
<div v-text="timeAgo(item.created_at)" class="small text-light"></div>
</div>
</div>
</a>
<a v-if="pagination.posts" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMorePosts()">Load more</a>
</div>
</div>
</div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card bg-default"> <div class="card bg-default">
<div class="card-header bg-transparent"> <div class="card-header bg-transparent">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col"> <div class="col">
<h6 class="text-light text-uppercase ls-1 mb-1">New</h6> <h6 class="text-light text-uppercase ls-1 mb-1">New</h6>
<h5 class="h3 text-white mb-0">Instances</h5> <h5 class="h3 text-white mb-0">Instances</h5>
</div> </div>
</div> </div>
</div> </div>
<div v-if="!loaded.instances" class="card-body text-center"> <div v-if="!loaded.instances" class="card-body text-center">
<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 <a
v-for="(item, index) in instances" v-for="(item, index) in instances"
class="list-group-item" class="list-group-item"
:href="`/i/admin/instances/show/${item.id}`"> :href="`/i/admin/instances/show/${item.id}`">
<div v-text="item.domain" class="font-weight-bold">Loading...</div> <div v-text="item.domain" class="font-weight-bold">Loading...</div>
<div> <div>
<div class="d-flex" style="font-size: 13px;"> <div class="d-flex" style="font-size: 13px;">
<div v-if="item.software" class="badge badge-secondary mr-2" v-text="item.software"></div> <div v-if="item.software" class="badge badge-secondary mr-2" v-text="item.software"></div>
<div v-if="item.user_count" class="badge badge-primary mr-2"> <div v-if="item.user_count" class="badge badge-primary mr-2">
<span class="mr-1"><i class="far fa-user"></i></span> <span class="mr-1"><i class="far fa-user"></i></span>
<span v-text="item.user_count"></span> <span v-text="item.user_count"></span>
</div> </div>
<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> </a>
<a v-if="pagination.instances" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreInstances()">Load more</a> <a v-if="pagination.instances" class="list-group-item font-weight-bold justify-content-center" href="#" @click.prevent="loadMoreInstances()">Load more</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@endsection @endsection
@push('scripts') @push('scripts')
<script type="text/javascript"> <script type="text/javascript">
let app = new Vue({ let app = new Vue({
el: '#panel', el: '#panel',
data: { data: {
stats: { stats: {
"contact": 0, "contact": 0,
"contact_monthly": 0, "contact_monthly": 0,
"reports": 0, "reports": 0,
"reports_monthly": 0, "reports_monthly": 0,
"failedjobs": 0, "failedjobs": 0,
"statuses": 0, "statuses": 0,
"statuses_monthly": 0, "statuses_monthly": 0,
"profiles": 0, "profiles": 0,
"users": 0, "users": 0,
"users_monthly": 0, "users_monthly": 0,
"instances": 0, "instances": 0,
"media": 0, "media": 0,
"storage": 0, "storage": 0,
"posts_this_week": [], "posts_this_week": [],
"posts_last_week": [] "posts_last_week": []
}, },
loaded: { loaded: {
stats: false, stats: false,
accounts: false, accounts: false,
posts: false, posts: false,
instances: false instances: false
}, },
pagination: { pagination: {
accounts: false, accounts: false,
posts: false, posts: false,
instances: false instances: false
}, },
accounts: [], accounts: [],
posts: [], posts: [],
instances: [] instances: [],
}, accountsSelected: []
},
mounted() { mounted() {
this.fetchStats(); this.fetchStats();
}, },
methods: { methods: {
fetchStats() { fetchStats() {
axios.get('/i/admin/api/stats') axios.get('/i/admin/api/stats')
.then(res => { .then(res => {
this.stats = res.data; this.stats = res.data;
this.loaded.stats = true; this.loaded.stats = true;
this.fetchAccounts(); this.fetchAccounts();
}) })
}, },
fetchAccounts() { fetchAccounts() {
axios.get('/i/admin/api/accounts') axios.get('/i/admin/api/accounts')
.then(res => { .then(res => {
this.accounts = res.data.data; this.accounts = res.data.data;
this.loaded.accounts = true; this.loaded.accounts = true;
this.pagination.accounts = res.data.next_page_url; this.pagination.accounts = res.data.next_page_url;
this.fetchPosts(); this.fetchPosts();
}) })
}, },
loadMoreAccounts() { loadMoreAccounts() {
axios.get(this.pagination.accounts) axios.get(this.pagination.accounts)
.then(res => { .then(res => {
this.accounts.push(...res.data.data); this.accounts.push(...res.data.data);
this.pagination.accounts = res.data.next_page_url; this.pagination.accounts = res.data.next_page_url;
}) })
}, },
fetchPosts() { fetchPosts() {
axios.get('/i/admin/api/posts') axios.get('/i/admin/api/posts')
.then(res => { .then(res => {
this.posts = res.data.data; this.posts = res.data.data;
this.loaded.posts = true; this.loaded.posts = true;
this.pagination.posts = res.data.next_page_url; this.pagination.posts = res.data.next_page_url;
this.fetchInstances(); this.fetchInstances();
}) })
}, },
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; })
}) },
},
fetchInstances() { fetchInstances() {
axios.get('/i/admin/api/instances') axios.get('/i/admin/api/instances')
.then(res => { .then(res => {
this.instances = res.data.data; this.instances = res.data.data;
this.loaded.instances = true; this.loaded.instances = true;
this.pagination.instances = res.data.next_page_url; this.pagination.instances = res.data.next_page_url;
}) })
}, },
loadMoreInstances() { loadMoreInstances() {
axios.get(this.pagination.instances) axios.get(this.pagination.instances)
.then(res => { .then(res => {
this.instances.push(...res.data.data); this.instances.push(...res.data.data);
this.pagination.instances = res.data.next_page_url; this.pagination.instances = res.data.next_page_url;
}) })
}, },
timeAgo(ts) { timeAgo(ts) {
return App.util.format.timeAgo(ts); return App.util.format.timeAgo(ts);
}, },
renderNote(val) { renderNote(val) {
if(val.length > 60) { if(!val) {
return val.slice(0, 60) + ' ...'; return '';
} }
return val; if(val.length > 60) {
} return val.slice(0, 60) + ' ...';
} }
}); 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)
}
}
});
</script> </script>
@endpush @endpush
@push('styles') @push('styles')
<style type="text/css"> <style type="text/css">
.list-group-scroll { .list-group-scroll {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
} }
.list-group-scroll .list-group-item { .list-group-scroll .list-group-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.list-group-scroll .avatar { .list-group-scroll .avatar {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 30px; border-radius: 30px;
margin-right: 1rem; margin-right: 1rem;
} }
.list-group-scroll .note { .list-group-scroll .note {
color: #bbb; color: #bbb;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
} }
</style> </style>
@endpush @endpush