feat: rename bot

src/components/BotEntry.vue

@@ -16,9 +16,10 @@
         R
       </b-form-checkbox>
       <div v-if="!noButtons" class="d-flex flex-align-cent">
-        <!-- <b-button class="ml-1" size="sm" title="Edit bot">
+        <b-button class="ml-1" size="sm" title="Delete bot" @click="$emit('edit')">
-          <EditIcon :size="16" title="Edit Button" />
+          <EditIcon :size="16" />
-        </b-button> -->
+        </b-button>
+
         <b-button class="ml-1" size="sm" title="Delete bot" @click.prevent="clickRemoveBot(bot)">
           <DeleteIcon :size="16" title="Delete Bot" />
         </b-button>
@@ -31,15 +32,19 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
-import LoginModal from '@/views/LoginModal.vue';
+import EditIcon from 'vue-material-design-icons/Pencil.vue';
-import EditIcon from 'vue-material-design-icons/Cog.vue';
 import DeleteIcon from 'vue-material-design-icons/Delete.vue';
 import { BotDescriptor, BotDescriptors } from '@/types';
 import StoreModules from '@/store/storeSubModules';
 
 const ftbot = namespace(StoreModules.ftbot);
 
-@Component({ components: { LoginModal, DeleteIcon, EditIcon } })
+@Component({
+  components: {
+    DeleteIcon,
+    EditIcon,
+  },
+})
 export default class BotList extends Vue {
   @Prop({ default: false, type: Object }) bot!: BotDescriptor;
 
@@ -79,5 +84,3 @@ export default class BotList extends Vue {
   }
 }
 </script>
-
-<style scoped></style>

src/components/BotList.vue

@@ -10,7 +10,14 @@
         :title="`${bot.botId} - ${bot.botName} - ${bot.botUrl}`"
         @click="selectBot(bot.botId)"
       >
-        <bot-entry :bot="bot" :no-buttons="small" />
+        <bot-rename
+          v-if="editingBots.includes(bot.botId)"
+          :bot="bot"
+          @saved="stopEditBot(bot.botId)"
+          @cancelled="stopEditBot(bot.botId)"
+        />
+
+        <bot-entry v-else :bot="bot" :no-buttons="small" @edit="editBot(bot.botId)" />
       </b-list-group-item>
     </b-list-group>
     <LoginModal v-if="!small" class="mt-2" login-text="Add new bot" />
@@ -23,12 +30,19 @@ import { namespace } from 'vuex-class';
 import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 import LoginModal from '@/views/LoginModal.vue';
 import BotEntry from '@/components/BotEntry.vue';
+import BotRename from '@/components/BotRename.vue';
 import { BotDescriptors } from '@/types';
 import StoreModules from '@/store/storeSubModules';
 
 const ftbot = namespace(StoreModules.ftbot);
 
