Refactor views structure

src/views/json/JSONFormatter.vue

@@ -0,0 +1,51 @@
+<template>
+  <h2 class="tool-title">JSON formatter</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: ""
+      },
+      toolResult: ""
+    };
+  },
+  methods: {
+    result() {
+      if (!this.toolData.data.length) {
+        this.toolResult = "";
+      } else {
+        try {
+          this.toolResult = JSON.stringify(JSON.parse(this.toolData.data), null, 4);
+        } catch (e) {
+          this.toolResult = "invalid syntax";
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>

src/views/json/JSONMinifier.vue

@@ -0,0 +1,51 @@
+<template>
+  <h2 class="tool-title">JSON Minifier</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="minify"></textarea>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: ""
+      },
+      toolResult: ""
+    };
+  },
+  methods: {
+    minify() {
+      if (!this.toolData.data.length) {
+        this.toolResult = "";
+      } else {
+        try {
+          this.toolResult = JSON.stringify(JSON.parse(this.toolData.data));
+        } catch (e) {
+          this.toolResult = "invalid syntax";
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>