Differential D1954 Diff 6265 src/resources/vue/User/List.vue

Changeset View

Standalone View

src/resources/vue/User/List.vue

	<template>			<template>
	<div class="container">			<div class="container">
	<div class="card" id="user-list">			<div class="card" id="user-list">
	<div class="card-body">			<div class="card-body">
	<div class="card-title">			<div class="card-title">
	User Accounts			User Accounts
	<router-link class="btn btn-primary float-right create-user" :to="{ path: 'user/new' }" tag="button">			<router-link class="btn btn-primary float-right create-user" :to="{ path: 'user/new' }" tag="button">
	<svg-icon icon="user"></svg-icon> Create user			<svg-icon icon="user"></svg-icon> Create user
	</router-link>			</router-link>
	</div>			</div>
	<div class="card-text">			<div class="card-text">
	<table class="table table-sm table-hover">			<table class="table table-sm table-hover">
	<thead class="thead-light">			<thead class="thead-light">
	<tr>			<tr>
	<th scope="col">Primary Email</th>			<th scope="col">Primary Email</th>
	<th scope="col"></th>
	</tr>			</tr>
	</thead>			</thead>
	<tbody>			<tbody>
	<tr v-for="user in users" :id="'user' + user.id" :key="user.id" @click="$root.clickRecord">			<tr v-for="user in users" :id="'user' + user.id" :key="user.id" @click="$root.clickRecord">
	<td>			<td>
	<svg-icon icon="user" :class="$root.userStatusClass(user)" :title="$root.userStatusText(user)"></svg-icon>			<svg-icon icon="user" :class="$root.userStatusClass(user)" :title="$root.userStatusText(user)"></svg-icon>
	<router-link :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link>			<router-link :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link>
	</td>			</td>
	<td class="buttons">
	<button v-if="$root.isController(user.wallet_id)"
	title="Delete"
	class="btn btn-link text-danger button-delete p-0"
	@click="deleteUser(user.id)"
	>
	<svg-icon icon="trash-alt"></svg-icon><span class="sr-only">Delete</span>
	</button>
	</td>
	</tr>			</tr>
	</tbody>			</tbody>
	<tfoot class="table-fake-body">			<tfoot class="table-fake-body">
	<tr>			<tr>
	<td colspan="2">There are no users in this account.</td>			<td>There are no users in this account.</td>
				machniakUnsubmitted Done Inline Actions Remove 'colspan' here. machniak: Remove 'colspan' here.
	</tr>			</tr>
	</tfoot>			</tfoot>
	</table>			</table>
	</div>			</div>
	</div>			</div>
	</div>			</div>

	<div id="delete-warning" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title"></h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	<p>Do you really want to delete this user permanently?
	This will delete all account data and withdraw the permission to access the email account.
	Please note that this action cannot be undone.</p>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
	<button type="button" class="btn btn-danger modal-action" @click="deleteUser()">
	<svg-icon icon="trash-alt"></svg-icon> Delete
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>			</div>
	</template>			</template>

	<script>			<script>
	export default {			export default {
	data() {			data() {
	return {			return {
	users: [],			users: [],
	current_user: null			current_user: null
	}			}
	},			},
	created() {			created() {
	this.$root.startLoading()			this.$root.startLoading()

	axios.get('/api/v4/users')			axios.get('/api/v4/users')
	.then(response => {			.then(response => {
	this.$root.stopLoading()			this.$root.stopLoading()
	this.users = response.data			this.users = response.data
	})			})
	.catch(this.$root.errorHandler)			.catch(this.$root.errorHandler)
	},
	methods: {
	deleteUser(id) {
	let dialog = $('#delete-warning').modal('hide')

	// Delete the user from the confirm dialog
	if (!id && this.current_user) {
	id = this.current_user.id
	axios.delete('/api/v4/users/' + id)
	.then(response => {
	if (response.data.status == 'success') {
	this.$toast.success(response.data.message)
	$('#user' + id).remove()
	}
	})

	return
	}

	// Deleting self, redirect to /profile/delete page
	if (id == this.$store.state.authInfo.id) {
	this.$router.push({ name: 'profile-delete' })
	return
	}

	// Display the warning
	if (this.current_user = this.getUser(id)) {
	dialog.find('.modal-title').text('Delete ' + this.current_user.email)
	dialog.on('shown.bs.modal', () => {
	dialog.find('button.modal-cancel').focus()
	}).modal()
	}
	},
	getUser(id) {
	for (let i = 0; i < this.users.length; i++) {
	if (this.users[i].id == id) {
	return this.users[i]
	}
	}
	}
	}			}
	}			}
	</script>			</script>