1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<style lang="scss" scoped>
.underline { text-decoration: underline; }
</style>
<template>
<section class="section is-fullheight dashboard">
<div class="container">
<div class="columns">
<div class="column is-narrow">
<Sidebar />
</div>
<div class="column">
<h2 class="subtitle">
User details
</h2>
<hr>
<b-field
label="User Id"
horizontal>
<span>{{ user.id }}</span>
</b-field>
<b-field
label="Username"
horizontal>
<span>{{ user.username }}</span>
</b-field>
<b-field
label="Enabled"
horizontal>
<span>{{ user.enabled }}</span>
</b-field>
<b-field
label="Registered"
horizontal>
<span><timeago :since="user.createdAt" /></span>
</b-field>
<b-field
label="Files"
horizontal>
<span>{{ user.files.length }}</span>
</b-field>
<div class="mb2 mt2 text-center">
<b-button
v-if="user.enabled"
type="is-danger"
@click="promptDisableUser">
Disable user
</b-button>
<b-button
v-if="!user.enabled"
type="is-success"
@click="promptEnableUser">
Enable user
</b-button>
</div>
<Grid
v-if="user.files.length"
:files="user.files" />
</div>
</div>
</div>
</section>
</template>
<script>
import { mapState } from 'vuex';
import Sidebar from '~/components/sidebar/Sidebar.vue';
import Grid from '~/components/grid/Grid.vue';
export default {
components: {
Sidebar,
Grid,
},
middleware: ['auth', 'admin', ({ route, store }) => {
try {
store.dispatch('admin/fetchUser', route.params.id);
} catch (e) {
// eslint-disable-next-line no-console
console.error(e);
}
}],
data() {
return {
options: {},
};
},
computed: mapState({
user: (state) => state.admin.user,
}),
methods: {
promptDisableUser() {
this.$buefy.dialog.confirm({
type: 'is-danger',
message: 'Are you sure you want to disable the account of this user?',
onConfirm: () => this.disableUser(),
});
},
promptEnableUser() {
this.$buefy.dialog.confirm({
type: 'is-danger',
message: 'Are you sure you want to enable the account of this user?',
onConfirm: () => this.enableUser(),
});
},
disableUser() {
this.$handler.executeAction('admin/disableUser', this.user.id);
},
enableUser() {
this.$handler.executeAction('admin/enableUser', this.user.id);
},
},
};
</script>
|