From 601ccd9ef427f406b3eab6251b8b3f99e0b401c1 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 3 Jun 2021 14:49:09 +0200
Subject: [PATCH] user data can be updated in DB

---
 frontend/src/apis/loginAPI.js                 |  6 +--
 frontend/src/store/store.js                   | 19 +++++--
 .../UserProfile/UserCard_FormUserData.vue     | 50 ++++++++++---------
 .../src/views/Pages/UserProfileOverview.vue   | 42 +---------------
 4 files changed, 46 insertions(+), 71 deletions(-)

diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js
index 5f4e72807..850a3a44d 100644
--- a/frontend/src/apis/loginAPI.js
+++ b/frontend/src/apis/loginAPI.js
@@ -86,13 +86,13 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'getUserInfos', payload)
   },
-  updateUserInfos: async (sessionId, email, firstName, lastName /*, description */) => {
+  updateUserInfos: async (sessionId, email, data) => {
     const payload = {
       session_id: sessionId,
       email,
       update: {
-        'User.first_name': firstName,
-        'User.last_name': lastName,
+        'User.first_name': data.firstName,
+        'User.last_name': data.lastName,
         /* 'User.description': description, */
       },
     }
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 79f04da61..02e8f0561 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -14,9 +14,14 @@ export const mutations = {
     state.sessionId = sessionId
   },
   username: (state, username) => {
-    // console.log('store username mutation', username)
     state.username = username
   },
+  firstName: (state, firstName) => {
+    state.firstName = firstName
+  },
+  lastName: (state, lastName) => {
+    state.lastName = lastName
+  },
 }
 
 export const actions = {
@@ -24,12 +29,16 @@ export const actions = {
     commit('sessionId', data.sessionId)
     commit('email', data.user.email)
     commit('language', data.user.language)
-    commit('username', data.user.username ? '' : 'teststoreusername')
+    commit('username', data.user.username)
+    commit('firstName', data.user.first_name)
+    commit('lastName', data.user.last_name)
   },
   logout: ({ commit, state }) => {
     commit('sessionId', null)
     commit('email', null)
-    commit('username', null)
+    commit('username', '')
+    commit('firstName', '')
+    commit('lastName', '')
     sessionStorage.clear()
   },
 }
@@ -45,7 +54,9 @@ export const store = new Vuex.Store({
     email: '',
     language: null,
     modals: false,
-    username: 'testname',
+    firstName: '',
+    lastName: '',
+    username: '',
   },
   getters: {},
   // Syncronous mutation of the state
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
index 87490dfab..e89a17e84 100644
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@@ -3,14 +3,14 @@
     <b-container>
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
-          <a href="#userdata_form" v-if="edit_userdata" @click="edit_userdata = !edit_userdata">
+          <a href="#userdata_form" v-if="editUserdata" @click="editUserdata = !editUserdata">
             <span>{{ $t('form.edit') }}</span>
           </a>
           <div v-else>
             <a href="#userdata_form" @click="onSubmit">
               <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
             </a>
-            <a href="#userdata_form" @click="edit_userdata = !edit_userdata">
+            <a href="#userdata_form" @click="editUserdata = !editUserdata">
               <span>
                 <b>{{ $t('form.cancel') }}</b>
               </span>
@@ -24,8 +24,8 @@
           <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
             <small>{{ $t('form.firstname') }}</small>
           </b-col>
-          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-            {{ userdata.first_name }}
+          <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
+            {{ form.firstName }}
           </b-col>
           <b-col v-else class="col-md-9 col-sm-10">
             <b-input type="text" v-model="form.firstName"></b-input>
@@ -35,8 +35,8 @@
           <b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
             <small>{{ $t('form.lastname') }}</small>
           </b-col>
-          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-            {{ userdata.last_name }}
+          <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
+            {{ form.lastName }}
           </b-col>
           <b-col v-else class="col-md-9 col-sm-10">
             <b-input type="text" v-model="form.lastName"></b-input>
@@ -46,7 +46,7 @@
           <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
             <small>{{ $t('form.description') }}</small>
           </b-col>
-          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
+          <b-col v-if="editUserdata" class="col-md-9 col-sm-10">
             {{ UserProfileTestData.desc }}
           </b-col>
           <b-col v-else class="col-md-9 col-sm-10">
@@ -58,37 +58,41 @@
   </b-card>
 </template>
 <script>
+import loginAPI from '../../../apis/loginAPI'
+
 export default {
   name: 'FormUserData',
   props: {
-    userdata: { type: Object },
     UserProfileTestData: { type: Object },
   },
   data() {
     return {
-      edit_userdata: true,
+      editUserdata: true,
       sessionId: this.$store.state.sessionId,
-      email: null,
       form: {
-        firstName: this.userdata.first_name,
-        lastName: this.userdata.last_name,
+        firstName: this.$store.state.firstName,
+        lastName: this.$store.state.lastName,
         desc: this.UserProfileTestData.desc,
       },
     }
   },
   methods: {
     async onSubmit() {
-      // this.$emit('update-userdata')
-      // console.log("form name:", this.first_name)
-      // console.log("form nachname:", this.last_name)
-      // console.log("form desc:", this.desc)
-      //  if (result.success) {
-      //    console.log("updateUserdata success")
-      //    console.log(result)
-      //
-      //  } else {
-      //    alert(result.result.message)
-      //  }
+      const result = await loginAPI.updateUserInfos(
+        this.$store.state.sessionId,
+        this.$store.state.email,
+        {
+          firstName: this.form.firstName,
+          lastName: this.form.lastName,
+        },
+      )
+      if (result.success) {
+        this.$store.commit('firstName', this.form.firstName)
+        this.$store.commit('lastName', this.form.lastName)
+        this.editUserdata = true
+      } else {
+        alert(result.result.message)
+      }
     },
   },
 }
diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue
index fb488bc5f..def5289cb 100644
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@@ -1,17 +1,12 @@
 <template>
   <b-container fluid>
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <form-user-data
-      :userdata="userdata"
-      @update-userdata="updateUserdata"
-      :UserProfileTestData="UserProfileTestData"
-    />
+    <form-user-data :UserProfileTestData="UserProfileTestData" />
     <form-username />
     <form-user-passwort />
   </b-container>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI'
 import UserCard from './UserProfile/UserCard.vue'
 import FormUserData from './UserProfile/UserCard_FormUserData.vue'
 import FormUsername from './UserProfile/UserCard_FormUsername.vue'
@@ -29,41 +24,6 @@ export default {
     transactionCount: { type: Number, default: 0 },
     UserProfileTestData: { type: Object },
   },
-  data() {
-    return {
-      userdata: {},
-    }
-  },
-  methods: {
-    async getUserdata() {
-      const result = await loginAPI.getUserInfos(
-        this.$store.state.sessionId,
-        this.$store.state.email,
-      )
-      // console.log(result.result.data.userData)
-      if (result.success) {
-        this.userdata = result.result.data.userData
-      } else {
-        alert(result.result.message)
-      }
-    },
-    async updateUserdata(data) {
-      // console.log(data)
-      const result = await loginAPI.updateUserInfos(
-        this.$store.state.sessionId,
-        this.$store.state.email,
-      )
-      // console.log(result)
-      if (result.success) {
-        alert(result)
-      } else {
-        alert(result.result.message)
-      }
-    },
-  },
-  async created() {
-    this.getUserdata()
-  },
 }
 </script>
 <style></style>