Move layouts to store

src/store/index.ts

@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import userService from '@/shared/userService';
 import ftbotModule from './modules/ftbot';
 import alertsModule from './modules/alerts';
+import layoutModule from './modules/layout';
 
 const AUTO_REFRESH = 'ft_auto_refresh';
 
@@ -19,6 +20,7 @@ export default new Vuex.Store({
   modules: {
     ftbot: ftbotModule,
     alerts: alertsModule,
+    layout: layoutModule,
   },
   mutations: {
     setPing(state, ping) {

src/store/modules/layout.ts

@@ -0,0 +1,53 @@
+import { GridItemData } from 'vue-grid-layout';
+
+const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
+  { i: 'g-reloadControl', x: 0, y: 0, w: 4, h: 1 },
+  { i: 'g-botControls', x: 0, y: 0, w: 4, h: 3 },
+  { i: 'g-MultiPane', x: 0, y: 0, w: 4, h: 7 },
+  { i: 'g-openTrades', x: 4, y: 0, w: 8, h: 5 },
+  { i: 'g-tradeHistory', x: 4, y: 4, w: 8, h: 6 },
+  { i: 'g-logView', x: 0, y: 9, w: 12, h: 3 },
+];
+
+const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
+  { i: 'g-dailyChart', x: 0, y: 0, w: 4, h: 6 },
+  { i: 'g-hourlyChart', x: 4, y: 0, w: 4, h: 6 },
+  { i: 'g-cumChartChart', x: 0, y: 6, w: 4, h: 6 },
+];
+
+export default {
+  namespaced: true,
+  state: {
+    dashboardLayout: DEFAULT_DASHBOARD_LAYOUT,
+    tradingLayout: DEFAULT_TRADING_LAYOUT,
+  },
+
+  getters: {
+    getDashboardLayout(state) {
+      return state.dashboardLayout;
+    },
+    getTradingLayout(state) {
+      return state.tradingLayout;
+    },
+  },
+
+  mutations: {
+    setDashboardLayout(state, layout) {
+      console.log('set dashboard layout');
+      state.dashboardLayout = layout;
+    },
+    setTradingLayout(state, layout) {
+      state.tradingLayout = layout;
+    },
+  },
+
+  actions: {
+    resetDashboardLayout({ commit }) {
+      commit('setDashboardLayout', DEFAULT_DASHBOARD_LAYOUT);
+    },
+
+    resetTradingLayout({ commit }) {
+      commit('setTradingLayout', DEFAULT_TRADING_LAYOUT);
+    },
+  },
+};

src/views/Dashboard.vue

@@ -47,6 +47,7 @@ import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import { Trade, DailyReturnValue } from '@/types';
 
 const ftbot = namespace('ftbot');
+const layoutNs = namespace('layout');
 
 @Component({
   components: {
@@ -57,7 +58,7 @@ const ftbot = namespace('ftbot');
     CumProfitChart,
   },
 })
-export default class Trading extends Vue {
+export default class Dashboard extends Vue {
   @ftbot.Getter closedTrades!: Trade[];
 
   @ftbot.State dailyStats!: DailyReturnValue;
@@ -66,19 +67,21 @@ export default class Trading extends Vue {
 
   @ftbot.Action getTrades;
 
-  public gridLayout: GridItemData[] = [
+  @layoutNs.Getter getDashboardLayout!: GridItemData[];
-    { i: 'g-dailyChart', x: 0, y: 0, w: 4, h: 6 },
+
-    { i: 'g-hourlyChart', x: 4, y: 0, w: 4, h: 6 },
+  @layoutNs.Mutation setDashboardLayout;
-    { i: 'g-cumChartChart', x: 4, y: 0, w: 4, h: 6 },
+
-  ];
+  get gridLayout(): GridItemData[] {
+    return this.getDashboardLayout;
+  }
 
   mounted() {
     this.getDaily();
     this.getTrades();
   }
 
-  layoutUpdatedEvent(newLayout: GridItemData[]) {
+  layoutUpdatedEvent(newLayout) {
-    console.log(newLayout);
+    this.setDashboardLayout(newLayout);
   }
 }
 </script>

src/views/Trading.vue

@@ -1,5 +1,10 @@
 <template>
-  <GridLayout class="h-100 w-100" :row-height="50" :layout="gridLayout">
+  <GridLayout
+    class="h-100 w-100"
+    :row-height="50"
+    :layout="gridLayout"
+    @layout-updated="layoutUpdatedEvent"
+  >
     <GridItem
       :i="gridLayout[0].i"
       :x="gridLayout[0].x"
@@ -109,6 +114,7 @@ import { Trade } from '@/types';
 import { UserStoreGetters } from '@/store/modules/ftbot';
 
 const ftbot = namespace('ftbot');
+const layoutNs = namespace('layout');
 
 @Component({
   components: {
@@ -135,14 +141,17 @@ export default class Trading extends Vue {
 
   @ftbot.Getter [UserStoreGetters.tradeDetail]!: Trade;
 
-  public gridLayout: GridItemData[] = [
+  @layoutNs.Getter getTradingLayout!: GridItemData[];
-    { i: 'g-reloadControl', x: 0, y: 0, w: 4, h: 1 },
+
-    { i: 'g-botControls', x: 0, y: 0, w: 4, h: 3 },
+  @layoutNs.Mutation setTradingLayout;
-    { i: 'g-MultiPane', x: 0, y: 0, w: 4, h: 7 },
+
-    { i: 'g-openTrades', x: 4, y: 0, w: 8, h: 5 },
+  get gridLayout(): GridItemData[] {
-    { i: 'g-tradeHistory', x: 4, y: 4, w: 8, h: 6 },
+    return this.getTradingLayout;
-    { i: 'g-logView', x: 0, y: 9, w: 12, h: 3 },
+  }
-  ];
+
+  layoutUpdatedEvent(newLayout) {
+    this.setTradingLayout(newLayout);
+  }
 }
 </script>