Added vue handling the information from lubimy czytac to fetch information about the books and fill in the form automatically.

assets/js/pages/book.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="row g-3 align-items-center">
+      <div class="col-auto">
+        <input name="searchTerm" class="input form-control" placeholder="book title to search" @keypress.enter="search"
+               v-model="searchTerm" type="text"/>
+      </div>
+      <div class="col-auto">
+        <button class="btn btn-info" @click="search">Szukaj</button>
+      </div>
+    </div>
+    <div v-if="selectedBook && selectedBook.cover_url.small">
+      <img :src="selectedBook.cover_url.small" class="img-thumbnail"/>
+    </div>
+    <div v-for="book in books">
+      <div class="d-flex flex-row border mb-3 cursor-pointer book-search-item" @click="getBookDetails(book.url)">
+        <img :src="book.cover_url.small" class="img-fluid rounded-start">
+        <div class="card-body">
+          <h5 class="card-title">{{ book.title }} ({{ book.author }})</h5>
+          <p class="card-text"><a :href="book.url"><small class="text-muted">{{ book.url }}</small></a></p>
+        </div>
+      </div>
+    </div>
+    <slot></slot>
+    <BookForm></BookForm>
+  </div>
+</template>
+
+<script>
+import BookForm from '../components/bookform'
+import axios from 'axios';
+
+export default {
+  name: 'Book',
+  components: {BookForm},
+  data() {
+    return {
+      searchTerm: null,
+      books: [],
+      selectedBook: null
+    }
+  },
+  methods: {
+    search: function () {
+      console.info(this.searchTerm);
+      axios.get('/book/search/' + this.searchTerm).then(response => {
+        this.books = response.data;
+      });
+    },
+    getBookDetails: function (url) {
+      console.info(url);
+      axios.get('/book/info/' + btoa(url)).then(response => {
+        const book = this.selectedBook = response.data;
+        this.$el.querySelector('#book_title').value = book.title;
+        this.$el.querySelector('#book_author').value = book.author;
+        this.$el.querySelector('#book_isbn').value = book.isbn;
+        this.$el.querySelector('#book_pages').value = book.pages;
+        this.$el.querySelector('#book_publish_date').value = book.datePublished;
+        this.$el.querySelector('#book_publisher').value = book.publisher;
+        this.$el.querySelector('#book_category').value = book.category;
+        this.$el.querySelector('#book_language').value = book.language;
+        this.$el.querySelector('#book_description').value = book.description;
+        this.$el.querySelector('#book_series').value = book.cycle || '';
+        this.$el.querySelector('#book_volume').value = book.volume || '';
+        this.$el.querySelector('#book_cover_url').value = book.cover_url.large || '';
+        this.books = [];
+        this.searchTerm = '';
+      });
+    }
+  },
+  mounted() {
+
+  }
+}
+</script>