Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/usermanagement/Users.vue Tue Sep 11 17:52:20 2018 +0200 +++ b/client/src/usermanagement/Users.vue Wed Sep 12 12:23:11 2018 +0200 @@ -1,76 +1,75 @@ <template> - <div class="main d-flex flex-column"> - <div class="d-flex content flex-column"> - <div class="d-flex flex-row"> - <div :class="userlistStyle"> - <div class="card"> - <div class="card-header shadow-sm text-white bg-info mb-3"> - Users - </div> - <div class="card-body"> - <table id="datatable" :class="tableStyle"> - <thead> - <tr> - <th scope="col" @click="sortBy('user')"> - <span>Username - <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col" @click="sortBy('country')"> - <span>Country - <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col" @click="sortBy('email')"> - <span>Email - <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col" @click="sortBy('role')"> - <span>Role - <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col"></th> - </tr> - </thead> - <tbody> - <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> - <td>{{ user.user }}</td> - <td>{{ user.country }}</td> - <td>{{ user.email}}</td> - <td> - <i v-tooltip="user.roleLabel" :class="{ + <div class="main d-flex flex-column"> + <div class="d-flex content flex-column"> + <div class="d-flex flex-row"> + <div :class="userlistStyle"> + <div class="card"> + <div class="card-header shadow-sm text-white bg-info mb-3"> + Users + </div> + <div class="card-body"> + <table id="datatable" :class="tableStyle"> + <thead> + <tr> + <th scope="col" @click="sortBy('user')"> + <span>Username + <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> + </span> + </th> + <th scope="col" @click="sortBy('country')"> + <span>Country + <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> + </span> + </th> + <th scope="col" @click="sortBy('email')"> + <span>Email + <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> + </span> + </th> + <th scope="col" @click="sortBy('role')"> + <span>Role + <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> + </span> + </th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> + <td>{{ user.user }}</td> + <td>{{ user.country }}</td> + <td>{{ user.email}}</td> + <td> + <i v-tooltip="user.roleLabel" :class="{ fa:true, icon:true, 'fa-user':user.role==='waterway_user', 'fa-star':user.role=='sys_admin', 'fa-adn':user.role==='waterway_admin'}"></i> - </td> - <td> - <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> - </td> - </tr> - </tbody> - </table> + </td> + <td> + <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> + </td> + </tr> + </tbody> + </table> + </div> + <div class="d-flex flex-row pagination"> + <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}} + <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> + </div> + <div class="adduser "> + <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> + </div> + </div> + </div> + <Userdetail v-if="isUserDetailsVisible "></Userdetail> </div> - <div class="d-flex flex-row pagination"> - <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}} - <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> - </div> - <div class="adduser "> - <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> - </div> - </div> </div> - <Userdetail v-if="isUserDetailsVisible "></Userdetail> - </div> </div> - </div> </template> <style lang="scss"> -@import "../application/assets/application.scss"; @import "../application/assets/tooltip.scss"; .main { height: 100vh;