From 0bba201d3334c5bd93947b12ed01527099c3bc7f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 16 Mar 2022 18:30:49 +0100
Subject: [PATCH] add components for transaction rows, chnage toast mesage, add
 computed decayObject()

---
 .../TransactionLinks/TransactionLink.vue      | 51 +++++++++++++++----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/TransactionLinks/TransactionLink.vue b/frontend/src/components/TransactionLinks/TransactionLink.vue
index 89f61230f..800e7b01c 100644
--- a/frontend/src/components/TransactionLinks/TransactionLink.vue
+++ b/frontend/src/components/TransactionLinks/TransactionLink.vue
@@ -1,15 +1,29 @@
 <template>
-  <div class="transaction-link">
-    <b-row class="gradido-background-18f50533 mb-2">
-      <b-col cols="2">{{ item.amount | GDD }}</b-col>
-      <b-col cols="2">{{ (item.amount - item.holdAvailableAmount) | GDD }}</b-col>
-      <b-col cols="4">{{ item.memo }}</b-col>
-      <b-col cols="2">{{ $moment(item.validUntil).fromNow() }}</b-col>
+  <div class="transaction-link gradido-custom-background">
+    <b-row class="mb-2 pt-2 pb-2">
       <b-col cols="2">
-        <b-button class="mr-2" size="sm" variant="outline-primary" @click="copy">
-          {{ $t('gdd_per_link.copy') }}
-        </b-button>
+        <type-icon color="text-danger" icon="link45deg" class="pt-4 pl-2" />
+      </b-col>
+      <b-col cols="9">
+        <amount-and-name-row :amount="item.amount" :text="$t('form.amount')" />
+        <memo-row :memo="item.memo" />
+        <date-row :date="item.validUntil" :diffNow="true" />
+        <decay-row :decay="decayObject" />
+      </b-col>
+
+      <b-col cols="1" class="text-right">
         <b-button
+          class="p-2"
+          size="sm"
+          variant="outline-primary"
+          @click="copy"
+          :title="$t('gdd_per_link.copy')"
+        >
+          <b-icon icon="clipboard"></b-icon>
+        </b-button>
+        <br />
+        <b-button
+          class="p-2 mt-3"
           size="sm"
           variant="outline-danger"
           @click="deleteLink(item.id)"
@@ -23,9 +37,21 @@
 </template>
 <script>
 import { deleteTransactionLink } from '@/graphql/mutations'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
+import MemoRow from '../TransactionRows/MemoRow'
+import DateRow from '../TransactionRows/DateRow'
+import DecayRow from '../TransactionRows/DecayRow'
 
 export default {
   name: 'TransactionLink',
+  components: {
+    TypeIcon,
+    AmountAndNameRow,
+    MemoRow,
+    DateRow,
+    DecayRow,
+  },
   props: {
     item: { type: Object, required: true },
   },
@@ -35,7 +61,7 @@ export default {
       navigator.clipboard
         .writeText(link)
         .then(() => {
-          this.toastSuccess(this.$t('gdd_per_link.link-copied'))
+          this.toastSuccess(this.$t('gdd_per_link.link-copied') + '\n' + link)
         })
         .catch(() => {
           this.toastError(this.$t('gdd_per_link.not-copied'))
@@ -61,5 +87,10 @@ export default {
       })
     },
   },
+  computed: {
+    decayObject() {
+      return { decay: this.item.amount - this.item.holdAvailableAmount }
+    },
+  },
 }
 </script>