From 83e07be898635f88c8bf83f02f85b9c0d1b5b4fd Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 2 Jul 2021 17:27:04 +0200
Subject: [PATCH] decay information component

---
 frontend/src/components/DecayInformation.vue  |  19 ++
 .../src/views/Layout/DashboardLayout_gdd.vue  |   2 +-
 .../AccountOverview/GddTransactionList.vue    | 221 ++++++++++--------
 3 files changed, 139 insertions(+), 103 deletions(-)
 create mode 100644 frontend/src/components/DecayInformation.vue

diff --git a/frontend/src/components/DecayInformation.vue b/frontend/src/components/DecayInformation.vue
new file mode 100644
index 000000000..5a5e8306d
--- /dev/null
+++ b/frontend/src/components/DecayInformation.vue
@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation',
+  props: {
+    decay: {
+      balance: '',
+      decay_duration: '',
+      decay_start: 0,
+      decay_end: 0,
+    },
+  },
+  mounted() {
+    console.log(this.decay)
+  },
+}
+</script>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 14456605b..517773892 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -128,7 +128,7 @@ export default {
       if (result.success) {
         this.GdtBalance = Number(result.result.data.gdtSum)
         this.transactions = result.result.data.transactions
-        console.log("this.transactions => ", this.transactions[1].decay.decay_start)
+        console.log('this.transactions => ', this.transactions[1].decay.decay_start)
         this.balance = Number(result.result.data.decay)
         this.bookedBalance = Number(result.result.data.balance)
         this.transactionCount = result.result.data.count
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index e3c2252bd..fdced417d 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="gdd-transaction-list"> 
+  <div class="gdd-transaction-list">
     <b-list-group>
       <b-list-group-item
-        v-for="(item) in transactions"
+        v-for="item in transactions"
         v-bind:key="item.transaction_id"
         style="background-color: #ebebeba3 !important"
       >
-        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + item.date + ''" >
+        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + item.date + ''">
           <div style="width: 8%">
             <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
           </div>
@@ -18,8 +18,8 @@
             {{ item.name ? item.name : $t('decay') }}
             <div v-if="item.date" class="text-sm">{{ $d($moment(item.date), 'long') }}</div>
             <!-- <p>{{ item.decay }}</p> -->
-            <p>{{ getTransaction(item.transaction_id)}} GDD</p>
-            <p>{{ getTransaction(item.transaction_id).decay}} GDD</p>
+            <p>{{ getTransaction(item.transaction_id) }} GDD</p>
+            <p>{{ getTransaction(item.transaction_id).decay }} GDD</p>
           </div>
           <div class="text-right" style="width: 5%">
             <b-button class="btn-sm">
@@ -30,37 +30,52 @@
         <b-collapse :id="'a' + item.date + ''" class="mt-2">
           <b-card>
             <b-card-title>
-              <div class="display-4"> {{ item.type === "receive" ? "empfangen:" : "gesendet:" }}</div>
+              <div class="display-4">
+                {{ item.type === 'receive' ? 'empfangen:' : 'gesendet:' }}
+              </div>
             </b-card-title>
             <b-card-body>
-              
-              <p class="display-2">   {{ $n(item.balance, 'decimal') }} GDD</p>
-              
-              <div> <div>am: </div><span class="display-4">{{ $d($moment(item.date), 'long') }}</span></div>
-              <div><div >an:</div> <span class="display-4">{{ item.name }}</span></div>
-              <div class="display-5"> {{ item.type === "receive" ? "Nachricht vom Absender:" : "Nachricht an Empfänger:" }}</div>
-              <div class="display-4">{{ item.memo }}</div>
-              <hr>
+              <p class="display-2">{{ $n(item.balance, 'decimal') }} GDD</p>
 
-              <div v-if="getTransaction(item.transaction_id).decay">Seit deiner letzten Transaction sind </div>
-              
-              
-              
-              {{ getTransaction(item.transaction_id).decay ? getTransaction(item.transaction_id).decay.balance : 'missing' }}
+              <div>
+                <div>am:</div>
+                <span class="display-4">{{ $d($moment(item.date), 'long') }}</span>
+              </div>
+              <div>
+                <div>an:</div>
+                <span class="display-4">{{ item.name }}</span>
+              </div>
+              <div class="display-5">
+                {{
+                  item.type === 'receive' ? 'Nachricht vom Absender:' : 'Nachricht an Empfänger:'
+                }}
+              </div>
+              <div class="display-4">{{ item.memo }}</div>
+              <hr />
+              Seit deiner letzten Transaction sind
+
+              <div v-if="getTransaction(item.transaction_id).decay">
+                <decay-information :decay="getTransaction(item.transaction_id).decay" />
+              </div>
+
+              {{
+                getTransaction(item.transaction_id).decay
+                  ? getTransaction(item.transaction_id).decay.balance
+                  : 'missing'
+              }}
               <!-- <p> {{ $moment.unix(getTransaction(item.transaction_id).descay_start).format('D.MM.YYYY - HH:mm:ss') }}</p>
                    <p> {{ $moment.unix(getTransaction(item.transaction_id).decay_end).format('D.MM.YYYY - HH:mm:ss') }}</p> -->
-              <div>{{  }} vergangen.</div>
-              <br>
+              <div>{{}} vergangen.</div>
+              <br />
               <!-- <div>{{ getTransaction(item.id).balance }} Vergänglichkeit.</div> -->
             </b-card-body>
-            
+
             <b-button v-b-toggle="'collapse-1-inner' + item.date" variant="secondary">
               {{ $t('transaction.more') }}
             </b-button>
             <b-collapse :id="'collapse-1-inner' + item.date" class="mt-2">
               <b-card>{{ item }}</b-card>
             </b-collapse>
-            
           </b-card>
         </b-collapse>
       </b-list-group-item>
@@ -81,87 +96,89 @@
 </template>
 
 <script>
- import PaginationButtons from '../../../components/PaginationButtons'
+import PaginationButtons from '../../../components/PaginationButtons'
+import DecayInformation from '../../../components/DecayInformation'
 
- const iconsByType = {
-   send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
-   receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
-   creation: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
-   decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '-' },
- }
+const iconsByType = {
+  send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
+  receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
+  creation: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
+  decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '-' },
+}
 
