lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-22 11:05:17 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add TradeActionsPopover

Browse Source
This commit is contained in:
Matthias 2023-02-19 17:28:44 +01:00
parent 2bce25bc61
commit 6b21a1c7ee
2 changed files with 77 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/ftbot/TradeActionsPopover.vue Normal file
View File

@ -0,0 +1,67 @@
<script setup lang="ts">
import ActionIcon from 'vue-material-design-icons/GestureTap.vue';
import TradeActions from './TradeActions.vue';
import CancelIcon from 'vue-material-design-icons/Cancel.vue';
import { Trade } from '@/types';
import { ref } from 'vue';
defineProps({
trade: { type: Object as () => Trade, required: true },
id: { type: Number, required: true },
botApiVersion: { type: Number, required: true },
});
const emit = defineEmits(['forceExit', 'forceExitPartial', 'cancelOpenOrder', 'deleteTrade']);
const popoverOpen = ref(false);
const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
popoverOpen.value = false;
emit('forceExit', item, ordertype);
};
const forceExitPartialHandler = (item: Trade) => {
popoverOpen.value = false;
emit('forceExitPartial', item);
};
const cancelOpenOrderHandler = (item: Trade) => {
popoverOpen.value = false;
emit('cancelOpenOrder', item);
};
</script>
<template>
<div>
<b-button
:id="`btn-actions-${id}`"
class="btn-xs"
size="sm"
title="Actions"
href="#"
@click="popoverOpen = !popoverOpen"
>
<ActionIcon :size="16" title="Actions" />
</b-button>
<b-popover
:target="`btn-actions-${id}`"
:title="`Actions for ${trade.pair}`"
triggers="manual"
:show="popoverOpen"
placement="left"
>
<trade-actions
:trade="trade"
:bot-api-version="botApiVersion"
@force-exit="forceExitHandler"
@force-exit-partial="forceExitPartialHandler"
@deleteTrade="
popoverOpen = false;
$emit('deleteTrade', trade);
"
@cancel-open-order="cancelOpenOrderHandler"
/>
<b-button class="mt-1 w-100 text-start" size="sm" @click="popoverOpen = false">
<CancelIcon :size="16" title="Close popup" class="me-1" />Close Actions menu
</b-button>
</b-popover>
</div>
</template>
<style scoped></style>

36
src/components/ftbot/TradeList.vue
View File

@ -27,30 +27,15 @@
@row-selected="onRowSelected" @row-selected="onRowSelected"
> >
<template #cell(actions)="row"> <template #cell(actions)="row">
<b-button <TradeActionsPopover
:id="`btn-actions_${row.index}`" :id="row.index"
class="btn-xs" :trade="row.item"
size="sm" :bot-api-version="botStore.activeBot.botApiVersion"
title="Actions" @deleteTrade="removeTradeHandler(row.item)"
href="#" @forceExit="forceExitHandler"
> @forceExitPartial="forceExitPartialHandler"
<ActionIcon :size="16" title="Actions" /> @cancel-open-order="cancelOpenOrderHandler"
</b-button> />
<b-popover
:target="`btn-actions_${row.index}`"
:title="`Actions for ${row.item.pair}`"
triggers="focus"
placement="left"
>
<trade-actions
:trade="row.item"
:bot-api-version="botStore.activeBot.botApiVersion"
@deleteTrade="removeTradeHandler"
@forceExit="forceExitHandler"
@forceExitPartial="forceExitPartialHandler"
@cancel-open-order="cancelOpenOrderHandler"
/>
</b-popover>
</template> </template>
<template #cell(pair)="row"> <template #cell(pair)="row">
<span> <span>
@ -107,10 +92,9 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
import { formatPercent, formatPrice } from '@/shared/formatters'; import { formatPercent, formatPrice } from '@/shared/formatters';
import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types'; import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
import ActionIcon from 'vue-material-design-icons/GestureTap.vue';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue'; import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
import TradeProfit from './TradeProfit.vue'; import TradeProfit from './TradeProfit.vue';
import TradeActions from './TradeActions.vue'; import TradeActionsPopover from './TradeActionsPopover.vue';
import ForceExitForm from '@/components/ftbot/ForceExitForm.vue'; import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
import { ref, computed, watch } from 'vue'; import { ref, computed, watch } from 'vue';