From 6d69d1f2b4ac1252daf991b50db0d843513ead4e Mon Sep 17 00:00:00 2001
From: Mark <mark@openappstack.net>
Date: Wed, 13 Nov 2019 18:15:15 +0100
Subject: [PATCH] Edit copy of userdata in edit-user
---
frontend/components/edit-user.vue | 38 +++++++++++++++-------
frontend/pages/users.vue | 53 ++++++++++++++++++-------------
2 files changed, 57 insertions(+), 34 deletions(-)
diff --git a/frontend/components/edit-user.vue b/frontend/components/edit-user.vue
index ee7326d..0ea5e25 100644
--- a/frontend/components/edit-user.vue
+++ b/frontend/components/edit-user.vue
@@ -1,21 +1,24 @@
<template>
<b-row class="mb-2 editUser">
<b-col cols="2" class="field username">
- {{ user.username }}
+ {{ newUserValues.username }}
</b-col>
<b-col cols="2">
- <b-form-input type="password" v-model="user.password" placeholder="password" class="field password"></b-form-input>
+ <b-form-input type="password" v-model="newUserValues.password" placeholder="password" class="field password"></b-form-input>
</b-col>
<b-col cols="2">
- <b-form-input type="email" v-model="user.email" class="field email"></b-form-input>
+ <b-form-input type="email" v-model="newUserValues.email" class="field email"></b-form-input>
</b-col>
<b-col cols="1">
- <b-badge class="mr-1 field roles" href="#" variant="primary" v-for="(role, index) in user.roles" v-bind:key="role" @click="user.roles.splice(index, 1)">
- {{role}} ×
- </b-badge>
+ <b-badge class="mr-1 field roles" href="#" variant="primary" v-for="(role, index) in newUserValues.roles" v-bind:key="role" @click="newUserValues.roles.splice(index, 1)">
+ {{role}} ×
+ </b-badge>
+ <b-badge style="opacity: 0.3" class="mr-1 field roles" href="#" variant="danger" v-for="role in deletedRoles" v-bind:key="role" @click="newUserValues.roles.push(role)">
+ {{ role }}
+ </b-badge>
</b-col>
<b-col cols="1">
- <b-badge class="mr-1 field applications" href="#" variant="secondary" v-for="(application, index) in user.applications" v-bind:key="application" @click="user.applications.splice(index, 1)">
+ <b-badge class="mr-1 field applications" href="#" variant="secondary" v-for="(application, index) in newUserValues.applications" v-bind:key="application" @click="newUserValues.applications.splice(index, 1)">
{{application}} ×
</b-badge>
</b-col>
@@ -66,14 +69,16 @@ export default {
props: ['user', 'roles', 'applications'],
methods: {
savePressed: function(){
- this.$emit('save');
+ this.user.newVal = JSON.parse(JSON.stringify(this.newUserValues));
this.isModified = false;
+ this.deletedRoles = [];
+ this.$emit('save');
},
addRole: function(evt){
evt.preventDefault();
if(!this.showAddRole){this.showAddRole = true;}
else{
- if(this.addRoleState){this.user.roles.push(this.newRole)}
+ if(this.addRoleState){this.newUserValues.roles.push(this.newRole)}
this.newRole = "";
this.showAddRole = false;
}
@@ -82,7 +87,7 @@ export default {
evt.preventDefault();
if(!this.showAddApplication){this.showAddApplication = true;}
else{
- if(this.addApplicationState){this.user.applications.push(this.newApplication)}
+ if(this.addApplicationState){this.newUserValues.applications.push(this.newApplication)}
this.newApplication = "";
this.showAddApplication = false;
}
@@ -99,13 +104,22 @@ export default {
}
},
watch: {
- user: {
- handler: function(val, oldVal){ this.isModified = true },
+ newUserValues: {
+ handler: function(val, oldVal){
+ this.isModified = true
+ },
deep: true
+ },
+ 'newUserValues.roles': {
+ handler: function(val, oldVal){
+ this.deletedRoles = this.user.roles.filter( role => !this.newUserValues.roles.includes(role))
+ }
}
},
data(){
return {
+ newUserValues: JSON.parse(JSON.stringify(this.user)),
+ deletedRoles: [],
isModified: false,
showAddRole: false,
newRole: "",
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index dcb6cac..363c49d 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -51,6 +51,7 @@
:applications="applicationList"
v-model="newUser"
v-on:save="addUser"
+ v-bind:key="newUser.username"
v-show="userFormVisibility"
v-on:delete="cancelAddUser"
class="editNewUser">
@@ -69,8 +70,9 @@ export default {
methods: {
saveUser: function(username, index){
const user = this.users[index]
- backend.editUser(user.username, user.email, user.password);
- user.roles.forEach( role => {
+ const newValues = user.newVal;
+ backend.editUser(newValues.username, newValues.email, newValues.password);
+ newValues.roles.forEach( role => {
var roleObj = this.roles.find(element => {return element.name == role});
if (!roleObj.users.includes(username)){
backend.addRoleToUser(user.username, role)
@@ -79,7 +81,7 @@ export default {
});
}
});
- user.applications.forEach( app => {
+ newValues.applications.forEach( app => {
var appObj = this.applications.find(element => {return element.name == app});
if (!appObj.users.includes(username)){
backend.addApplicationToUser(user.username, app)
@@ -89,18 +91,18 @@ export default {
}
});
this.roles.forEach( role => {
- if(role.users.includes(username) && !user.roles.includes(role.name)){
- backend.removeRoleFromUser(user.username, role.name)
+ if(role.users.includes(username) && !newValues.roles.includes(role.name)){
+ backend.removeRoleFromUser(username, role.name)
.then( ok => {
role.users.splice(role.users.findIndex( element => { return element == username }),1);
});
}
}),
this.applications.forEach( application => {
- if(application.users.includes(username) && !user.applications.includes(application.name)){
- backend.removeApplicationFromUser(user.username, application.name)
+ if(application.users.includes(username) && !newValues.applications.includes(application.name)){
+ backend.removeApplicationFromUser(username, application.name)
.then( ok => {
- application.users.splice(role.users.findIndex( element => { return element == username }),1);
+ application.users.splice(applications.users.findIndex( element => { return element == username }),1);
});
}
})
@@ -112,7 +114,7 @@ export default {
backend.deleteUser(username)
.then( ok => {
this.users.splice(index, 1);
- this.roles.forEach( role => { role.users.splice(roles.users.findIndex( user => { return user == username }),1) });
+ this.roles.forEach( role => { role.users.splice(role.users.findIndex( user => { return user == username }),1) });
});
},
toggleAddUser: function(evt){
@@ -133,19 +135,25 @@ export default {
}
},
addUser: function(){
- backend.createUser(this.newUser.username, this.newUser.email, this.newUser.password)
+ const userdata = JSON.parse(JSON.stringify(this.newUser.newVal))
+ this.cancelAddUser();
+ backend.createUser(userdata.username, userdata.email, userdata.password)
.then( user => {
- this.users.push({
- username: this.newUser.username,
- email: this.newUser.email,
- password: undefined,
- roles: [],
- applications: []
- });
- this.newUser.username = "";
- this.newUser.password = undefined
- this.newUser.email = "";
- this.toggleAddUser()
+ userdata.applications.forEach(
+ app => backend.addApplicationToUser(userdata.username, app))
+ userdata.roles.forEach(
+ role => {
+ backend.addRoleToUser(userdata.username, role)
+ this.roles.find(element => { return element.name == role })
+ .users.push(userdata.username);
+ })
+ });
+ this.users.push({
+ username: userdata.username,
+ email: userdata.email,
+ password: undefined,
+ roles: userdata.roles,
+ applications: userdata.applications
});
},
cancelAddUser: function(){
@@ -154,6 +162,7 @@ export default {
this.newUser.email = "";
this.newUser.roles = [];
this.newUser.applications = [];
+ this.newUser.newVal = {};
this.toggleAddUser();
}
},
@@ -203,7 +212,7 @@ export default {
data() {
return {
users: [],
- newUser: {username: "", password: undefined, email: "", roles: []},
+ newUser: {username: "", password: undefined, email: "", roles: [], applications: []},
roles: [],
applications: [],
addUserButtonVisibility: true,
--
GitLab