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 };