Mercurial > gemma
changeset 376:e42f42eb9353
refactor: Userdetails refactored to card model
Primitive user editing etd.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 Aug 2018 13:15:32 +0200 |
parents | 112527683ee9 |
children | 220a893318fa 0a9aaf21f69f |
files | client/src/components/Userdetail.vue client/src/stores/usermanagement.js client/src/views/Users.vue |
diffstat | 3 files changed, 86 insertions(+), 11 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Userdetail.vue Fri Aug 10 11:21:58 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 10 13:15:32 2018 +0200 @@ -5,7 +5,7 @@ {{ currentUser.user }} </div> <div class="card-body"> - <form> + <form @submit.prevent="save"> <div class="form-group"> <label for="country">Country</label> <select v-model="currentUser.country"> @@ -48,11 +48,52 @@ } </style> <script> +import app from "../main"; + export default { name: "userdetail", - props: ["currentUser"], - data() {}, - computed: {}, - methods: {} + data() { + return { + currentUser: {}, + path: null + }; + }, + watch: { + user() { + this.currentUser = { ...this.user }; + this.path = this.user.name; + } + }, + computed: { + user() { + return this.$store.getters["usermanagement/currentUser"]; + } + }, + methods: { + save() { + this.$store + .dispatch("usermanagement/saveCurrentUser", { + path: this.user.user, + user: this.currentUser + }) + .then(() => { + this.$store.commit("usermanagement/clearCurrentUser"); + this.$store.dispatch("usermanagement/loadUsers").catch(error => { + const { status, data } = error.response; + app.$toast.error({ + title: "Backend Error", + message: `${status}: ${data}` + }); + }); + }) + .catch(error => { + const { status, data } = error.response; + app.$toast.error({ + title: "Error while saving user", + message: `${status}: ${data}` + }); + }); + } + } }; </script>
--- a/client/src/stores/usermanagement.js Fri Aug 10 11:21:58 2018 +0200 +++ b/client/src/stores/usermanagement.js Fri Aug 10 13:15:32 2018 +0200 @@ -1,11 +1,25 @@ import { HTTP } from "../lib/http"; +const newUser = () => { + return { + user: "", + email: "", + country: null, + role: null, + isNew: true + }; +}; + const UserManagement = { namespaced: true, state: { - users: null + users: null, + currentUser: null }, getters: { + currentUser: state => { + return state.currentUser; + }, users: state => { return state.users; }, @@ -18,9 +32,31 @@ mutations: { usersLoaded: (state, data) => { state.users = data.users; + }, + setCurrentUser: (state, data) => { + state.currentUser = data; + }, + clearCurrentUser: state => { + state.currentUser = newUser(); } }, 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); + resolve(response); + }) + .catch(error => { + reject(error); + }); + }); + }, loadUsers({ commit }) { return new Promise((resolve, reject) => { HTTP.get("/users", {
--- a/client/src/views/Users.vue Fri Aug 10 11:21:58 2018 +0200 +++ b/client/src/views/Users.vue Fri Aug 10 13:15:32 2018 +0200 @@ -33,7 +33,7 @@ </div> </div> </div> - <Userdetail v-bind:currentUser="currentUser"></Userdetail> + <Userdetail></Userdetail> </div> </div> </div> @@ -78,9 +78,7 @@ export default { name: "userview", data() { - return { - currentUser: null - }; + return {}; }, components: { Sidebar, @@ -92,7 +90,7 @@ methods: { selectUser(name) { const user = this.$store.getters["usermanagement/getUserByName"](name); - this.currentUser = user; + this.$store.commit("usermanagement/setCurrentUser", user); } }, beforeRouteEnter(to, from, next) {