From abb1e53b704fd4a7b46de01860d55b024b38e8dc Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 10 Sep 2019 15:25:24 +0900
Subject: [PATCH] Add data upload button

---
 .../containers/DocumentUploadButton.vue       |  30 +++++
 .../organisms/DocumentUploadForm.vue          | 111 ++++++++++++++++++
 frontend/pages/projects/_id/dataset/index.vue |   5 +-
 frontend/rules/index.js                       |  10 ++
 frontend/store/documents.js                   |   2 +-
 5 files changed, 155 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/containers/DocumentUploadButton.vue
 create mode 100644 frontend/components/organisms/DocumentUploadForm.vue

diff --git a/frontend/components/containers/DocumentUploadButton.vue b/frontend/components/containers/DocumentUploadButton.vue
new file mode 100644
index 00000000..e37d07b7
--- /dev/null
+++ b/frontend/components/containers/DocumentUploadButton.vue
@@ -0,0 +1,30 @@
+<template>
+  <base-modal
+    text="Upload"
+    :is-create="true"
+  >
+    <template v-slot="slotProps">
+      <document-upload-form
+        :upload-document="uploadDocument"
+        @close="slotProps.close"
+      />
+    </template>
+  </base-modal>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import BaseModal from '@/components/molecules/BaseModal'
+import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
+
+export default {
+  components: {
+    BaseModal,
+    DocumentUploadForm
+  },
+
+  methods: {
+    ...mapActions('documents', ['uploadDocument'])
+  }
+}
+</script>
diff --git a/frontend/components/organisms/DocumentUploadForm.vue b/frontend/components/organisms/DocumentUploadForm.vue
new file mode 100644
index 00000000..0f5cf600
--- /dev/null
+++ b/frontend/components/organisms/DocumentUploadForm.vue
@@ -0,0 +1,111 @@
+<template>
+  <base-card
+    title="Upload Data"
+    agree-text="Upload"
+    cancel-text="Cancel"
+    :disabled="!valid"
+    @agree="create"
+    @cancel="cancel"
+  >
+    <template #content>
+      <v-form
+        ref="form"
+        v-model="valid"
+      >
+        <v-radio-group
+          v-model="selectedFormat"
+          :rules="fileFormatRules"
+        >
+          <v-radio
+            v-for="(format, i) in formats"
+            :key="i"
+            :label="format.text"
+            :value="format"
+          />
+        </v-radio-group>
+        <v-file-input
+          v-model="file"
+          :accept="acceptType"
+          :rules="uploadFileRules"
+          label="File input"
+        />
+      </v-form>
+    </template>
+  </base-card>
+</template>
+
+<script>
+import BaseCard from '@/components/molecules/BaseCard'
+import { fileFormatRules, uploadFileRules } from '@/rules/index'
+
+export default {
+  components: {
+    BaseCard
+  },
+  props: {
+    uploadDocument: {
+      type: Function,
+      default: () => {},
+      required: true
+    }
+  },
+  data() {
+    return {
+      valid: false,
+      file: null,
+      selectedFormat: null,
+      formats: [
+        {
+          type: 'csv',
+          text: 'Upload a CSV file from your computer',
+          accept: '.csv'
+        },
+        {
+          type: 'plain',
+          text: 'Upload text items from your computer',
+          accept: '.txt'
+        },
+        {
+          type: 'json',
+          text: 'Upload a JSON file from your computer',
+          accept: '.json,.jsonl'
+        }
+      ],
+      fileFormatRules,
+      uploadFileRules
+    }
+  },
+
+  computed: {
+    acceptType() {
+      if (this.selectedFormat) {
+        return this.selectedFormat.accept
+      } else {
+        return '.txt,.csv,.json,.jsonl'
+      }
+    }
+  },
+
+  methods: {
+    cancel() {
+      this.$emit('close')
+    },
+    validate() {
+      return this.$refs.form.validate()
+    },
+    reset() {
+      this.$refs.form.reset()
+    },
+    create() {
+      if (this.validate()) {
+        this.uploadDocument({
+          format: this.selectedFormat,
+          file: this.file
+        })
+        this.reset()
+        this.cancel()
+      }
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/projects/_id/dataset/index.vue b/frontend/pages/projects/_id/dataset/index.vue
index f213259f..f0bba761 100644
--- a/frontend/pages/projects/_id/dataset/index.vue
+++ b/frontend/pages/projects/_id/dataset/index.vue
@@ -1,6 +1,7 @@
 <template>
   <v-card>
     <v-card-title>
+      <document-upload-button />
       <document-deletion-button />
     </v-card-title>
     <document-list />
@@ -9,14 +10,14 @@
 
 <script>
 import DocumentList from '@/components/containers/DocumentList'
-// import DocumentCreationButton from '@/components/containers/DocumentCreationButton'
+import DocumentUploadButton from '@/components/containers/DocumentUploadButton'
 import DocumentDeletionButton from '@/components/containers/DocumentDeletionButton'
 
 export default {
   layout: 'project',
   components: {
     DocumentList,
-    // DocumentCreationButton,
+    DocumentUploadButton,
     DocumentDeletionButton
   },
   validate({ params }) {
diff --git a/frontend/rules/index.js b/frontend/rules/index.js
index 5eccc323..beb4d47b 100644
--- a/frontend/rules/index.js
+++ b/frontend/rules/index.js
@@ -31,3 +31,13 @@ export const descriptionRules = [
 export const projectTypeRules = [
   v => !!v || 'Project type is required'
 ]
+
+// Rules for Document.
+export const fileFormatRules = [
+  v => !!v || 'File format is required'
+]
+
+export const uploadFileRules = [
+  v => !!v || 'File is required',
+  v => !v || v.size < 1000000 || 'File size should be less than 1 MB!'
+]
diff --git a/frontend/store/documents.js b/frontend/store/documents.js
index 5bed5db7..b67c786a 100644
--- a/frontend/store/documents.js
+++ b/frontend/store/documents.js
@@ -51,7 +51,7 @@ export const actions = {
         commit('setLoading', false)
       })
   },
-  createDocument({ commit }, data) {
+  uploadDocument({ commit }, data) {
     DocumentService.addDocument(data.projectId, data)
       .then((response) => {
         commit('addDocument', response)