Add UI for cancel open order

src/components/ftbot/TradeActions.vue

@@ -36,6 +36,15 @@
     >
       <ForceSellIcon :size="16" title="Forceexit partial" class="me-1" />Forceexit partial
     </b-button>
+    <b-button
+      v-if="botApiVersion >= 2.24 && trade.open_order_id"
+      class="btn-xs text-start mt-1"
+      size="sm"
+      title="Cancel open orders"
+      @click="$emit('cancelOpenOrder', trade)"
+    >
+      <CancelIcon :size="16" title="Cancel open order" class="me-1" />Cancel open order
+    </b-button>
 
     <b-button
       class="btn-xs text-start mt-1"
@@ -53,6 +62,7 @@
 import { Trade } from '@/types';
 import DeleteIcon from 'vue-material-design-icons/Delete.vue';
 import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
+import CancelIcon from 'vue-material-design-icons/Cancel.vue';
 
 defineProps({
   botApiVersion: {
@@ -64,7 +74,7 @@ defineProps({
     required: true,
   },
 });
-defineEmits(['forceExit', 'forceExitPartial', 'deleteTrade']);
+defineEmits(['forceExit', 'forceExitPartial', 'cancelOpenOrder', 'deleteTrade']);
 </script>
 
 <style scoped lang="scss"></style>

src/components/ftbot/TradeList.vue

@@ -42,6 +42,7 @@
             @deleteTrade="removeTradeHandler"
             @forceExit="forceExitHandler"
             @forceExitPartial="forceExitPartialHandler"
+            @cancel-open-order="cancelOpenOrderHandler"
           />
         </b-popover>
       </template>
@@ -90,12 +91,7 @@
       />
     </div>
     <force-exit-form v-if="activeTrades" v-model="forceExitVisible" :trade="feTrade" />
-    <b-modal
+    <b-modal v-model="removeTradeVisible" title="Exit trade" @ok="forceExitExecuter">
-      ref="removeTradeModal"
-      v-model="removeTradeVisible"
-      title="Exit trade"
-      @ok="forceExitExecuter"
-    >
       {{ confirmExitText }}
     </b-modal>
   </div>
@@ -114,6 +110,13 @@ import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
 import { ref, computed, watch } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
+enum ModalReasons {
+  removeTrade,
+  forceExit,
+  forceExitPartial,
+  cancelOpenOrder,
+}
+
 const props = defineProps({
   trades: { required: true, type: Array as () => Array<Trade> },
   title: { default: 'Trades', type: String },
@@ -133,7 +136,7 @@ const tradesTable = ref<HTMLFormElement>();
 const forceExitVisible = ref(false);
 const removeTradeVisible = ref(false);
 const confirmExitText = ref('');
-const removeTradeModal = ref<HTMLElement>();
+const confirmExitValue = ref<ModalReasons | null>(null);
 
 const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
 const closedFields: Record<string, string | Function>[] = [
@@ -180,24 +183,21 @@ const tableFields: Record<string, string | Function>[] = [
 const feOrderType = ref<string | undefined>(undefined);
 const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
   feTrade.value = item;
+  confirmExitValue.value = ModalReasons.forceExit;
   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 (confirmExitValue.value === ModalReasons.removeTrade) {
-  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);
+  if (confirmExitValue.value === ModalReasons.forceExit) {
-
     const payload: MultiForcesellPayload = {
       tradeid: String(feTrade.value.trade_id),
       botId: feTrade.value.botId,
@@ -209,12 +209,22 @@ const forceExitExecuter = () => {
       .forceSellMulti(payload)
       .then((xxx) => console.log(xxx))
       .catch((error) => console.log(error.response));
+  }
+  if (confirmExitValue.value === ModalReasons.cancelOpenOrder) {
+    const payload: MultiDeletePayload = {
+      tradeid: String(feTrade.value.trade_id),
+      botId: feTrade.value.botId,
+    };
+    botStore.cancelOpenOrderMulti(payload);
+  }
+
   feOrderType.value = undefined;
   removeTradeVisible.value = false;
 };
 
 const removeTradeHandler = (item: Trade) => {
   confirmExitText.value = `Really delete trade ${item.trade_id} (Pair ${item.pair})?`;
+  confirmExitValue.value = ModalReasons.removeTrade;
   feTrade.value = item;
   removeTradeVisible.value = true;
 };
@@ -224,6 +234,13 @@ const forceExitPartialHandler = (item: Trade) => {
   forceExitVisible.value = true;
 };
 
+const cancelOpenOrderHandler = (item: Trade) => {
+  confirmExitText.value = `Cancel open order for trade ${item.trade_id} (Pair ${item.pair})?`;
+  feTrade.value = item;
+  confirmExitValue.value = ModalReasons.cancelOpenOrder;
+  removeTradeVisible.value = true;
+};
+
 const handleContextMenuEvent = (item, index, event) => {
   // stop browser context menu from appearing
   if (!props.activeTrades) {

src/stores/ftbot.ts

@@ -616,6 +616,21 @@ export function createBotSubStore(botId: string, botName: string) {
           return Promise.reject(error);
         }
       },
+      async cancelOpenOrder(tradeid: string) {
+        try {
+          const res = await api.delete<DeleteTradeResponse>(`/trades/${tradeid}/open-order`);
+          showAlert(
+            res.data.result_msg ? res.data.result_msg : `Canceled open order for ${tradeid}`,
+          );
+          return Promise.resolve(res);
+        } catch (error) {
+          if (axios.isAxiosError(error)) {
+            console.error(error.response);
+          }
+          showAlert(`Failed to cancel open order ${tradeid}`, 'danger');
+          return Promise.reject(error);
+        }
+      },
       async startTrade() {
         try {
           const res = await api.post('/start_trade', {});

src/stores/ftbotwrapper.ts

@@ -324,6 +324,9 @@ export const useBotStore = defineStore('wrapper', {
     async deleteTradeMulti(deletePayload: MultiDeletePayload) {
       return this.botStores[deletePayload.botId].deleteTrade(deletePayload.tradeid);
     },
+    async cancelOpenOrderMulti(deletePayload: MultiDeletePayload) {
+      return this.botStores[deletePayload.botId].cancelOpenOrder(deletePayload.tradeid);
+    },
   },
 });