Detail view for responsive mode

src/components/ftbot/CustomTradeList.vue

@@ -5,6 +5,7 @@
         v-for="trade in filteredTrades"
         :key="trade.trade_id"
         class="border border-secondary rounded my-05 px-2"
+        @click="tradeClick(trade)"
       >
         <CustomTradeListEntry :trade="trade" :stake-currency-decimals="stakeCurrencyDecimals" />
       </b-list-group-item>
@@ -43,7 +44,6 @@ import DeleteIcon from 'vue-material-design-icons/Delete.vue';
 import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
 import ActionIcon from 'vue-material-design-icons/GestureTap.vue';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
-import { BotStoreGetters } from '@/store/modules/ftbot';
 import StoreModules from '@/store/storeSubModules';
 import CustomTradeListEntry from '@/components/ftbot/CustomTradeListEntry.vue';
 import TradeProfit from './TradeProfit.vue';
@@ -85,8 +85,6 @@ export default class CustomTradeList extends Vue {
 
   @Prop({ default: 3, type: Number }) stakeCurrencyDecimals!: number;
 
-  @ftbot.Getter [BotStoreGetters.detailTradeId]?: number;
-
   @ftbot.Action setDetailTrade;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -162,30 +160,8 @@ export default class CustomTradeList extends Vue {
       });
   }
 
-  onRowClicked(item, index) {
+  tradeClick(trade) {
-    // Only allow single selection mode!
+    this.setDetailTrade(trade);
-    if (
-      item &&
-      item.trade_id !== this.detailTradeId &&
-      !this.$refs.tradesTable.isRowSelected(index)
-    ) {
-      this.setDetailTrade(item);
-    } else {
-      console.log('unsetting item');
-      this.setDetailTrade(null);
-    }
-  }
-
-  onRowSelected() {
-    if (this.detailTradeId) {
-      const itemIndex = this.trades.findIndex((v) => v.trade_id === this.detailTradeId);
-      if (itemIndex >= 0) {
-        this.$refs.tradesTable.selectRow(itemIndex);
-      } else {
-        console.log(`Unsetting item for tradeid ${this.selectedItemIndex}`);
-        this.selectedItemIndex = undefined;
-      }
-    }
   }
 }
 </script>

src/views/TradesList.vue

@@ -8,7 +8,7 @@
       empty-text="Currently no open trades."
     /> -->
     <CustomTradeList
-      v-if="!history"
+      v-if="!history && !detailTradeId"
       :trades="openTrades"
       title="Open trades"
       :active-trades="true"
@@ -16,12 +16,18 @@
       empty-text="No open Trades."
     />
     <CustomTradeList
-      v-if="history"
+      v-if="history && !detailTradeId"
       :trades="closedTrades"
       title="Trade history"
       :stake-currency-decimals="stakeCurrencyDecimals"
       empty-text="No closed trades so far."
     />
+    <div v-if="detailTradeId" class="d-flex flex-column">
+      <b-button size="sm" class="align-self-start mt-1 ml-1" @click="setDetailTrade(null)"
+        >Back</b-button
+      >
+      <TradeDetail :trade="tradeDetail" :stake-currency="stakeCurrency" />
+    </div>
   </div>
 </template>
 
@@ -29,6 +35,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import CustomTradeList from '@/components/ftbot/CustomTradeList.vue';
+import TradeDetail from '@/components/ftbot/TradeDetail.vue';
 
 import { Trade } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
@@ -39,6 +46,7 @@ const ftbot = namespace(StoreModules.ftbot);
 @Component({
   components: {
     CustomTradeList,
+    TradeDetail,
   },
 })
 export default class Trading extends Vue {
@@ -49,6 +57,14 @@ export default class Trading extends Vue {
   @ftbot.Getter [BotStoreGetters.closedTrades]!: Trade[];
 
   @ftbot.Getter [BotStoreGetters.stakeCurrencyDecimals]!: number;
+
+  @ftbot.Getter [BotStoreGetters.stakeCurrency]!: string;
+
+  @ftbot.Getter [BotStoreGetters.detailTradeId]?: number;
+
+  @ftbot.Getter [BotStoreGetters.tradeDetail]!: Trade;
+
+  @ftbot.Action setDetailTrade;
 }
 </script>