Moved book listing to the vue component.

assets/js/book.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import Book from './pages/book'
+import BookListing from './pages/booklisting'
 
 Vue.component('Book', Book);
+Vue.component('BookListing', BookListing);
 
 new Vue().$mount('#app');

assets/js/pages/booklisting.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <table class="table">
+      <thead>
+      <tr>
+        <th></th>
+        <th>Title</th>
+        <th>Description</th>
+        <th>Rating</th>
+        <th>Publisher</th>
+        <th>Publish date</th>
+        <th>Actions</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-if="books.length" v-for="book in books">
+        <td>
+          <a :href="'/book/'+book.id">
+            <img class="img-thumbnail" style="max-width: 80px" :src="'/book_covers/cover_'+book.id+'.jpg'"/>
+          </a>
+        </td>
+        <td><a :href="'/book/'+book.id" class="text-decoration-none">{{ book.title }}</a></td>
+        <td>{{ book.short_description }}</td>
+        <td>{{ '⭐'.repeat(book.rating) }}</td>
+        <td>{{ book.publisher }}</td>
+        <td>{{ book.publish_date }}</td>
+        <td>
+          <a :href="'/book/'+book.id" class="text-decoration-none">show</a>
+          <a :href="'/book/'+book.id+'/edit/'" class="text-decoration-none">edit</a>
+        </td>
+      </tr>
+      <tr v-else>
+        <td colspan="9">no records found</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'BookListing',
+  data() {
+    return {
+      searchTerm: null,
+      books: [],
+      selectedBook: null,
+      manualMode: false
+    }
+  },
+  methods: {
+    search: function () {
+      axios.get('/api/books', {
+        params: {title: this.searchTerm},
+        headers: {'accept': 'application/json'}
+      }).then(response => {
+        this.books = response.data;
+      });
+    },
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.searchTerm = urlParams.get('search') || "";
+    this.search();
+  }
+}
+</script>

src/Controller/BookController.php

@@ -20,10 +20,15 @@ use Symfony\Component\Serializer\Normalizer\AbstractNormalizer;
 class BookController extends AbstractController
 {
     #[Route('/', name: 'app_book_index', methods: ['GET'])]
-    public function index(BookRepository $bookRepository): Response
+    public function index(BookRepository $bookRepository, Request $request): Response
     {
+        if ($request->query->has('search')) {
+            $books = $bookRepository->findByTitle($request->query->get('search'));
+        }
+
         return $this->render('book/index.html.twig', [
-            'books' => $bookRepository->findAll(),
+            'searchTerm' => $request->query->get('search'),
+            'books' => $books ?? $bookRepository->findAll(),
         ]);
     }
 

src/Entity/Book.php

@@ -11,7 +11,10 @@ use App\Repository\BookRepository;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Annotation\Context;
 use Symfony\Component\Serializer\Annotation\Groups;
+use Symfony\Component\Serializer\Annotation\SerializedName;
+use Symfony\Component\Serializer\Normalizer\DateTimeNormalizer;
 
 #[ApiResource]
 #[ORM\Entity(repositoryClass: BookRepository::class)]
@@ -38,6 +41,7 @@ class Book
     private $publisher;
 
     #[ORM\Column(type: 'date', nullable: true)]
+    #[Context([DateTimeNormalizer::FORMAT_KEY => 'Y-m-d'])]
     private $publish_date;
 
     #[ORM\Column(type: 'string', length: 255, nullable: true)]
@@ -116,6 +120,12 @@ class Book
         return $this->description;
     }
 
+    #[SerializedName('short_description')]
+    public function getShortDescription(): ?string
+    {
+        return mb_strimwidth($this->description, 0, 150, "...");;
+    }
+
     public function setDescription(?string $description): self
     {
         $this->description = $description;

templates/book/index.html.twig

@@ -5,7 +5,11 @@
 {% block body %}
     <div class="d-flex flex-row justify-content-between align-items-center">
         <div>
+            {% if(searchTerm) %}
+                <h1>Book search: {{ searchTerm }}</h1>
+            {% else %}
                 <h1>Book list</h1>
+            {% endif %}
         </div>
         <div>
             <a href="{{ path('app_book_new') }}" class="btn btn-primary">Add new</a>
@@ -13,45 +17,12 @@
     </div>
 
 
-    <table class="table">
-        <thead>
-        <tr>
-            <th></th>
-            <th>Title</th>
-            <th>Description</th>
-            <th>Rating</th>
-            <th>Publisher</th>
-            <th>Publish date</th>
-            <th>actions</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for book in books %}
-            <tr>
-                <td>
-                    {% if file_exists(asset('book_covers/cover_' ~ book.id ~ '.jpg')) %}
-                        <a href="{{ path('app_book_show', {'id': book.id}) }}"><img class="img-thumbnail"
-                                                                                    style="max-width: 80px"
-                                                                                    src="{{ asset('book_covers/cover_' ~ book.id ~ '.jpg' ) }}"/>
-                        </a>
-                    {% endif %}
-                </td>
-                <td><a href="{{ path('app_book_show', {'id': book.id}) }}"
-                       class="text-decoration-none">{{ book.title }}</a></td>
-                <td>{{ book.description | slice(0, 200) }}</td>
-                <td>{% if book.rating %}{% for i in range(1, book.rating) %}⭐{% endfor %}{% endif %}</td>
-                <td>{{ book.publisher }}</td>
-                <td>{{ book.publishDate ? book.publishDate|date('Y-m-d') : '' }}</td>
-                <td>
-                    <a href="{{ path('app_book_show', {'id': book.id}) }}" class="text-decoration-none">show</a>
-                    <a href="{{ path('app_book_edit', {'id': book.id}) }}" class="text-decoration-none">edit</a>
-                </td>
-            </tr>
-        {% else %}
-            <tr>
-                <td colspan="9">no records found</td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+
+    <div id="app">
+        <book-listing></book-listing>
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('book') }}
 {% endblock %}