From b882a38950624d93e665b1a58c4880fe310146d5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 25 Oct 2021 23:41:05 +0100
Subject: [PATCH] :construction: WIP, redo layout and size, to use VueX state

---
 src/components/Settings/ItemSizeSelector.vue | 2 ++
 src/components/Settings/LayoutSelector.vue   | 2 ++
 src/store.js                                 | 8 ++++++++
 src/utils/StoreMutations.js                  | 2 ++
 4 files changed, 14 insertions(+)

diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index 135d26be..470a186f 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import StoreKeys from '@/utils/StoreMutations';
 import IconSmall from '@/assets/interface-icons/icon-size-small.svg';
 import IconMedium from '@/assets/interface-icons/icon-size-medium.svg';
 import IconLarge from '@/assets/interface-icons/icon-size-large.svg';
@@ -47,6 +48,7 @@ export default {
   methods: {
     updateIconSize(iconSize) {
       this.$emit('iconSizeUpdated', iconSize);
+      this.$store.commit(StoreKeys.SET_ITEM_SIZE, iconSize);
     },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index b40cd4d4..f7fea7a0 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import StoreKeys from '@/utils/StoreMutations';
 import IconDeafault from '@/assets/interface-icons/layout-default.svg';
 import IconHorizontal from '@/assets/interface-icons/layout-horizontal.svg';
 import IconVertical from '@/assets/interface-icons/layout-vertical.svg';
@@ -47,6 +48,7 @@ export default {
   methods: {
     updateDisplayLayout(layout) {
       this.$emit('layoutUpdated', layout);
+      this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);
     },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
diff --git a/src/store.js b/src/store.js
index 42d85aa1..b89e0122 100644
--- a/src/store.js
+++ b/src/store.js
@@ -14,6 +14,8 @@ const {
   UPDATE_CONFIG,
   SET_MODAL_OPEN,
   SET_LANGUAGE,
+  SET_ITEM_LAYOUT,
+  SET_ITEM_SIZE,
   UPDATE_ITEM,
   SET_EDIT_MODE,
   UPDATE_PAGE_INFO,
@@ -164,6 +166,12 @@ const store = new Vuex.Store({
       });
       state.config = config;
     },
+    [SET_ITEM_LAYOUT](state, layout) {
+      state.config.appConfig.layout = layout;
+    },
+    [SET_ITEM_SIZE](state, iconSize) {
+      state.config.appConfig.iconSize = iconSize;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index dd6f16c4..e32a2bd6 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -5,6 +5,8 @@ const KEY_NAMES = [
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
   'SET_EDIT_MODE',
+  'SET_ITEM_LAYOUT',
+  'SET_ITEM_SIZE',
   'UPDATE_ITEM',
   'UPDATE_PAGE_INFO',
   'UPDATE_APP_CONFIG',