Mercurial > gemma
changeset 356:dc8052b60485
feat: User detail card added
In order to edit user details a card was added below
the user listing. Currently only client side changes
are possible.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 07 Aug 2018 18:00:35 +0200 |
parents | a80e589c5ade |
children | 3e96a15600b7 |
files | client/src/components/Userdetail.vue client/src/views/Users.vue |
diffstat | 2 files changed, 70 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Userdetail.vue Tue Aug 07 18:00:35 2018 +0200 @@ -0,0 +1,58 @@ +<template> + <div class="userdetails card shadow" style="width: 35rem;"> + <div class="card" style="width: 35rem;"> + <div class="card-header text-white bg-info mb-3"> + {{ currentUser.user }} + </div> + <div class="card-body"> + <form> + <div class="form-group"> + <label for="country">Country</label> + <select 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"> + <label for="email">Email address</label> + <input type="email" class="form-control" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> + </div> + <div class="form-group"> + <label for="role">Role</label> + <select 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> + </form> + </div> + </div> + </div> +</template> + +<style lang="scss"> +@import "../assets/application.scss"; + +.userdetails { + margin-top: 20px; + width: 50vw; +} + +.shadow { + box-shadow: $basic-shadow-light !important; +} +</style> +<script> +export default { + name: "userdetail", + props: ["currentUser"], + data() {}, + computed: {}, + methods: {} +}; +</script>
--- a/client/src/views/Users.vue Tue Aug 07 13:57:31 2018 +0200 +++ b/client/src/views/Users.vue Tue Aug 07 18:00:35 2018 +0200 @@ -6,8 +6,8 @@ <div> <h1>User Management</h1> </div> - <div class="userlist"> - <div class="card shadow" style="width: 85rem;"> + <div class="userlist shadow"> + <div class="card" style="width: 85rem;"> <div class="card-header text-white bg-info mb-3"> users </div> @@ -33,6 +33,7 @@ </div> </div> </div> + <Userdetail v-bind:currentUser="currentUser"></Userdetail> </div> </div> </div> @@ -69,14 +70,21 @@ <script> import Sidebar from "../components/Sidebar"; +import Userdetail from "../components/Userdetail"; import store from "../store"; import { mapGetters } from "vuex"; import app from "../main"; export default { name: "userview", + data() { + return { + currentUser: null + }; + }, components: { - Sidebar + Sidebar, + Userdetail }, computed: { ...mapGetters("usermanagement", ["users"]) @@ -84,7 +92,7 @@ methods: { selectUser(name) { const user = this.$store.getters["usermanagement/getUserByName"](name); - console.log(user); + this.currentUser = user; } }, beforeRouteEnter(to, from, next) {