From 345c0f09d9546a9be3f5090070c77122b9922806 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Tue, 2 Mar 2021 10:24:04 +0100
Subject: [PATCH] add transactionslist scelet

---
 frontend/src/App.vue                          |   2 +-
 frontend/src/routes/routes.js                 |  14 +-
 frontend/src/store/store.js                   |  40 +++-
 frontend/src/views/KontoOverview.vue          | 100 +---------
 frontend/src/views/KontoOverview/GddSent.vue  | 174 ++++++++----------
 .../src/views/KontoOverview/GddStatus.vue     |   7 +-
 frontend/src/views/KontoOverview/GddTable.vue |  38 ++--
 frontend/src/views/Pages/Login.vue            |   1 +
 frontend/src/views/{ => Pages}/thx.vue        |   0
 9 files changed, 147 insertions(+), 229 deletions(-)
 rename frontend/src/views/{ => Pages}/thx.vue (100%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index bb9330920..41b504ec1 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -17,7 +17,7 @@ export default {
         this.$store.state.email = this.$cookies.get('gdd_u')
         this.$router.push('/KontoOverview') 
       }else {
-        this.$router.push("/Login")
+       this.$router.push("/Login")
       } 
     }
 }
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 15de73163..844b323b6 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -8,23 +8,23 @@ import NotFound from '@/views/NotFoundPage.vue'
 const routes = [
   {
     path: '/',
-    redirect: 'landing',
+    redirect: 'login',
     component: AuthLayoutGDD,
     children: [
       {
         path: '/login',
         name: 'login',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Login.vue')
+        component: () => import('../views/Pages/Login.vue')
       },
       {
         path: '/thx',
         name: 'Thanks',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/thx.vue')
+        component: () => import('../views/Pages/thx.vue')
       },      
       {
         path: '/register',
         name: 'register',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Register.vue')
+        component: () => import('../views/Pages/Register.vue')
       },
     ]
   },
@@ -36,7 +36,7 @@ const routes = [
       {
         path: '/KontoOverview',
         name: 'Kontoübersicht',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/KontoOverview.vue'),
+        component: () => import('../views/KontoOverview.vue'),
         meta: {
           requiresAuth: true
         }
@@ -44,7 +44,7 @@ const routes = [
       {
         path: '/profile',
         name: 'profile',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/UserProfile.vue')
+        component: () => import('../views/Pages/UserProfile.vue')
       }
     ]
   },
@@ -57,7 +57,7 @@ const routes = [
       {
         path: '/AdminOverview',
         name: 'Adminübersicht',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/AdminOverview.vue'),
+        component: () => import('../views/AdminOverview.vue'),
         meta: {
           requiresAuth: true
         }
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index cb85c42c5..848ce1e4b 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -4,6 +4,8 @@ Vue.use(Vuex)
 import router from '../routes/router.js'
 import loginAPI from '../apis/loginAPI'
 import communityAPI from '../apis/communityAPI'
+import axios from 'axios'
+
 
 export const store = new Vuex.Store({
   state: {
@@ -11,7 +13,8 @@ export const store = new Vuex.Store({
     email: null,
     user : {
       name:"",
-      balance: 0
+      balance: 0,
+      balance_gdt: 0
     },
     ajaxCreateData:  {
       session_id : '',
@@ -44,6 +47,10 @@ export const store = new Vuex.Store({
       console.log('mutation: user_balance')
       state.user.balance = balance / 10000
     },
+    user_balance_gdt: (state,balance) => {
+      console.log('mutation: user_balance_gdt')
+      state.user.balance_gdt = balance / 10000
+    },
     transactions: (state,transactions) => {
       console.log('mutation: transactions')
       state.transactions = transactions
@@ -110,14 +117,29 @@ export const store = new Vuex.Store({
       }
     },
     ajaxListTransactions: async ({commit, dispatch, state}) => {
-      console.log('action: ajaxListTransactions')
-      const result = await communityAPI.transactions(state.session_id)
-      console.log(result)
-      if(result.success) {
-        commit('transactions', result.result.data.transactions)
-      } else {
-        dispatch('logout')
-      }
+      console.log('action: ajaxListTransactions', state.session_id)
+     // const result = await communityAPI.transactions(state.session_id)
+     
+       axios.get("http://localhost/state-balances/ajaxListTransactions/"+ state.session_id).then((result) => {
+         console.log("result",result)
+         console.log("result.state",result.data.state)
+        
+         console.log("result.data.state == 'success'",result.data.state == "success")
+       if(result.data.state == "success") {
+        console.log("result.count",result.data.count)
+         console.log("result.gdtSum",result.data.gdtSum)
+         console.log("result.transactions",result.data.transactions)
+        commit('transactions', result.data.transactions)
+        commit('user_balance_gdt', result.data.gdtSum)
+     } else {
+       dispatch('logout')
+     }
+
+      }, (error) => {
+        console.log(error);
+      });
+      
+      
     },
     accountBalance: async ({ commit, dispatch, state }) => {
       console.log('action: accountBalance')
diff --git a/frontend/src/views/KontoOverview.vue b/frontend/src/views/KontoOverview.vue
index 4cfcddfe7..130f7e6fa 100644
--- a/frontend/src/views/KontoOverview.vue
+++ b/frontend/src/views/KontoOverview.vue
@@ -8,21 +8,18 @@
       
       <!-- Card sent GDD-->
       <gdd-sent />
-      <br>
-      <br>
+      <hr>
       <!-- Card table -->
       <div>
         <gdd-table />
        
       </div>
-      <br>
-      <br>
+     <hr>
       <!-- Card table -->
       <div>
         <gdd-add-work />
        
       </div>
- <br>
       <br>
       <!-- Card table -->
       <div>
@@ -34,35 +31,7 @@
     <div @click="$store.dispatch('ajaxListTransactions')">this.$store.dispatch('ajaxListTransactions')</div>
     <div @click="$store.dispatch('accountBalance')">this.$store.dispatch('accountBalance')</div> 
      <hr>
-    <h3>User Balanace</h3>
-    <small>this.$store.state.user.balance</small>
-    <p>
-       {{this.$store.state.user}}
-    </p>
-     <hr>
-    <h3>User Balanace</h3>
-    <small>this.$store.state.user.balance</small>
-    <p>
-      {{this.$store.state.user.balance}}
-    </p>
-
- <hr>
-    <h3>User Transactions List</h3>
-    <small>this.$store.state.transactions</small>
-    <p>
-      {{this.$store.state.transactions}}
-    </p>
-
-
- <hr>
-    <h3>User Participation List</h3>
-    <small>/public/json-example/userparticipation.json</small>
-    <p>
-      {{userparticipation}}
-    </p>
-
-    
-  </div>  
+  </div>
 </template>
 
 <script>
@@ -72,72 +41,15 @@
    import GddTable from './KontoOverview/GddTable.vue';
    import GddAddWork from './KontoOverview/GddAddWork.vue';
    import GddWorkTable from './KontoOverview/GddWorkTable.vue';
-   import axios from 'axios';
 
-  export default {
-    data(){
-      return {
-        usertransactions: {},
-        userdata: {},
-        userparticipation: {}
-      }
-    },
+  export default {  
     components: {
         GddStatus,
         GddSent,
         GddTable,
         GddAddWork,
-        GddWorkTable,
-        //axios
-     },
-     created() {
-        
-     },
-     methods: {
-         UserData() {
-          axios.get("/json-example/userdata.json").then((d) => {
-          console.log(d);
-          this.userdata = d.data;
-          
-        }, (error) => {
-          console.log(error);
-        });
-        },
-        /*UserTransactions() {
-          axios.get("/json-example/usertransactions.json").then((transactions) => {
-          console.log(transactions);
-          this.usertransactions = transactions.data;
-          
-        }, (error) => {
-          console.log(error);
-        });
-        },*/
-        UserParticitions() {
-          axios.get("/json-example/userparticipation.json").then((participation) => {
-          console.log(participation);
-          this.userparticipation = participation.data;
-          
-        }, (error) => {
-          console.log(error);
-        });
-        }
-     },
-        created() {
-        // Simple GET request using axios
-        // axios.get("https://api.npms.io/v2/search?q=vue").then((response) => {
-        //   console.log(response);
-        //   this.totalVuePackages = response.data.total;
-        //   this.dataVuePackages = response.data;
-        // }, (error) => {
-        //   console.log(error);
-        // });
-        /////////////////////////
-      },
-      mounted() {
-        this.UserData();
-        //this.UserTransactions();
-        this.UserParticitions();
-      },
+        GddWorkTable
+     }
   };
 </script>
 
diff --git a/frontend/src/views/KontoOverview/GddSent.vue b/frontend/src/views/KontoOverview/GddSent.vue
index 79c4ad32d..0f6cbfec0 100644
--- a/frontend/src/views/KontoOverview/GddSent.vue
+++ b/frontend/src/views/KontoOverview/GddSent.vue
@@ -1,79 +1,68 @@
 <template>
   <div>
-      <b-row>
-        <b-col xl="12" md="12">
-         <base-button  icon type="primary" size="lg"  v-b-toggle.collapse-1>
+    <b-row>
+      <b-col xl="12" md="12">
+          <base-button  icon type="primary" size="lg"  v-b-toggle.collapse-1>
             <span class="btn-inner--icon"><i class="ni ni-curved-next"></i></span>
             <span class="btn-inner--text">{{ $t('site.overview.send_gradido') }} </span>
           </base-button>
-            <b-collapse id="collapse-1" class="mt-2">
-              <b-card >
-              
-                  <div  v-if="scan">
-                    <b-row>
-                                          
-                       <qrcode-capture @detect="onDetect"  capture="user" ></qrcode-capture>
-                     
-                      </b-row>
-                     
-                        <b-row>
-                    
+          <b-collapse id="collapse-1" class="mt-2">
+            <b-card >              
+              <div  v-if="scan">
+                <b-row>                                          
+                    <qrcode-capture @detect="onDetect"  capture="user" ></qrcode-capture>                     
+                </b-row>                     
+                <b-row>                     
+                  <qrcode-stream @decode="onDecode" @detect="onDetect" ></qrcode-stream>
+                    <b-alert show  variant="secondary">
+                        
+                        <span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
+                    </b-alert>
+                    <b-alert show variant="warning" >
                       
-                          <qrcode-stream @decode="onDecode" @detect="onDetect" ></qrcode-stream>
-    <b-alert show  variant="secondary">
-        
-        <span class="alert-text"><strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners</span>
-    </b-alert>
- <b-alert show variant="warning" >
-   
-  <span class="alert-text"  @click="scan=false"><strong>abrechen!</strong></span>
-</b-alert>
-                          
-                                               
-                      
-                    </b-row>  
+                      <span class="alert-text"  @click="scan=false"><strong>abrechen!</strong></span>
+                    </b-alert>
+                </b-row>  
                  
-                     </div>
-                    <validation-observer v-slot="{handleSubmit}" ref="formValidator">             
-                    <b-form  role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset" v-if="show">
-                     
-                      <br>
-                      <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
-                      <br>
-                      <div>
-                        <b-input-group
-                          id="input-group-1"
-                            label="Empfänger:"
-                            label-for="input-1"
-                            description="We'll never share your email with anyone else."
-                             size="lg"
-                           class="mb-3"
-                            >
-                              <b-input-group-prepend>
-                                  <b-button variant="outline-primary"> 
-                                    <img src="img/icons/gradido/qr-scan-pure.png" width="50" @click="scan=true"/></b-button>
-                              </b-input-group-prepend>
-                          <b-form-input 
-                              id="input-1"
-                              v-model="form.email"
-                              type="email"
-                              placeholder="E-Mail"
-                              :rules="{required: true, email: true}"
-                              required
-                              style="font-size: xx-large; padding-left:20px"></b-form-input>
-                        </b-input-group>
-                      </div>
-                      <br>                
-                      <div>
-                        <b-input-group id="input-group-2" label="Betrag:" label-for="input-2"
+              </div>
+              <validation-observer v-slot="{handleSubmit}" ref="formValidator">             
+                <b-form  role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset" v-if="show">                     
+                  <br>
+                  <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
+                  <br>
+                  <div>
+                    <b-input-group
+                      id="input-group-1"
+                        label="Empfänger:"
+                        label-for="input-1"
+                        description="We'll never share your email with anyone else."
                           size="lg"
-                          class="mb-3"
-                          > 
-                            <b-input-group-prepend>
-                                  <b-button variant="outline-primary"> 
-                                      <img src="img/icons/gradido/plus.png" width="50">  
-                                    </b-button>
-                            </b-input-group-prepend>
+                        class="mb-3"
+                        >
+                          <b-input-group-prepend>
+                              <b-button variant="outline-primary"> 
+                                <img src="img/icons/gradido/qr-scan-pure.png" width="50" @click="scan=true"/></b-button>
+                          </b-input-group-prepend>
+                      <b-form-input 
+                          id="input-1"
+                          v-model="form.email"
+                          type="email"
+                          placeholder="E-Mail"
+                          :rules="{required: true, email: true}"
+                          required
+                          style="font-size: xx-large; padding-left:20px"></b-form-input>
+                    </b-input-group>
+                  </div>
+                  <br>                
+                  <div>
+                    <b-input-group id="input-group-2" label="Betrag:" label-for="input-2"
+                      size="lg"
+                      class="mb-3"> 
+                        <b-input-group-prepend>
+                          <b-button variant="outline-primary"> 
+                             <img src="img/icons/gradido/plus.png" width="50">  
+                          </b-button>
+                        </b-input-group-prepend>
                         <b-form-input  
                           id="input-2"                          
                           v-model="form.amount"
@@ -85,37 +74,34 @@
                           style="font-size: xx-large; padding-left:20px">
                         </b-form-input>
                         
-                        <b-input-group-prepend>
-                           
-                             <b-button > 
-                                        <div class="h1">GDD</div>
-                                    </b-button>
+                        <b-input-group-prepend>                           
+                          <b-button > 
+                            <div class="h1">GDD</div>
+                          </b-button>
                         </b-input-group-prepend>
 
-                      </b-input-group>
-                           
-                      <b-input-group  >
-                        <b-input-group-prepend>
-                           
-                             <b-button > 
-                                        <h1><b-icon icon="chat-right-text"></b-icon></h1>
-                                    </b-button>
-                        </b-input-group-prepend>
-                        <b-form-textarea v-model="form.memo"></b-form-textarea>
-                      </b-input-group>
+                    </b-input-group>                           
+                    <b-input-group>
+                      <b-input-group-prepend>                          
+                        <b-button > 
+                          <h1><b-icon icon="chat-right-text"></b-icon></h1>
+                        </b-button>
+                      </b-input-group-prepend>
+                      <b-form-textarea v-model="form.memo"></b-form-textarea>
+                    </b-input-group>
  
-                    </div>
-                    <br>
-                    <b-button type="submit" variant="primary">jetzt versenden</b-button>
-                    <b-button type="reset" variant="danger">Cancel</b-button>
-                    <br>
-                  </b-form> 
-                    </validation-observer>
+                  </div>
+                  <br>
+                  <b-button type="submit" variant="primary">jetzt versenden</b-button>
+                  <b-button type="reset" variant="danger">Cancel</b-button>
+                  <br>
+                </b-form> 
+              </validation-observer>
                
-              </b-card>
-            </b-collapse>
+            </b-card>
+          </b-collapse>
         </b-col>
-      </b-row>
+    </b-row>
   </div>
 </template>
 
diff --git a/frontend/src/views/KontoOverview/GddStatus.vue b/frontend/src/views/KontoOverview/GddStatus.vue
index bffb6933a..1803d1149 100644
--- a/frontend/src/views/KontoOverview/GddStatus.vue
+++ b/frontend/src/views/KontoOverview/GddStatus.vue
@@ -15,9 +15,9 @@
         <b-col xl="6" md="6">
           <stats-card :title="$t('site.overview.gradido_received')"
                       type="gradient-orange"
-                      :sub-title="balance_gdt"
+                      sub-title="balance_gdt"
                       class="mb-4">
-                  {{ balance_gdt }} GDT
+                  {{  $store.state.user.balance_gdt.toFixed(4) }} GDT
             <template slot="footer"> 
               <span class="text-nowrap">Wird nur angezeigt wenn user GDT besitzt.</span>
             </template>
@@ -33,11 +33,10 @@ export default {
   data(){
     return {
       balance_gdd: this.$store.state.user.balance,
-      balance_gdt: "0",
+      balance_gdt: this.$store.state.user.balance_gdt,
     }
   },
   mounted() {
-  
     this.$store.dispatch('accountBalance')
   },
 };
diff --git a/frontend/src/views/KontoOverview/GddTable.vue b/frontend/src/views/KontoOverview/GddTable.vue
index ccc29d67e..7d02dfc82 100644
--- a/frontend/src/views/KontoOverview/GddTable.vue
+++ b/frontend/src/views/KontoOverview/GddTable.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <!--
+  
         <b-table striped hover :items="items" :fields="fields" :tbody-tr-class="rowClass" responsive="true" >
           <template  #cell(status)="row">   
-            <img  v-if="row.item.status === 'sent' " src="img/icons/gradido/minus.png" width="50" />          
+            <img  v-if="row.item.type === 'sent' " src="img/icons/gradido/minus.png" width="50" />          
             <img  v-else src="img/icons/gradido/plus-low.png" width="50" />            
           </template>
           <template #cell(details)="row">
@@ -12,16 +12,16 @@
             </b-button>        
           </template>
 
-          <-- Table details  -- >
+          <!-- Table details  -->
           <template #row-details="row">
             <b-card>
               <b-row class="mb-2">
                 <b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.amount') }}:</b></b-col>
-                <b-col>{{ row.item.amount }} GDD</b-col>
+                <b-col>{{ row.item.balance }} GDD</b-col>
               </b-row>
               <b-row class="mb-2">
                 <b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.decay') }}: </b></b-col>
-                <b-col>{{ row.item.isActive }}0.0032 GDD</b-col>
+                <b-col>{{ row.item.memo }} </b-col>
               </b-row>
               <b-row class="mb-2">
                 <b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.sender') }}: </b></b-col>
@@ -33,16 +33,16 @@
             </b-card>
           </template>
         </b-table>
-        -->
+    
         <hr>
 
         <b-list-group > 
           <b-list-group-item v-for="item in items" :key="item.id"> 
           <div class="d-flex w-100 justify-content-between"  @click="toogle(item)" >
-            <b-icon v-if="item.status === 'sent'" icon="box-arrow-left"   class="m-1"  font-scale="2" style="color:red"></b-icon>
+            <b-icon v-if="item.type === 'sent'" icon="box-arrow-left"   class="m-1"  font-scale="2" style="color:red"></b-icon>
             <b-icon v-else icon="box-arrow-right" class="m-1"  font-scale="2" style="color:green" ></b-icon>       
-              <h1 class="mb-1">{{item.betrag}} <small>GDD</small></h1>
-              <h2 class="text-muted"><small>{{item.datum}}</small> - {{item.name}}</h2>
+              <h1 class="mb-1">{{item.balance}} <small>GDD</small></h1>
+              <h2 class="text-muted"><small>{{item.date}}</small> - {{item.name}}</h2>
             </div>
           </b-list-group-item>
         </b-list-group>
@@ -58,28 +58,26 @@ export default {
   data(){
     return {
         form: [],
-        fields: [ 'status', 'betrag', 'name', 'datum', 'details'],
-        items: [
-          {  id: 1, betrag: 1000, name: 'Dickerson', datum: '12.12.20', datel: '12.12.2020 14:04', status: 'received' },
-          {  id: 2, betrag: 302,  name: 'Larsen',    datum: '22.06.20', datel: '22.06.2020 22:23', status: 'sent'  },
-          {  id: 3, betrag: 89,   name: 'Geneva',    datum: '15.04.20', datel: '15.04.2020 12:55', status: 'sent' },
-          {  id: 4, betrag: 1000, name: 'Community', datum: '10.03.20', datel: '10.03.2020 18:20', status: 'received'}
-        ]      
+        fields: [ 'balance', 'date', 'memo', 'name', 'transaction_id', 'type','details'],       
+        items: this.$store.state.transactions
+
     };
   },
   methods: {
      rowClass(item, type) {
         if (!item || type !== 'row') return
-        if (item.status === 'received') return 'table-success'
-        if (item.status === 'sent') return 'table-warning'
-        if (item.status === 'earned') return 'table-primary'
+        if (item.type === 'received') return 'table-success'
+        if (item.type === 'sent') return 'table-warning'
+        if (item.type === 'create') return 'table-primary'
       },
       toogle(item) {
         const temp = '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
 
       }
   },
-  watch: { 
+  mounted() {
+     this.$store.dispatch('ajaxListTransactions')
+     console.log("this.items", this.items)
   }
 };
 </script>
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 686d024f1..7edb033ec 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -74,6 +74,7 @@
 </template>
 <script>
   export default {
+    name: "login",
     data() {
       return {
         model: {
diff --git a/frontend/src/views/thx.vue b/frontend/src/views/Pages/thx.vue
similarity index 100%
rename from frontend/src/views/thx.vue
rename to frontend/src/views/Pages/thx.vue