Open Library search API

If nothing is found on the server, returns results from open library
API. Clicking on a book imports it.

front/src/BookForm.vue

@@ -107,6 +107,7 @@
       <h3 class="subtitle">{{data.author}}</h3>
       <p>{{data.summary}}</p>
       <div class="my-5" v-if="data.isbn">ISBN: {{data.isbn}}</div>
+      <div class="my-5" v-if="data.openlibraryid">OLID: {{data.openlibraryid}}</div>
     </div>
     <div class="column">
       <div class="iconscontainer" :class="data.read ? 'remove-border-bottom' : ''">

front/src/BookListElement.vue

@@ -31,7 +31,7 @@ function openBook() {
   if (props.id != 0) {
     router.push(`/book/${props.id}`);
   } else {
-    console.log("Open Library Id : " + props.openlibraryid);
+    router.push(`/importopenlibrary/${props.openlibraryid}`)
   }
 }
 

front/src/OpenLibraryImport.vue

@@ -0,0 +1,32 @@
+<script setup>
+  import { ref } from 'vue'
+  import { postImportBook } from './api.js'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter();
+
+  const props = defineProps({
+    openlibraryid: String
+  });
+  const error = ref(null);
+  const data = ref(null);
+
+  async function importOpenLibraryId() {
+    const res = await postImportBook(props.openlibraryid);
+    const json = await res.json();
+    if (res.ok) {
+      router.push(`/book/${json.id}`);
+    } else {
+      error.value = json;
+    }
+  }
+
+  importOpenLibraryId();
+</script>
+
+<template>
+  <div v-if="error">Importing {{props.openlibraryid}}...</div>
+  <div v-else-if="!data">Importing {{props.openlibraryid}}...</div>
+</template>
+<style scoped></style>
+

front/src/api.js

@@ -62,6 +62,10 @@ export function postBook(book) {
   return genericPayloadCall('/book', book.value, 'POST')
 }
 
+export async function postImportBook(id) {
+  return genericPayloadCall('/importbook', {openlibraryid: id}, 'POST');
+}
+
 export async function putReadBook(bookId) {
   return genericPayloadCall('/book/' + bookId + "/read", {read: true}, 'PUT')
 }

front/src/router.js

@@ -8,12 +8,14 @@ import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
 import Home from './Home.vue'
 import SearchBook from './SearchBook.vue'
+import OpenLibraryImport from './OpenLibraryImport.vue'
 import { useAuthStore } from './auth.store'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/books', component: BooksBrowser },
   { path: '/book/:id', component: BookForm, props: true },
+  { path: '/importopenlibrary/:openlibraryid', component: OpenLibraryImport, props: true },
   { path: '/author/:id', component: AuthorForm, props: true },
   { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/add', component: AddBook },