From 5ecdce849455f64b2c01500ccbb33a2cd2d9e243 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Mon, 30 Jan 2023 20:08:59 +0100
Subject: [PATCH] TradeList to script setup

---
 src/components/ftbot/TradeList.vue | 337 +++++++++++++----------------
 1 file changed, 154 insertions(+), 183 deletions(-)

diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue
index 0079a851..70a7c282 100644
--- a/src/components/ftbot/TradeList.vue
+++ b/src/components/ftbot/TradeList.vue
@@ -101,7 +101,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { formatPercent, formatPrice } from '@/shared/formatters';
 import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
@@ -111,191 +111,162 @@ import TradeProfit from './TradeProfit.vue';
 import TradeActions from './TradeActions.vue';
 import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
 
-import { defineComponent, ref, computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-export default defineComponent({
-  name: 'TradeList',
-  components: { ActionIcon, DateTimeTZ, TradeProfit, TradeActions, ForceExitForm },
-  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) {
-    const botStore = useBotStore();
-    const currentPage = ref(1);
-    const selectedItemIndex = ref();
-    const filterText = ref('');
-    const feTrade = ref<Trade>({} as Trade);
-    const perPage = props.activeTrades ? 200 : 15;
-    const tradesTable = ref<HTMLFormElement>();
-    const forceExitVisible = ref(false);
-    const removeTradeVisible = ref(false);
-    const confirmExitText = ref('');
-    const removeTradeModal = ref<HTMLElement>();
-
-    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, botStore.activeBot.stakeCurrencyDecimals);
-    };
-    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_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),
-    ];
-    const feOrderType = ref<string | undefined>(undefined);
-    const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
-      feTrade.value = item;
-      confirmExitText.value = `Really exit trade ${item.trade_id} (Pair ${item.pair}) using ${ordertype} Order?`;
-      removeTradeVisible.value = true;
-      feOrderType.value = ordertype;
-    };
-
-    const forceExitExecuter = () => {
-      // TODO: this should be done properly.
-      if (confirmExitText.value.includes('delete')) {
-        const payload: MultiDeletePayload = {
-          tradeid: String(feTrade.value.trade_id),
-          botId: feTrade.value.botId,
-        };
-        botStore.deleteTradeMulti(payload).catch((error) => console.log(error.response));
-        removeTradeVisible.value = false;
-        return;
-      }
-      console.log(confirmExitText.value);
-
-      const payload: MultiForcesellPayload = {
-        tradeid: String(feTrade.value.trade_id),
-        botId: feTrade.value.botId,
-      };
-      if (feOrderType.value) {
-        payload.ordertype = feOrderType.value;
-      }
-      botStore
-        .forceSellMulti(payload)
-        .then((xxx) => console.log(xxx))
-        .catch((error) => console.log(error.response));
-      feOrderType.value = undefined;
-      removeTradeVisible.value = false;
-    };
-
-    const removeTradeHandler = (item: Trade) => {
-      confirmExitText.value = `Really delete trade ${item.trade_id} (Pair ${item.pair})?`;
-      feTrade.value = item;
-      removeTradeVisible.value = true;
-    };
-
-    const forceExitPartialHandler = (item: Trade) => {
-      feTrade.value = item;
-      forceExitVisible.value = true;
-    };
-
-    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 onRowClicked = (item) => {
-      // Only allow single selection mode!
-      if (item && item.trade_id !== botStore.activeBot.detailTradeId) {
-        botStore.activeBot.setDetailTrade(item);
-      } else {
-        botStore.activeBot.setDetailTrade(null);
-      }
-    };
-
-    const onRowSelected = () => {
-      if (botStore.activeBot.detailTradeId) {
-        const itemIndex = props.trades.findIndex(
-          (v) => v.trade_id === botStore.activeBot.detailTradeId,
-        );
-        if (itemIndex >= 0) {
-          tradesTable.value?.selectRow(itemIndex);
-        } else {
-          console.log(`Unsetting item for tradeid ${selectedItemIndex.value}`);
-          selectedItemIndex.value = undefined;
-        }
-      }
-    };
-
-    watch(
-      () => botStore.activeBot.detailTradeId,
-      (val) => {
-        const index = props.trades.findIndex((v) => v.trade_id === val);
-        // Unselect when another tradeTable is selected!
-        if (index < 0) {
-          tradesTable.value?.clearSelected();
-        }
-      },
-    );
-
-    return {
-      botStore,
-      currentPage,
-      selectedItemIndex,
-      filterText,
-      perPage,
-      tableFields,
-      rows,
-      tradesTable,
-      forceExitHandler,
-      forceExitPartialHandler,
-      handleContextMenuEvent,
-      removeTradeHandler,
-      onRowClicked,
-      onRowSelected,
-      feTrade,
-      forceExitVisible,
-      removeTradeVisible,
-      confirmExitText,
-      removeTradeModal,
-      forceExitExecuter,
-    };
-  },
+const props = defineProps({
+  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 },
 });
