Add data export page

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

@@ -0,0 +1,128 @@
+<template>
+  <v-card>
+    <v-card-title>
+      {{ $t('dataset.exportDataTitle') }}
+    </v-card-title>
+    <v-card-text>
+      <v-overlay :value="isProcessing">
+        <v-progress-circular
+          indeterminate
+          size="64"
+        />
+      </v-overlay>
+      <v-form
+        ref="form"
+        v-model="valid"
+      >
+        <v-select
+          v-model="selectedFormat"
+          :items="formats"
+          hide-details="auto"
+          item-text="name"
+          label="File format"
+          outlined
+          :rules="fileFormatRules($t('rules.fileFormatRules'))"
+        />
+        <v-sheet
+          v-if="selectedFormat"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mt-2 pa-5"
+        >
+          <pre>{{ example }}</pre>
+        </v-sheet>
+        <v-checkbox
+          v-model="exportApproved"
+          label="Export only approved documents"
+          hide-details
+        />
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        class='text-capitalize ms-2 primary'
+        :disabled="!valid"
+        @click="downloadRequest"
+      >
+        {{ $t('generic.export') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { fileFormatRules } from '@/rules/index'
+import { FormatDTO } from '~/services/application/download/formatData'
+
+export default Vue.extend({
+  layout: 'project',
+
+  validate({ params }) {
+    return /^\d+$/.test(params.id)
+  },
+
+  data() {
+    return {
+      exportApproved: false,
+      file: null,
+      fileFormatRules,
+      formats: [] as FormatDTO[],
+      isProcessing: false,
+      polling: null,
+      selectedFormat: null as any,
+      taskId: '',
+      valid: false,
+    }
+  },
+
+  computed: {
+    projectId() {
+      return this.$route.params.id
+    },
+
+    example(): string {
+      const item = this.formats.find((item: FormatDTO) => item.name === this.selectedFormat)
+      return item!.example.trim()
+    }
+  },
+
+  async created() {
+    this.formats = await this.$services.downloadFormat.list(this.projectId)
+  },
+
+  beforeDestroy() {
+    // @ts-ignore
+	  clearInterval(this.polling)
+  },
+
+  methods: {
+    reset() {
+      (this.$refs.form as HTMLFormElement).reset()
+      this.taskId = ''
+      this.exportApproved = false
+      this.selectedFormat = null
+      this.isProcessing = false
+    },
+
+    async downloadRequest() {
+      this.isProcessing = true
+      this.taskId = await this.$services.download.request(this.projectId, this.selectedFormat, this.exportApproved)
+      this.pollData()
+    },
+
+    pollData() {
+      // @ts-ignore
+		  this.polling = setInterval(async() => {
+        if (this.taskId) {
+          const res = await this.$services.taskStatus.get(this.taskId)
+          if (res.ready) {
+            this.$services.download.download(this.projectId, this.taskId)
+            this.reset()
+          }
+        }
+  		}, 1000)
+	  },
+  } 
+})
+</script>