Mercurial > gemma
changeset 366:1a2ef18e464d
refactor: User management accordion refined
The working hypothesis for now is, that usermanagement
can be done via accordion. A MVP for visualization is
implemented.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 09 Aug 2018 13:11:35 +0200 |
parents | c63200982ce7 |
children | 7ecc4f8c895c |
files | client/src/components/Userdetail.vue client/src/stores/usermanagement.js client/src/views/Users.vue |
diffstat | 3 files changed, 84 insertions(+), 32 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Userdetail.vue Thu Aug 09 10:13:09 2018 +0200 +++ b/client/src/components/Userdetail.vue Thu Aug 09 13:11:35 2018 +0200 @@ -1,21 +1,26 @@ <template> <div class="userdetail card"> - <div @click="showDetails" class="card-header bg-light" id="headingOne"> - <h5 class="mb-0"> - <div class="btn" data-toggle="collapse" :data-target="datatarget" aria-expanded="true" aria-controls="collapseOne"> - <div class="d-flex d-flex-row"> - <div class="name">Name: {{this.user.user}}</div> - <div class="mail">Email: {{this.user.email}}</div> - <div class="country">Country: {{this.user.country}}</div> - <div class="role">Role: {{this.user.role}}</div> - </div> + <div @click="showDetails" class="card-header userinfo bg-white" id="headingOne"> + <h6 class="mb-0"> + <div data-toggle="collapse" :data-target="datatarget" aria-expanded="true" aria-controls="collapseOne"> + <table> + <tbody> + <tr> + <td class="caret"><i class="fa fa-caret-right"></i></td> + <td class="user">Name:</td><td class="user">{{this.user.user}}</td> + <td class="mail">Email:</td><td class="mail">{{this.user.email}}</td> + <td class="country">Country:</td><td class="country">{{this.user.country}}</td> + <td class="role">Role:</td><td class="role">{{this.user.role}}</td> + </tr> + </tbody> + </table> </div> - </h5> + </h6> </div> <div :id="target" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> <div> - <form class="details" @submit.prevent="editUser"> + <form class="details form" @submit.prevent="saveUser"> <div class="form-group"><label for="user">User</label><input class="form-control" id="user" v-model="currentUser.user"></div> <div class="form-group"><label for="email">Email</label><input class="form-control" id="email" v-model="currentUser.email"></div> <div class="form-group"> @@ -56,16 +61,36 @@ @import "../assets/application.scss"; .userdetail { text-align: left !important; + border: none !important; } .details { - width: 30vw; + padding-left: 20px; + width: 10vw; height: 45vh; } -.name, + +.userinfo { + border: none !important; +} + +.userinfo tr { + width: 40vw; +} + +.caret { + padding-right: 10px; +} + +.user, .mail, .country, .role { - padding-right: $large-offset; + padding-right: 10px; +} + +label { + margin-bottom: 1px !important; + font-size: 14px !important; } </style> <script> @@ -91,27 +116,29 @@ } }, methods: { - editUser() { - HTTP.put("/users/" + this.user.user, { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) - .then(() => { - this.show = false; - store.dispatch("usermanagement/loadUsers").catch(error => { + saveUser() { + if (!this.user.isNew) { + HTTP.put("/users/" + this.user.user, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(() => { + this.show = false; + store.dispatch("usermanagement/loadUsers").catch(error => { + const { status, data } = error.response; + app.$toast.error({ + title: "Error while loading users", + message: `${status}: ${data}` + }); + }); + }) + .catch(error => { const { status, data } = error.response; app.$toast.error({ - title: "Backend Error", + title: "Error while updating user", message: `${status}: ${data}` }); }); - }) - .catch(error => { - const { status, data } = error.response; - app.$toast.error({ - title: "Backend Error", - message: `${status}: ${data}` - }); - }); + } }, showDetails() { this.show = !this.show;
--- a/client/src/stores/usermanagement.js Thu Aug 09 10:13:09 2018 +0200 +++ b/client/src/stores/usermanagement.js Thu Aug 09 13:11:35 2018 +0200 @@ -17,7 +17,27 @@ }, mutations: { usersLoaded: (state, data) => { + const addSavedAndNewFlags = user => { + return { + ...user, + isNew: false + }; + }; + data.users = data.users.map(addSavedAndNewFlags); state.users = data.users; + }, + addUser: state => { + state.users = [ + ...state.users, + { + country: "", + email: "", + extent: {}, + role: "waterway_user", + user: "N.N", + isNew: true + } + ]; } }, actions: {
--- a/client/src/views/Users.vue Thu Aug 09 10:13:09 2018 +0200 +++ b/client/src/views/Users.vue Thu Aug 09 13:11:35 2018 +0200 @@ -11,6 +11,7 @@ <div class="card-header text-white bg-info mb-3"> users </div> + <!-- <div><button @click="addUser" class="btn btn-primary pull-left" style="margin-left:25px;">+</button></div> --> <div class="card-body"> <div class="accordion" v-for="user in this.users" v-bind:key="user.name"> <Userdetail :user="user"></Userdetail> @@ -68,7 +69,11 @@ computed: { ...mapGetters("usermanagement", ["users"]) }, - methods: {}, + methods: { + addUser() { + store.commit("usermanagement/addUser"); + } + }, beforeRouteEnter(to, from, next) { store .dispatch("usermanagement/loadUsers") @@ -76,7 +81,7 @@ .catch(error => { const { status, data } = error.response; app.$toast.error({ - title: "Backend Error", + title: "Error while loading users", message: `${status}: ${data}` }); });