Add TradeActionsPopover

src/components/ftbot/TradeActionsPopover.vue

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

src/components/ftbot/TradeList.vue

@@ -27,30 +27,15 @@
       @row-selected="onRowSelected"
     >
       <template #cell(actions)="row">
-        <b-button
+        <TradeActionsPopover
-          :id="`btn-actions_${row.index}`"
+          :id="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"
+          @deleteTrade="removeTradeHandler(row.item)"
           @forceExit="forceExitHandler"
           @forceExitPartial="forceExitPartialHandler"
           @cancel-open-order="cancelOpenOrderHandler"
         />
-        </b-popover>
       </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';