From 7d9aca8f8fd957915c88ffe2441a46b4fef90e62 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 2 Sep 2020 20:53:59 +0200
Subject: [PATCH] Extract ProfitSymbol to seperate component

---
 src/components/ftbot/ProfitSymbol.vue | 24 ++++++++++++++++++++++++
 src/components/ftbot/TradeList.vue    | 16 +++++++++-------
 src/types/types.ts                    |  1 +
 3 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ftbot/ProfitSymbol.vue

diff --git a/src/components/ftbot/ProfitSymbol.vue b/src/components/ftbot/ProfitSymbol.vue
new file mode 100644
index 00000000..a3b40603
--- /dev/null
+++ b/src/components/ftbot/ProfitSymbol.vue
@@ -0,0 +1,24 @@
+<template>
+  <span>{{ isProfitable ? '&#x1F534;' : '&#x1F7E2;' }}</span>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Trade } from '@/types';
+
+//
+
+@Component({})
+export default class ProfitSymbol extends Vue {
+  @Prop({ required: true }) trade!: Trade;
+
+  get isProfitable() {
+    console.log(this.trade);
+    const res = (this.trade.close_profit ?? 1) < 0 || (this.trade.current_profit ?? 1) < 0;
+    console.log(res);
+    return res;
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue
index d3380bd4..da3d19ea 100644
--- a/src/components/ftbot/TradeList.vue
+++ b/src/components/ftbot/TradeList.vue
@@ -24,7 +24,7 @@
           </b-button>
         </template>
         <template v-slot:cell(pair)="row">
-          <span class="mr-1" v-html="profitSymbol(row.item)"></span>
+          <ProfitSymbol :trade="row.item" />
           <span>
             {{ row.item.pair }}
           </span>
@@ -48,11 +48,18 @@ import { namespace } from 'vuex-class';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { formatPercent } from '@/shared/formatters';
 import { Trade } from '@/types';
+import ProfitSymbol from './ProfitSymbol.vue';
 
 const ftbot = namespace('ftbot');
 
-@Component({})
+@Component({
+  components: { ProfitSymbol },
+})
 export default class TradeList extends Vue {
+  $refs!: {
+    tradesTable: HTMLFormElement;
+  };
+
   @Prop({ required: true })
   trades!: Array<Trade>;
 
@@ -103,11 +110,6 @@ export default class TradeList extends Vue {
     ...(this.activeTrades ? [{ key: 'actions' }] : []),
   ];
 
-  profitSymbol(item) {
-    // Red arrow / green circle
-    return item.close_profit < 0 || item.current_profit < 0 ? `&#x1F534;` : `&#x1F7E2;`;
-  }
-
   forcesellHandler(item) {
     this.$bvModal
       .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`)
diff --git a/src/types/types.ts b/src/types/types.ts
index 5154696a..e129d526 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -90,6 +90,7 @@ export interface Trade {
   fee_close_currency?: string;
 
   current_rate?: number;
+  current_profit?: number;
   sell_reason?: string;
   min_rate?: number;
   max_rate?: number;