Mercurial > gemma
annotate client/src/views/Users.vue @ 375:112527683ee9
Backed out changeset 2c58906649be
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 Aug 2018 11:21:58 +0200 |
parents | 7e7e978d1cac |
children | e42f42eb9353 |
rev | line source |
---|---|
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
2 <div class="main d-flex"> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
3 <Sidebar v-bind:isOverlay="false"></Sidebar> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <div class="d-flex flex-row content"> |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
5 <div class="d-flex flex-column"> |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
6 <div> |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
7 <h1>User Management</h1> |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
8 </div> |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
300
diff
changeset
|
9 <div class="userlist shadow"> |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
300
diff
changeset
|
10 <div class="card" style="width: 85rem;"> |
293
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
11 <div class="card-header text-white bg-info mb-3"> |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
12 users |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
13 </div> |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
14 <div class="card-body"> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
15 <table class="table table-hover"> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
16 <thead> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
17 <tr> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
18 <th scope="col">Username</th> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
19 <th scope="col">Country</th> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
20 <th scope="col">Email</th> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
21 <th scope="col">Role</th> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
22 </tr> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
23 </thead> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
24 <tbody> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
25 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
26 <td>{{ user.user }}</td> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
27 <td>{{ user.country }}</td> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
28 <td>{{ user.email}}</td> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
29 <td>{{ user.role }}</td> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
30 </tr> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
31 </tbody> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
32 </table> |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
33 </div> |
293
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
34 </div> |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
35 </div> |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
36 <Userdetail v-bind:currentUser="currentUser"></Userdetail> |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
37 </div> |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 </div> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 </div> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 </template> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
42 <style lang="scss"> |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
43 @import "../assets/application.scss"; |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
44 .main { |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
45 height: 100vh; |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 } |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
47 |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
48 .content { |
293
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
49 margin-top: $large-offset; |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
50 margin-left: auto; |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
51 margin-right: auto; |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
52 } |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
53 |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
54 .userlist { |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
55 margin-top: $large-offset; |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
56 } |
293
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
57 .shadow { |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
58 box-shadow: $basic-shadow-light !important; |
85b653d4380c
style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents:
290
diff
changeset
|
59 } |
294
c57b0b230452
style: Remove bootstrap standard lines
Thomas Junk <thomas.junk@intevation.de>
parents:
293
diff
changeset
|
60 |
c57b0b230452
style: Remove bootstrap standard lines
Thomas Junk <thomas.junk@intevation.de>
parents:
293
diff
changeset
|
61 .table th, |
c57b0b230452
style: Remove bootstrap standard lines
Thomas Junk <thomas.junk@intevation.de>
parents:
293
diff
changeset
|
62 td { |
c57b0b230452
style: Remove bootstrap standard lines
Thomas Junk <thomas.junk@intevation.de>
parents:
293
diff
changeset
|
63 border-top: 0px !important; |
c57b0b230452
style: Remove bootstrap standard lines
Thomas Junk <thomas.junk@intevation.de>
parents:
293
diff
changeset
|
64 } |
300
af29878be602
feat: User table selectable
Thomas Junk <thomas.junk@intevation.de>
parents:
299
diff
changeset
|
65 |
af29878be602
feat: User table selectable
Thomas Junk <thomas.junk@intevation.de>
parents:
299
diff
changeset
|
66 .table td { |
af29878be602
feat: User table selectable
Thomas Junk <thomas.junk@intevation.de>
parents:
299
diff
changeset
|
67 cursor: pointer; |
af29878be602
feat: User table selectable
Thomas Junk <thomas.junk@intevation.de>
parents:
299
diff
changeset
|
68 } |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 </style> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
70 |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
71 <script> |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
72 import Sidebar from "../components/Sidebar"; |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
300
diff
changeset
|
73 import Userdetail from "../components/Userdetail"; |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
74 import store from "../store"; |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
75 import { mapGetters } from "vuex"; |
295
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
76 import app from "../main"; |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
77 |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 export default { |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
79 name: "userview", |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
80 data() { |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
81 return { |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
82 currentUser: null |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
83 }; |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
84 }, |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
85 components: { |
356
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
300
diff
changeset
|
86 Sidebar, |
dc8052b60485
feat: User detail card added
Thomas Junk <thomas.junk@intevation.de>
parents:
300
diff
changeset
|
87 Userdetail |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
88 }, |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
89 computed: { |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
90 ...mapGetters("usermanagement", ["users"]) |
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
91 }, |
375
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
92 methods: { |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
93 selectUser(name) { |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
94 const user = this.$store.getters["usermanagement/getUserByName"](name); |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
95 this.currentUser = user; |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
96 } |
112527683ee9
Backed out changeset 2c58906649be
Thomas Junk <thomas.junk@intevation.de>
parents:
373
diff
changeset
|
97 }, |
289
aee175e3f82c
feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents:
278
diff
changeset
|
98 beforeRouteEnter(to, from, next) { |
295
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
99 store |
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
100 .dispatch("usermanagement/loadUsers") |
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
101 .then(next) |
299
6b4df87a7ccc
refactor: console.log removed. Backend error while fetching users.
Thomas Junk <thomas.junk@intevation.de>
parents:
295
diff
changeset
|
102 .catch(error => { |
6b4df87a7ccc
refactor: console.log removed. Backend error while fetching users.
Thomas Junk <thomas.junk@intevation.de>
parents:
295
diff
changeset
|
103 const { status, data } = error.response; |
295
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
104 app.$toast.error({ |
373
7e7e978d1cac
Backed out changeset 1a2ef18e464d
Thomas Junk <thomas.junk@intevation.de>
parents:
366
diff
changeset
|
105 title: "Backend Error", |
299
6b4df87a7ccc
refactor: console.log removed. Backend error while fetching users.
Thomas Junk <thomas.junk@intevation.de>
parents:
295
diff
changeset
|
106 message: `${status}: ${data}` |
295
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
107 }); |
22deb76dff2c
feat: Added vue2-toastr
Thomas Junk <thomas.junk@intevation.de>
parents:
294
diff
changeset
|
108 }); |
278
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
109 } |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
110 }; |
9c1dfadb53aa
feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
111 </script> |