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" v-for="trade in filteredTrades"
:key="trade.trade_id" :key="trade.trade_id"
class="border border-secondary rounded my-05 px-2" class="border border-secondary rounded my-05 px-2"
@click="tradeClick(trade)"
> >
<CustomTradeListEntry :trade="trade" :stake-currency-decimals="stakeCurrencyDecimals" /> <CustomTradeListEntry :trade="trade" :stake-currency-decimals="stakeCurrencyDecimals" />
</b-list-group-item> </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 ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
import ActionIcon from 'vue-material-design-icons/GestureTap.vue'; import ActionIcon from 'vue-material-design-icons/GestureTap.vue';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue'; import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
import { BotStoreGetters } from '@/store/modules/ftbot';
import StoreModules from '@/store/storeSubModules'; import StoreModules from '@/store/storeSubModules';
import CustomTradeListEntry from '@/components/ftbot/CustomTradeListEntry.vue'; import CustomTradeListEntry from '@/components/ftbot/CustomTradeListEntry.vue';
import TradeProfit from './TradeProfit.vue'; import TradeProfit from './TradeProfit.vue';
@ -85,8 +85,6 @@ export default class CustomTradeList extends Vue {
@Prop({ default: 3, type: Number }) stakeCurrencyDecimals!: number; @Prop({ default: 3, type: Number }) stakeCurrencyDecimals!: number;
@ftbot.Getter [BotStoreGetters.detailTradeId]?: number;
@ftbot.Action setDetailTrade; @ftbot.Action setDetailTrade;
// eslint-disable-next-line @typescript-eslint/no-unused-vars // 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> </script>

View File

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