forceExit form fixes

src/components/ftbot/ForceExitForm.vue

@@ -2,7 +2,7 @@
   <div>
     <b-modal
       id="forceexit-modal"
-      ref="modal"
+      v-model="model"
       title="Force exiting a trade"
       @show="resetForm"
       @hidden="resetForm"
@@ -62,7 +62,7 @@
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { ForceSellPayload, Trade } from '@/types';
 
-import { defineComponent, ref, nextTick, getCurrentInstance } from 'vue';
+import { defineComponent, ref, computed } from 'vue';
 
 export default defineComponent({
   name: 'ForceExitForm',
@@ -71,13 +71,14 @@ export default defineComponent({
       type: Object as () => Trade,
       required: true,
     },
+    modelValue: { required: true, default: false, type: Boolean },
   },
-  setup(props) {
-    const root = getCurrentInstance();
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
     const botStore = useBotStore();
 
     const form = ref<HTMLFormElement>();
-    const amount = ref<number | null>(null);
+    const amount = ref<number | undefined>(undefined);
     const ordertype = ref('limit');
 
     const checkFormValidity = () => {
@@ -86,6 +87,15 @@ export default defineComponent({
       return valid;
     };
 
+    const model = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value: boolean) {
+        emit('update:modelValue', value);
+      },
+    });
+
     const handleSubmit = () => {
       // Exit when the form isn't valid
       if (!checkFormValidity()) {
@@ -101,9 +111,7 @@ export default defineComponent({
         payload.amount = amount.value;
       }
       botStore.activeBot.forceexit(payload);
-      nextTick(() => {
-        root?.proxy.$bvModal.hide('forceexit-modal');
-      });
+      model.value = false;
     };
     const resetForm = () => {
       amount.value = props.trade.amount;
@@ -115,9 +123,7 @@ export default defineComponent({
       }
     };
 
-    const handleEntry = (bvModalEvt) => {
-      // Prevent modal from closing
-      bvModalEvt.preventDefault();
+    const handleEntry = () => {
       // Trigger submit handler
       handleSubmit();
     };
@@ -129,6 +135,7 @@ export default defineComponent({
       resetForm,
       amount,
       ordertype,
+      model,
     };
   },
 });

src/components/ftbot/TradeList.vue

@@ -83,7 +83,7 @@
         style="width: unset"
       />
     </div>
-    <force-exit-form v-if="activeTrades" :trade="feTrade" />
+    <force-exit-form v-if="activeTrades" v-model="forceExitVisible" :trade="feTrade" />
   </div>
 </template>
 
@@ -121,6 +121,7 @@ export default defineComponent({
     const feTrade = ref<Trade>({} as Trade);
     const perPage = props.activeTrades ? 200 : 15;
     const tradesTable = ref<HTMLFormElement>();
+    const forceExitVisible = ref(false);
 
     const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
     const closedFields: Record<string, string | Function>[] = [
@@ -275,6 +276,7 @@ export default defineComponent({
       onRowClicked,
       onRowSelected,
       feTrade,
+      forceExitVisible,
     };
   },
 });

src/stores/ftbot.ts

@@ -115,6 +115,7 @@ export function createBotSubStore(botId: string, botName: string) {
           );
       },
       tradeDetail: (state) => {
+        // console.log('tradeDetail', state.openTrades.length, state.openTrades);
         let dTrade = state.openTrades.find((item) => item.trade_id === state.detailTradeId);
         if (!dTrade) {
           dTrade = state.trades.find((item) => item.trade_id === state.detailTradeId);