admon code for results

pages/poll.vue

@@ -1,7 +1,8 @@
 <template>
   <MainPoll :question-component="QuestionChoice" @submit="submitForm">
     <template #submit>
-      <button type="submit" id="form-submit">Valider</button>
+      <div id="error">{{ errorMessage }}</div>
+      <button id="form-submit" type="submit">Valider</button>
     </template>
   </MainPoll>
 </template>
@@ -15,22 +16,34 @@ const runtimeConfig = useRuntimeConfig()
 
 const route = useRoute()
 
+const errorMessage = ref("")
+
+
 async function submitForm(e: Event) {
   const target = e.target
   if (!target || !(target instanceof HTMLFormElement)) {
     throw Error("Form target not found")
   }
+  const formObject = Object.fromEntries(new FormData(target))
+  const filtered = Object.keys(Object.fromEntries(Object.entries(formObject).filter(([key, value]) => value == "unset"
+  ))).sort((a, b) => (Number(a) || Number(a[0])) - (Number(b) || Number(b[0])))
+  console.log(filtered)
+  if (filtered.length > 0) {
+    errorMessage.value = `Vous n'avez pas répondu à toutes les questions ! Veuillez répondre aux questions suivantes : ${filtered.join(", ")}`
+    return
+  }
   await $fetch(`${runtimeConfig.public.apiBase}/vote/${route.query.code}`, {
     method: "POST",
     body: Object.fromEntries(new FormData(target))
   })
 
-  navigateTo({ path: "/results", query: route.query })
+  navigateTo({ path: "/finished", query: route.query })
 }
 </script>
 
 <style>
 #form-submit {
+  cursor: pointer;
   padding: .375rem .75rem;
   border-width: 0px;
   border-color: rgb(0, 0, 0);
@@ -39,4 +52,8 @@ async function submitForm(e: Event) {
   color: white;
   font-size: 1em;
 }
+
+#error {
+  color: #E94A4D;
+}
 </style>