Merge pull request #45 from rkshaon/rkshaon

frontend - book cover default, book details page

frontend/src/components/BookCardComponent.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="bg-white shadow-lg rounded-lg overflow-hidden">
-    <img :src="getCoverImageUrl(book.cover_image)" alt="Book Cover" class="w-full h-48 object-cover">
-    <div class="p-4">
-      <h3 class="text-lg font-bold text-gray-800">{{ book.title }}</h3>
-      <p class="text-gray-600">{{ book.authors.map(author => author.full_name).join(', ') }}</p>
-    </div>
+    <router-link :to="{
+      name: 'BookDetails', params: {
+        book_code: book.book_code
+      }
+    }">
+      <img :src="getCoverImage(book.cover_image, API_BASE_URL)" alt="Book Cover" class="w-full h-48 object-cover">
+      <div class="p-4">
+        <h3 class="text-lg font-bold text-gray-800">{{ book.title }}</h3>
+        <p class="text-gray-600">{{ book.authors.map(author => author.full_name).join(', ') }}</p>
+      </div>
+    </router-link>
   </div>
 </template>
 
 <script>
+import { getCoverImage } from '@/helpers/getCoverImage'
+
 export default {
   name: 'BookCardComponent',
   props: {
@@ -17,11 +25,13 @@ export default {
       required: true
     }
   },
-  methods: {
-    getCoverImageUrl (coverImage) {
-      const API_BASE_URL = process.env.VUE_APP_BACKEND_URL
-      return coverImage ? `${API_BASE_URL}${coverImage}` : 'https://fastly.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY' // Fallback to default image if cover_image is null
+  computed: {
+    API_BASE_URL () {
+      return process.env.VUE_APP_BACKEND_URL
     }
+  },
+  methods: {
+    getCoverImage
   }
 }
 </script>

frontend/src/helpers/getCoverImage.js

@@ -0,0 +1,5 @@
+export function getCoverImage (coverImage, baseURL) {
+  const fallbackImage = '/book/default-cover-image.jpg'
+  const imageURL = coverImage ? `${baseURL}${coverImage}` : `${fallbackImage}`
+  return imageURL
+}

frontend/src/pages/BookDetailsPage.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
+    <div v-if="book" class="bg-white shadow rounded-lg p-6">
+      <h1 class="text-3xl font-bold text-gray-800 mb-4">{{ book.title }}</h1>
+      <p class="text-gray-600 mb-2">By {{ book.authors.map(author => author.full_name).join(', ') }}</p>
+      <img v-if="book.coverImage" :src="book.coverImage" alt="Book Cover" class="w-full h-64 object-cover mb-4" />
+      <p class="text-gray-600">{{ book.description }}</p>
+    </div>
+    <div v-else>
+      <p>Loading book details...</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookDetailsPage',
+  data () {
+    return {
+      book: null // Store book data
+    }
+  },
+  mounted () {
+    // this.fetchBookDetails();
+  },
+  methods: {
+    // async fetchBookDetails() {
+    //   const bookId = this.$route.params.id;
+    //   try {
+    //     const response = await this.$axios.get(`${process.env.VUE_APP_BACKEND_URL}/book/v1/${bookId}/`);
+    //     this.book = response.data;
+    //   } catch (error) {
+    //     console.error('Error fetching book details:', error);
+    //   }
+    // }
+  }
+}
+</script>
+
+<style scoped>
+/* Add custom styles here */
+</style>

frontend/src/router/index.js

@@ -2,9 +2,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import HomePage from '@/pages/HomePage.vue'
 import NotFoundPage from '@/pages/NotFoundPage.vue'
+import BookDetailsPage from '@/pages/BookDetailsPage.vue'
 
 const routes = [
   { path: '/', component: HomePage },
+  { path: '/book/:book_code', name: 'BookDetails', component: BookDetailsPage },
   { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundPage }
 ]