format

src/components/CsvJsonImport/index.vue

@@ -8,7 +8,7 @@
   >
     <div class="dialog-header">
       {{ typeName }} import
-      <close-icon @click="cancelImport" :disabled="disableDialog"/>
+      <close-icon @click="cancelImport" :disabled="disableDialog" />
     </div>
     <div class="dialog-body">
       <text-field
@@ -66,10 +66,7 @@
         class="preview-table"
       />
       <div v-else class="no-data">No data</div>
-      <logs
-        class="import-errors"
-        :messages="importMessages"
-      />
+      <logs class="import-errors" :messages="importMessages" />
     </div>
     <div class="dialog-buttons-container">
       <button
@@ -130,7 +127,7 @@ export default {
     dialogName: String
   },
   emits: ['cancel', 'finish'],
-  data () {
+  data() {
     return {
       disableDialog: false,
       disableImport: false,
@@ -147,24 +144,24 @@ export default {
     }
   },
   computed: {
-    isJson () {
+    isJson() {
       return fIo.isJSON(this.file)
     },
-    isNdJson () {
+    isNdJson() {
       return fIo.isNDJSON(this.file)
     },
-    typeName () {
+    typeName() {
       return this.isJson || this.isNdJson ? 'JSON' : 'CSV'
     }
   },
   watch: {
-    isJson () {
+    isJson() {
       if (this.isJson) {
         this.delimiter = '\u001E'
         this.header = false
       }
     },
-    isNdJson () {
+    isNdJson() {
       if (this.isNdJson) {
         this.delimiter = '\u001E'
         this.header = false
@@ -175,18 +172,17 @@ export default {
       if (!this.tableName) {
         return
       }
-      this.db.validateTableName(this.tableName)
-        .catch(err => {
-          this.tableNameError = err.message + '. Try another table name.'
-        })
+      this.db.validateTableName(this.tableName).catch(err => {
+        this.tableNameError = err.message + '. Try another table name.'
+      })
     }, 400)
   },
   methods: {
-    changeHeaderDisplaying (e) {
+    changeHeaderDisplaying(e) {
       this.header = e
       this.preview()
     },
-    cancelImport () {
+    cancelImport() {
       if (!this.disableDialog) {
         if (this.addedTable) {
           this.db.execute(`DROP TABLE "${this.addedTable}"`)
@@ -196,7 +192,7 @@ export default {
         this.$emit('cancel')
       }
     },
-    reset () {
+    reset() {
       this.header = !this.isJson && !this.isNdJson
       this.quoteChar = '"'
       this.escapeChar = '"'
@@ -210,11 +206,11 @@ export default {
       this.addedTable = null
       this.tableNameError = ''
     },
-    open () {
+    open() {
       this.tableName = this.db.sanitizeTableName(fIo.getFileName(this.file))
       this.$modal.show(this.dialogName)
     },
-    async preview () {
+    async preview() {
       this.disableImport = false
       if (!this.file) {
         return
@@ -257,13 +253,15 @@ export default {
         }
       } catch (err) {
         console.error(err)
-        this.importMessages = [{
-          message: err,
-          type: 'error'
-        }]
+        this.importMessages = [
+          {
+            message: err,
+            type: 'error'
+          }
+        ]
       }
     },
-    async getJsonParseResult (file) {
+    async getJsonParseResult(file) {
       const jsonContent = await fIo.getFileContent(file)
       const isEmpty = !jsonContent.trim()
       return {
@@ -273,10 +271,10 @@ export default {
         },
         hasErrors: false,
         messages: [],
-        rowCount: +(!isEmpty)
+        rowCount: +!isEmpty
       }
     },
-    async loadToDb (file) {
+    async loadToDb(file) {
       if (!this.tableName) {
         this.tableNameError = "Table name can't be empty"
         return
@@ -297,7 +295,9 @@ export default {
       })
       // Get *reactive* link to parsing message for later updates
       parsingMsg = this.importMessages[this.importMessages.length - 1]
-      const parsingLoadingIndicator = setTimeout(() => { parsingMsg.type = 'loading' }, 1000)
+      const parsingLoadingIndicator = setTimeout(() => {
+        parsingMsg.type = 'loading'
+      }, 1000)
 
       let importMsg = {}
       let importLoadingIndicator = null
@@ -321,7 +321,9 @@ export default {
           parsingMsg.type = 'success'
 
           if (parseResult.messages.length > 0) {
-            this.importMessages = this.importMessages.concat(parseResult.messages)
+            this.importMessages = this.importMessages.concat(
+              parseResult.messages
+            )
             parsingMsg.message = `${rowCount} rows are parsed in ${period}.`
           } else {
             // Inform about parsing success
@@ -345,14 +347,19 @@ export default {
 
           // Add table
           start = new Date()
-          await this.db.addTableFromCsv(this.tableName, parseResult.data, progressCounterId)
+          await this.db.addTableFromCsv(
+            this.tableName,
+            parseResult.data,
+            progressCounterId
+          )
           end = new Date()
 
           this.addedTable = this.tableName
           // Inform about import success
           period = time.getPeriod(start, end)
-          importMsg.message = `Importing ${this.typeName} ` +
-          `into a SQLite database is completed in ${period}.`
+          importMsg.message =
+            `Importing ${this.typeName} ` +
+            `into a SQLite database is completed in ${period}.`
           importMsg.type = 'success'
 
           // Loading indicator for import is not needed anymore
@@ -385,7 +392,7 @@ export default {
       this.db.deleteProgressCounter(progressCounterId)
       this.disableDialog = false
     },
-    async finish () {
+    async finish() {
       this.$modal.hide(this.dialogName)
       const stmt = this.getQueryExample()
       const tabId = await this.$store.dispatch('addTab', { query: stmt })
@@ -394,20 +401,20 @@ export default {
       this.$emit('finish')
       events.send('inquiry.create', null, { auto: true })
     },
-    getQueryExample () {
+    getQueryExample() {
       return this.isNdJson
         ? this.getNdJsonQueryExample()
         : this.isJson
           ? this.getJsonQueryExample()
           : [
               '/*',
-        ` * Your CSV file has been imported into ${this.addedTable} table.`,
-        ' * You can run this SQL query to make all CSV records available for charting.',
-        ' */',
-        `SELECT * FROM "${this.addedTable}"`
+              ` * Your CSV file has been imported into ${this.addedTable} table.`,
+              ' * You can run this SQL query to make all CSV records available for charting.',
+              ' */',
+              `SELECT * FROM "${this.addedTable}"`
             ].join('\n')
     },
-    getNdJsonQueryExample () {
+    getNdJsonQueryExample() {
       try {
         const firstRowJson = JSON.parse(this.previewData.values.doc[0])
         const firstKey = Object.keys(firstRowJson)[0]
@@ -415,7 +422,7 @@ export default {
           '/*',
           ` * Your NDJSON file has been imported into ${this.addedTable} table.`,
           ` * Run this SQL query to get values of property ${firstKey} ` +
-          'and make them available for charting.',
+            'and make them available for charting.',
           ' */',
           `SELECT doc->>'${firstKey}'`,
           `FROM "${this.addedTable}"`
@@ -431,7 +438,7 @@ export default {
         ].join('\n')
       }
     },
-    getJsonQueryExample () {
+    getJsonQueryExample() {
       try {
         const firstRowJson = JSON.parse(this.previewData.values.doc[0])
         const firstKey = Object.keys(firstRowJson)[0]
@@ -439,7 +446,7 @@ export default {
           '/*',
           ` * Your JSON file has been imported into ${this.addedTable} table.`,
           ` * Run this SQL query to get values of property ${firstKey} ` +
-          'and make them available for charting.',
+            'and make them available for charting.',
           ' */',
           'SELECT *',
           `FROM "${this.addedTable}"`,
@@ -475,7 +482,7 @@ export default {
 }
 
 #csv-json-table-name {
-margin-bottom: 24px;
+  margin-bottom: 24px;
 }
 
 .chars {
@@ -508,5 +515,4 @@ margin-bottom: 24px;
   justify-content: center;
   align-items: center;
 }
-
 </style>