Switched getting files with axios request to the api platform.

assets/js/pages/files.vue

@@ -69,13 +69,17 @@ export default {
       return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
     },
     getFiles: function () {
-      axios.get(this.getFilesEndpoint()).then(response => this.files = response.data)
+      axios.get(this.getFilesEndpoint(),  {
+        headers: {
+          'accept': 'application/json'
+        }
+      }).then(response => this.files = response.data)
     },
     getFilesEndpoint: function () {
       if (this.bookId) {
-        return '/book/' + this.bookId + '/files';
+        return `/api/books/${this.bookId}/files`;
       }
-      return '/file/all';
+      return `/api/files`;
     }
   }
 }

src/Controller/BookController.php

@@ -111,13 +111,6 @@ class BookController extends AbstractController
         ]);
     }
 
-    #[Route('/{id}/files', name: 'app_book_file', methods: ['GET'])]
-    public function files(Book $book): JsonResponse
-    {
-        return $this->json($book->getFiles(), context: [AbstractNormalizer::IGNORED_ATTRIBUTES => ['book']]);
-    }
-
-
     #[Route('/{id}/edit', name: 'app_book_edit', methods: ['GET', 'POST'])]
     public function edit(
         Request $request,

src/Entity/Book.php

@@ -2,11 +2,14 @@
 
 namespace App\Entity;
 
+use ApiPlatform\Core\Annotation\ApiResource;
+use ApiPlatform\Core\Annotation\ApiSubresource;
 use App\Repository\BookRepository;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
 
+#[ApiResource]
 #[ORM\Entity(repositoryClass: BookRepository::class)]
 class Book
 {
@@ -33,6 +36,7 @@ class Book
     #[ORM\Column(type: 'string', length: 255, nullable: true)]
     private $subtitle;
 
+    #[ApiSubresource]
     #[ORM\OneToMany(mappedBy: 'book', targetEntity: File::class, orphanRemoval: true)]
     private $files;
 

templates/book/index.html.twig

@@ -19,6 +19,7 @@
             <th></th>
             <th>Title</th>
             <th>Description</th>
+            <th>Rating</th>
             <th>Publisher</th>
             <th>Publish date</th>
             <th>actions</th>
@@ -38,6 +39,7 @@
                 <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>

templates/book/show.html.twig

@@ -20,7 +20,7 @@
                 <h1>{{ book.title }}</h1>
                 <h3>{{ book.subtitle }}</h3>
                 <p>{{ book.author }}</p>
-                <p>{% for i in range(1, book.rating) %}⭐{% endfor %}</p>
+                <p>{% if book.rating %}{% for i in range(1, book.rating) %}⭐{% endfor %}{% endif %}</p>
             </div>
         </div>