From 180b3c5fa33551f343e425701afb5914418c6d08 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Mon, 9 Aug 2021 19:56:11 +0200
Subject: [PATCH] Allow filtering in TradesList

---
 src/components/ftbot/BacktestResultView.vue |  1 +
 src/components/ftbot/TradeList.vue          | 29 ++++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/ftbot/BacktestResultView.vue b/src/components/ftbot/BacktestResultView.vue
index 47b19455..ee4c909e 100644
--- a/src/components/ftbot/BacktestResultView.vue
+++ b/src/components/ftbot/BacktestResultView.vue
@@ -49,6 +49,7 @@
         <TradeList
           class="row trade-history mt-2 w-100"
           :trades="backtestResult.trades"
+          :show-filter="true"
           :stake-currency="backtestResult.stake_currency"
         />
       </b-card>
diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue
index f5996a7a..7bdc3d74 100644
--- a/src/components/ftbot/TradeList.vue
+++ b/src/components/ftbot/TradeList.vue
@@ -14,6 +14,7 @@
       primary-key="trade_id"
       selectable
       select-mode="single"
+      :filter="filterText"
       @row-contextmenu="handleContextMenuEvent"
       @row-clicked="onRowClicked"
       @row-selected="onRowSelected"
@@ -54,13 +55,23 @@
         <DateTimeTZ :date="row.item.close_timestamp" />
       </template>
     </b-table>
-    <b-pagination
-      v-if="!activeTrades"
-      v-model="currentPage"
-      :total-rows="rows"
-      :per-page="perPage"
-      aria-controls="my-table"
-    ></b-pagination>
+    <div class="w-100 d-flex justify-content-between">
+      <b-pagination
+        v-if="!activeTrades"
+        v-model="currentPage"
+        :total-rows="rows"
+        :per-page="perPage"
+        aria-controls="my-table"
+      ></b-pagination>
+      <b-input
+        v-if="showFilter"
+        v-model="filterText"
+        type="text"
+        placeholder="Filter"
+        size="sm"
+        style="width: unset"
+      />
+    </div>
   </div>
 </template>
 
@@ -99,6 +110,8 @@ export default class TradeList extends Vue {
 
   @Prop({ default: false }) activeTrades!: boolean;
 
+  @Prop({ default: false }) showFilter!: boolean;
+
   @Prop({ default: 'No Trades to show.' }) emptyText!: string;
 
   @ftbot.State detailTradeId?: number;
@@ -117,6 +130,8 @@ export default class TradeList extends Vue {
 
   selectedItemIndex? = undefined;
 
+  filterText = '';
+
   @Watch('detailTradeId')
   watchTradeDetail(val) {
     const index = this.trades.findIndex((v) => v.trade_id === val);