mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-10 10:21:55 +00:00
Add TradeActionsPopover
This commit is contained in:
parent
2bce25bc61
commit
6b21a1c7ee
67
src/components/ftbot/TradeActionsPopover.vue
Normal file
67
src/components/ftbot/TradeActionsPopover.vue
Normal 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>
|
|
@ -27,30 +27,15 @@
|
|||
@row-selected="onRowSelected"
|
||||
>
|
||||
<template #cell(actions)="row">
|
||||
<b-button
|
||||
:id="`btn-actions_${row.index}`"
|
||||
class="btn-xs"
|
||||
size="sm"
|
||||
title="Actions"
|
||||
href="#"
|
||||
>
|
||||
<ActionIcon :size="16" title="Actions" />
|
||||
</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>
|
||||
<TradeActionsPopover
|
||||
:id="row.index"
|
||||
:trade="row.item"
|
||||
:bot-api-version="botStore.activeBot.botApiVersion"
|
||||
@deleteTrade="removeTradeHandler(row.item)"
|
||||
@forceExit="forceExitHandler"
|
||||
@forceExitPartial="forceExitPartialHandler"
|
||||
@cancel-open-order="cancelOpenOrderHandler"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(pair)="row">
|
||||
<span>
|
||||
|
@ -107,10 +92,9 @@
|
|||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
import { formatPercent, formatPrice } from '@/shared/formatters';
|
||||
import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
|
||||
import ActionIcon from 'vue-material-design-icons/GestureTap.vue';
|
||||
import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
|
||||
import TradeProfit from './TradeProfit.vue';
|
||||
import TradeActions from './TradeActions.vue';
|
||||
import TradeActionsPopover from './TradeActionsPopover.vue';
|
||||
import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
|
||||
|
||||
import { ref, computed, watch } from 'vue';
|
||||
|
|
Loading…
Reference in New Issue
Block a user