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>

src/styles/color-palette.scss

@@ -31,7 +31,9 @@
   --item-group-shadow: var(--item-shadow);
   --settings-container-shadow: none;
 
-  /* Specific components, using variables allows them to be overridden individually */
+  /* Color variables for specific components
+  * all variables are optional, since they inherit initial values from above*
+  * Using specific variables makes overriding for custom themes really easy */
   --heading-text-color: var(--primary);
   --nav-link-text-color: var(--primary);
   --nav-link-background-color: #607d8b33;
@@ -53,4 +55,6 @@
   --welcome-popup-text-color: var(--primary);
   --config-code-background: #fff;
   --config-code-color: var(--background);
+  --config-settings-color: var(--background);
+  --config-settings-background: var(--primary);
 }

src/styles/global-styles.scss

@@ -11,7 +11,7 @@ html {
 }
 
 /* Default app font face */
-body, div, p, a, span, label, input {
+body, div, p, a, span, label, input, button {
     font-family: 'Inconsolata', sans-serif;
 }
 

src/views/Home.vue

@@ -84,7 +84,10 @@ export default {
     getSections(sections) {
       // If the user has stored sections in local storage, return those
       const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
-      if (localSections && localSections.length >= 1) return localSections;
+      if (localSections) {
+        const json = JSON.parse(localSections);
+        if (json.length >= 1) return json;
+      }
       // Otherwise, return the usuall data from conf.yml
       return sections;
     },