-@Component({ components: { LoginModal, BotEntry } })
+@Component({
+  components: {
+    LoginModal,
+    BotEntry,
+    BotRename,
+  },
+})
 export default class BotList extends Vue {
   @Prop({ default: false, type: Boolean }) small!: boolean;
 
@@ -41,7 +55,21 @@ export default class BotList extends Vue {
   @ftbot.Getter [MultiBotStoreGetters.allAvailableBots]: BotDescriptors;
 
   @ftbot.Action selectBot;
+
+  editingBots: string[] = [];
+
+  editBot(botId: string) {
+    if (!this.editingBots.includes(botId)) {
+      this.editingBots.push(botId);
+    }
+  }
+
+  stopEditBot(botId: string) {
+    if (!this.editingBots.includes(botId)) {
+      return;
+    }
+
+    this.editingBots.splice(this.editingBots.indexOf(botId), 1);
+  }
 }
 </script>
-
-<style scoped></style>

src/components/BotRename.vue

@@ -0,0 +1,57 @@
+<template>
+  <form class="d-flex" @submit.prevent="save">
+    <b-form-input
+      v-model="newName"
+      size="sm"
+      class="w-100"
+      placeholder="Bot name"
+      style="border-style: solid; border-width: 1px"
+      autofocus
+    />
+
+    <div class="d-flex ml-2">
+      <b-button type="submit" size="sm" title="Save">
+        <CheckIcon :size="16" />
+      </b-button>
+
+      <b-button class="ml-1" size="sm" title="Cancel" @click="$emit('cancelled')">
+        <CloseIcon :size="16" />
+      </b-button>
+    </div>
+  </form>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import CheckIcon from 'vue-material-design-icons/Check.vue';
+import CloseIcon from 'vue-material-design-icons/Close.vue';
+import { BotDescriptor, RenameBotPayload } from '@/types';
+import StoreModules from '@/store/storeSubModules';
+
+const ftbot = namespace(StoreModules.ftbot);
+
+@Component({
+  components: {
+    CheckIcon,
+    CloseIcon,
+  },
+})
+export default class BotList extends Vue {
+  @Prop({ required: true, type: Object }) bot!: BotDescriptor;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  @ftbot.Action renameBot!: (payload: RenameBotPayload) => Promise<void>;
+
+  newName: string = this.bot.botName;
+
+  save() {
+    this.renameBot({
+      botId: this.bot.botId,
+      botName: this.newName,
+    });
+
+    this.$emit('saved');
+  }
+}
+</script>

src/shared/userService.ts

@@ -13,6 +13,12 @@ export class UserService {
     this.botId = botId;
   }
 
+  public renameBot(newName: string): void {
+    const newInfo = this.getLoginInfo();
+    newInfo.botName = newName;
+    this.storeLoginInfo(newInfo);
+  }
+
   /**
    * Stores info for current botId in the object of all bots.
    */

src/store/modules/botStoreWrapper.ts

@@ -6,6 +6,7 @@ import {
   DailyReturnValue,
   MultiDeletePayload,
   MultiForcesellPayload,
+  RenameBotPayload,
   Trade,
 } from '@/types';
 import { AxiosInstance } from 'axios';
@@ -182,7 +183,15 @@ export default function createBotStore(store) {
       state.refreshing = refreshing;
     },
     addBot(state: FTMultiBotState, bot: BotDescriptor) {
-      state.availableBots[bot.botId] = bot;
+      // When Vue gets initialized, only existing objects will be added with reactivity.
+      // To add reactivity to new property, we need to mutate the already reactive object.
+      state.availableBots = {
+        ...state.availableBots,
+        [bot.botId]: bot,
+      };
+    },
+    renameBot(state: FTMultiBotState, bot: RenameBotPayload) {
+      state.availableBots[bot.botId].botName = bot.botName;
     },
     removeBot(state: FTMultiBotState, botId: string) {
       if (botId in state.availableBots) {
@@ -214,6 +223,17 @@ export default function createBotStore(store) {
       dispatch(`${bot.botId}/botAdded`);
       commit('addBot', bot);
     },
+    renameBot({ dispatch, getters, commit }, bot: RenameBotPayload) {
+      if (!Object.keys(getters.allAvailableBots).includes(bot.botId)) {
+        // TODO: handle error!
+        console.error('Bot not found');
+        return;
+      }
+
+      dispatch(`${bot.botId}/rename`, bot.botName).then(() => {
+        commit('renameBot', bot);
+      });
+    },
     removeBot({ commit, getters, dispatch }, botId: string) {
       if (Object.keys(getters.allAvailableBots).includes(botId)) {
         dispatch(`${botId}/logout`);

src/store/modules/ftbot/index.ts

@@ -155,6 +155,7 @@ export enum BotStoreActions {
   setBacktestResultKey = 'setBacktestResultKey',
   sysInfo = 'sysInfo',
   logout = 'logout',
+  rename = 'rename',
 }
 
 export function createBotSubStore(botId: string, botName: string) {
@@ -488,6 +489,9 @@ export function createBotSubStore(botId: string, botName: string) {
       [BotStoreActions.logout]() {
         userService.logout();
       },
+      [BotStoreActions.rename](ctx, name) {
+        userService.renameBot(name);
+      },
       [BotStoreActions.setRefreshRequired]({ commit }, refreshRequired: boolean) {
         commit('updateRefreshRequired', refreshRequired);
       },

src/types/auth.ts

@@ -31,3 +31,8 @@ export interface BotDescriptor {
 export interface BotDescriptors {
   [key: string]: BotDescriptor;
 }
+
+export interface RenameBotPayload {
+  botId: string;
+  botName: string;
+}