Mercurial > gemma
changeset 300:af29878be602
feat: User table selectable
It is now possible to select entries from the user table.
At present the selection is only logged via console.log.
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 31 Jul 2018 16:48:56 +0200 |
| parents | 6b4df87a7ccc |
| children | 1781e5d7cb5a |
| files | client/src/stores/usermanagement.js client/src/views/Users.vue |
| diffstat | 2 files changed, 15 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/stores/usermanagement.js Tue Jul 31 16:16:50 2018 +0200 +++ b/client/src/stores/usermanagement.js Tue Jul 31 16:48:56 2018 +0200 @@ -10,7 +10,9 @@ return state.users; }, getUserByName: state => name => { - return state.users[name]; + return state.users.find(user => { + return user.user === name; + }); } }, mutations: {
--- a/client/src/views/Users.vue Tue Jul 31 16:16:50 2018 +0200 +++ b/client/src/views/Users.vue Tue Jul 31 16:48:56 2018 +0200 @@ -12,7 +12,7 @@ users </div> <div class="card-body"> - <table class="table"> + <table class="table table-hover"> <thead> <tr> <th scope="col">Username</th> @@ -22,7 +22,7 @@ </tr> </thead> <tbody> - <tr v-for="user in users" :key="user.user"> + <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> @@ -61,6 +61,10 @@ td { border-top: 0px !important; } + +.table td { + cursor: pointer; +} </style> <script> @@ -77,6 +81,12 @@ computed: { ...mapGetters("usermanagement", ["users"]) }, + methods: { + selectUser(name) { + const user = this.$store.getters["usermanagement/getUserByName"](name); + console.log(user); + } + }, beforeRouteEnter(to, from, next) { store .dispatch("usermanagement/loadUsers")