Update layout store to use enum

src/components/layout/NavBar.vue

@@ -48,6 +48,7 @@ import LoginModal from '@/views/LoginModal.vue';
 import { State, Action, namespace } from 'vuex-class';
 import userService from '@/shared/userService';
 import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
+import { LayoutActions } from '@/store/modules/layout';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
@@ -66,9 +67,9 @@ export default class NavBar extends Vue {
 
   @ftbot.Action ping;
 
-  @layoutNs.Action resetDashboardLayout;
+  @layoutNs.Action [LayoutActions.resetDashboardLayout];
 
-  @layoutNs.Action resetTradingLayout;
+  @layoutNs.Action [LayoutActions.resetTradingLayout];
 
   mounted() {
     this.ping();

src/store/modules/layout.ts

@@ -17,6 +17,23 @@ export enum DashboardLayout {
   cumChartChart = 'g-cumChartChart',
 }
 
+export enum LayoutGetters {
+  getDashboardLayout = 'getDashboardLayout',
+  getTradingLayout = 'getTradingLayout',
+}
+
+export enum LayoutActions {
+  setDashboardLayout = 'setDashboardLayout',
+  setTradingLayout = 'setTradingLayout',
+  resetDashboardLayout = 'resetDashboardLayout',
+  resetTradingLayout = 'resetTradingLayout',
+}
+
+enum LayoutMutations {
+  setDashboardLayout = 'setDashboardLayout',
+  setTradingLayout = 'setTradingLayout',
+}
+
 // Define default layouts
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
   { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 4 },
@@ -68,33 +85,42 @@ export default {
   },
 
   getters: {
-    getDashboardLayout(state) {
+    [LayoutGetters.getDashboardLayout](state) {
       return state.dashboardLayout;
     },
-    getTradingLayout(state) {
+    [LayoutGetters.getTradingLayout](state) {
       return state.tradingLayout;
     },
   },
 
   mutations: {
-    setDashboardLayout(state, layout) {
+    [LayoutMutations.setDashboardLayout](state, layout) {
       console.log('set dashboard layout');
       state.dashboardLayout = layout;
       localStorage.setItem(STORE_DASHBOARD_LAYOUT, JSON.stringify(layout));
     },
-    setTradingLayout(state, layout) {
+    [LayoutMutations.setTradingLayout](state, layout) {
       state.tradingLayout = layout;
       localStorage.setItem(STORE_TRADING_LAYOUT, JSON.stringify(layout));
     },
   },
 
   actions: {
-    resetDashboardLayout({ commit }) {
+    [LayoutActions.setDashboardLayout]({ commit }, layout) {
-      commit('setDashboardLayout', JSON.parse(JSON.stringify(DEFAULT_DASHBOARD_LAYOUT)));
+      commit(LayoutMutations.setDashboardLayout, layout);
+    },
+    [LayoutActions.setTradingLayout]({ commit }, layout) {
+      commit(LayoutMutations.setTradingLayout, layout);
+    },
+    [LayoutActions.resetDashboardLayout]({ commit }) {
+      commit(
+        LayoutMutations.setDashboardLayout,
+        JSON.parse(JSON.stringify(DEFAULT_DASHBOARD_LAYOUT)),
+      );
     },
 
-    resetTradingLayout({ commit }) {
+    [LayoutActions.resetTradingLayout]({ commit }) {
-      commit('setTradingLayout', JSON.parse(JSON.stringify(DEFAULT_TRADING_LAYOUT)));
+      commit(LayoutMutations.setTradingLayout, JSON.parse(JSON.stringify(DEFAULT_TRADING_LAYOUT)));
     },
   },
 };

src/views/Dashboard.vue

@@ -109,7 +109,12 @@ import HourlyChart from '@/components/charts/HourlyChart.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import DraggableContainer from '@/components/layout/DraggableContainer.vue';
 
-import { DashboardLayout, findGridLayout } from '@/store/modules/layout';
+import {
+  DashboardLayout,
+  findGridLayout,
+  LayoutActions,
+  LayoutGetters,
+} from '@/store/modules/layout';
 import { Trade, DailyReturnValue, BalanceInterface, ProfitInterface, DailyPayload } from '@/types';
 
 const ftbot = namespace('ftbot');
@@ -145,9 +150,9 @@ export default class Dashboard extends Vue {
 
   @ftbot.Action getTrades;
 
-  @layoutNs.Getter getDashboardLayout!: GridItemData[];
+  @layoutNs.Getter [LayoutGetters.getDashboardLayout]!: GridItemData[];
 
-  @layoutNs.Mutation setDashboardLayout;
+  @layoutNs.Action [LayoutActions.setDashboardLayout];
 
   @ftbot.Action getOpenTrades;
 

src/views/Trading.vue

@@ -151,7 +151,7 @@ import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
 
 import { Trade } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
-import { TradeLayout, findGridLayout } from '@/store/modules/layout';
+import { TradeLayout, findGridLayout, LayoutGetters, LayoutActions } from '@/store/modules/layout';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
@@ -189,9 +189,9 @@ export default class Trading extends Vue {
 
   @ftbot.State whitelist!: string[];
 
-  @layoutNs.Getter getTradingLayout!: GridItemData[];
+  @layoutNs.Getter [LayoutGetters.getTradingLayout]!: GridItemData[];
 
-  @layoutNs.Mutation setTradingLayout;
+  @layoutNs.Action [LayoutActions.setTradingLayout];
 
   get gridLayout(): GridItemData[] {
     return this.getTradingLayout;