Add form upload component

frontend/components/document/FormUpload.vue

@@ -0,0 +1,139 @@
+<template>
+  <base-card
+    :disabled="!valid"
+    :title="$t('dataset.importDataTitle')"
+    :agree-text="$t('generic.upload')"
+    :cancel-text="$t('generic.cancel')"
+    @agree="create"
+    @cancel="cancel"
+  >
+    <template #content>
+      <v-form
+        ref="form"
+        v-model="valid"
+      >
+        <v-alert
+          v-show="showError"
+          v-model="showError"
+          type="error"
+          dismissible
+        >
+          {{ $t('errors.fileCannotUpload') + errorMsg }}
+        </v-alert>
+        <h2>{{ $t('dataset.importDataMessage1') }}</h2>
+        <v-radio-group
+          v-model="selectedFormat"
+          :rules="fileFormatRules($t('rules.fileFormatRules'))"
+        >
+          <v-radio
+            v-for="(format, i) in formats"
+            :key="i"
+            :label="format.text"
+            :value="format"
+          />
+        </v-radio-group>
+        <v-sheet
+          v-if="selectedFormat"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
+        >
+        <pre>{{ selectedFormat.example }}</pre>
+        </v-sheet>
+        <h2>{{ $t('dataset.importDataMessage2') }}</h2>
+        <v-file-input
+          v-model="file"
+          multiple
+          :accept="acceptType"
+          :rules="uploadFileRules($t('rules.uploadFileRules'))"
+          :label="$t('labels.filePlaceholder')"
+        />
+      </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
+    },
+    formats: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
+  data() {
+    return {
+      valid: false,
+      file: null,
+      selectedFormat: null,
+      fileFormatRules,
+      uploadFileRules,
+      showError: false,
+      errors: [],
+      errorMsg: ''
+    }
+  },
+
+  computed: {
+    acceptType() {
+      if (this.selectedFormat) {
+        return `.${this.selectedFormat.extension}`
+      } else {
+        return '.txt'
+      }
+    }
+  },
+
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+    validate() {
+      return this.$refs.form.validate()
+    },
+    reset() {
+      this.$refs.form.reset()
+    },
+    create() {
+      if (this.validate()) {
+        this.errors = []
+        const promises = []
+        const type = this.selectedFormat.type
+        this.file.forEach((item) => {
+          promises.push({
+            format: type,
+            file: item
+          })
+        })
+        let p = Promise.resolve()
+        promises.forEach((item) => {
+          p = p.then(() => this.uploadDocument(item.file, item.format)).catch(() => {
+            this.errors.push(item.file.name)
+            this.showError = true
+          })
+        })
+        p.finally(() => {
+          if (!this.errors.length) {
+            this.reset()
+            this.cancel()
+          } else {
+            this.errorMsg = this.errors.join(', ')
+          }
+        })
+      }
+    }
+  }
+}
+</script>

frontend/pages/projects/_id/dataset/index.vue

@@ -35,6 +35,13 @@
           @remove="removeAll"
         />
       </v-dialog>
+      <v-dialog v-model="dialogUpload">
+        <form-upload
+          :formats="project.uploadFormats"
+          :upload-document="upload"
+          @cancel="dialogUpload=false"
+        />
+      </v-dialog>
       <v-dialog v-model="dialogDownload">
         <form-download
           :formats="project.downloadFormats"
@@ -60,6 +67,7 @@ import DocumentList from '@/components/document/DocumentList.vue'
 import FormDelete from '@/components/document/FormDelete.vue'
 import FormDeleteBulk from '@/components/document/FormDeleteBulk.vue'
 import FormDownload from '@/components/document/FormDownload.vue'
+import FormUpload from '@/components/document/FormUpload.vue'
 import { DocumentListDTO, DocumentDTO } from '@/services/application/document.service'
 import ActionMenu from '~/components/document/ActionMenu.vue'
 import { ProjectDTO, FormatDTO } from '~/services/application/project.service'
@@ -72,7 +80,8 @@ export default Vue.extend({
     DocumentList,
     FormDelete,
     FormDeleteBulk,
-    FormDownload
+    FormDownload,
+    FormUpload
   },
 
   async fetch() {
@@ -129,6 +138,11 @@ export default Vue.extend({
         format,
         onlyApproved
       )
+    },
+    async upload(file: File, format: string) {
+      await this.$services.document.upload(
+        this.projectId, file, format
+      )
     }
   },