Allow filtering in TradesList

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>

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,6 +55,7 @@
         <DateTimeTZ :date="row.item.close_timestamp" />
       </template>
     </b-table>
+    <div class="w-100 d-flex justify-content-between">
       <b-pagination
         v-if="!activeTrades"
         v-model="currentPage"
@@ -61,6 +63,15 @@
         :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);