From f1fc013457cfdae844dea825e403e1bd8c8d6e7b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 21:03:26 +0100
Subject: [PATCH] :construction: You can now save items to VueX store, neat!

---
 src/components/InteractiveEditor/EditItem.vue | 24 ++++++++++++++-----
 src/store.js                                  | 19 ++++++++++++++-
 src/utils/StoreMutations.js                   |  1 +
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index a35b0ff9..d248aee9 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -7,22 +7,22 @@
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-  <h3>Edit Item</h3>
-  <form>
-    <div class="row" v-for="row in formData" :key="row.name">
+    <h3>Edit Item</h3>
+    <div class="row" v-for="(row, index) in formData" :key="row.name">
       <Input
-        :label="row.name"
-        :value="row.value"
+        v-model="formData[index].value"
         :description="row.description"
+        :label="row.name"
         layout="horizontal"
         />
     </div>
-  </form>
+    <Button :click="saveItem">Save</Button>
   </modal>
 </template>
 
 <script>
 import Input from '@/components/FormElements/Input';
+import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -43,6 +43,7 @@ export default {
   computed: {},
   components: {
     Input,
+    Button,
   },
   mounted() {
     this.item = this.getItemFromState(this.itemId);
@@ -66,6 +67,13 @@ export default {
     getItemFromState(id) {
       return this.$store.getters.getItemById(id);
     },
+    saveItem() {
+      const newItem = {};
+      this.formData.forEach((row) => {
+        newItem[row.name] = row.value;
+      });
+      this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+    },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditMenu');
@@ -89,6 +97,10 @@ export default {
     &:not(:last-child) {
       border-bottom: 1px dotted var(--config-settings-color);
     }
+    .input-container input.input-field {
+      font-size: 1rem;
+      padding: 0.35rem 0.5rem;
+    }
   }
 }
 
diff --git a/src/store.js b/src/store.js
index 2b2ce518..dd05f8ef 100644
--- a/src/store.js
+++ b/src/store.js
@@ -8,7 +8,12 @@ import filterUserSections from '@/utils/CheckSectionVisibility';
 
 Vue.use(Vuex);
 
-const { UPDATE_CONFIG, SET_MODAL_OPEN, SET_LANGUAGE } = Keys;
+const {
+  UPDATE_CONFIG,
+  SET_MODAL_OPEN,
+  SET_LANGUAGE,
+  UPDATE_ITEM,
+} = Keys;
 
 const store = new Vuex.Store({
   state: {
@@ -54,6 +59,18 @@ const store = new Vuex.Store({
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
     },
+    [UPDATE_ITEM](state, payload) {
+      const { itemId, newItem } = payload;
+      const newConfig = state.config;
+      newConfig.sections.forEach((section, secIndex) => {
+        section.items.forEach((item, itemIndex) => {
+          if (item.id === itemId) {
+            newConfig.sections[secIndex].items[itemIndex] = newItem;
+          }
+        });
+      });
+      state.config = newConfig;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index f5ab815f..4e742276 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -3,6 +3,7 @@ const KEY_NAMES = [
   'UPDATE_CONFIG',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
+  'UPDATE_ITEM',
 ];
 
 // Convert array of key names into an object, and export