FEAT: dynamic score on details page

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>
 

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>