Initial commit

src/components/MainMenu.vue

@@ -0,0 +1,33 @@
+<template>
+  <nav>
+    <div>
+      <router-link to="/editor">Editor</router-link>
+      <router-link to="/my-queries">My queries</router-link>
+    </div>
+    <div>
+      <button>Save</button>
+      <button>Create</button>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'MainMenu'
+}
+</script>
+<style scoped>
+nav {
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-bg-light);
+  border-bottom: 1px solid var(--color-border-light);
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+}
+</style>

src/components/Schema.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <table-description
+      v-for="(table, index) in schema"
+      :key="index"
+      :name="table[0]"
+      :sql="table[1]"
+    />
+  </div>
+</template>
+
+<script>
+import TableDescription from '@/components/TableDescription'
+
+export default {
+  name: 'Schema',
+  components: { TableDescription },
+  props: ['schema']
+}
+</script>

src/components/SqlTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <vue-good-table v-if="data" :columns="columns" :rows="rows"/>
+</template>
+
+<script>
+import 'vue-good-table/dist/vue-good-table.css'
+import { VueGoodTable } from 'vue-good-table'
+
+export default {
+  name: 'SqlTable',
+  components: { VueGoodTable },
+  props: ['data'],
+  computed: {
+    columns () {
+      const columns = []
+      this.data.columns.forEach(column => {
+        columns.push({ label: column, field: column })
+      })
+      return columns
+    },
+    rows () {
+      const rows = []
+      this.data.values.forEach(row => {
+        const newRow = {}
+        row.forEach((value, index) => {
+          const column = this.data.columns[index]
+          newRow[column] = value
+        })
+        rows.push(newRow)
+      })
+      return rows
+    }
+  }
+}
+</script>

src/components/TableDescription.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div @click="colVisible = !colVisible" class="table-name">{{ name }}</div>
+    <div v-show="colVisible" class="columns">
+      <div v-for="(col, index) in columns" :key="index">
+        {{ col.name }}, {{ col.type }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sqliteParser from 'sqlite-parser'
+
+export default {
+  name: 'TableDescription',
+  props: ['name', 'sql'],
+  data () {
+    return {
+      colVisible: false
+    }
+  },
+  computed: {
+    ast () {
+      return sqliteParser(this.sql)
+    },
+    columns () {
+      const columns = []
+      this.ast.statement[0].definition.forEach(item => {
+        if (item.variant === 'column') {
+          let type = item.datatype.variant
+          if (item.datatype.args) {
+            type = type + '(' + item.datatype.args.expression[0].value
+            if (item.datatype.args.expression.length === 2) {
+              type = type + ', ' + item.datatype.args.expression[1].value
+            }
+            type = type + ')'
+          }
+          columns.push({ name: item.name, type: type })
+        }
+      })
+      return columns
+    }
+  }
+}
+</script>
+<style scoped>
+.table-name:hover {
+  cursor: pointer;
+}
+.columns {
+  margin-left: 30px;
+}
+</style>