Mercurial > gemma

comparison client/src/views/Users.vue @ 379:0a9aaf21f69f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: usermanagement Togglable userdetails card
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 10 Aug 2018 14:49:29 +0200
parents e42f42eb9353
children e7d5383bc358
comparison
equal deleted inserted replaced
376:e42f42eb9353 379:0a9aaf21f69f
1 <template> 1 <template>
2 <div class="main d-flex"> 2 <div class="main d-flex">
3 <Sidebar v-bind:isOverlay="false"></Sidebar> 3 <Sidebar v-bind:isOverlay="false"></Sidebar>
4 <div class="d-flex flex-row content"> 4 <div class="d-flex content flex-column">
5 <div class="d-flex flex-column">
6 <div> 5 <div>
7 <h1>User Management</h1> 6 <h1>User Management</h1>
8 </div> 7 </div>
9 <div class="userlist shadow"> 8 <div class="d-flex flex-row">
10 <div class="card" style="width: 85rem;"> 9 <div class="userlist shadow">
11 <div class="card-header text-white bg-info mb-3"> 10 <div class="card">
12 users 11 <div class="card-header text-white bg-info mb-3">
12 users
13 </div>
14 <div class="card-body">
15 <table class="table table-hover">
16 <thead>
17 <tr>
18 <th scope="col">Username</th>
19 <th scope="col">Country</th>
20 <th scope="col">Email</th>
21 <th scope="col">Role</th>
22 </tr>
23 </thead>
24 <tbody>
25 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)">
26 <td>{{ user.user }}</td>
27 <td>{{ user.country }}</td>
28 <td>{{ user.email}}</td>
29 <td>{{ user.role }}</td>
30 </tr>
31 </tbody>
32 </table>
13 </div> 33 </div>
14 <div class="card-body">
15 <table class="table table-hover">
16 <thead>
17 <tr>
18 <th scope="col">Username</th>
19 <th scope="col">Country</th>
20 <th scope="col">Email</th>
21 <th scope="col">Role</th>
22 </tr>
23 </thead>
24 <tbody>
25 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)">
26 <td>{{ user.user }}</td>
27 <td>{{ user.country }}</td>
28 <td>{{ user.email}}</td>
29 <td>{{ user.role }}</td>
30 </tr>
31 </tbody>
32 </table>
33 </div> 34 </div>
34 </div> 35 </div>
35 </div> 36 <Userdetail v-if="isUserDetailsVisible"></Userdetail>
36 <Userdetail></Userdetail>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </template> 40 </template>
41 41
51 margin-right: auto; 51 margin-right: auto;
52 } 52 }
53 53
54 .userlist { 54 .userlist {
55 margin-top: $large-offset; 55 margin-top: $large-offset;
56 width: 50vw;
57 margin-right: $large-offset;
56 } 58 }
57 .shadow { 59 .shadow {
58 box-shadow: $basic-shadow-light !important; 60 box-shadow: $basic-shadow-light !important;
59 } 61 }
60 62
83 components: { 85 components: {
84 Sidebar, 86 Sidebar,
85 Userdetail 87 Userdetail
86 }, 88 },
87 computed: { 89 computed: {
88 ...mapGetters("usermanagement", ["users"]) 90 ...mapGetters("usermanagement", ["users", "isUserDetailsVisible"])
89 }, 91 },
90 methods: { 92 methods: {
91 selectUser(name) { 93 selectUser(name) {
92 const user = this.$store.getters["usermanagement/getUserByName"](name); 94 const user = this.$store.getters["usermanagement/getUserByName"](name);
93 this.$store.commit("usermanagement/setCurrentUser", user); 95 this.$store.commit("usermanagement/setCurrentUser", user);