From 928e9b9361cbd17906d4603f25c22fe6e36acb3a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 16 Apr 2022 20:27:33 +0200
Subject: [PATCH] composition: TradeList

---
 src/components/ftbot/TradeList.vue | 341 ++++++++++++++---------------
 1 file changed, 169 insertions(+), 172 deletions(-)

diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue
index dc1a4675..f4974695 100644
--- a/src/components/ftbot/TradeList.vue
+++ b/src/components/ftbot/TradeList.vue
@@ -80,9 +80,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { formatPercent, formatPrice } from '@/shared/formatters';
 import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
@@ -93,184 +90,184 @@ import StoreModules from '@/store/storeSubModules';
 import TradeProfit from './TradeProfit.vue';
 import TradeActions from './TradeActions.vue';
 
-const ftbot = namespace(StoreModules.ftbot);
+import { defineComponent, ref, computed, watch } from '@vue/composition-api';
+import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
 
-@Component({
+export default defineComponent({
+  name: 'TradeList',
   components: { ActionIcon, DateTimeTZ, TradeProfit, TradeActions },
-})
-export default class TradeList extends Vue {
-  $refs!: {
-    tradesTable: HTMLFormElement;
-  };
+  props: {
+    trades: { required: true, type: Array as () => Array<Trade> },
+    title: { default: 'Trades', type: String },
+    stakeCurrency: { required: false, default: '', type: String },
+    activeTrades: { default: false, type: Boolean },
+    showFilter: { default: false, type: Boolean },
+    multiBotView: { default: false, type: Boolean },
+    emptyText: { default: 'No Trades to show.', type: String },
+  },
+  setup(props, { root }) {
+    const { detailTradeId, stakeCurrencyDecimals, botApiVersion } = useNamespacedGetters(
+      StoreModules.ftbot,
+      [
+        BotStoreGetters.detailTradeId,
+        BotStoreGetters.stakeCurrencyDecimals,
+        BotStoreGetters.botApiVersion,
+      ],
+    );
+    const { setDetailTrade, forceSellMulti, deleteTradeMulti } = useNamespacedActions(
+      StoreModules.ftbot,
+      ['setDetailTrade', 'forceSellMulti', 'deleteTradeMulti'],
+    );
 
-  formatPercent = formatPercent;
+    const currentPage = ref(1);
+    const selectedItemIndex = ref();
+    const filterText = ref('');
+    const perPage = props.activeTrades ? 200 : 15;
+    const tradesTable = ref<HTMLFormElement>();
 
-  formatPrice = formatPrice;
-
-  @Prop({ required: true }) trades!: Array<Trade>;
-
-  @Prop({ default: 'Trades', type: String }) title!: string;
-
-  @Prop({ required: false, default: '' }) stakeCurrency!: string;
-
-  @Prop({ default: false, type: Boolean }) activeTrades!: boolean;
-
-  @Prop({ default: false }) showFilter!: boolean;
-
-  @Prop({ default: false, type: Boolean }) multiBotView!: boolean;
-
-  @Prop({ default: 'No Trades to show.' }) emptyText!: string;
-
-  @ftbot.Getter [BotStoreGetters.detailTradeId]?: number;
-
-  @ftbot.Getter [BotStoreGetters.stakeCurrencyDecimals]!: number;
-
-  @ftbot.Getter [BotStoreGetters.botApiVersion]: number;
-
-  @ftbot.Action setDetailTrade;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action forceSellMulti!: (payload: MultiForcesellPayload) => Promise<string>;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @ftbot.Action deleteTradeMulti!: (payload: MultiDeletePayload) => Promise<string>;
-
-  currentPage = 1;
-
-  selectedItemIndex? = undefined;
-
-  filterText = '';
-
-  @Watch('detailTradeId')
-  watchTradeDetail(val) {
-    const index = this.trades.findIndex((v) => v.trade_id === val);
-    // Unselect when another tradeTable is selected!
-    if (index < 0) {
-      this.$refs.tradesTable.clearSelected();
-    }
-  }
-
-  get rows(): number {
-    return this.trades.length;
-  }
-
-  perPage = this.activeTrades ? 200 : 15;
-
-  // Added to table-fields for current trades
-  openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
-
-  // Added to table-fields for historic trades
-  closedFields: Record<string, string | Function>[] = [
-    { key: 'close_timestamp', label: 'Close date' },
-    { key: 'exit_reason', label: 'Close Reason' },
-  ];
-
-  tableFields: Record<string, string | Function>[] = [
-    this.multiBotView ? { key: 'botName', label: 'Bot' } : {},
-    { key: 'trade_id', label: 'ID' },
-    { key: 'pair', label: 'Pair' },
-    { key: 'amount', label: 'Amount' },
-    {
-      key: 'stake_amount',
-      label: 'Stake amount',
-      formatter: (value: number) => this.formatPriceWithDecimals(value),
-    },
-    {
-      key: 'open_rate',
-      label: 'Open rate',
-      formatter: (value: number) => this.formatPrice(value),
-    },
-    {
-      key: this.activeTrades ? 'current_rate' : 'close_rate',
-      label: this.activeTrades ? 'Current rate' : 'Close rate',
-      formatter: (value: number) => this.formatPrice(value),
-    },
-    {
-      key: 'profit',
-      label: this.activeTrades ? 'Current profit %' : 'Profit %',
-      formatter: (value: number, key, item: Trade) => {
-        const percent = formatPercent(item.profit_ratio, 2);
-        return `${percent} ${`(${this.formatPriceWithDecimals(item.profit_abs)})`}`;
+    const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
+    const closedFields: Record<string, string | Function>[] = [
+      { key: 'close_timestamp', label: 'Close date' },
+      { key: 'exit_reason', label: 'Close Reason' },
+    ];
+    const formatPriceWithDecimals = (price) => {
+      return formatPrice(price, stakeCurrencyDecimals.value);
+    };
+    const rows = computed(() => {
+      return props.trades.length;
+    });
+    const tableFields: Record<string, string | Function>[] = [
+      props.multiBotView ? { key: 'botName', label: 'Bot' } : {},
+      { key: 'trade_id', label: 'ID' },
+      { key: 'pair', label: 'Pair' },
+      { key: 'amount', label: 'Amount' },
+      {
+        key: 'stake_amount',
+        label: 'Stake amount',
+        formatter: (value: number) => formatPriceWithDecimals(value),
       },
-    },
-    { key: 'open_timestamp', label: 'Open date' },
-    ...(this.activeTrades ? this.openFields : this.closedFields),
-  ];
+      {
+        key: 'open_rate',
+        label: 'Open rate',
+        formatter: (value: number) => formatPrice(value),
+      },
+      {
+        key: props.activeTrades ? 'current_rate' : 'close_rate',
+        label: props.activeTrades ? 'Current rate' : 'Close rate',
+        formatter: (value: number) => formatPrice(value),
+      },
+      {
+        key: 'profit',
+        label: props.activeTrades ? 'Current profit %' : 'Profit %',
+        formatter: (value: number, key, item: Trade) => {
+          const percent = formatPercent(item.profit_ratio, 2);
+          return `${percent} ${`(${formatPriceWithDecimals(item.profit_abs)})`}`;
+        },
+      },
+      { key: 'open_timestamp', label: 'Open date' },
+      ...(props.activeTrades ? openFields : closedFields),
+    ];
 
-  formatPriceWithDecimals(price) {
-    return formatPrice(price, this.stakeCurrencyDecimals);
-  }
-
-  forcesellHandler(item: Trade, ordertype: string | undefined = undefined) {
-    this.$bvModal
-      .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`)
-      .then((value: boolean) => {
-        if (value) {
-          const payload: MultiForcesellPayload = {
-            tradeid: String(item.trade_id),
-            botId: item.botId,
-          };
-          if (ordertype) {
-            payload.ordertype = ordertype;
+    const forcesellHandler = (item: Trade, ordertype: string | undefined = undefined) => {
+      root.$bvModal
+        .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`)
+        .then((value: boolean) => {
+          if (value) {
+            const payload: MultiForcesellPayload = {
+              tradeid: String(item.trade_id),
+              botId: item.botId,
+            };
+            if (ordertype) {
+              payload.ordertype = ordertype;
+            }
+            forceSellMulti(payload)
+              .then((xxx) => console.log(xxx))
+              .catch((error) => console.log(error.response));
           }
-          this.forceSellMulti(payload)
-            .then((xxx) => console.log(xxx))
-            .catch((error) => console.log(error.response));
-        }
-      });
-  }
+        });
+    };
 
