# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1533813095 -7200
# Node ID 1a2ef18e464d529ed7dfba3445f43116d1e92989
# Parent  c63200982ce739dc5bc0dbec693591f9aa1d6c8c
refactor: User management accordion refined

The working hypothesis for now is, that usermanagement
can be done via accordion. A MVP for visualization is
implemented.

diff -r c63200982ce7 -r 1a2ef18e464d client/src/components/Userdetail.vue
--- a/client/src/components/Userdetail.vue	Thu Aug 09 10:13:09 2018 +0200
+++ b/client/src/components/Userdetail.vue	Thu Aug 09 13:11:35 2018 +0200
@@ -1,21 +1,26 @@
 <template>
   <div class="userdetail card">
-    <div @click="showDetails" class="card-header bg-light" id="headingOne">
-      <h5 class="mb-0">
-        <div class="btn" data-toggle="collapse" :data-target="datatarget" aria-expanded="true" aria-controls="collapseOne">
-          <div class="d-flex d-flex-row">
-            <div class="name">Name: {{this.user.user}}</div>
-            <div class="mail">Email: {{this.user.email}}</div>
-            <div class="country">Country: {{this.user.country}}</div>
-            <div class="role">Role: {{this.user.role}}</div>
-          </div>
+    <div @click="showDetails" class="card-header userinfo bg-white" id="headingOne">
+      <h6 class="mb-0">
+        <div data-toggle="collapse" :data-target="datatarget" aria-expanded="true" aria-controls="collapseOne">
+            <table>
+              <tbody>
+                <tr>
+                  <td class="caret"><i class="fa  fa-caret-right"></i></td>
+                  <td class="user">Name:</td><td class="user">{{this.user.user}}</td>
+                  <td class="mail">Email:</td><td class="mail">{{this.user.email}}</td>
+                  <td class="country">Country:</td><td class="country">{{this.user.country}}</td>
+                  <td class="role">Role:</td><td class="role">{{this.user.role}}</td>
+                </tr>
+              </tbody>
+            </table>
         </div>
-      </h5>
+      </h6>
     </div>
     <div :id="target" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
       <div class="card-body">
         <div>
-          <form class="details" @submit.prevent="editUser">
+          <form class="details form" @submit.prevent="saveUser">
             <div class="form-group"><label for="user">User</label><input class="form-control" id="user" v-model="currentUser.user"></div>
             <div class="form-group"><label for="email">Email</label><input class="form-control" id="email" v-model="currentUser.email"></div>
             <div class="form-group">
@@ -56,16 +61,36 @@
 @import "../assets/application.scss";
 .userdetail {
   text-align: left !important;
+  border: none !important;
 }
 .details {
-  width: 30vw;
+  padding-left: 20px;
+  width: 10vw;
   height: 45vh;
 }
-.name,
+
+.userinfo {
+  border: none !important;
+}
+
+.userinfo tr {
+  width: 40vw;
+}
+
+.caret {
+  padding-right: 10px;
+}
+
+.user,
 .mail,
 .country,
 .role {
-  padding-right: $large-offset;
+  padding-right: 10px;
+}
+
+label {
+  margin-bottom: 1px !important;
+  font-size: 14px !important;
 }
 </style>
 <script>
@@ -91,27 +116,29 @@
     }
   },
   methods: {
-    editUser() {
-      HTTP.put("/users/" + this.user.user, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
-        .then(() => {
-          this.show = false;
-          store.dispatch("usermanagement/loadUsers").catch(error => {
+    saveUser() {
+      if (!this.user.isNew) {
+        HTTP.put("/users/" + this.user.user, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(() => {
+            this.show = false;
+            store.dispatch("usermanagement/loadUsers").catch(error => {
+              const { status, data } = error.response;
+              app.$toast.error({
+                title: "Error while loading users",
+                message: `${status}: ${data}`
+              });
+            });
+          })
+          .catch(error => {
             const { status, data } = error.response;
             app.$toast.error({
-              title: "Backend Error",
+              title: "Error while updating user",
               message: `${status}: ${data}`
             });
           });
-        })
-        .catch(error => {
-          const { status, data } = error.response;
-          app.$toast.error({
-            title: "Backend Error",
-            message: `${status}: ${data}`
-          });
-        });
+      }
     },
     showDetails() {
       this.show = !this.show;
diff -r c63200982ce7 -r 1a2ef18e464d client/src/stores/usermanagement.js
--- a/client/src/stores/usermanagement.js	Thu Aug 09 10:13:09 2018 +0200
+++ b/client/src/stores/usermanagement.js	Thu Aug 09 13:11:35 2018 +0200
@@ -17,7 +17,27 @@
   },
   mutations: {
     usersLoaded: (state, data) => {
+      const addSavedAndNewFlags = user => {
+        return {
+          ...user,
+          isNew: false
+        };
+      };
+      data.users = data.users.map(addSavedAndNewFlags);
       state.users = data.users;
+    },
+    addUser: state => {
+      state.users = [
+        ...state.users,
+        {
+          country: "",
+          email: "",
+          extent: {},
+          role: "waterway_user",
+          user: "N.N",
+          isNew: true
+        }
+      ];
     }
   },
   actions: {
diff -r c63200982ce7 -r 1a2ef18e464d client/src/views/Users.vue
--- a/client/src/views/Users.vue	Thu Aug 09 10:13:09 2018 +0200
+++ b/client/src/views/Users.vue	Thu Aug 09 13:11:35 2018 +0200
@@ -11,6 +11,7 @@
               <div class="card-header text-white bg-info mb-3">
                 users
               </div>
+              <!-- <div><button @click="addUser" class="btn btn-primary pull-left" style="margin-left:25px;">+</button></div> -->
               <div class="card-body">
                 <div class="accordion" v-for="user in this.users" v-bind:key="user.name">
                   <Userdetail :user="user"></Userdetail>
@@ -68,7 +69,11 @@
   computed: {
     ...mapGetters("usermanagement", ["users"])
   },
-  methods: {},
+  methods: {
+    addUser() {
+      store.commit("usermanagement/addUser");
+    }
+  },
   beforeRouteEnter(to, from, next) {
     store
       .dispatch("usermanagement/loadUsers")
@@ -76,7 +81,7 @@
       .catch(error => {
         const { status, data } = error.response;
         app.$toast.error({
-          title: "Backend Error",
+          title: "Error while loading users",
           message: `${status}: ${data}`
         });
       });