SubmitAnalysis.vue

<script setup lang="ts">
import { ref } from "vue";
import { useField, useForm } from "vee-validate";
// import { Analysis } from "composables/useFetchAnalysis";
// import * as yup from 'yup';
// import { toTypedSchema } from '@vee-validate/yup';

const router = useRouter();
// const csrfToken = useCookie("csrftoken");
const workflowSubmissionPending = ref(false);
const uppyComponentRef = ref(null)
// const genome = ref<any>(null)
// const submittedAnalysis: Ref<Analysis | null> = ref(null);

// const validationSchema = toTypedSchema(yup.object({
//   files: yup.array().required(),
//   analysisName: yup.string().min(2).required().default("new analysis"),
// }));
const { meta, handleSubmit } = useForm({
  validationSchema: {
    analysisName(value: string) {
      if (value?.length >= 2) return true

      return 'Name needs to be at least 2 characters.'
    },
    files(value) {
      if (value?.length > 0) return true
    }
  }
});
const analysisName = useField<string>("analysisName");
const files = useField("files");

const submit = handleSubmit(async (values) => {
  workflowSubmissionPending.value = true;
  if (uppyComponentRef.value) {
    console.log(uppyComponentRef)
    uppyComponentRef.value.uppyCovar
      .setMeta({ analysis_name: analysisName.value.value })
    uppyComponentRef.value.uppyCovar
      .upload().then((result: { successful: { response: { body: { analysis_history: number } } }[]; failed: any[]; }) => {
        if (result.failed.length > 0) {
          console.error('Errors:');
          result.failed.forEach((file) => {
            console.error(file.error);
          });
        }
        else {
          if (result?.successful?.length > 0) {
            const analysisId = result.successful[0]?.response?.body?.analysis_history
            router.push({
              name: "analyses-analysisId", params: {
                analysisId,
              }
            });
          }

        }
      }).finally(() => {
        workflowSubmissionPending.value = false;

      })

  }
  // submittedAnalysis.value = data;
  // if (data !== null) {
  //   router.push({
  //     name: "analyses-analysisId",
  //     params: { analysisId: data.id },
  //   });
  // }

});
</script>
<template>
  <v-card class="mt-5">
    <v-form @submit.prevent="submit" :disabled="workflowSubmissionPending" id="form-upload-genome">
      <v-card-title>Run Analysis</v-card-title>
      <v-card-text>
        <v-text-field v-model="analysisName.value.value" clearable label="Name" variant="outlined" :counter="50"
          :error-messages="analysisName.errorMessage.value"></v-text-field>
        <UppyGenomeUpload v-model="files.value.value" :analysis-name="analysisName.value.value" ref="uppyComponentRef" />
      </v-card-text>
      <v-card-actions>
        <v-btn type="submit" variant="tonal" color="primary" :disabled="!meta.valid"
          :loading="workflowSubmissionPending">Submit</v-btn>
      </v-card-actions>
    </v-form>



  </v-card>
</template>