From 13ff8966716f1ac9790289a2b6cbec433bb4e3ab Mon Sep 17 00:00:00 2001
From: Tako <me@example.com>
Date: Fri, 14 Jul 2023 16:59:43 +0000
Subject: [PATCH] ability to see orders in trade navigation

---
 src/components/ftbot/TradeListNav.vue | 51 ++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/components/ftbot/TradeListNav.vue b/src/components/ftbot/TradeListNav.vue
index 6f8eda89..9f8f7ede 100644
--- a/src/components/ftbot/TradeListNav.vue
+++ b/src/components/ftbot/TradeListNav.vue
@@ -9,7 +9,7 @@
         >Trade Navigation {{ sortNewestFirst ? '&#8595;' : '&#8593;' }}
       </b-list-group-item>
       <b-list-group-item
-        v-for="trade in sortedTrades"
+        v-for="(trade, i) in sortedTrades"
         :key="trade.open_timestamp"
         button
         class="d-flex flex-wrap justify-content-between align-items-center py-1"
@@ -17,18 +17,34 @@
         :active="trade.open_timestamp === selectedTrade.open_timestamp"
         @click="onTradeSelect(trade)"
       >
-        <div>
-          <span v-if="botStore.activeBot.botState.trading_mode !== 'spot'">{{
-            trade.is_short ? 'S-' : 'L-'
-          }}</span>
-          <DateTimeTZ :date="trade.open_timestamp" />
+        <div class="d-flex flex-column">
+          <div>
+            <span v-if="botStore.activeBot.botState.trading_mode !== 'spot'">{{
+              trade.is_short ? 'S-' : 'L-'
+            }}</span>
+            <DateTimeTZ :date="trade.open_timestamp" />
+          </div>
+          <TradeProfit :trade="trade" class="my-1" />
+          <ProfitPill
+            v-if="backtestMode"
+            :profit-ratio="trade.profit_ratio"
+            :stake-currency="botStore.activeBot.stakeCurrency"
+          />
         </div>
-        <TradeProfit :trade="trade" />
-        <ProfitPill
-          v-if="backtestMode"
-          :profit-ratio="trade.profit_ratio"
-          :stake-currency="botStore.activeBot.stakeCurrency"
-        />
+        <b-button size="sm" @click="ordersVisible[i] = !ordersVisible[i]"
+          ><i-mdi-chevron-right v-if="!ordersVisible[i]" />
+          <i-mdi-chevron-down v-if="ordersVisible[i]" />
+        </b-button>
+        <b-collapse v-model="ordersVisible[i]">
+          <ul class="px-3 m-0">
+            <li
+              v-for="order in trade.orders?.filter((o) => o.order_filled_timestamp !== null)"
+              :key="order.order_timestamp"
+            >
+              {{ order.ft_order_side }} {{ order.amount }} at {{ order.safe_price }}
+            </li>
+          </ul>
+        </b-collapse>
       </b-list-group-item>
       <b-list-group-item v-if="trades.length === 0">No trades to show...</b-list-group-item>
     </b-list-group>
@@ -39,7 +55,7 @@
 import { Trade } from '@/types';
 import TradeProfit from '@/components/ftbot/TradeProfit.vue';
 import ProfitPill from '@/components/general/ProfitPill.vue';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 
@@ -67,6 +83,15 @@ const sortedTrades = computed(() => {
         : a.open_timestamp - b.open_timestamp,
     );
 });
+
+const ordersVisible = ref(sortedTrades.value.map(() => false));
+
+watch(
+  () => botStore.activeBot.selectedPair,
+  () => {
+    ordersVisible.value = sortedTrades.value.map(() => false);
+  },
+);
 </script>
 
 <style scoped>