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

assets/js/app.js

@@ -0,0 +1,14 @@
+ /*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.scss in this case)
+import '../styles/app.scss';
+import 'bootstrap';
+
+
+// start the Stimulus application
+import './bootstrap';

assets/js/book.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Book from './pages/book'
+import App from "./pages/files";
+
+Vue.component('Book', Book);
+
+new Vue().$mount('#app');

assets/js/bootstrap.js

@@ -0,0 +1,11 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!../controllers',
+    true,
+    /\.[jt]sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/js/components/bookform.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookForm'
+}
+</script>

assets/js/components/message.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h2>another message</h2>
+  </div>
+</template>
+
+<script>
+export default  {
+  name: 'Message'
+}
+</script>

assets/js/files.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import App from './pages/files'
+
+
+new Vue().$mount('#app');

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>

assets/js/pages/files.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+
+  <h1>hello {{ world }}</h1>
+    <MessageComponent></MessageComponent>
+  </div>
+</template>
+
+<script>
+import MessageComponent from "../components/message";
+import axios from 'axios';
+
+export default {
+  name: 'Files',
+  components: {MessageComponent},
+  data() {
+    return {
+      world: "świecie 2"
+    }
+  },
+  mounted() {
+  }
+}
+</script>