Update admin dashboard, add mass account deletes

resources/views/admin/home.blade.php

@@ -100,12 +100,30 @@
 					<b-spinner class="mb-4"></b-spinner>
 				</div>
 				<div v-else class="list-group list-group-scroll">
-                    <a
+					<div
 						v-for="(item, index) in accounts"
-                        class="list-group-item"
-                        :href="`/i/admin/users/show/${item.user_id}`">
+						class="list-group-item">
 
 						<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';"/>
+									<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>
+								</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>
@@ -115,6 +133,8 @@
 										<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>
@@ -122,11 +142,20 @@
 								<div v-text="timeAgo(item.created_at)" class="small text-light"></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>
 				</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">
@@ -248,7 +277,8 @@
 			},
 			accounts: [],
 			posts: [],
-            instances: []
+			instances: [],
+			accountsSelected: []
 		},
 
 		mounted() {
@@ -298,7 +328,6 @@
 			loadMorePosts() {
 				axios.get(this.pagination.posts)
 				.then(res => {
-                    res.data.data.map(a => console.log(a.id));
 					this.posts.push(...res.data.data);
 					this.pagination.posts = res.data.next_page_url;
 				})
@@ -326,10 +355,81 @@
 			},
 
 			renderNote(val) {
+				if(!val) {
+					return '';
+				}
 				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)
 			}
 		}
 	});