Remove FormUpload.vue and add feature to move upload page

frontend/components/document/FormUpload.vue

@@ -1,134 +0,0 @@
-<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/utils/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')
-    },
-    reset() {
-      this.$refs.form.reset()
-    },
-    create() {
-      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.$emit('success')
-        } else {
-          this.errorMsg = this.errors.join(', ')
-        }
-      })
-    }
-  }
-}
-</script>

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

@@ -2,7 +2,7 @@
   <v-card>
     <v-card-title>
       <action-menu
-        @upload="dialogUpload=true"
+        @upload="upload"
         @download="dialogDownload=true"
       />
       <v-btn
@@ -35,14 +35,6 @@
           @remove="removeAll"
         />
       </v-dialog>
-      <v-dialog v-model="dialogUpload">
-        <form-upload
-          :formats="project.uploadFormats"
-          :upload-document="upload"
-          @cancel="dialogUpload=false"
-          @success="$fetch();dialogUpload=false"
-        />
-      </v-dialog>
       <v-dialog v-model="dialogDownload">
         <form-download
           :formats="project.downloadFormats"
@@ -69,7 +61,6 @@ 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/documentData'
 import ActionMenu from '~/components/document/ActionMenu.vue'
 import { ProjectDTO, FormatDTO } from '~/services/application/project/projectData'
@@ -83,7 +74,6 @@ export default Vue.extend({
     FormDelete,
     FormDeleteBulk,
     FormDownload,
-    FormUpload
   },
 
   async fetch() {
@@ -94,12 +84,9 @@ export default Vue.extend({
 
   data() {
     return {
-      dialogCreate: false,
       dialogDelete: false,
       dialogDeleteAll: false,
-      dialogUpload: false,
       dialogDownload: false,
-      formats: [] as FormatDTO[],
       project: {} as ProjectDTO,
       item: {} as DocumentListDTO,
       selected: [] as DocumentDTO[],
@@ -149,10 +136,8 @@ export default Vue.extend({
         onlyApproved
       )
     },
-    async upload(file: File, format: string) {
-      await this.$services.document.upload(
-        this.projectId, file, format
-      )
+    upload() {
+      this.$router.push(`/projects/${this.projectId}/upload`)
     },
     updateQuery(query: object) {
       this.$router.push(query)