-  handleContextMenuEvent(item, index, event) {
-    // stop browser context menu from appearing
-    if (!this.activeTrades) {
-      return;
-    }
-    event.preventDefault();
-    // log the selected item to the console
-    console.log(item);
-  }
-
-  removeTradeHandler(item) {
-    console.log(item);
-    this.$bvModal
-      .msgBoxConfirm(`Really delete trade ${item.trade_id} (Pair ${item.pair})?`)
-      .then((value: boolean) => {
-        if (value) {
-          const payload: MultiDeletePayload = {
-            tradeid: String(item.trade_id),
-            botId: item.botId,
-          };
-          this.deleteTradeMulti(payload).catch((error) => console.log(error.response));
-        }
-      });
-  }
-
-  onRowClicked(item, index) {
-    // Only allow single selection mode!
-    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;
+    const handleContextMenuEvent = (item, index, event) => {
+      // stop browser context menu from appearing
+      if (!props.activeTrades) {
+        return;
       }
-    }
-  }
-}
+      event.preventDefault();
+      // log the selected item to the console
+      console.log(item);
+    };
+
+    const removeTradeHandler = (item) => {
+      console.log(item);
+      root.$bvModal
+        .msgBoxConfirm(`Really delete trade ${item.trade_id} (Pair ${item.pair})?`)
+        .then((value: boolean) => {
+          if (value) {
+            const payload: MultiDeletePayload = {
+              tradeid: String(item.trade_id),
+              botId: item.botId,
+            };
+            deleteTradeMulti(payload).catch((error) => console.log(error.response));
+          }
+        });
+    };
+
+    const onRowClicked = (item, index) => {
+      // Only allow single selection mode!
+      if (
+        item &&
+        item.trade_id !== detailTradeId.value &&
+        !tradesTable.value?.isRowSelected(index)
+      ) {
+        setDetailTrade(item);
+      } else {
+        console.log('unsetting item');
+        setDetailTrade(null);
+      }
+    };
+
+    const onRowSelected = () => {
+      if (detailTradeId.value) {
+        const itemIndex = props.trades.findIndex((v) => v.trade_id === detailTradeId.value);
+        if (itemIndex >= 0) {
+          tradesTable.value?.selectRow(itemIndex);
+        } else {
+          console.log(`Unsetting item for tradeid ${selectedItemIndex.value}`);
+          selectedItemIndex.value = undefined;
+        }
+      }
+    };
+
+    watch(detailTradeId, (val: number) => {
+      const index = props.trades.findIndex((v) => v.trade_id === val);
+      // Unselect when another tradeTable is selected!
+      if (index < 0) {
+        tradesTable.value?.clearSelected();
+      }
+    });
+
+    return {
+      detailTradeId,
+      stakeCurrencyDecimals,
+      botApiVersion,
+      setDetailTrade,
+      forceSellMulti,
+      deleteTradeMulti,
+      currentPage,
+      selectedItemIndex,
+      filterText,
+      perPage,
+      tableFields,
+      rows,
+      tradesTable,
+      forcesellHandler,
+      handleContextMenuEvent,
+      removeTradeHandler,
+      onRowClicked,
+      onRowSelected,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>