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

assets/js/app.js

@@ -6,7 +6,7 @@
  */
 
 // any CSS you import will output into a single css file (app.scss in this case)
-import './styles/app.scss';
+import '../styles/app.scss';
 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

@@ -2,7 +2,7 @@ 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',
+    '@symfony/stimulus-bridge/lazy-controller-loader!../controllers',
     true,
     /\.[jt]sx?$/
 ));

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

@@ -2,6 +2,4 @@ import Vue from 'vue';
 import App from './pages/files'
 
 
-new Vue({
-    render: h => h(App)
-}).$mount('#app');
+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>

assets/pages/files.vue

@@ -1,15 +0,0 @@
-<template>
-  <h1>hello {{ world }}</h1>
-</template>
-
-<script>
-
-export default {
-  name: 'Files',
-  data() {
-    return {
-      world: "świecie"
-    }
-  },
-}
-</script>

assets/styles/app.scss

@@ -1,5 +1,13 @@
 @import "~bootstrap";
 
 body {
-    background-color: lightblue !important;
+    //background-color: lightblue !important;
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.book-search-item:hover {
+  background-color: $light;
+}