Add validation to pasted sequences

frontend/components/SubmitAnalysis.vue

 <script setup lang="ts">
-import { ref } from "vue";
-import { useField, useForm } from "vee-validate";
-const router = useRouter();
+// import { ref } from "vue";
+import { useField, useForm } from 'vee-validate'
+import { useCsrfToken } from "@/composables/useCsrfToken"
+
 const uppyComponentRef = ref(null)
 const tab = ref<"local" | "paste">("local")
-const pasteSequence = ref(null)
-import { useCsrfToken } from "@/composables/useCsrfToken"
+const maxSequenceLength = ref(10000)
 
 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({
+
+
+const { handleSubmit } = useForm({
   validationSchema: {
-    files(value) {
-      if (value?.length > 0) return true
+    // files(value) {
+    //   if (value?.length > 0) return true
+    //   return "You need to pass at least one file"
+    // },
+    sequence(value: string) {
+      const seqLength = value?.length
+      if (seqLength <= maxSequenceLength.value) return true
+      return `Sequences needs to be less than ${maxSequenceLength.value} characters.`
     }
   }
 });
-const files = useField("files");
+const files = useField("files")
+const { value: sequence, errorMessage: sequenceErrorMessage } = useField("sequence");
 
 
 const { data, error } = await useAPI<{ is_online: boolean }>("/analysis/is-galaxy-online", {
@@ -38,8 +41,6 @@ if (data.value !== null && !data.value.is_online) {
 const loading = ref(false)
 async function addExample() {
   loading.value = true
-
-
   try {
     await $fetch('/dfapi/analysis/add-example', {
       method: 'POST',
@@ -55,13 +56,12 @@ async function addExample() {
 
 }
 
-async function submit(event) {
+
+const submit = handleSubmit(async (values) => {
   loading.value = true
   const formData = new FormData();
-  const blob = new Blob([pasteSequence.value], { type: 'text/plain' })
+  const blob = new Blob([toValue(sequence)], { type: 'text/plain' })
   formData.append('genomefile', blob, 'pasted-sequence.fasta')
-
-
   try {
     await $fetch('/dfapi/analysis/add', {
       method: 'POST',
@@ -76,9 +76,7 @@ async function submit(event) {
 
   }
 
-}
-
-
+})
 </script>
 <template>
   <v-card flat color="transparent">
@@ -97,29 +95,25 @@ async function submit(event) {
                 <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-form @submit.prevent="submit">
+                  <v-textarea v-model="sequence" :error-messages="sequenceErrorMessage" :count="maxSequenceLength"
+                    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-item value="example">
                 <v-card flat color="transparent">
-                  <v-form>
-                    <v-card-text>
-                      You can try an example with Escherichia coli str. K-12 substr. MG1655 proteins downloaded from <a
-                        target="_blank"
-                        href="https://www.ncbi.nlm.nih.gov/datasets/genome/GCF_000005845.2">GCF_000005845.2</a>
-                    </v-card-text>
-                    <v-card-actions>
-                      <v-btn variant="elevated" density="default" size="default" :slim="false" rounded="xl"
-                        color="primary" :loading="loading" @click="addExample()">Submit</v-btn>
-                    </v-card-actions>
-                  </v-form>
+                  <v-card-text>
+                    You can try an example with Escherichia coli str. K-12 substr. MG1655 proteins downloaded from <a
+                      target="_blank"
+                      href="https://www.ncbi.nlm.nih.gov/datasets/genome/GCF_000005845.2">GCF_000005845.2</a>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-btn variant="elevated" density="default" size="default" :slim="false" rounded="xl"
+                      color="primary" :loading="loading" @click="addExample()">Submit</v-btn>
+                  </v-card-actions>
                 </v-card>
-
               </v-window-item>
-
             </v-window>
           </v-card-text>
         </v-card>

frontend/package.json

@@ -37,6 +37,6 @@
     "@vue-flow/minimap": "^1.1.1",
     "@vueuse/core": "^10.7.2",
     "d3": "^7.8.5",
-    "vee-validate": "^4.12.4"
+    "vee-validate": "^4.12.6"
   }
 }