Mercurial > gemma
comparison client/src/usermanagement/Users.vue @ 629:8278b2fb0c33
refac: UI refactorization
1) Leverage webpacks ability to import some scss sheets globally to omit
importing sheets in every component
2) making "sidebar" collapsible in a 2d way
3) fixed flickering user menu
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Sep 2018 12:23:11 +0200 |
parents | ef307bd6b5d8 |
children | ca628dce90dd |
comparison
equal
deleted
inserted
replaced
628:ef9c733cc6aa | 629:8278b2fb0c33 |
---|---|
1 <template> | 1 <template> |
2 <div class="main d-flex flex-column"> | 2 <div class="main d-flex flex-column"> |
3 <div class="d-flex content flex-column"> | 3 <div class="d-flex content flex-column"> |
4 <div class="d-flex flex-row"> | 4 <div class="d-flex flex-row"> |
5 <div :class="userlistStyle"> | 5 <div :class="userlistStyle"> |
6 <div class="card"> | 6 <div class="card"> |
7 <div class="card-header shadow-sm text-white bg-info mb-3"> | 7 <div class="card-header shadow-sm text-white bg-info mb-3"> |
8 Users | 8 Users |
9 </div> | 9 </div> |
10 <div class="card-body"> | 10 <div class="card-body"> |
11 <table id="datatable" :class="tableStyle"> | 11 <table id="datatable" :class="tableStyle"> |
12 <thead> | 12 <thead> |
13 <tr> | 13 <tr> |
14 <th scope="col" @click="sortBy('user')"> | 14 <th scope="col" @click="sortBy('user')"> |
15 <span>Username | 15 <span>Username |
16 <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> | 16 <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> |
17 </span> | 17 </span> |
18 </th> | 18 </th> |
19 <th scope="col" @click="sortBy('country')"> | 19 <th scope="col" @click="sortBy('country')"> |
20 <span>Country | 20 <span>Country |
21 <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> | 21 <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> |
22 </span> | 22 </span> |
23 </th> | 23 </th> |
24 <th scope="col" @click="sortBy('email')"> | 24 <th scope="col" @click="sortBy('email')"> |
25 <span>Email | 25 <span>Email |
26 <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> | 26 <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> |
27 </span> | 27 </span> |
28 </th> | 28 </th> |
29 <th scope="col" @click="sortBy('role')"> | 29 <th scope="col" @click="sortBy('role')"> |
30 <span>Role | 30 <span>Role |
31 <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> | 31 <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> |
32 </span> | 32 </span> |
33 </th> | 33 </th> |
34 <th scope="col"></th> | 34 <th scope="col"></th> |
35 </tr> | 35 </tr> |
36 </thead> | 36 </thead> |
37 <tbody> | 37 <tbody> |
38 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> | 38 <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> |
39 <td>{{ user.user }}</td> | 39 <td>{{ user.user }}</td> |
40 <td>{{ user.country }}</td> | 40 <td>{{ user.country }}</td> |
41 <td>{{ user.email}}</td> | 41 <td>{{ user.email}}</td> |
42 <td> | 42 <td> |
43 <i v-tooltip="user.roleLabel" :class="{ | 43 <i v-tooltip="user.roleLabel" :class="{ |
44 fa:true, | 44 fa:true, |
45 icon:true, | 45 icon:true, |
46 'fa-user':user.role==='waterway_user', | 46 'fa-user':user.role==='waterway_user', |
47 'fa-star':user.role=='sys_admin', | 47 'fa-star':user.role=='sys_admin', |
48 'fa-adn':user.role==='waterway_admin'}"></i> | 48 'fa-adn':user.role==='waterway_admin'}"></i> |
49 </td> | 49 </td> |
50 <td> | 50 <td> |
51 <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> | 51 <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> |
52 </td> | 52 </td> |
53 </tr> | 53 </tr> |
54 </tbody> | 54 </tbody> |
55 </table> | 55 </table> |
56 </div> | |
57 <div class="d-flex flex-row pagination"> | |
58 <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} | |
59 <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> | |
60 </div> | |
61 <div class="adduser "> | |
62 <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> | |
63 </div> | |
64 </div> | |
65 </div> | |
66 <Userdetail v-if="isUserDetailsVisible "></Userdetail> | |
56 </div> | 67 </div> |
57 <div class="d-flex flex-row pagination"> | |
58 <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} | |
59 <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> | |
60 </div> | |
61 <div class="adduser "> | |
62 <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> | |
63 </div> | |
64 </div> | |
65 </div> | 68 </div> |
66 <Userdetail v-if="isUserDetailsVisible "></Userdetail> | |
67 </div> | |
68 </div> | 69 </div> |
69 </div> | |
70 </template> | 70 </template> |
71 | 71 |
72 <style lang="scss"> | 72 <style lang="scss"> |
73 @import "../application/assets/application.scss"; | |
74 @import "../application/assets/tooltip.scss"; | 73 @import "../application/assets/tooltip.scss"; |
75 .main { | 74 .main { |
76 height: 100vh; | 75 height: 100vh; |
77 } | 76 } |
78 | 77 |