# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1533905369 -7200
# Node ID 0a9aaf21f69fe2950c27d6a12b36a631cdf895c9
# Parent  e42f42eb935333d38e117471f3ad84e2931e5eb8
feat: usermanagement

Togglable userdetails card

diff -r e42f42eb9353 -r 0a9aaf21f69f client/src/assets/application.scss
--- a/client/src/assets/application.scss	Fri Aug 10 13:15:32 2018 +0200
+++ b/client/src/assets/application.scss	Fri Aug 10 14:49:29 2018 +0200
@@ -1,13 +1,13 @@
 $offset: 20px;
 $small-offset: 10px;
 $large-offset: 30px;
+$x-large-offset: 50px;
 $iconsize: 3em;
 $iconLineHeight: 0.25em;
 $iconwidth: 20px;
 $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75);
 $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75);
 
-
 %fully-centered {
   position: absolute;
   top: 50%;
diff -r e42f42eb9353 -r 0a9aaf21f69f client/src/components/Userdetail.vue
--- 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 };
diff -r e42f42eb9353 -r 0a9aaf21f69f client/src/stores/usermanagement.js
--- a/client/src/stores/usermanagement.js	Fri Aug 10 13:15:32 2018 +0200
+++ b/client/src/stores/usermanagement.js	Fri Aug 10 14:49:29 2018 +0200
@@ -14,9 +14,13 @@
   namespaced: true,
   state: {
     users: null,
-    currentUser: null
+    currentUser: null,
+    userDetailsVisible: false
   },
   getters: {
+    isUserDetailsVisible: state => {
+      return state.userDetailsVisible;
+    },
     currentUser: state => {
       return state.currentUser;
     },
@@ -30,11 +34,18 @@
     }
   },
   mutations: {
+    setUserDetailsInvisible: state => {
+      state.userDetailsVisible = false;
+    },
+    setUserDetailsVisible: state => {
+      state.userDetailsVisible = true;
+    },
     usersLoaded: (state, data) => {
       state.users = data.users;
     },
     setCurrentUser: (state, data) => {
       state.currentUser = data;
+      state.userDetailsVisible = true;
     },
     clearCurrentUser: state => {
       state.currentUser = newUser();
@@ -42,14 +53,13 @@
   },
   actions: {
     saveCurrentUser({ commit }, data) {
-      console.log(data);
       const { path, user } = data;
       return new Promise((resolve, reject) => {
         HTTP.put("/users/" + path, user, {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            commit("usersLoaded", response.data);
+            commit("setUserDetailsInvisible");
             resolve(response);
           })
           .catch(error => {
diff -r e42f42eb9353 -r 0a9aaf21f69f client/src/views/Users.vue
--- a/client/src/views/Users.vue	Fri Aug 10 13:15:32 2018 +0200
+++ b/client/src/views/Users.vue	Fri Aug 10 14:49:29 2018 +0200
@@ -1,39 +1,39 @@
 <template>
   <div class="main d-flex">
     <Sidebar v-bind:isOverlay="false"></Sidebar>
-    <div class="d-flex flex-row content">
-      <div class="d-flex flex-column">
+    <div class="d-flex content flex-column">
         <div>
           <h1>User Management</h1>
         </div>
-        <div class="userlist shadow">
-          <div class="card" style="width: 85rem;">
-              <div class="card-header text-white bg-info mb-3">
-                users
+        <div class="d-flex flex-row">
+          <div class="userlist shadow">
+            <div class="card">
+                <div class="card-header text-white bg-info mb-3">
+                  users
+                </div>
+                <div class="card-body">
+                  <table class="table table-hover">
+                    <thead>
+                      <tr>
+                        <th scope="col">Username</th>
+                        <th scope="col">Country</th>
+                        <th scope="col">Email</th>
+                        <th scope="col">Role</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    <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>
+                      <td>{{ user.role }}</td>
+                      </tr>
+                    </tbody>
+                </table>
               </div>
-              <div class="card-body">
-                <table class="table table-hover">
-                  <thead>
-                    <tr>
-                      <th scope="col">Username</th>
-                      <th scope="col">Country</th>
-                      <th scope="col">Email</th>
-                      <th scope="col">Role</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                  <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>
-                    <td>{{ user.role }}</td>
-                    </tr>
-                  </tbody>
-              </table>
             </div>
           </div>
-        </div>
-        <Userdetail></Userdetail>
+          <Userdetail v-if="isUserDetailsVisible"></Userdetail>
       </div>
     </div>
   </div>
@@ -53,6 +53,8 @@
 
 .userlist {
   margin-top: $large-offset;
+  width: 50vw;
+  margin-right: $large-offset;
 }
 .shadow {
   box-shadow: $basic-shadow-light !important;
@@ -85,7 +87,7 @@
     Userdetail
   },
   computed: {
-    ...mapGetters("usermanagement", ["users"])
+    ...mapGetters("usermanagement", ["users", "isUserDetailsVisible"])
   },
   methods: {
     selectUser(name) {