+const botStore = useBotStore();
+const currentPage = ref(1);
+const selectedItemIndex = ref();
+const filterText = ref('');
+const feTrade = ref<Trade>({} as Trade);
+const perPage = props.activeTrades ? 200 : 15;
+const tradesTable = ref<HTMLFormElement>();
+const forceExitVisible = ref(false);
+const removeTradeVisible = ref(false);
+const confirmExitText = ref('');
+const removeTradeModal = ref<HTMLElement>();
+
+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, botStore.activeBot.stakeCurrencyDecimals);
+};
+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_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),
+];
+const feOrderType = ref<string | undefined>(undefined);
+const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
+  feTrade.value = item;
+  confirmExitText.value = `Really exit trade ${item.trade_id} (Pair ${item.pair}) using ${ordertype} Order?`;
+  removeTradeVisible.value = true;
+  feOrderType.value = ordertype;
+};
+
+const forceExitExecuter = () => {
+  // TODO: this should be done properly.
+  if (confirmExitText.value.includes('delete')) {
+    const payload: MultiDeletePayload = {
+      tradeid: String(feTrade.value.trade_id),
+      botId: feTrade.value.botId,
+    };
+    botStore.deleteTradeMulti(payload).catch((error) => console.log(error.response));
+    removeTradeVisible.value = false;
+    return;
+  }
+  console.log(confirmExitText.value);
+
+  const payload: MultiForcesellPayload = {
+    tradeid: String(feTrade.value.trade_id),
+    botId: feTrade.value.botId,
+  };
+  if (feOrderType.value) {
+    payload.ordertype = feOrderType.value;
+  }
+  botStore
+    .forceSellMulti(payload)
+    .then((xxx) => console.log(xxx))
+    .catch((error) => console.log(error.response));
+  feOrderType.value = undefined;
+  removeTradeVisible.value = false;
+};
+
+const removeTradeHandler = (item: Trade) => {
+  confirmExitText.value = `Really delete trade ${item.trade_id} (Pair ${item.pair})?`;
+  feTrade.value = item;
+  removeTradeVisible.value = true;
+};
+
+const forceExitPartialHandler = (item: Trade) => {
+  feTrade.value = item;
+  forceExitVisible.value = true;
+};
+
+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 onRowClicked = (item) => {
+  // Only allow single selection mode!
+  if (item && item.trade_id !== botStore.activeBot.detailTradeId) {
+    botStore.activeBot.setDetailTrade(item);
+  } else {
+    botStore.activeBot.setDetailTrade(null);
+  }
+};
+
+const onRowSelected = () => {
+  if (botStore.activeBot.detailTradeId) {
+    const itemIndex = props.trades.findIndex(
+      (v) => v.trade_id === botStore.activeBot.detailTradeId,
+    );
+    if (itemIndex >= 0) {
+      tradesTable.value?.selectRow(itemIndex);
+    } else {
+      console.log(`Unsetting item for tradeid ${selectedItemIndex.value}`);
+      selectedItemIndex.value = undefined;
+    }
+  }
+};
+
+watch(
+  () => botStore.activeBot.detailTradeId,
+  (val) => {
+    const index = props.trades.findIndex((v) => v.trade_id === val);
+    // Unselect when another tradeTable is selected!
+    if (index < 0) {
+      tradesTable.value?.clearSelected();
+    }
+  },
+);
 </script>
 
 <style lang="scss" scoped>