From 829cb07745276a546f643819ae3c28f8e3f771c8 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 18 Aug 2020 08:29:40 +0200
Subject: [PATCH] Move layouts to store

---
 src/store/index.ts          |  2 ++
 src/store/modules/layout.ts | 53 +++++++++++++++++++++++++++++++++++++
 src/views/Dashboard.vue     | 19 +++++++------
 src/views/Trading.vue       | 27 ++++++++++++-------
 4 files changed, 84 insertions(+), 17 deletions(-)
 create mode 100644 src/store/modules/layout.ts

diff --git a/src/store/index.ts b/src/store/index.ts
index 74afc016..f1b18cc6 100644
--- a/src/store/index.ts
+++ b/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) {
diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts
new file mode 100644
index 00000000..500552ad
--- /dev/null
+++ b/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);
+    },
+  },
+};
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 674c5819..d1a15c23 100644
--- a/src/views/Dashboard.vue
+++ b/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[] = [
-    { 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: 4, y: 0, w: 4, h: 6 },
-  ];
+  @layoutNs.Getter getDashboardLayout!: GridItemData[];
+
+  @layoutNs.Mutation setDashboardLayout;
+
+  get gridLayout(): GridItemData[] {
+    return this.getDashboardLayout;
+  }
 
   mounted() {
     this.getDaily();
     this.getTrades();
   }
 
-  layoutUpdatedEvent(newLayout: GridItemData[]) {
-    console.log(newLayout);
+  layoutUpdatedEvent(newLayout) {
+    this.setDashboardLayout(newLayout);
   }
 }
 </script>
diff --git a/src/views/Trading.vue b/src/views/Trading.vue
index 24cabe3e..3089f0b1 100644
--- a/src/views/Trading.vue
+++ b/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[] = [
-    { 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 },
-  ];
+  @layoutNs.Getter getTradingLayout!: GridItemData[];
+
+  @layoutNs.Mutation setTradingLayout;
+
+  get gridLayout(): GridItemData[] {
+    return this.getTradingLayout;
+  }
+
+  layoutUpdatedEvent(newLayout) {
+    this.setTradingLayout(newLayout);
+  }
 }
 </script>