From 2f87c60f9306b85366757830be95bf25035cef9c Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Wed, 23 Oct 2019 09:59:13 +0900
Subject: [PATCH] Add DocumentExportForm

---
 .../organisms/DocumentExportForm.vue          | 93 +++++++++++++++++++
 frontend/pages/projects/_id/dataset/index.vue | 33 +++++--
 frontend/services/document.service.js         | 19 ++++
 frontend/store/documents.js                   | 22 +++++
 4 files changed, 160 insertions(+), 7 deletions(-)
 create mode 100644 frontend/components/organisms/DocumentExportForm.vue

diff --git a/frontend/components/organisms/DocumentExportForm.vue b/frontend/components/organisms/DocumentExportForm.vue
new file mode 100644
index 00000000..565b692f
--- /dev/null
+++ b/frontend/components/organisms/DocumentExportForm.vue
@@ -0,0 +1,93 @@
+<template>
+  <base-card
+    title="Export Data"
+    agree-text="Export"
+    cancel-text="Cancel"
+    :disabled="!valid"
+    @agree="download"
+    @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"
+            :value="format"
+          />
+        </v-radio-group>
+      </v-form>
+    </template>
+  </base-card>
+</template>
+
+<script>
+import BaseCard from '@/components/molecules/BaseCard'
+import { fileFormatRules, uploadFileRules } from '@/rules/index'
+
+export default {
+  components: {
+    BaseCard
+  },
+  props: {
+    exportDocument: {
+      type: Function,
+      default: () => {},
+      required: true
+    },
+    formats: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
+  data() {
+    return {
+      valid: false,
+      file: null,
+      selectedFormat: null,
+      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()
+    },
+    download() {
+      if (this.validate()) {
+        this.exportDocument({
+          projectId: this.$route.params.id,
+          format: this.selectedFormat
+        })
+        this.reset()
+        this.cancel()
+      }
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/projects/_id/dataset/index.vue b/frontend/pages/projects/_id/dataset/index.vue
index fbc1aab9..2919a368 100644
--- a/frontend/pages/projects/_id/dataset/index.vue
+++ b/frontend/pages/projects/_id/dataset/index.vue
@@ -12,22 +12,38 @@
           </v-btn>
         </template>
         <v-list dense>
-          <v-list-item @click="uploadDialog=true">
+          <v-list-item @click="importDialog=true">
             <v-list-item-icon>
               <v-icon>backup</v-icon>
             </v-list-item-icon>
-            <v-list-item-title>Upload</v-list-item-title>
+            <v-list-item-title>Import</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="exportDialog=true">
+            <v-list-item-icon>
+              <v-icon>archive</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Export</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-menu>
       <v-dialog
-        v-model="uploadDialog"
+        v-model="importDialog"
         width="800"
       >
         <document-upload-form
           :upload-document="uploadDocument"
           :formats="formatList"
-          @close="uploadDialog=false"
+          @close="importDialog=false"
+        />
+      </v-dialog>
+      <v-dialog
+        v-model="exportDialog"
+        width="800"
+      >
+        <document-export-form
+          :export-document="exportDocument"
+          :formats="['json']"
+          @close="exportDialog=false"
         />
       </v-dialog>
       <v-btn
@@ -61,6 +77,7 @@ import { mapActions, mapGetters, mapState } from 'vuex'
 import ConfirmForm from '@/components/organisms/ConfirmForm'
 import DocumentList from '@/components/containers/DocumentList'
 import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
+import DocumentExportForm from '@/components/organisms/DocumentExportForm'
 
 export default {
   layout: 'project',
@@ -68,12 +85,14 @@ export default {
   components: {
     ConfirmForm,
     DocumentList,
-    DocumentUploadForm
+    DocumentUploadForm,
+    DocumentExportForm
   },
 
   data() {
     return {
-      uploadDialog: false,
+      importDialog: false,
+      exportDialog: false,
       deleteDialog: false
     }
   },
@@ -84,7 +103,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('documents', ['uploadDocument', 'deleteDocument'])
+    ...mapActions('documents', ['uploadDocument', 'exportDocument', 'deleteDocument'])
   },
 
   validate({ params }) {
diff --git a/frontend/services/document.service.js b/frontend/services/document.service.js
index 4706cb35..fdc186ae 100644
--- a/frontend/services/document.service.js
+++ b/frontend/services/document.service.js
@@ -24,6 +24,25 @@ class DocumentService {
   uploadFile(projectId, payload) {
     return this.request.post(`/projects/${projectId}/docs/upload`, payload)
   }
+
+  exportFile(projectId, format) {
+    const headers = {}
+    if (format === 'csv') {
+      headers.Accept = 'text/csv; charset=utf-8'
+      headers['Content-Type'] = 'text/csv; charset=utf-8'
+    } else {
+      headers.Accept = 'application/json'
+      headers['Content-Type'] = 'application/json'
+    }
+    const config = {
+      responseType: 'blob',
+      params: {
+        q: format
+      },
+      headers
+    }
+    return this.request.get(`/projects/${projectId}/docs/download`, config)
+  }
 }
 
 export default new DocumentService()
diff --git a/frontend/store/documents.js b/frontend/store/documents.js
index 7dba387f..083b077e 100644
--- a/frontend/store/documents.js
+++ b/frontend/store/documents.js
@@ -124,6 +124,7 @@ export const actions = {
       })
   },
   uploadDocument({ commit }, data) {
+    commit('setLoading', true)
     DocumentService.uploadFile(data.projectId, data)
       .then((response) => {
         commit('addDocument', response)
@@ -131,6 +132,27 @@ export const actions = {
       .catch((error) => {
         alert(error)
       })
+      .finally(() => {
+        commit('setLoading', false)
+      })
+  },
+  exportDocument({ commit }, data) {
+    commit('setLoading', true)
+    DocumentService.exportFile(data.projectId, data.format)
+      .then((response) => {
+        const url = window.URL.createObjectURL(new Blob([response.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', 'file.' + data.format)
+        document.body.appendChild(link)
+        link.click()
+      })
+      .catch((error) => {
+        alert(error)
+      })
+      .finally(() => {
+        commit('setLoading', false)
+      })
   },
   updateDocument({ commit }, data) {
     DocumentService.updateDocument(data.projectId, data.id, data)