From c37835dc33f5e86b8a9b8c7db56013ce7b604696 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Thu, 10 Oct 2024 16:10:49 +0200
Subject: [PATCH] FEAT: dynamic score on details page

---
 components/comment/form.vue | 16 ++++++++++++++--
 components/comment/list.vue |  4 +++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/comment/form.vue b/components/comment/form.vue
index 4330a97..9c0a188 100644
--- a/components/comment/form.vue
+++ b/components/comment/form.vue
@@ -6,7 +6,8 @@
       <label for="score">
         Note:
       </label>
-      <input type="range" name="score" min="1" max="10" id="score" class="w-full">
+      {{ score }}%
+      <input type="range" name="score" min="0" max="100" step="1" id="score" class="w-full" v-model="score">
     </div>
     <button type="submit"
       class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">envoyer</button>
@@ -17,14 +18,25 @@
 const store = useCommentStore()
 const props = defineProps(['filmId'])
 
+const username = ref('')
+const message = ref('')
+const score = ref(50)
+
+const resetForm = () => {
+  username.value = ''
+  message.value = ''
+  score.value = 5
+}
+
 const sendComment = () => {
   store.add({
     username: username.value,
     message: message.value,
-    score: document.getElementById('score').value,
+    score: score.value,
     filmId: props.filmId,
     added: Date.now(),
   })
+  resetForm()
 }
 </script>
 
diff --git a/components/comment/list.vue b/components/comment/list.vue
index 195779a..c4c2cca 100644
--- a/components/comment/list.vue
+++ b/components/comment/list.vue
@@ -5,7 +5,9 @@
         {{ comment.message }}
       </p>
       <p>
-        {{ comment.username }} - {{ useDateFormat(comment.added, 'D MMM YYYY') }}
+        <UiPerson class="h-10 inline-block" /> {{ comment.username }} -
+        {{ useDateFormat(comment.added, 'D MMM YYYY') }}
+        {{ comment.score }}%
       </p>
     </li>
   </ul>