Remove FileUploadForm from TableDialog, add csv key options

package.json

@@ -20,7 +20,7 @@
     "axios": "^0.18.1",
     "core-js": "^2.6.5",
     "material-design-icons-iconfont": "^5.0.1",
-    "multinet": "0.10.0",
+    "multinet": "0.12.0",
     "vue": "^2.6.10",
     "vue-gtag": "^1.2.1",
     "vue-router": "^3.0.2",

src/components/TableDialog.vue

@@ -21,11 +21,66 @@
       >
         Create Table
       </v-card-title>
-      <file-upload-form
-        :types="types"
-        :workspace="workspace"
-        @success="uploadSuccess"
-      />
+      <v-card>
+        <v-card-text class="px-4 pt-4 pb-1">
+          <v-layout wrap>
+            <v-flex>
+              <v-file-input
+                @change="handleFileInput"
+                :error-messages="fileUploadError"
+                label="Upload File"
+                prepend-inner-icon="attach_file"
+                prepend-icon=""
+                single-line
+                clearable
+                dense
+                outlined
+              />
+            </v-flex>
+          </v-layout>
+          <v-layout wrap>
+            <v-flex>
+              <v-text-field
+                v-model="fileName"
+                :error-messages="tableCreationError"
+                label="Table Name"
+                outlined
+                dense
+              />
+            </v-flex>
+          </v-layout>
+          <v-row no-gutters>
+            <v-col cols="4">
+              <v-text-field
+                v-model="key"
+                label="Key Column"
+                append-icon="restore"
+                @click:append="restoreKeyField"
+                outlined
+                dense
+              />
+            </v-col>
+            <v-col cols="4">
+              <v-checkbox
+                v-model="overwrite"
+                class="mt-1 ml-2"
+                dense
+                label="Overwrite Default Key"
+                outlined
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions class="px-4 py-3">
+          <v-spacer></v-spacer>
+          <v-btn :disabled="createDisabled" @click="createTable">
+            Create
+          </v-btn>
+        </v-card-actions>
+      </v-card>
     </v-card>
   </v-dialog>
 </template>
@@ -35,18 +90,15 @@ import Vue from 'vue';
 
 import api from '@/api';
 import { FileType } from '@/types';
-import FileUploadForm from '@/components/FileUploadForm.vue';
-
+import { validFileType, fileName as getFileName } from '@/utils/files';
 
+const defaultKeyField = '_key';
 export default Vue.extend({
   name: 'TableDialog',
 
   props: {
     workspace: String,
   },
-  components: {
-    FileUploadForm,
-  },
   data() {
     return {
       tableDialog: false,
@@ -58,12 +110,66 @@ export default Vue.extend({
           displayName: 'CSV',
         },
       ] as FileType[],
+      file: null as File | null,
+      fileName: null as string | null,
+      fileUploadError: null as string | null,
+      tableCreationError: null as string | null,
+      key: defaultKeyField,
+      overwrite: false,
     };
   },
+  computed: {
+    createDisabled(): boolean {
+      return (
+        !this.file ||
+        !this.fileName ||
+        !!this.fileUploadError
+      );
+    },
+  },
   methods: {
-    uploadSuccess() {
-      this.tableDialog = false;
-      this.$emit('success');
+    restoreKeyField() {
+      this.key = defaultKeyField;
+    },
+    handleFileInput(file: File) {
+      this.file = file;
+
+      if (!file) {
+        this.fileUploadError = null;
+      } else if (!validFileType(file, this.types)) {
+        this.fileUploadError = 'Invalid file type';
+      } else {
+        this.fileName = this.fileName || getFileName(file);
+        this.fileUploadError = null;
+      }
+    },
+    async createTable() {
+      const {
+        file,
+        workspace,
+        fileName,
+        key,
+        overwrite,
+      } = this;
+
+      if (file === null || fileName === null) {
+        return;
+      }
+
+      try {
+        await api.uploadTable(workspace, fileName, {
+          type: 'csv',
+          data: file,
+          key,
+          overwrite,
+        });
+
+        this.tableCreationError = null;
+        this.tableDialog = false;
+        this.$emit('success');
+      } catch (err) {
+        this.tableCreationError = err.statusText;
+      }
     },
   },
 });

src/utils/files.ts

@@ -0,0 +1,16 @@
+import { validUploadType } from 'multinet';
+import { FileType } from '@/types';
+
+
+const fileExtension = (file: File) => file.name.split('.').slice(-1)[0];
+const fileName = (file: File) => file.name.split('.')[0];
+
+function validFileType(file: File, allowedTypes: FileType[]) {
+  const extension = fileExtension(file);
+  return allowedTypes.some((type) => type.extension.includes(extension) && validUploadType(type.queryCall));
+}
+
+export {
+  fileName,
+  validFileType,
+};

yarn.lock

@@ -5502,10 +5502,10 @@ multimatch@^2.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
-multinet@0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.10.0.tgz#92470b0b1020632ec4effe538f9e7c584a719f29"
-  integrity sha512-GAPUCVqHoG9RBqbx5F2vI3Mp15gLeYuOrkGvZC/Rl1DUe7vuNxiVEKXzoa9N59F0vYVR/eoDAtp+UPjTOtnsLw==
+multinet@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.12.0.tgz#44c4c47272a609373edabf384c637f1d5641ae39"
+  integrity sha512-dkufPqpnRX6KNYPdxtE3cOKXtmyIQiZS1kCH6NjeALrP/a5+/eptEunN45cGL7huCIV8PLeLxkmkpLS6nr1M+A==
   dependencies:
     axios "^0.19.0"