setup for dynamic handling of user balance

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -10,7 +10,7 @@
         <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
       <b-row class="text-center">
-        <b-col>{{ $n($store.state.user.balance) }} GDD</b-col>
+        <b-col>{{ $n(balance) }} GDD</b-col>
       </b-row>
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
@@ -88,6 +88,10 @@ export default {
       default: true,
       description: 'Whether sidebar should autoclose on mobile when clicking an item',
     },
+    balance: {
+      type: Number,
+      default: 0,
+    },
   },
   provide() {
     return {

frontend/src/store/store.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
-import communityAPI from '../apis/communityAPI'
 import createPersistedState from 'vuex-persistedstate'
 
 export const store = new Vuex.Store({
@@ -20,13 +19,6 @@ export const store = new Vuex.Store({
       balance_gdt: 0,
     },
     modals: false,
-    optionAxios: {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Credentials': 'true',
-      },
-    },
   },
   getters: {},
   // Syncronous mutation of the state
@@ -65,13 +57,5 @@ export const store = new Vuex.Store({
       commit('email', null)
       sessionStorage.clear()
     },
-    accountBalance: async ({ commit, dispatch, state }) => {
-      const result = await communityAPI.balance(state.session_id)
-      if (result.success) {
-        commit('user_balance', result.result.data.balance)
-      } else {
-        //dispatch('logout')
-      }
-    },
   },
 })

frontend/src/views/KontoOverview/GddSend.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-row v-show="row_form">
+    <b-row v-show="showTransactionList">
       <b-col xl="12" md="12">
         <b-alert show dismissible variant="warning" class="text-center">
           <span class="alert-text" v-html="$t('form.attention')"></span>
@@ -16,8 +16,8 @@
 
             <div v-if="scan">
               <!-- <b-row>                                          
-                    <qrcode-capture @detect="onDetect"  capture="user" ></qrcode-capture>                     
-                </b-row> -->
+                   <qrcode-capture @detect="onDetect"  capture="user" ></qrcode-capture>                     
+                   </b-row> -->
 
               <qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect"></qrcode-stream>
 
@@ -78,7 +78,7 @@
               <br />
               <div>
                 <b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
-                <b-col v-if="$store.state.user.balance == form.amount" class="text-right">
+                <b-col v-if="balance == form.amount" class="text-right">
                   <b-badge variant="primary">{{ $t('form.max_gdd_info') }}</b-badge>
                 </b-col>
                 <b-input-group
@@ -98,7 +98,7 @@
                     placeholder="0.01"
                     step="0.01"
                     min="0.01"
-                    :max="$store.state.user.balance"
+                    :max="balance"
                     style="font-size: xx-large; padding-left: 20px"
                   ></b-form-input>
                 </b-input-group>
@@ -202,9 +202,8 @@ export default {
     BIcon,
   },
   props: {
-    row_form: { type: Boolean, default: true },
-    row_check: { type: Boolean, default: false },
-    row_thx: { type: Boolean, default: false },
+    balance: { type: Number, default: 0 },
+    showTransactionList: { type: Boolean, default: true },
   },
   data() {
     return {
@@ -224,6 +223,8 @@ export default {
         auto_sign: true,
       },
       send: false,
+      row_check: false,
+      row_thx: false,
     }
   },
   computed: {},
@@ -232,7 +233,6 @@ export default {
       this.scan = !this.scan
     },
     async onDecode(decodedString) {
-      //console.log('onDecode JSON.parse(decodedString)', JSON.parse(decodedString))
       const arr = JSON.parse(decodedString)
       this.form.email = arr[0].email
       this.form.amount = arr[0].amount
@@ -244,8 +244,9 @@ export default {
       this.ajaxCreateData.amount = this.form.amount
       this.ajaxCreateData.target_date = Date.now()
       this.ajaxCreateData.memo = this.form.memo
-
-      this.$emit('change-rows', { row_form: false, row_check: true, row_thx: false })
+      this.$emit('toggle-show-list', false)
+      this.row_check = true
+      this.row_thx = false
     },
     async sendTransaction() {
       this.ajaxCreateData.amount = this.ajaxCreateData.amount * 10000
@@ -256,16 +257,16 @@ export default {
         this.ajaxCreateData.amount,
         this.ajaxCreateData.memo,
       )
-      // console.log(result)
-
       if (result.success) {
-        // console.log('send success')
-
-        this.$emit('change-rows', { row_form: false, row_check: false, row_thx: true })
+        this.$emit('toggle-show-list', false)
+        this.row_check = false
+        this.row_thx = true
+        this.$emit('update-transctions', { ammount: Number(this.ajaxCreateData.amount) })
       } else {
-        // console.log('send error')
         alert('error')
-        this.$emit('change-rows', { row_form: true, row_check: false, row_thx: false })
+        this.$emit('toggle-show-list', true)
+        this.row_check = false
+        this.row_thx = false
       }
     },
     onReset(event) {
@@ -273,10 +274,12 @@ export default {
       this.form.email = ''
       this.form.amount = ''
       this.show = false
+      this.$emit('toggle-show-list', true)
+      this.row_check = false
+      this.row_thx = false
       this.$nextTick(() => {
         this.show = true
       })
-      this.$emit('change-rows', { row_form: true, row_check: false, row_thx: false })
     },
   },
 }

frontend/src/views/KontoOverview/GddStatus.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-row v-show="this.row_form">
+    <b-row v-show="showTransactionList">
       <b-col xl="6" md="6">
         <stats-card
           type="gradient-red"
@@ -8,7 +8,7 @@
           class="mb-4 h1"
           style="background-color: #ebebeba3 !important"
         >
-          {{ $n($store.state.user.balance) }} GDD
+          {{ $n(balance) }} GDD
         </stats-card>
       </b-col>
       <b-col xl="6" md="6">
@@ -29,7 +29,8 @@
 export default {
   name: 'GddStatus',
   props: {
-    row_form: { type: Boolean, default: true },
+    showTransactionList: { type: Boolean, default: true },
+    balance: { type: Number, default: 0 },
   },
 }
 </script>

frontend/src/views/KontoOverview/GddTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-list-group v-show="this.row_form">
+    <b-list-group v-show="showTransactionList">
       <b-list-group-item
         v-for="item in filteredItems"
         :key="item.id"
@@ -93,7 +93,7 @@ import communityAPI from '../../apis/communityAPI'
 export default {
   name: 'GddTable',
   props: {
-    row_form: { type: Boolean, default: true },
+    showTransactionList: { type: Boolean, default: true },
   },
   data() {
     return {

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <notifications></notifications>
-    <side-bar @logout="logout">
+    <side-bar @logout="logout" :balance="balance">
       <template slot="links">
         <b-nav-item href="#!" to="/overview">
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('send') }}</b-nav-text>
@@ -26,7 +26,7 @@
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
-          <router-view></router-view>
+          <router-view :balance="balance" @update-balance="updateBalance"></router-view>
         </fade-transition>
       </div>
       <content-footer v-if="!$route.meta.hideFooter"></content-footer>
@@ -57,6 +57,7 @@ import DashboardNavbar from './DashboardNavbar.vue'
 import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
+import communityAPI from '../../apis/communityAPI'
 
 export default {
   components: {
@@ -65,6 +66,11 @@ export default {
     // DashboardContent,
     FadeTransition,
   },
+  data() {
+    return {
+      balance: 0,
+    }
+  },
   methods: {
     initScrollbar() {
       let isWindows = navigator.platform.startsWith('Win')
@@ -78,10 +84,24 @@ export default {
       this.$store.dispatch('logout')
       this.$router.push('/login')
     },
+    async loadBalance() {
+      const result = await communityAPI.balance(this.$store.state.session_id)
+      if (result.success) {
+        this.balance = result.result.data.balance / 10000
+      } else {
+        // what to do when loading balance fails?
+      }
+    },
+    updateBalance(ammount) {
+      this.balance -= ammount
+    },
   },
   mounted() {
     this.initScrollbar()
   },
+  created() {
+    this.loadBalance()
+  },
 }
 </script>
 <style lang="scss"></style>

frontend/src/views/Pages/KontoOverview.vue

@@ -2,17 +2,17 @@
   <div>
     <base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
     <b-container fluid class="mt--7">
-      <gdd-status :row_form="row_form" />
+      <gdd-status :balance="balance" :show-transaction-list="showTransactionList" />
       <br />
       <gdd-send
-        :row_form="row_form"
-        :row_check="row_check"
-        :row_thx="row_thx"
-        @change-rows="setRows"
+        :balance="balance"
+        :show-transaction-list="showTransactionList"
+        @update-transctions="updateTransactions"
+        @toggle-show-list="toggleShowList"
       />
       <hr />
       <gdd-table
-        :row_form="row_form"
+        :show-transaction-list="showTransactionList"
         :transactions="transactions"
         @change-transactions="setTransactions"
       />
@@ -28,25 +28,24 @@ export default {
   name: 'Overview',
   data() {
     return {
-      row_form: true,
-      row_check: false,
-      row_thx: false,
       transactions: [],
+      showTransactionList: true,
     }
   },
+  props: {
+    balance: { type: Number, default: 0 },
+  },
   components: {
     GddStatus,
     GddSend,
     GddTable,
   },
-  created() {
-    this.$store.dispatch('accountBalance', this.$store.state.session_id)
-  },
   methods: {
-    setRows(rows) {
-      this.row_form = rows.row_form
-      this.row_check = rows.row_check
-      this.row_thx = rows.row_thx
+    toggleShowList(bool) {
+      this.showTransactionList = bool
+    },
+    updateTransactions(data) {
+      this.$emit('update-balance', data.ammount)
     },
     setTransactions(transactions) {
       this.transactions = transactions