Detail view for responsive mode

This commit is contained in:
Matthias 2021-12-30 09:42:41 +01:00
parent 4a9846cdd1
commit c8db1db82c
2 changed files with 21 additions and 29 deletions

View File

@ -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) {
// Only allow single selection mode!
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;
}
}
tradeClick(trade) {
this.setDetailTrade(trade);
}
}
</script>

View File

@ -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>