- export default {
-   name: 'gdd-transaction-list',
-   components: {
-     PaginationButtons,
-   },
-   data() {
-     return {
-       currentPage: 1,
-     }
-   },
-   props: {
-     transactions: { default: () => [] },
-     pageSize: { type: Number, default: 25 },
-     timestamp: { type: Number, default: 0 },
-     transactionCount: { type: Number, default: 0 },
-     showPagination: { type: Boolean, default: false },
-   },
-   watch: {
-     timestamp: {
-       immediate: true,
-       handler: 'updateTransactions',
-     },
-   },
-   computed: {
-     hasNext() {
-       return this.currentPage * this.pageSize < this.transactionCount
-     },
-     hasPrevious() {
-       return this.currentPage > 1
-     },
-     totalPages() {
-       return Math.ceil(this.transactionCount / this.pageSize)
-     },
-   },
-   methods: {
-     getTransaction(id) {
-       return this.transactions.find(t => t.transaction_id === id)
-     },
-     
-     updateTransactions() {
-       this.$emit('update-transactions', {
-         firstPage: this.currentPage,
-         items: this.pageSize,
-       })
-     },
-     getProperties(item) {
-       const type = iconsByType[item.type]
-       if (type)
-         return {
-           icon: type.icon,
-           class: type.classes + ' m-mb-1 font2em',
-           operator: type.operator,
-         }
-       this.throwError('no icon to given type')
-     },
-     throwError(msg) {
-       throw new Error(msg)
-     },
-     showNext() {
-       this.currentPage++
-       this.updateTransactions()
-     },
-     showPrevious() {
-       this.currentPage--
-       this.updateTransactions()
-     },
-   },
- }
+export default {
+  name: 'gdd-transaction-list',
+  components: {
+    PaginationButtons,
+    DecayInformation,
+  },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  },
+  props: {
+    transactions: { default: () => [] },
+    pageSize: { type: Number, default: 25 },
+    timestamp: { type: Number, default: 0 },
+    transactionCount: { type: Number, default: 0 },
+    showPagination: { type: Boolean, default: false },
+  },
+  watch: {
+    timestamp: {
+      immediate: true,
+      handler: 'updateTransactions',
+    },
+  },
+  computed: {
+    hasNext() {
+      return this.currentPage * this.pageSize < this.transactionCount
+    },
+    hasPrevious() {
+      return this.currentPage > 1
+    },
+    totalPages() {
+      return Math.ceil(this.transactionCount / this.pageSize)
+    },
+  },
+  methods: {
+    getTransaction(id) {
+      return this.transactions.find((t) => t.transaction_id === id)
+    },
+
+    updateTransactions() {
+      this.$emit('update-transactions', {
+        firstPage: this.currentPage,
+        items: this.pageSize,
+      })
+    },
+    getProperties(item) {
+      const type = iconsByType[item.type]
+      if (type)
+        return {
+          icon: type.icon,
+          class: type.classes + ' m-mb-1 font2em',
+          operator: type.operator,
+        }
+      this.throwError('no icon to given type')
+    },
+    throwError(msg) {
+      throw new Error(msg)
+    },
+    showNext() {
+      this.currentPage++
+      this.updateTransactions()
+    },
+    showPrevious() {
+      this.currentPage--
+      this.updateTransactions()
+    },
+  },
+}
 </script>
 <style>
- .el-table .cell {
-   padding-left: 0px;
-   padding-right: 0px;
- }
+.el-table .cell {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 </style>