Mercurial > gemma

comparison client/src/views/Users.vue @ 542:505656a9947f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: layout refactored Introduced Topbar and Hamburger Menu
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 30 Aug 2018 14:39:24 +0200
parents d7a06b9fffc9
children b91791664554
comparison
equal deleted inserted replaced
541:ee86ab038a7e 542:505656a9947f
1 <template> 1 <template>
2 <div class="main d-flex"> 2 <div class="main d-flex flex-column">
3 <Sidebar v-bind:isOverlay="false"></Sidebar> 3 <Topbar></Topbar>
4 <Sidebar></Sidebar>
4 <div class="d-flex content flex-column"> 5 <div class="d-flex content flex-column">
5 <div class="d-flex flex-row"> 6 <div class="d-flex flex-row">
6 <div :class="userlistStyle"> 7 <div :class="userlistStyle">
7 <div class="card"> 8 <div class="card">
8 <div class="card-header shadow-sm text-white bg-info mb-3"> 9 <div class="card-header shadow-sm text-white bg-info mb-3">
9 Users 10 Users
10 </div> 11 </div>
11 <div class="card-body"> 12 <div class="card-body">
12 <table id="datatable" :class="tableStyle"> 13 <table id="datatable" :class="tableStyle">
13 <thead> 14 <thead>
14 <tr> 15 <tr>
15 <th scope="col" @click="sortBy('user')" ><span>Username&nbsp;<i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i></span></th> 16 <th scope="col" @click="sortBy('user')">
16 <th scope="col" @click="sortBy('country')"><span>Country&nbsp;<i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i></span></th> 17 <span>Username&nbsp;
17 <th scope="col" @click="sortBy('email')"><span>Email&nbsp;<i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i></span></th> 18 <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i>
18 <th scope="col" @click="sortBy('role')"><span>Role&nbsp;<i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i></span></th> 19 </span>
19 <th scope="col"></th> 20 </th>
20 </tr> 21 <th scope="col" @click="sortBy('country')">
21 </thead> 22 <span>Country&nbsp;
22 <tbody> 23 <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i>
23 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> 24 </span>
24 <td>{{ user.user }}</td> 25 </th>
25 <td>{{ user.country }}</td> 26 <th scope="col" @click="sortBy('email')">
26 <td>{{ user.email}}</td> 27 <span>Email&nbsp;
27 <td>{{ user.role }}</td> 28 <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i>
28 <td><i @click="deleteUser(user.user)" class="fa fa-trash-o"></i></td> 29 </span>
29 </tr> 30 </th>
30 </tbody> 31 <th scope="col" @click="sortBy('role')">
31 </table> 32 <span>Role&nbsp;
32 </div> 33 <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i>
33 <div><i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage" class="pages fa fa-caret-right"></i></div> 34 </span>
34 <div class="adduser"> 35 </th>
35 <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button> 36 <th scope="col"></th>
36 </div> 37 </tr>
38 </thead>
39 <tbody>
40 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)">
41 <td>{{ user.user }}</td>
42 <td>{{ user.country }}</td>
43 <td>{{ user.email}}</td>
44 <td>{{ user.role }}</td>
45 <td>
46 <i @click="deleteUser(user.user)" class="fa fa-trash-o"></i>
47 </td>
48 </tr>
49 </tbody>
50 </table>
51 </div>
52 <div>
53 <i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}}
54 <i @click="nextPage" class="pages fa fa-caret-right"></i>
55 </div>
56 <div class="adduser">
57 <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button>
37 </div> 58 </div>
38 </div> 59 </div>
39 <Userdetail v-if="isUserDetailsVisible"></Userdetail> 60 </div>
61 <Userdetail v-if="isUserDetailsVisible"></Userdetail>
40 </div> 62 </div>
41 </div> 63 </div>
42 </div> 64 </div>
43 </template> 65 </template>
44 66
101 } 123 }
102 </style> 124 </style>
103 125
104 <script> 126 <script>
105 import Sidebar from "../components/Sidebar"; 127 import Sidebar from "../components/Sidebar";
128 import Topbar from "../components/Topbar";
106 import Userdetail from "../components/Userdetail"; 129 import Userdetail from "../components/Userdetail";
107 import store from "../store"; 130 import store from "../store";
108 import { mapGetters } from "vuex"; 131 import { mapGetters } from "vuex";
109 import { displayError } from "../lib/errors.js"; 132 import { displayError } from "../lib/errors.js";
110 133
117 currentPage: 1 140 currentPage: 1
118 }; 141 };
119 }, 142 },
120 components: { 143 components: {
121 Sidebar, 144 Sidebar,
122 Userdetail 145 Userdetail,
146 Topbar
123 }, 147 },
124 computed: { 148 computed: {
125 ...mapGetters("usermanagement", ["isUserDetailsVisible"]), 149 ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
126 users() { 150 users() {
127 let users = [...this.$store.getters["usermanagement/users"]]; 151 let users = [...this.$store.getters["usermanagement/users"]];