linter

src/views/MainView/Workspace/Schema/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div id="schema-container">
+    <div id="schema-filter">
+      <text-field v-model="filter" placeholder="Search table" width="100%" />
+    </div>
+    <div id="db">
+      <div class="db-name" @click="schemaVisible = !schemaVisible">
+        <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible" />
+        {{ dbName }}
+      </div>
+      <db-uploader id="db-edit" type="small" />
+      <export-icon tooltip="Export database" @click="exportToFile" />
+      <add-table-icon @click="addCsvJson" />
+    </div>
+    <div v-show="schemaVisible" class="schema">
+      <table-description
+        v-for="table in schema"
+        :key="table.name"
+        :name="table.name"
+        :columns="table.columns"
+      />
+    </div>
+
+    <!--Parse csv or json dialog  -->
+    <csv-json-import
+      ref="addCsvJson"
+      :file="file"
+      :db="$store.state.db"
+      dialog-name="addCsvJson"
+    />
+  </div>
+</template>
+
+<script>
+import fIo from '@/lib/utils/fileIo'
+import events from '@/lib/utils/events'
+import TableDescription from './TableDescription'
+import TextField from '@/components/TextField'
+import TreeChevron from '@/components/svg/treeChevron'
+import DbUploader from '@/components/DbUploader'
+import ExportIcon from '@/components/svg/export'
+import AddTableIcon from '@/components/svg/addTable'
+import CsvJsonImport from '@/components/CsvJsonImport'
+
+export default {
+  name: 'Schema',
+  components: {
+    TableDescription,
+    TextField,
+    TreeChevron,
+    DbUploader,
+    ExportIcon,
+    AddTableIcon,
+    CsvJsonImport
+  },
+  data() {
+    return {
+      schemaVisible: true,
+      filter: null,
+      file: null
+    }
+  },
+  computed: {
+    schema() {
+      if (!this.$store.state.db.schema) {
+        return []
+      }
+
+      return !this.filter
+        ? this.$store.state.db.schema
+        : this.$store.state.db.schema.filter(
+            table =>
+              table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
+          )
+    },
+    dbName() {
+      return this.$store.state.db.dbName
+    }
+  },
+  methods: {
+    exportToFile() {
+      this.$store.state.db.export(`${this.dbName}.sqlite`)
+    },
+    async addCsvJson() {
+      this.file = await fIo.getFileFromUser('.csv,.json,.ndjson')
+      await this.$nextTick()
+      const csvJsonImportModal = this.$refs.addCsvJson
+      csvJsonImportModal.reset()
+      await csvJsonImportModal.preview()
+      csvJsonImportModal.open()
+
+      const isJson = fIo.isJSON(this.file) || fIo.isNDJSON(this.file)
+      events.send('database.import', this.file.size, {
+        from: isJson ? 'json' : 'csv',
+        new_db: false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#schema-container {
+  position: relative;
+  padding-bottom: 24px;
+}
+
+.schema {
+  margin-left: 12px;
+  padding: 0 12px;
+}
+#schema-filter {
+  padding: 32px 12px;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  width: 100%;
+  height: 100px;
+  box-sizing: border-box;
+  background-image: linear-gradient(white 73%, rgba(255, 255, 255, 0));
+  z-index: 2;
+}
+.schema,
+.db-name {
+  color: var(--color-text-base);
+  font-size: 13px;
+  white-space: nowrap;
+}
+#db {
+  display: flex;
+  align-items: center;
+  margin-top: -5px;
+  padding: 0 12px;
+}
+
+.db-name {
+  cursor: pointer;
+  margin-right: 6px;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.db-name:hover .chevron-icon path,
+:deep(.table-name:hover .chevron-icon path) {
+  fill: var(--color-gray-dark);
+}
+</style>