List of all the books added as a separate page.

assets/js/pages/files.vue

@@ -17,7 +17,13 @@
         <tbody>
         <tr v-for="file in files">
           <td>{{ file.id }}</td>
-          <td>{{ file.fileName }}</td>
+          <td>{{ file.fileName }}
+            <p class="mb-0" v-if="file.book">
+              <a class="text-decoration-none" :href="'/book/'+file.book.id">{{
+                  file.book.title
+                }}</a><a href="" class="text-decoration-none link-secondary">{{ file.book.author }}</a>
+            </p>
+          </td>
           <td class="text-end">{{ formatSize(file.fileSize) }}</td>
           <td>{{ file.extension }}</td>
           <td><a :href="'/file/'+ file.id" class="link-secondary">download</a></td>
@@ -44,6 +50,9 @@ export default {
       files: []
     }
   },
+  props: {
+    bookId: {type: Number, default: null}
+  },
   mounted() {
     this.getFiles();
   },
@@ -58,11 +67,17 @@ export default {
       if (bytes === 0) {
         return "0.00 B";
       }
-      var e = Math.floor(Math.log(bytes) / Math.log(1024));
+      const e = Math.floor(Math.log(bytes) / Math.log(1024));
       return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
     },
     getFiles: function () {
-      axios.get(window.location.href.replace(window.location.hash, '') + '/files').then(response => this.files = response.data)
+      axios.get(this.getFilesEndpoint()).then(response => this.files = response.data)
+    },
+    getFilesEndpoint: function () {
+      if (this.bookId) {
+        return '/book/' + this.bookId + '/files';
+      }
+      return '/file/all';
     }
   }
 }

src/Controller/BookController.php

@@ -3,12 +3,11 @@
 namespace App\Controller;
 
 use App\Entity\Book;
-use App\Entity\File;
 use App\Form\BookType;
 use App\Form\FileType;
 use App\Form\SearchType;
 use App\Repository\BookRepository;
-use App\Service\ProgressService;
+use App\Service\FileService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\JsonResponse;
@@ -29,7 +28,7 @@ class BookController extends AbstractController
     }
 
     #[Route('/new', name: 'app_book_new', methods: ['GET', 'POST'])]
-    public function new(Request $request, BookRepository $bookRepository, ProgressService $fileService): Response
+    public function new(Request $request, BookRepository $bookRepository, FileService $fileService): Response
     {
         $book = new Book();
         $form = $this->createForm(BookType::class, $book);
@@ -95,7 +94,7 @@ class BookController extends AbstractController
     public function show(
         Book $book,
         Request $request,
-        ProgressService $fileService
+        FileService $fileService
     ): Response {
         $fileForm = $this->createForm(FileType::class);
         $fileForm->handleRequest($request);
@@ -124,7 +123,7 @@ class BookController extends AbstractController
         Request $request,
         Book $book,
         BookRepository $bookRepository,
-        ProgressService $fileService
+        FileService $fileService
     ): Response {
         $form = $this->createForm(BookType::class, $book);
         $form->handleRequest($request);
@@ -162,7 +161,7 @@ class BookController extends AbstractController
         Request $request,
         Book $book,
         BookRepository $bookRepository,
-        ProgressService $fileService
+        FileService $fileService
     ): Response {
         if ($this->isCsrfTokenValid('delete' . $book->getId(), $request->request->get('_token'))) {
             $fileService->removeFiles($book->getFiles());

src/Controller/FileController.php

@@ -2,25 +2,49 @@
 
 namespace App\Controller;
 
+use App\Entity\Book;
 use App\Entity\File;
 use App\Repository\FileRepository;
 use App\Service\FileService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Serializer\Normalizer\AbstractNormalizer;
 
+#[Route('/file')]
 class FileController extends AbstractController
 {
-    #[Route('/file', name: 'app_file')]
-    public function index(): Response
+    #[Route('/', name: 'app_file_index')]
+    public function index(FileRepository $fileRepository): Response
     {
         return $this->render('file/index.html.twig', [
             'controller_name' => 'FileController',
+            'files' => $fileRepository->findAll()
         ]);
     }
 
-    #[Route('/file/delete/{id}', name: 'app_file_delete')]
+    #[Route('/all', name: 'app_file_all', methods: ['GET'])]
+    public function files(FileRepository $fileRepository): JsonResponse
+    {
+        return $this->json($fileRepository->findAll(), context: [
+            AbstractNormalizer::ATTRIBUTES => [
+                'id',
+                'fileName',
+                'fileSize',
+                'extension',
+                'type',
+                'book' => [
+                    'id',
+                    'title',
+                    'author'
+                ]
+            ]
+        ]);
+    }
+
+    #[Route('/delete/{id}', name: 'app_file_delete')]
     public function delete(
         Request $request,
         FileRepository $fileRepository,
@@ -32,7 +56,7 @@ class FileController extends AbstractController
         return $this->redirect($request->headers->get('referer'));
     }
 
-    #[Route('/file/{id}', name: 'app_file_download', methods: ['GET'])]
+    #[Route('/{id}', name: 'app_file_download', methods: ['GET'])]
     public function get(File $file, FileService $fileService)
     {
         return $this->file($fileService->getFilePath($file), $file->getFileName());

templates/base.html.twig

@@ -26,10 +26,10 @@
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="{{ path('app_book_index') }}">Home</a>
+                    <a class="nav-link active" aria-current="page" href="{{ path('app_book_index') }}">Books</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
+                    <a class="nav-link" href="{{ path('app_file_index') }}">Files</a>
                 </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

templates/book/show.html.twig

@@ -67,7 +67,7 @@
 
             </tbody>
         </table>
-        <files></files>
+        <files :book-id="{{ book.id }}"></files>
     </div>
 
     {{ form_start(file_form) }}

templates/file/index.html.twig

@@ -3,7 +3,10 @@
 {% block title %}Hello FileController!{% endblock %}
 
 {% block body %}
-    <div id="app"></div>
+    <div id="app">
+        <files></files>
+    </div>
+
 {% endblock %}
 
 {% block javascripts %}