From 415660f018ee24c619915d8fb63df18971970d56 Mon Sep 17 00:00:00 2001
From: Mark <mark@openappstack.net>
Date: Mon, 21 Oct 2019 16:29:03 +0200
Subject: [PATCH] Add role selection
---
frontend/components/edit-user.vue | 32 ++++----------------------
frontend/components/edit-users.vue | 13 +++--------
frontend/layouts/default.vue | 2 --
frontend/pages/users.vue | 36 +++++++++++++++++++++++++-----
4 files changed, 38 insertions(+), 45 deletions(-)
diff --git a/frontend/components/edit-user.vue b/frontend/components/edit-user.vue
index 71c623f..78ac492 100644
--- a/frontend/components/edit-user.vue
+++ b/frontend/components/edit-user.vue
@@ -1,6 +1,6 @@
<template>
<b-row class="mb-2">
- <b-col cols="1">
+ <b-col>
{{ user.username }}
</b-col>
<b-col>
@@ -10,44 +10,20 @@
<b-form-input type="email" v-model="user.email"></b-form-input>
</b-col>
<b-col>
- <b-row>
- <b-col cols="6">
- <b-badge v-for="role in user.roles"
- variant="primary"
- v-bind:key="role"
- class="mr-1">
- {{ role }}
- </b-badge>
- </b-col>
- <b-col>
- <b-form-input list="available-roles" v-on:keyup.enter="addRole($event)"></b-form-input>
- </b-col>
- </b-row>
- </b-col>
- <b-col cols="3">
- <b-row>
- <b-col>
+ <b-button-group class="ml-auto">
<b-button v-show="isModified" variant="outline-primary" v-on:click="savePressed()">Save</b-button>
- </b-col>
- <b-col>
<b-button variant="outline-danger" v-on:click="$emit('delete')">Delete</b-button>
- </b-col>
- </b-row>
+ </b-button-group>
</b-col>
</b-row>
</template>
<script>
export default {
- props: ['user', 'roles'],
+ props: ['user'],
methods: {
savePressed: function(){
this.$emit('save');
this.isModified = false;
- },
- addRole: function(event){
- if(this.roles.includes(event.target.value)){
- this.$vnode.data.attrs.value.roles.push(event.target.value);
- }
}
},
watch: {
diff --git a/frontend/components/edit-users.vue b/frontend/components/edit-users.vue
index 8559104..67d8f0e 100644
--- a/frontend/components/edit-users.vue
+++ b/frontend/components/edit-users.vue
@@ -1,10 +1,7 @@
<template>
<div>
- <datalist id="available-roles">
- <option v-for="role in roles">{{ role }}</option>
- </datalist>
- <b-row>
- <b-col cols="1">
+ <b-row class="mb-3 mt-3">
+ <b-col>
<label>Username</label>
</b-col>
<b-col>
@@ -14,13 +11,9 @@
<label>email</label>
</b-col>
<b-col>
- <label>Roles</label>
- </b-col>
- <b-col cols="3">
</b-col>
</b-row>
<edit-user v-for="(user, index) in users"
- :roles="roles"
v-model="users[index]"
v-bind:user="user"
v-bind:key="user.username"
@@ -33,6 +26,6 @@
import editUser from '~/components/edit-user'
export default {
components: { editUser },
- props: ['users', 'roles']
+ props: ['users']
}
</script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 525627d..d7cd95b 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -21,8 +21,6 @@
</b-navbar-nav>
</b-collapse>
</b-navbar>
- <b-container class="md-4">
<nuxt />
- </b-container>
</div>
</template>
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index 9c78bd5..b1a76b5 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -1,8 +1,20 @@
<template>
- <div>
- <edit-users v-bind:users="users"
- :roles="roles"
- v-model="users"
+ <div class=".wrapper" style="display: flex; width: 100%; align-items: stretch">
+ <div style="min-height: 100vh; min-width: 200px; max-width: 200px" class="border-right d-none d-md-block">
+ <b-list-group flush>
+ <b-list-group-item button v-bind:active="'all'==selectedRole" class="d-flex justify-content-between align-items-center" @click="selectRole('all')">
+ All
+ <b-badge pill variant="primary">{{ users.length }}</b-badge>
+ </b-list-group-item>
+ <b-list-group-item button v-bind:active="role==selectedRole" class="d-flex justify-content-between align-items-center" v-for="role in roles" v-bind:key="role" @click="selectRole(role)">
+ {{ role }}
+ <b-badge pill variant="primary">{{ role.length }}</b-badge>
+ </b-list-group-item>
+ </b-list-group>
+ </div>
+ <div class="container">
+ <edit-users v-bind:users="selectedUsers"
+ v-model="selectedUsers"
v-on:save="saveUser"
v-on:delete="deleteUser">
</edit-users>
@@ -38,6 +50,7 @@
v-show="userFormVisibility"
v-on:delete="cancelAddUser">
</edit-user>
+ </div>
</div>
</template>
<script>
@@ -51,6 +64,10 @@ export default {
console.log(username);
console.log(index);
},
+ selectRole: function(role){
+ console.log(role)
+ this.selectedRole = role;
+ },
deleteUser: function(username, index){
axios.post(
'/api/admin/graphql', {
@@ -144,7 +161,8 @@ export default {
addUserButtonVisibility: true,
usernameFormVisibility: false,
userFormVisibility: false,
- newUsernameFeedback: "Username has to be a least 2 charachters long and unique"
+ newUsernameFeedback: "Username has to be a least 2 charachters long and unique",
+ selectedRole: "all"
}
},
computed: {
@@ -153,6 +171,14 @@ export default {
return !this.users.find(function(user){
return user.username === this;
}, this.newUser.username)
+ },
+ selectedUsers(){
+ if (this.selectedRole != "all"){
+ return this.users.filter(user => user.roles.includes(this.selectedRole));
+ }
+ else{
+ return this.users;
+ }
}
}
}
--
GitLab