Mercurial > gemma

annotate client/src/views/Users.vue @ 293:85b653d4380c usermanagement

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
style: Table is now rendered as a card.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 31 Jul 2018 13:36:40 +0200
parents dfd5a549ae95
children c57b0b230452
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
9 <div class="userlist">
293
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
10 <div class="card shadow" style="width: 85rem;">
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">
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
15 <table class="table">
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
16 <thead>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
17 <tr>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
18 <th scope="col">Username</th>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
19 <th scope="col">Country</th>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
20 <th scope="col">Email</th>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
21 <th scope="col">Role</th>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
22 </tr>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
23 </thead>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
24 <tbody>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
25 <tr v-for="user in users" :key="user.user">
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
26 <td>{{ user.user }}</td>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
27 <td>{{ user.country }}</td>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
28 <td>{{ user.email}}</td>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
29 <td>{{ user.role }}</td>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
30 </tr>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
31 </tbody>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
32 </table>
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
33 </div>
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>
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
36 </div>
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 </div>
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 </template>
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 <style lang="scss">
289
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
42 @import "../assets/application.scss";
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 .main {
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 height: 100vh;
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 }
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 .content {
293
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
48 margin-top: $large-offset;
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
49 margin-left: auto;
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
50 margin-right: auto;
289
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
51 }
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 .userlist {
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
54 margin-top: $large-offset;
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 }
293
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
56 .shadow {
85b653d4380c style: Table is now rendered as a card.
Thomas Junk <thomas.junk@intevation.de>
parents: 290
diff changeset
57 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
58 }
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 </style>
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 <script>
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 import Sidebar from "../components/Sidebar";
289
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
63 import store from "../store";
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
64 import { mapGetters } from "vuex";
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
65
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 export default {
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 name: "userview",
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 components: {
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 Sidebar
289
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
70 },
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
71 computed: {
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
72 ...mapGetters("usermanagement", ["users"])
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
73 },
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
74 beforeRouteEnter(to, from, next) {
aee175e3f82c feat: Listing of users on management page
Thomas Junk <thomas.junk@intevation.de>
parents: 278
diff changeset
75 store.dispatch("usermanagement/loadUsers").then(next);
278
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 }
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 };
9c1dfadb53aa feat: usermanagement - route established and secured
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 </script>