Mercurial > gemma
changeset 379:0a9aaf21f69f
feat: usermanagement
Togglable userdetails card
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 Aug 2018 14:49:29 +0200 |
parents | e42f42eb9353 |
children | 367346975513 |
files | client/src/assets/application.scss client/src/components/Userdetail.vue client/src/stores/usermanagement.js client/src/views/Users.vue |
diffstat | 4 files changed, 66 insertions(+), 43 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Fri Aug 10 13:15:32 2018 +0200 +++ b/client/src/assets/application.scss Fri Aug 10 14:49:29 2018 +0200 @@ -1,13 +1,13 @@ $offset: 20px; $small-offset: 10px; $large-offset: 30px; +$x-large-offset: 50px; $iconsize: 3em; $iconLineHeight: 0.25em; $iconwidth: 20px; $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); - %fully-centered { position: absolute; top: 50%;
--- a/client/src/components/Userdetail.vue Fri Aug 10 13:15:32 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 10 14:49:29 2018 +0200 @@ -1,34 +1,34 @@ <template> - <div class="userdetails card shadow" style="width: 35rem;"> - <div class="card" style="width: 35rem;"> + <div class="userdetails shadow"> + <div class="card"> <div class="card-header text-white bg-info mb-3"> {{ currentUser.user }} </div> <div class="card-body"> <form @submit.prevent="save"> - <div class="form-group"> + <div class="form-group row"> <label for="country">Country</label> - <select v-model="currentUser.country"> + <select class="form-control form-control-sm" v-model="currentUser.country"> <option disabled value="">Please select one</option> <option>AT</option> <option>RO</option> <option>BG</option> </select> </div> - <div class="form-group"> + <div class="form-group row"> <label for="email">Email address</label> - <input type="email" class="form-control" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> + <input type="email" class="form-control form-control-sm" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> </div> - <div class="form-group"> + <div class="form-group row"> <label for="role">Role</label> - <select v-model="currentUser.role"> + <select class="form-control form-control-sm" v-model="currentUser.role"> <option disabled value="">Please select one</option> <option value="sys_admin">Sysadmin</option> <option value="waterway_admin">Waterway Admin</option> <option value="waterway_user">Waterway User</option> </select> </div> - <button type="submit" class="btn btn-primary">Submit</button> + <button type="submit" class="btn btn-primary pull-right">Submit</button> </form> </div> </div> @@ -39,8 +39,15 @@ @import "../assets/application.scss"; .userdetails { - margin-top: 20px; - width: 50vw; + margin-top: $large-offset; + width: 30vw; + margin-right: auto; + height: 100%; +} + +form { + width: 20vw; + margin: auto; } .shadow { @@ -58,6 +65,10 @@ path: null }; }, + mounted() { + this.currentUser = { ...this.user }; + this.path = this.user.name; + }, watch: { user() { this.currentUser = { ...this.user };
--- a/client/src/stores/usermanagement.js Fri Aug 10 13:15:32 2018 +0200 +++ b/client/src/stores/usermanagement.js Fri Aug 10 14:49:29 2018 +0200 @@ -14,9 +14,13 @@ namespaced: true, state: { users: null, - currentUser: null + currentUser: null, + userDetailsVisible: false }, getters: { + isUserDetailsVisible: state => { + return state.userDetailsVisible; + }, currentUser: state => { return state.currentUser; }, @@ -30,11 +34,18 @@ } }, mutations: { + setUserDetailsInvisible: state => { + state.userDetailsVisible = false; + }, + setUserDetailsVisible: state => { + state.userDetailsVisible = true; + }, usersLoaded: (state, data) => { state.users = data.users; }, setCurrentUser: (state, data) => { state.currentUser = data; + state.userDetailsVisible = true; }, clearCurrentUser: state => { state.currentUser = newUser(); @@ -42,14 +53,13 @@ }, actions: { saveCurrentUser({ commit }, data) { - console.log(data); const { path, user } = data; return new Promise((resolve, reject) => { HTTP.put("/users/" + path, user, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { - commit("usersLoaded", response.data); + commit("setUserDetailsInvisible"); resolve(response); }) .catch(error => {
--- a/client/src/views/Users.vue Fri Aug 10 13:15:32 2018 +0200 +++ b/client/src/views/Users.vue Fri Aug 10 14:49:29 2018 +0200 @@ -1,39 +1,39 @@ <template> <div class="main d-flex"> <Sidebar v-bind:isOverlay="false"></Sidebar> - <div class="d-flex flex-row content"> - <div class="d-flex flex-column"> + <div class="d-flex content flex-column"> <div> <h1>User Management</h1> </div> - <div class="userlist shadow"> - <div class="card" style="width: 85rem;"> - <div class="card-header text-white bg-info mb-3"> - users + <div class="d-flex flex-row"> + <div class="userlist shadow"> + <div class="card"> + <div class="card-header text-white bg-info mb-3"> + users + </div> + <div class="card-body"> + <table class="table table-hover"> + <thead> + <tr> + <th scope="col">Username</th> + <th scope="col">Country</th> + <th scope="col">Email</th> + <th scope="col">Role</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>{{ user.role }}</td> + </tr> + </tbody> + </table> </div> - <div class="card-body"> - <table class="table table-hover"> - <thead> - <tr> - <th scope="col">Username</th> - <th scope="col">Country</th> - <th scope="col">Email</th> - <th scope="col">Role</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>{{ user.role }}</td> - </tr> - </tbody> - </table> </div> </div> - </div> - <Userdetail></Userdetail> + <Userdetail v-if="isUserDetailsVisible"></Userdetail> </div> </div> </div> @@ -53,6 +53,8 @@ .userlist { margin-top: $large-offset; + width: 50vw; + margin-right: $large-offset; } .shadow { box-shadow: $basic-shadow-light !important; @@ -85,7 +87,7 @@ Userdetail }, computed: { - ...mapGetters("usermanagement", ["users"]) + ...mapGetters("usermanagement", ["users", "isUserDetailsVisible"]) }, methods: { selectUser(name) {