Extract trade actions (not fully working yet!)

src/components/ftbot/TradeActions.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="d-flex flex-column">
+    <b-button
+      v-if="botApiVersion <= 1.1"
+      class="btn-xs text-left"
+      size="sm"
+      title="Forcesell"
+      @click="forcesellHandler(trade)"
+    >
+      <ForceSellIcon :size="16" title="Forcesell" class="mr-1" />Forcesell
+    </b-button>
+    <b-button
+      v-if="botApiVersion > 1.1"
+      class="btn-xs text-left"
+      size="sm"
+      title="Forcesell limit"
+      @click="forcesellHandler(trade, 'limit')"
+    >
+      <ForceSellIcon :size="16" title="Forcesell" class="mr-1" />Forcesell limit
+    </b-button>
+    <b-button
+      v-if="botApiVersion > 1.1"
+      class="btn-xs text-left mt-1"
+      size="sm"
+      title="Forcesell market"
+      @click="forcesellHandler(trade, 'market')"
+    >
+      <ForceSellIcon :size="16" title="Forcesell" class="mr-1" />Forcesell market
+    </b-button>
+
+    <b-button
+      class="btn-xs text-left mt-1"
+      size="sm"
+      title="Delete trade"
+      @click="$emit('deleteTrade', trade)"
+    >
+      <DeleteIcon :size="16" title="Delete trade" class="mr-1" />
+      Delete
+    </b-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Trade } from '@/types';
+import { defineComponent } from '@vue/composition-api';
+import DeleteIcon from 'vue-material-design-icons/Delete.vue';
+import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
+
+export default defineComponent({
+  name: 'TradeActions',
+  components: { DeleteIcon, ForceSellIcon },
+  props: {
+    botApiVersion: {
+      type: Number,
+      default: 1.0,
+    },
+    trade: {
+      type: Object as () => Trade,
+      required: true,
+    },
+  },
+  emits: ['forceSell', 'deleteTrade'],
+  setup(props, { emit, root }) {
+    const forcesellHandler = (item: Trade, ordertype: string | undefined = undefined) => {
+      root.$bvModal
+        .msgBoxConfirm(`Really222 forcesell trade ${item.trade_id} (Pair ${item.pair})?`)
+        .then((value: boolean) => {
+          if (value) {
+            console.log('emitting');
+            emit('forceSell', item);
+            emit('forceSell', { item, ordertype });
+            console.log('emittin2g');
+          }
+        });
+    };
+
+    return {
+      forcesellHandler,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>

src/components/ftbot/TradeList.vue

@@ -24,45 +24,12 @@
           <ActionIcon :size="16" title="Actions" />
         </b-button>
         <b-popover :target="`btn-actions_${row.index}`" triggers="focus" placement="left">
-          <div class="d-flex flex-column">
+          <trade-actions
-            <b-button
+            :trade="row.item"
-              v-if="botApiVersion <= 1.1"
+            :bot-api-version="botApiVersion"
-              class="btn-xs text-left"
+            @deleteTrade="removeTradeHandler"
-              size="sm"
+            @forceSell="forcesellHandler"
-              title="Forcesell"
+          />
-              @click="forcesellHandler(row.item)"
-            >
-              <ForceSellIcon :size="16" title="Forcesell" class="mr-1" />Forcesell
-            </b-button>
-            <b-button
-              v-if="botApiVersion > 1.1"
-              class="btn-xs text-left"
-              size="sm"
-              title="Forcesell limit"
-              @click="forcesellHandler(row.item, 'limit')"
-            >
-              <ForceSellIcon :size="16" title="Forcesell" class="mr-1" />Forcesell limit
-            </b-button>
-            <b-button
-              v-if="botApiVersion > 1.1"
-              class="btn-xs text-left mt-1"
-              size="sm"
-              title="Forcesell market"
-              @click="forcesellHandler(row.item, 'market')"
-            >
-              <ForceSellIcon :size="16" title="Forcesell" class="mr-1" />Forcesell market
-            </b-button>
-
-            <b-button
-              class="btn-xs text-left mt-1"
-              size="sm"
-              title="Delete trade"
-              @click="removeTradeHandler(row.item)"
-            >
-              <DeleteIcon :size="16" title="Delete trade" class="mr-1" />
-              Delete
-            </b-button>
-          </div>
         </b-popover>
       </template>
       <template #cell(pair)="row">
@@ -118,11 +85,12 @@ import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import StoreModules from '@/store/storeSubModules';
 import TradeProfit from './TradeProfit.vue';
+import TradeActions from './TradeActions.vue';
 
 const ftbot = namespace(StoreModules.ftbot);
 
 @Component({
-  components: { DeleteIcon, ForceSellIcon, ActionIcon, DateTimeTZ, TradeProfit },
+  components: { DeleteIcon, ForceSellIcon, ActionIcon, DateTimeTZ, TradeProfit, TradeActions },
 })
 export default class TradeList extends Vue {
   $refs!: {
@@ -227,7 +195,12 @@ export default class TradeList extends Vue {
     return formatPrice(price, this.stakeCurrencyDecimals);
   }
 
-  forcesellHandler(item: Trade, ordertype: string | undefined = undefined) {
+  forcesellHandler(item: Trade) {
+    console.log(item);
+  }
+
+  forcesellHandler2(item: Trade, ordertype: string | undefined = undefined) {
+    console.log('forcesell parent');
     this.$bvModal
       .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`)
       .then((value: boolean) => {