Book form: add a field to write a review

front/src/BookForm.vue

@@ -3,8 +3,7 @@ import { ref, computed } from 'vue'
 import {
   getBook,
   getImagePathOrDefault,
-  putWantReadBook,
-  putRateBook,
+  putUpdateBook,
   putStartReadDate,
   putStartReadDateUnset,
   putEndReadDate,
@@ -14,7 +13,7 @@ import {
 import { useRouter, onBeforeRouteUpdate } from 'vue-router'
 import { VRating } from 'vuetify/components/VRating'
 import BookFormIcons from './BookFormIcons.vue'
-import ReviewModal from './ReviewModal.vue'
+import ReviewWidget from './ReviewWidget.vue'
 
 const router = useRouter()
 const props = defineProps({
@@ -37,7 +36,12 @@ function onRatingUpdate(rating) {
     data.value.read = true
     data.value.wantread = false
   }
-  putRateBook(props.id, { rating: data.value.rating })
+  putUpdateBook(props.id, { rating: data.value.rating })
+}
+
+function onReviewUpdate(review) {
+  data.value.review = review
+  putUpdateBook(props.id, { review: data.value.review })
 }
 
 async function onReadIconClick() {
@@ -53,7 +57,7 @@ async function onReadIconClick() {
 
 function onWantReadIconClick() {
   data.value.wantread = !data.value.wantread
-  putWantReadBook(props.id, { wantread: data.value.wantread })
+  putUpdateBook(props.id, { wantread: data.value.wantread })
 }
 
 async function onStartReadIconClick() {
@@ -100,18 +104,6 @@ function goToAuthor() {
       <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"
-        class="centered mt-2"
-      />
-      <ReviewModal button-parent-class="centered mt-3" />
     </div>
     <div class="column">
       <h3 class="title">{{ data.title }}</h3>
@@ -120,6 +112,7 @@ function goToAuthor() {
       <div class="my-5" v-if="data.isbn">ISBN: {{ data.isbn }}</div>
       <div class="my-5" v-if="data.inventaireid">Inventaire ID: {{ data.inventaireid }}</div>
       <div class="my-5" v-if="data.openlibraryid">OLID: {{ data.openlibraryid }}</div>
+      <ReviewWidget :reviewtext="data.review" :rating="data.rating" @on-review-update="onReviewUpdate" @on-rating-update="onRatingUpdate"/>
     </div>
     <div class="column">
       <BookFormIcons