feat: add possibility to write reviews

README.md

@@ -36,6 +36,7 @@ All your data is now located into a single-file database which can be saved anyw
 * Provide some stats about your readings
 * Multi user support
 * provides an API 
+* Write reviews and share them, see the reviews of other users on your instance 
 
 ## Usage
 
@@ -167,6 +168,10 @@ Embed code and preview :
 
 ![](screenshots/embed.png)
 
+Review creation :
+
+![](screenshots/review_modal.jpg)
+
 ## Roadmap
 
 * Koreader integration (https://koreader.rocks/)

src/jelu-ui/package.json

@@ -31,6 +31,8 @@
     "vue-chartjs": "^4.1.0",
     "vue-i18n": "^9.1.9",
     "vue-router": "4.0.14",
+    "vue-star-rating": "^2.1.0",
+    "vue3-star-ratings": "^1.1.0",
     "vuejs-sidebar-menu": "^1.0.0",
     "vuex": "^4.0.2"
   },

src/jelu-ui/src/App.vue

@@ -43,6 +43,11 @@ store.dispatch('getUser')
     // }
   })
   .catch(() => {
+    if (store.state.route != null && store.state.route.name === "review-detail") {
+      router.push(store.state.route)
+      initialLoad.value = false
+      return
+    }
     initialLoad.value = false
     console.log("catch in App")
     router.push({ name: 'login' }).then(() => { console.log("ok nav") }).catch(() => { console.log("error nav") })

src/jelu-ui/src/assets/style.css

@@ -169,6 +169,13 @@
   width: min(600px, 90vw);
 }
 
+.review-modal {
+  /* margin: 30px; */
+  @apply m-5 sm:p-5;
+  height: min(600px, 70vh);
+  width: min(600px, 85vw);
+}
+
 .small-cover {
     @apply w-28;
   }

src/jelu-ui/src/components/BookCard.vue

@@ -145,21 +145,26 @@ watch(checked, (newVal, oldVal) => {
           >
         </figure>
       </router-link>
-      <figure v-else>
-        <img
-          v-if="book.book.image"
-          :src="'/files/' + book.book.image"
-          alt="cover image"
-          class="object-fill"
-          :class="props.size === 'xl' ? 'h-96' : 'h-72'"
-        >
-        <img
-          v-else
-          src="../assets/placeholder_asset.jpg"
-          alt="cover placeholder"
-          class="h-72 object-fill"
-        >
-      </figure>
+      <router-link
+        v-else
+        :to="{ name: 'book-reviews', params: { bookId: book.book.id } }"
+      >
+        <figure>
+          <img
+            v-if="book.book.image"
+            :src="'/files/' + book.book.image"
+            alt="cover image"
+            class="object-fill"
+            :class="props.size === 'xl' ? 'h-96' : 'h-72'"
+          >
+          <img
+            v-else
+            src="../assets/placeholder_asset.jpg"
+            alt="cover placeholder"
+            class="h-72 object-fill"
+          >
+        </figure>
+      </router-link>
       <div
         v-if="showProgressBar(book)"
         class="bg-success absolute h-1.5"
@@ -188,13 +193,17 @@ watch(checked, (newVal, oldVal) => {
           {{ book.book.title }}
         </h2>
       </router-link>
-      <h2
+      <router-link
         v-else
-        v-tooltip="book.book.title"
-        class="card-title text-base max-h-11 line-clamp-2"
+        :to="{ name: 'book-reviews', params: { bookId: book.book.id } }"
       >
-        {{ book.book.title }}
-      </h2>
+        <h2
+          v-tooltip="book.book.title"
+          class="card-title text-base max-h-11 line-clamp-2 hover:link"
+        >
+          {{ book.book.title }}
+        </h2>
+      </router-link>
       <div v-if="book.book.authors != null && book.book.authors.length > 0">
         <router-link
           v-for="author in book.book.authors.slice(0,3)"