Mercurial > gemma
diff client/src/components/Userdetail.vue @ 379:0a9aaf21f69f
feat: usermanagement
Togglable userdetails card
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 Aug 2018 14:49:29 +0200 |
parents | e42f42eb9353 |
children | e7d5383bc358 |
line wrap: on
line diff
--- a/client/src/components/Userdetail.vue Fri Aug 10 13:15:32 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 10 14:49:29 2018 +0200 @@ -1,34 +1,34 @@ <template> - <div class="userdetails card shadow" style="width: 35rem;"> - <div class="card" style="width: 35rem;"> + <div class="userdetails shadow"> + <div class="card"> <div class="card-header text-white bg-info mb-3"> {{ currentUser.user }} </div> <div class="card-body"> <form @submit.prevent="save"> - <div class="form-group"> + <div class="form-group row"> <label for="country">Country</label> - <select v-model="currentUser.country"> + <select class="form-control form-control-sm" 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"> + <div class="form-group row"> <label for="email">Email address</label> - <input type="email" class="form-control" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> + <input type="email" class="form-control form-control-sm" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> </div> - <div class="form-group"> + <div class="form-group row"> <label for="role">Role</label> - <select v-model="currentUser.role"> + <select class="form-control form-control-sm" 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> + <button type="submit" class="btn btn-primary pull-right">Submit</button> </form> </div> </div> @@ -39,8 +39,15 @@ @import "../assets/application.scss"; .userdetails { - margin-top: 20px; - width: 50vw; + margin-top: $large-offset; + width: 30vw; + margin-right: auto; + height: 100%; +} + +form { + width: 20vw; + margin: auto; } .shadow { @@ -58,6 +65,10 @@ path: null }; }, + mounted() { + this.currentUser = { ...this.user }; + this.path = this.user.name; + }, watch: { user() { this.currentUser = { ...this.user };