diff --git a/frontend/components/SubmitAnalysis.vue b/frontend/components/SubmitAnalysis.vue index b538d0f13f7b7117c65e013d152a86a661b19003..da36a3683fb929488195466bbbbbc637670ae7a5 100644 --- a/frontend/components/SubmitAnalysis.vue +++ b/frontend/components/SubmitAnalysis.vue @@ -3,7 +3,20 @@ import { ref } from "vue"; import { useField, useForm } from "vee-validate"; const router = useRouter(); const uppyComponentRef = ref(null) +const tab = ref<"local" | "paste">("local") +const pasteSequence = ref(null) +import { useCsrfToken } from "@/composables/useCsrfToken" +const valid = ref<boolean>(false) +const { csrfToken } = await useCsrfToken() + +const sequenceRules = ref([ + value => { + if (value) return true + return 'Sequence is required.' + }, + +]) const { meta, handleSubmit } = useForm({ validationSchema: { files(value) { @@ -22,13 +35,59 @@ const { data, error } = await useAPI<{ is_online: boolean }>("/analysis/is-galax if (data.value !== null && !data.value.is_online) { throw createError("The galaxy instance is offline") } +const loading = ref(false) + +async function submit(event) { + loading.value = true + const formData = new FormData(); + const blob = new Blob([pasteSequence.value], { type: 'text/plain' }) + formData.append('genomefile', blob, 'pasted-sequence.fasta') + + + try { + await $fetch('/dfapi/analysis/add', { + method: 'POST', + body: formData, + headers: { "X-CSRFToken": csrfToken.value } + }) + await navigateTo("/analyses/") + } catch (error) { + throw createError("Cannot upload the pasted sequence") + } finally { + loading.value = false + + } + +} + </script> <template> <v-card flat color="transparent"> <v-form id="form-upload-genome"> <v-card-text> - <UppyGenomeUpload v-model="files.value.value" ref="uppyComponentRef" class="mb-2" /> + <v-card> + <v-tabs v-model="tab" align-tabs="start"> + <v-tab value="local" :rounded="false">Local fasta files</v-tab> + <v-tab value="paste" :rounded="false">Paste fasta sequences</v-tab> + </v-tabs> + + <v-card-text> + <v-window v-model="tab"> + <v-window-item value="local"> + <UppyGenomeUpload v-model="files.value.value" ref="uppyComponentRef" class="mb-2" /> + </v-window-item> + <v-window-item value="paste"> + <v-form v-model="valid" validate-on="submit lazy" @submit.prevent="submit"> + <v-textarea v-model="pasteSequence" :rules="sequenceRules" required label="Fasta sequences" + variant="filled" auto-grow></v-textarea> + <v-btn type="submit" :loading="loading">Submit</v-btn> + </v-form> + </v-window-item> + + </v-window> + </v-card-text> + </v-card> </v-card-text> </v-form> </v-card>