You can now edit sections and items from the UI 🤓

src/components/Configuration/ConfigContainer.vue

@@ -1,12 +1,9 @@
 <template>
   <Tabs>
-    <TabItem name="Edit">
-      <div class="first-tab">Todo</div>
+    <TabItem name="Config Editor">
+         <JsonEditor :sections="sections" />
     </TabItem>
-    <TabItem name="Raw Editor">
-         <RawEditor :sections="sections" />
-    </TabItem>
-    <TabItem name="Download">
+    <TabItem name="View/ Save YAML">
         <pre>{{this.jsonParser(this.sections)}}</pre>
     </TabItem>
     <TabItem name="Add Item">
@@ -19,7 +16,7 @@
 
 import JsonToYaml from '@/utils/JsonToYaml';
 import AddItem from '@/components/Configuration/AddItem';
-import RawEditor from '@/components/Configuration/RawEditor';
+import JsonEditor from '@/components/Configuration/JsonEditor';
 
 export default {
   name: 'ConfigContainer',
@@ -33,7 +30,7 @@ export default {
   },
   components: {
     AddItem,
-    RawEditor,
+    JsonEditor,
   },
 };
 </script>

src/components/Configuration/JsonEditor.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="json-editor-outer">
+    <v-jsoneditor
+      v-model="jsonData"
+      :options="options"
+      height="650px"
+    />
+    <button class="save-button" @click="save()">Save Changes</button>
+
+  </div>
+</template>
+
+<script>
+
+import VJsoneditor from 'v-jsoneditor';
+import { localStorageKeys } from '@/utils/defaults';
+
+export default {
+  name: 'JsonEditor',
+  props: {
+    sections: Array,
+  },
+  components: {
+    VJsoneditor,
+  },
+  data() {
+    return {
+      jsonData: this.sections,
+      options: {
+        mode: 'tree',
+        modes: ['tree', 'code', 'preview'],
+        name: 'sections',
+      },
+    };
+  },
+  methods: {
+    save() {
+      localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+.json-editor-outer {
+  text-align: center;
+}
+
+button.save-button {
+  padding:  0.5rem 1rem;
+  margin: 0.25rem auto;
+  font-size: 1.2rem;
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  border: 1px solid var(--config-settings-color);
+  border-radius: var(--curve-factor);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+  }
+}
+
+.jsoneditor-menu {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+}
+
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+}
+
+</style>

src/components/Configuration/RawEditor.vue

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <v-jsoneditor
-      v-model="json"
-      :options="options"
-      :plus="false"
-      height="650px"
-      @error="onError"
-    />
-  </div>
-</template>
-
-<script>
-
-import VJsoneditor from 'v-jsoneditor';
-
-export default {
-  name: 'RawEditor',
-  props: {
-    sections: Array,
-  },
-  components: {
-    VJsoneditor,
-  },
-  data() {
-    return {
-      json: this.sections,
-    };
-  },
-  methods: {
-    onError() {
-      console.log('error');
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-
-</style>