Finalisation de la fogique du composant MovieCommentForm avec la gestion de la v…

…alidation au submit + la création d'un event pour remonter les data au parent pour gestion.

 <script lang="ts" setup>
+//#region --Import--.
 import { useVuelidate } from "@vuelidate/core";
-import { helpers, maxLength, minLength, required, minValue, maxValue } from "@vuelidate/validators";
+import { helpers, maxLength, maxValue, minLength, minValue, required } from "@vuelidate/validators";
+//#endregion
 
-// type FormData = {
-//   username: string
-//   message: string
-//   rating: number
-// };
+//#region --Emit--.
+const emit = defineEmits(['event:submit']);
+//#endregion
 
-type FormData = { [key: string]: string|number };
+//#region --Props--.
+defineProps({
+  isSubmitting: {
+    type: Boolean,
+    required: false,
+    nullable: false,
+    default: false,
+  },
+});
+//#endregion
 
 //#region --Data/ref--.
 const initialState = {
@@ -33,11 +42,11 @@ const rules = {
     minLength: helpers.withMessage("Le message doit contenir au moins 3 caractères", minLength(3)),
     maxLength: helpers.withMessage("Le message ne peut pas dépasser 500 caractères", maxLength(500)),
   },
-  rating:{
+  rating: {
     required: helpers.withMessage("La notation est requise", required),
     minValue: helpers.withMessage("Le message ne être inférieure à 0", minValue(0)),
     maxValue: helpers.withMessage("Le message ne être suppérieur à 10", maxValue(10)),
-  }
+  },
 };
 
 const formData = reactive({
@@ -46,28 +55,27 @@ const formData = reactive({
 const v$ = useVuelidate(rules, formData);
 //#endregion
 
-function submitComment() {
-  console.log("Submit !")
+//#region --Function--.
+async function submitComment() {
+  emit('event:submit', formData);
 }
 
-function clear () {
+function clear() {
   v$.value.$reset();
   formData.username = initialState.username;
   formData.message = initialState.message;
   formData.rating = initialState.rating;
 }
 
-// :error-messages="getErrors('username', $v.username)" :counter="10" label="username"
-// :error-messages="getErrors('message', $v.message)"
+//#endregion
 </script>
 
 <template>
   <section>
-    movie comment form
-    <VForm @submit.prevent="submitComment">
+    <VForm>
       <v-text-field
         v-model="formData.username"
-        :error-messages="v$.username.$errors.map(e => e.$message)"
+        :error-messages="v$.username.$errors.map((e) => e.$message)"
         label="nom d'utilisateur"
         placeholder="nom d'utilisateur"
         required
@@ -76,7 +84,7 @@ function clear () {
       />
       <v-textarea
         v-model="formData.message"
-        :error-messages="v$.message.$errors.map(e => e.$message)"
+        :error-messages="v$.message.$errors.map((e) => e.$message)"
         label="message"
         placeholder="Saisissez votre commentaire"
         required
@@ -85,7 +93,7 @@ function clear () {
       />
       <v-text-field
         v-model="formData.rating"
-        :error-messages="v$.rating.$errors.map(e => e.$message)"
+        :error-messages="v$.rating.$errors.map((e) => e.$message)"
         label="Note (1-10)"
         placeholder=""
         required
@@ -93,7 +101,25 @@ function clear () {
         @blur="v$.rating.$touch"
         @input="v$.rating.$touch"
       />
-      <v-btn class="mr-4">submit</v-btn>
+      <v-btn
+        class="mt-6 mr-4"
+        color="primary"
+        @click="
+          async () => {
+            const validForm = await v$.$validate();
+            if (validForm) {
+              submitComment();
+            }
+          }
+        "
+      >
+        <span v-if="isSubmitting" class="flex items-center justify-center">
+          <span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+          Envoi en cours...
+        </span>
+        <span v-else>Publier le commentaire</span>
+      </v-btn>
+      <v-btn class="mt-6 mr-4" color="primary" @click="clear"> effacer </v-btn>
     </VForm>
   </section>
 </template>

@@ -19,6 +19,7 @@ const { currentRoute } = useRouter();
 
 //#region --Data/ref--.
 const isLoading = ref(true);
+const isSubmitting = ref(false);
 //#endregion
 
 //#region --Computed--.
@@ -177,7 +178,7 @@ onMounted(() => {
               </div>
             </div>
           <!--  Comments form.  -->
-            <form-movie-comment-form />
+            <form-movie-comment-form @event:submit="console.log('submitted !', $event)" />
           </section>
         </div>
       </div>