feat: add series description and rating #122

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

@@ -25,6 +25,7 @@ import ReviewModalVue from './ReviewModal.vue'
 import BookQuoteModalVue from './BookQuoteModal.vue'
 import { BookQuote } from "../model/BookQuote"
 import BookQuoteCard from "./BookQuoteCard.vue"
+import { Series } from '../model/Series'
 
 const { t, d } = useI18n({
       inheritLocale: true,
@@ -68,12 +69,19 @@ const getBook = async () => {
     useTitle('Jelu | ' + book.value.book.title)
     getUserReviewsForBook()
     getBookQuotesForBook()
+    getAllSeriesInfo()
   } catch (error) {
     console.log("failed get book : " + error);
     getBookIsLoading.value = false
   }
 };
 
+const getAllSeriesInfo = async () => {
+  book.value?.book.series?.forEach(s => {
+    fetchSeries(s.seriesId as string)
+  })
+}
+
 const getUserReviewsForBook = async() => {
   await until(user.value).not.toBeNull()
   dataService.findReviews(user.value.id, book.value?.book.id, null, null, null, 0, 20)
@@ -456,6 +464,54 @@ const deleteBookQuote = async (bookQuoteId: string) => {
     })
 }
 
+const seriesmap: Map<string, Series> = new Map()
+
+const fetchSeries = async (seriesId: string) => {
+  dataService.getSeriesById(seriesId)
+    .then(data => {
+        seriesmap.set(seriesId, data)
+    })
+    .catch(e => {
+        console.log("fetching series error")
+    })
+}
+
+const getSeriesInfo = async (seriesId: string) => {
+    if (seriesmap.get(seriesId) != null) {
+        const s = seriesmap.get(seriesId)
+        return await formatSeries(s as Series)
+    }
+    dataService.getSeriesById(seriesId)
+    .then(data => {
+        seriesmap.set(seriesId, data)
+        return formatSeries(data)
+    })
+    .catch(e => {
+        return "error"
+    })
+}
+
+const formatSeries = async (series: Series)  => {
+    let txt = ""
+    if (series.description != null && series.description.length > 0) {
+        txt += series.description.substring(0, 40)
+        txt += " | "
+    }
+    if (series.avgRating != null) {
+        txt += "avg : "
+        txt += series.avgRating
+        txt += " "
+    }
+    if (series.userRating != null) {
+        txt += "me : "
+        txt += series.userRating
+    }
+    if (txt.trim().length < 1) {
+      return 'no data'
+    }
+    return txt
+}
+
 getBook()
 
 </script>
@@ -710,6 +766,9 @@ getBook()
             <li
               v-for="seriesItem in book?.book?.series"
               :key="seriesItem.seriesId"
+              v-tooltip="{
+                content: () => getSeriesInfo(seriesItem.seriesId as string)
+              }"
             >
               <router-link
                 class="link hover:underline hover:decoration-4 hover:decoration-secondary"

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

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { Book } from "../model/Book";
 import { Review, Visibility } from "../model/Review";
 import dataService from "../services/DataService";
+import { ObjectUtils } from "../utils/ObjectUtils";
 
 const { t } = useI18n({
   inheritLocale: true,
@@ -34,11 +35,6 @@ watch(rating, (newVal, oldVal) => {
   console.log("visibilty " + newVal + " " + oldVal)
 })
 
-// https://stackoverflow.com/questions/39924644/es6-generate-an-array-of-numbers
-const range = (start: number, end: number, step: number) => {
-  return Array.from(Array.from(Array(Math.ceil((end - start) / step)).keys()), x => start + x * step);
-}
-
 const classFor = (n: number) => {
   if (n === 0) {
     return "rating-hidden"
@@ -158,7 +154,7 @@ const editReview = () => {
           <div class="flex gap-3">
             <div class="rating rating-half">
               <input
-                v-for="n in range(0, 10.5, 0.5)"
+                v-for="n in ObjectUtils.range(0, 10.5, 0.5)"
                 :key="n"
                 v-model="rating"
                 :value="n"

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

@@ -14,13 +14,16 @@ import { ObjectUtils } from '../utils/ObjectUtils';
 import BookCard from "./BookCard.vue";
 import SortFilterBarVue from "./SortFilterBar.vue";
 import { Series } from '../model/Series';
+import SeriesModalVue from './SeriesModal.vue'
+import { useOruga } from "@oruga-ui/oruga-next"
 
 const { t } = useI18n({
       inheritLocale: true,
       useScope: 'global'
     })
 
 const route = useRoute()
+const oruga = useOruga();
 
 const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
 
@@ -96,6 +99,26 @@ function modalClosed() {
   throttledGetBooks()
 }
 
+function seriesModalClosed() {
+  console.log("series modal closed")
+  getSeries()
+}
+
+function toggleSeriesModal(series: Series, edit: boolean) {
+    oruga.modal.open({
+      component: SeriesModalVue,
+      trapFocus: true,
+      active: true,
+      canCancel: ['x', 'button', 'outside'],
+      scroll: 'keep',
+      props: {
+        "series": series,
+        "edit" : edit,
+      },
+      onClose: seriesModalClosed
+    });
+}
+
 getSeries()
 getBooks()
 
@@ -218,10 +241,31 @@ getBooks()
       <span class="icon">
         <i class="mdi mdi-bookshelf" />
       </span>
-      {{ series.name }} :
+      {{ series.name }} : 
+      <button
+        v-tooltip="t('series.edit_series')"
+        class="btn btn-circle btn-outline border-none"
+        @click="toggleSeriesModal(series, true)"
+      >
+        <span class="icon text-lg">
+          <i class="mdi mdi-pencil" />
+        </span>
+      </button>
     </h2>
     <div />
   </div>
+  <div>
+    <div class="flex justify-center">
+      <v-md-preview
+        v-if="series.description != null"
+        class="text-justify text-base"
+        :text="series.description"
+      />
+    </div>
+    <div v-if="series.avgRating != null || series.userRating != null">
+      {{ t('labels.avg_rating', {rating : series.avgRating}) }} / {{ t('labels.user_rating', {rating : series.userRating}) }}
+    </div>
+  </div>
   <div
     v-if="getBooksIsLoading && books.length < 1"
     class="flex flex-row justify-center justify-items-center gap-3"