From ff031d110a8b4d19bf5c724b506385a3eccb3456 Mon Sep 17 00:00:00 2001
From: Kirill Stytsenko <kirill@styts.com>
Date: Mon, 17 May 2021 16:23:40 +0200
Subject: [PATCH] Controls for selecting column types

---
 fda-ui/components/TableCreate.vue             |  8 +---
 .../pages/db/_db_id/tables/table_from_csv.vue | 41 ++++++++++++++++---
 fda-ui/server-middleware/index.js             | 19 +++++----
 3 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/fda-ui/components/TableCreate.vue b/fda-ui/components/TableCreate.vue
index cc84fc70c5..8012b2c94e 100644
--- a/fda-ui/components/TableCreate.vue
+++ b/fda-ui/components/TableCreate.vue
@@ -100,13 +100,7 @@ export default {
       const data = {
         name: this.name,
         description: this.description,
-        columns: this.columns.map((c) => {
-          // c.nullAllowed = c.isNullAllowed
-          // c.primaryKey = c.isPrimaryKey
-          // delete c.isPrimaryKey
-          // delete c.isNullAllowed
-          return c
-        })
+        columns: this.columns
       }
       try {
         const res = await this.$axios.post(`/api/tables/api/database/${this.$route.params.db_id}/table`, data)
diff --git a/fda-ui/pages/db/_db_id/tables/table_from_csv.vue b/fda-ui/pages/db/_db_id/tables/table_from_csv.vue
index b8a8b706a0..0bc5dbf1ae 100644
--- a/fda-ui/pages/db/_db_id/tables/table_from_csv.vue
+++ b/fda-ui/pages/db/_db_id/tables/table_from_csv.vue
@@ -14,7 +14,7 @@
             label="CSV File" />
         </v-col>
         <v-col cols="4" class="mt-3">
-          <v-btn :loading="loading" @click="upload">Upload</v-btn>
+          <v-btn :disabled="!file" :loading="loading" @click="upload">Upload</v-btn>
         </v-col>
       </v-row>
     </v-stepper-content>
@@ -23,7 +23,28 @@
       Choose data type of columns
     </v-stepper-step>
     <v-stepper-content step="2">
-      Column select controls
+      <div v-for="(c, idx) in columns" :key="idx">
+        <v-row dense class="column pa-2 ml-1 mr-1">
+          <v-col cols="4">
+            <v-text-field v-model="c.name" required label="Name" />
+          </v-col>
+          <v-col cols="3">
+            <v-select
+              v-model="c.type"
+              :items="columnTypes"
+              item-value="value"
+              required
+              label="Data Type" />
+          </v-col>
+          <v-col cols="auto" class="pl-2">
+            <v-checkbox v-model="c.primaryKey" label="Primary Key" />
+          </v-col>
+          <v-col cols="auto" class="pl-10">
+            <v-checkbox v-model="c.nullAllowed" label="Null Allowed" />
+          </v-col>
+        </v-row>
+      </div>
+
       <v-btn color="primary" @click="step = 3">
         Continue
       </v-btn>
@@ -49,7 +70,17 @@ export default {
     return {
       step: 1,
       loading: false,
-      file: null
+      file: null,
+      columns: [],
+      columnTypes: [
+        { value: 'ENUM', text: 'ENUM' },
+        { value: 'BOOLEAN', text: 'BOOLEAN' },
+        { value: 'NUMBER', text: 'NUMBER' },
+        { value: 'BLOB', text: 'BLOB' },
+        { value: 'DATE', text: 'DATE' },
+        { value: 'STRING', text: 'STRING' },
+        { value: 'TEXT', text: 'TEXT' }
+      ]
     }
   },
   mounted () {
@@ -57,7 +88,6 @@ export default {
   methods: {
     async upload () {
       this.loading = true
-      // TODO fix url
       const url = '/server-middleware/table_from_csv'
       const data = new FormData()
       data.append('file', this.file)
@@ -66,7 +96,8 @@ export default {
           headers: { 'Content-Type': 'multipart/form-data' }
         })
         if (res.data.success) {
-          this.$toast.success('Uploaded successfully!')
+          this.columns = res.data.columns
+          this.step = 2
         } else {
           this.$toast.error('Could not upload CSV data')
         }
diff --git a/fda-ui/server-middleware/index.js b/fda-ui/server-middleware/index.js
index 8b41040e9a..cfda8870ca 100644
--- a/fda-ui/server-middleware/index.js
+++ b/fda-ui/server-middleware/index.js
@@ -6,8 +6,12 @@ const fetch = require('node-fetch')
 
 // TODO extend me
 const colTypeMap = {
+  Boolean: 'BOOLEAN',
+  Date: 'DATE',
   Integer: 'NUMBER',
-  String: 'TEXT'
+  Numeric: 'NUMBER',
+  String: 'TEXT',
+  Timestamp: 'DATE'
 }
 
 app.post('/table_from_csv', upload.single('file'), async (req, res) => {
@@ -22,21 +26,22 @@ app.post('/table_from_csv', upload.single('file'), async (req, res) => {
   } catch (error) {
     res.json({ success: false, error })
   }
-  console.log('Analysis', analysis)
 
-  // map `determine_dt` column types to ours
+  // map messytables / CoMi's `determine_dt` column types to ours
   // e.g. "Integer" -> "NUMBER"
   let entries = Object.entries(analysis.columns)
-  console.log(entries)
   entries = entries.map(([k, v]) => {
     if (colTypeMap[v]) {
       v = colTypeMap[v]
     }
-    return [k, v]
+    return {
+      name: k,
+      type: v,
+      nullAllowed: true,
+      primaryKey: false
+    }
   })
 
-  console.log(entries)
-
   res.json({ success: true, file, columns: entries })
 })
 
-- 
GitLab