Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Admin/User.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="card" id="user-info"> | <div class="card" id="user-info"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title">{{ user.email }}</div> | <h1 class="card-title">{{ user.email }}</h1> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form class="read-only"> | <form class="read-only"> | ||||
<div v-if="user.wallet.user_id != user.id" class="form-group row"> | <div v-if="user.wallet.user_id != user.id" class="form-group row"> | ||||
<label for="manager" class="col-sm-4 col-form-label">Managed by</label> | <label for="manager" class="col-sm-4 col-form-label">Managed by</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="manager"> | <span class="form-control-plaintext" id="manager"> | ||||
<router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link> | <router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link> | ||||
</span> | </span> | ||||
▲ Show 20 Lines • Show All 55 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="country" class="col-sm-4 col-form-label">Country</label> | <label for="country" class="col-sm-4 col-form-label">Country</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="country">{{ user.country }}</span> | <span class="form-control-plaintext" id="country">{{ user.country }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</form> | |||||
<div class="mt-2"> | |||||
<button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">Suspend</button> | <button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">Suspend</button> | ||||
<button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">Unsuspend</button> | <button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">Unsuspend</button> | ||||
</form> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<ul class="nav nav-tabs mt-3" role="tablist"> | <ul class="nav nav-tabs mt-3" role="tablist"> | ||||
<li class="nav-item"> | <li class="nav-item"> | ||||
<a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true"> | <a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true"> | ||||
Finances | Finances | ||||
</a> | </a> | ||||
Show All 17 Lines | <div class="container"> | ||||
<a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false"> | <a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false"> | ||||
Users ({{ users.length }}) | Users ({{ users.length }}) | ||||
</a> | </a> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div class="tab-content"> | <div class="tab-content"> | ||||
<div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances"> | <div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance) }}</strong></span></div> | <h2 class="card-title">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance) }}</strong></span></h2> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form class="read-only"> | <form class="read-only"> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label class="col-sm-4 col-form-label">Discount</label> | <label class="col-sm-4 col-form-label">Discount</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="discount"> | <span class="form-control-plaintext" id="discount"> | ||||
<span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span> | <span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span> | ||||
<button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">Edit</button> | <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">Edit</button> | ||||
Show All 11 Lines | <div class="container"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row" v-if="wallet.providerLink"> | <div class="form-group row" v-if="wallet.providerLink"> | ||||
<label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} ID</label> | <label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} ID</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" v-html="wallet.providerLink"></span> | <span class="form-control-plaintext" v-html="wallet.providerLink"></span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</form> | |||||
<div class="mt-2"> | |||||
<button id="button-award" class="btn btn-success" type="button" @click="awardDialog">Add bonus</button> | <button id="button-award" class="btn btn-success" type="button" @click="awardDialog">Add bonus</button> | ||||
<button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">Add penalty</button> | <button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">Add penalty</button> | ||||
</form> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<h2 class="card-title mt-4">Transactions</h2> | |||||
bohlender: shouldn't the title be conditionally rendered as well ? | |||||
Done Inline ActionsThe v-if here is not to not render the table, but to render it when it is ready. So, it will always be there. machniak: The v-if here is not to not render the table, but to render it when it is ready. So, it will… | |||||
<transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases"> | <div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<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">Email address</th> | <th scope="col">Email address</th> | ||||
▲ Show 20 Lines • Show All 181 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import TransactionLog from '../Widgets/TransactionLog' | |||||
export default { | export default { | ||||
beforeRouteUpdate (to, from, next) { | beforeRouteUpdate (to, from, next) { | ||||
// An event called when the route that renders this component has changed, | // An event called when the route that renders this component has changed, | ||||
// but this component is reused in the new route. | // but this component is reused in the new route. | ||||
// Required to handle links from /user/XXX to /user/YYY | // Required to handle links from /user/XXX to /user/YYY | ||||
next() | next() | ||||
this.$parent.routerReload() | this.$parent.routerReload() | ||||
}, | }, | ||||
components: { | |||||
TransactionLog | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
oneoff_amount: '', | oneoff_amount: '', | ||||
oneoff_currency: 'CHF', | oneoff_currency: 'CHF', | ||||
oneoff_description: '', | oneoff_description: '', | ||||
oneoff_negative: false, | oneoff_negative: false, | ||||
discount: 0, | discount: 0, | ||||
discount_description: '', | discount_description: '', | ||||
discounts: [], | discounts: [], | ||||
external_email: '', | external_email: '', | ||||
wallet: {}, | wallet: {}, | ||||
walletReload: false, | |||||
domains: [], | domains: [], | ||||
skus: [], | skus: [], | ||||
users: [], | users: [], | ||||
user: { | user: { | ||||
aliases: [], | aliases: [], | ||||
wallet: {}, | wallet: {}, | ||||
skus: {}, | skus: {}, | ||||
} | } | ||||
▲ Show 20 Lines • Show All 121 Lines • ▼ Show 20 Lines | export default { | ||||
this.dialog = $('#oneoff-dialog').on('shown.bs.modal', event => { | this.dialog = $('#oneoff-dialog').on('shown.bs.modal', event => { | ||||
this.$root.clearFormValidation(event.target) | this.$root.clearFormValidation(event.target) | ||||
$(event.target).find('#oneoff_amount').focus() | $(event.target).find('#oneoff_amount').focus() | ||||
}).modal() | }).modal() | ||||
}, | }, | ||||
penalizeDialog() { | penalizeDialog() { | ||||
this.oneOffDialog(true) | this.oneOffDialog(true) | ||||
}, | }, | ||||
reload() { | |||||
// this is to reload transaction log | |||||
this.walletReload = true | |||||
this.$nextTick(function() { this.walletReload = false }) | |||||
}, | |||||
submitDiscount() { | submitDiscount() { | ||||
$('#discount-dialog').modal('hide') | $('#discount-dialog').modal('hide') | ||||
axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id }) | axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id }) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.wallet = Object.assign({}, this.wallet, response.data) | this.wallet = Object.assign({}, this.wallet, response.data) | ||||
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines | export default { | ||||
axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post) | axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.dialog.modal('hide') | this.dialog.modal('hide') | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance}) | this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance}) | ||||
this.oneoff_amount = '' | this.oneoff_amount = '' | ||||
this.oneoff_description = '' | this.oneoff_description = '' | ||||
this.reload() | |||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
suspendUser() { | suspendUser() { | ||||
axios.post('/api/v4/users/' + this.user.id + '/suspend', {}) | axios.post('/api/v4/users/' + this.user.id + '/suspend', {}) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
Show All 16 Lines |
shouldn't the title be conditionally rendered as well ?