added rating books

front/src/BookForm.vue

@@ -1,7 +1,8 @@
 <script setup>
   import { computed } from 'vue'
-  import { getBook, getImagePathOrDefault } from './api.js'
+  import { getBook, getImagePathOrDefault, putBookUpdate } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
+  import { VRating } from 'vuetify/components/VRating';
 
   const props = defineProps({
   id: String
@@ -15,6 +16,11 @@
     error = res.error;
   })
 
+  function onRatingUpdate(rating) {
+    data.value.rating = rating * 2
+    putBookUpdate(props.id, {rating: data.value.rating})
+  }
+
 </script>
 
 <template>
@@ -22,9 +28,21 @@
   <div v-if="data">
     <h3 class="title">{{data.title}}</h3>
     <h3 class="subtitle">{{data.author}}</h3>
-    <figure class="image">
-      <img v-bind:src="imagePathOrDefault" v-bind:alt="data.title">
-    </figure>
+    <div class="imagewithrating">
+      <figure class="image">
+        <img v-bind:src="imagePathOrDefault" v-bind:alt="data.title">
+      </figure>
+      <VRating
+          half-increments
+          hover
+          :length="5"
+          size="x-large"
+          density="compact"
+          :model-value="data.rating/2"
+          @update:modelValue="onRatingUpdate"
+          active-color="bulma-body-color"
+          />
+    </div>
   </div>
 </template>
 
@@ -35,4 +53,10 @@ img {
   height:auto;
   width:auto;
 }
+
+.imagewithrating {
+  vertical-align: top;
+  display: inline-block;
+  text-align: center;
+}
 </style>