Refactor views structure

src/views/general/TableToMarkdownTable.vue

@@ -0,0 +1,102 @@
+<template>
+  <h2 class="tool-title">Table to Markdown table</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data (paste from excel)</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label for="style">Table Style</label>
+    <div>
+      <select id="style" v-model="toolData.selectedStyle" v-on:change="result">
+        <option value="">Default</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label>Transpose table</label>
+
+    <div>
+      <input id="transpose" name="transpose" v-model="toolData.transpose" v-on:change="result" type="checkbox"> <label
+      for="transpose">transpose</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import { unproxy } from "@/utils/unproxy";
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: "",
+        selectedStyle: "",
+        transpose: false
+      },
+      toolResult: ""
+    };
+  },
+  methods: {
+    result() {
+      let rows = unproxy(this.toolData.data).split("\n");
+      let numCols = rows[0].split("\t").length;
+
+      // Transpose the table if the option is selected
+      if (this.toolData.transpose) {
+        const transposedData = [];
+        for (let j = 0; j < numCols; j++) {
+          const newRow = [];
+          for (let i = 0; i < rows.length; i++) {
+            newRow.push(rows[i].split("\t")[j] || "");
+          }
+          transposedData.push(newRow.join("\t"));
+        }
+        rows = transposedData;
+        numCols = rows[0].split("\t").length;
+      }
+
+      let output = "";
+
+      // Generate header row
+      output += "| " + rows[0].split("\t").join(" | ") + " |\n";
+
+      // Generate separator row based on selected style
+      switch (this.toolData.selectedStyle) {
+        default:
+          output += "| " + "-".repeat(numCols).split("").join(" | ") + " |\n";
+          break;
+      }
+
+      // Generate data rows
+      for (let i = 1; i < rows.length; i++) {
+        if (this.toolData.selectedStyle === "grid") {
+          output += "| " + rows[i].split("\t").join(" | ") + " |\n";
+        } else {
+          output += "| " + rows[i].split("\t").join(" | ") + " |\n";
+        }
+      }
+
+      this.toolResult = output;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>