From 1d20828f83216e4ed522b2c744ee3e9b97be6aa4 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 24 Oct 2023 20:14:46 +0200
Subject: [PATCH] Extract backtestResultEntry

---
 src/components/ftbot/BacktestResultSelect.vue | 14 ++-------
 .../ftbot/BacktestResultSelectEntry.vue       | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ftbot/BacktestResultSelectEntry.vue

diff --git a/src/components/ftbot/BacktestResultSelect.vue b/src/components/ftbot/BacktestResultSelect.vue
index 747a200a..4e3ca0d5 100644
--- a/src/components/ftbot/BacktestResultSelect.vue
+++ b/src/components/ftbot/BacktestResultSelect.vue
@@ -11,18 +11,7 @@
         @click="setBacktestResult(key)"
       >
         <template v-if="!result.metadata.editing">
-          <div class="d-flex flex-column me-2 text-start">
-            <div class="fw-bold">
-              {{ result.metadata.strategyName }} - {{ result.strategy.timeframe }}
-            </div>
-            <div class="text-small">
-              TradeCount: {{ result.strategy.total_trades }} - Profit:
-              {{ formatPercent(result.strategy.profit_total) }}
-            </div>
-            <div v-if="canUseModify" class="text-small" style="white-space: pre-wrap">
-              {{ result.metadata.notes }}
-            </div>
-          </div>
+          <BacktestResultSelectEntry :backtest-result="result" />
           <div class="d-flex">
             <b-button
               v-if="canUseModify"
@@ -59,6 +48,7 @@
 <script setup lang="ts">
 import { formatPercent } from '@/shared/formatters';
 import { BacktestResultInMemory, BacktestResultUpdate } from '@/types';
+import BacktestResultSelectEntry from '@/components/ftbot/BacktestResultSelectEntry.vue';
 
 defineProps({
   backtestHistory: {
diff --git a/src/components/ftbot/BacktestResultSelectEntry.vue b/src/components/ftbot/BacktestResultSelectEntry.vue
new file mode 100644
index 00000000..85e5d2bd
--- /dev/null
+++ b/src/components/ftbot/BacktestResultSelectEntry.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="d-flex flex-column me-2 text-start">
+    <div class="fw-bold">
+      {{ backtestResult.metadata.strategyName }} - {{ backtestResult.strategy.timeframe }}
+    </div>
+    <div class="text-small">
+      TradeCount: {{ backtestResult.strategy.total_trades }} - Profit:
+      {{ formatPercent(backtestResult.strategy.profit_total) }}
+    </div>
+    <div v-if="canUseModify" class="text-small" style="white-space: pre-wrap">
+      {{ backtestResult.metadata.notes }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatPercent } from '@/shared/formatters';
+import { BacktestResultInMemory } from '@/types';
+
+defineProps({
+  backtestResult: {
+    required: true,
+    type: Object as () => BacktestResultInMemory,
+  },
+  selectedBacktestResultKey: { required: false, default: '', type: String },
+  canUseModify: { required: false, default: false, type: Boolean },
+});
+</script>
+
+<style scoped></style>