From 1a5445a84a428aaab97f9c1bd826df1cd3f7532e Mon Sep 17 00:00:00 2001
From: krzysiej <krzysztofplaczek@techtube.pl>
Date: Wed, 1 Jun 2022 14:56:56 +0200
Subject: [PATCH] Handling js upload files and displayling list of files by vue
 component.

---
 assets/controllers/mydropzone_controller.js | 10 +++--
 assets/js/book.js                           |  1 -
 assets/js/files.js                          |  4 +-
 assets/js/pages/files.vue                   | 44 ++++++++++++++++++---
 src/Controller/BookController.php           |  8 ++++
 src/Form/FileType.php                       |  5 ++-
 templates/book/show.html.twig               | 38 +++++-------------
 7 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/assets/controllers/mydropzone_controller.js b/assets/controllers/mydropzone_controller.js
index 7807d25..11dba72 100644
--- a/assets/controllers/mydropzone_controller.js
+++ b/assets/controllers/mydropzone_controller.js
@@ -30,10 +30,14 @@ export default class extends Controller {
 
     _onChange(event) {
         // The dropzone just changed
-        console.info(event);
         console.info('onchange');
-
-        event.target.closest('form').submit();
+        axios.post(document.URL, new FormData(event.target.closest('form')), {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        }).then(() => {
+            event.target.querySelector('.dropzone-preview-button').click()
+        })
 
     }
 
diff --git a/assets/js/book.js b/assets/js/book.js
index e9d166b..d6395f3 100644
--- a/assets/js/book.js
+++ b/assets/js/book.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import Book from './pages/book'
-import App from "./pages/files";
 
 Vue.component('Book', Book);
 
diff --git a/assets/js/files.js b/assets/js/files.js
index 4bfbd44..4923a82 100644
--- a/assets/js/files.js
+++ b/assets/js/files.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import App from './pages/files'
-
+import Files from "./pages/files";
 
+Vue.component('Files', Files);
 new Vue().$mount('#app');
\ No newline at end of file
diff --git a/assets/js/pages/files.vue b/assets/js/pages/files.vue
index 034d88e..52bd1fb 100644
--- a/assets/js/pages/files.vue
+++ b/assets/js/pages/files.vue
@@ -1,24 +1,58 @@
 <template>
   <div>
+    <h1>Files</h1>
 
-  <h1>hello {{ world }}</h1>
-    <MessageComponent></MessageComponent>
+    <div v-if="files.length">
+      <table class="table">
+        <thead>
+        <tr>
+          <th>Id</th>
+          <th>File name</th>
+          <th class="text-end">File size</th>
+          <th>Extension</th>
+          <th>Download</th>
+          <th>Remove</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="file in files">
+          <td>{{ file.id }}</td>
+          <td>{{ file.fileName }}</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>
+          <td><a :href="'/file/delete/'+file.id" class="link-danger">remove</a></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
-import MessageComponent from "../components/message";
 import axios from 'axios';
 
 export default {
   name: 'Files',
-  components: {MessageComponent},
   data() {
     return {
-      world: "świecie 2"
+      files: []
     }
   },
   mounted() {
+    this.getFiles();
+  },
+  methods: {
+    formatSize: function (bytes) {
+      if (bytes == 0) {
+        return "0.00 B";
+      }
+      var 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(document.URL + '/files').then(response => this.files = response.data)
+    }
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/Controller/BookController.php b/src/Controller/BookController.php
index 7f9b099..d8e1014 100644
--- a/src/Controller/BookController.php
+++ b/src/Controller/BookController.php
@@ -14,6 +14,7 @@ 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;
 use Techtube\Bookinfo\BookFinder;
 
 #[Route('/book')]
@@ -114,6 +115,13 @@ 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,
diff --git a/src/Form/FileType.php b/src/Form/FileType.php
index 2497f6b..c8400ae 100644
--- a/src/Form/FileType.php
+++ b/src/Form/FileType.php
@@ -20,14 +20,15 @@ class FileType extends AbstractType
                 [
                     'mapped' => false,
                     'data_class' => null,
-                    'required' => false,
+                    'required' => true,
                     'attr' => [
                         'data-controller' => 'mydropzone',
                         'accept' => ".pdf, .epub, .mobi",
                         'placeholder' => 'Drag and drop or browse'
                     ]
                 ]
-            );
+            )
+        ;
     }
 
     public function configureOptions(OptionsResolver $resolver): void
diff --git a/templates/book/show.html.twig b/templates/book/show.html.twig
index 9af5814..4577332 100644
--- a/templates/book/show.html.twig
+++ b/templates/book/show.html.twig
@@ -34,36 +34,12 @@
         </tbody>
     </table>
 
-    <table class="table">
-        <thead>
-        <tr>
-            <th>Id</th>
-            <th>File name</th>
-            <th class="text-end">File size</th>
-            <th>Extension</th>
-            <th>Download</th>
-            <th>Remove</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for file in book.files %}
-            <tr>
-                <td>{{ file.id }}</td>
-                <td>{{ file.fileName }}</td>
-                <td class="text-end">{{ file.fileSize | bytes_format }}</td>
-                <td>{{ file.extension }}</td>
-                <td><a href="{{ path('app_file_download', {id: file.id }) }}" class="link-secondary">download</a></td>
-                <td><a href="{{ path('app_file_delete', {id: file.id}) }}" class="link-danger">remove</a></td>
-            </tr>
-        {% else %}
-            <tr>
-                <td colspan="6">no files found</td>
-            </tr>
-        {% endfor %}
-    </table>
+    <div id="app">
+        <files></files>
+    </div>
+
     {{ form_start(file_form) }}
     {{ form_widget(file_form) }}
-    <button class="btn btn-primary">{{ button_label|default('Save') }}</button>
     {{ form_end(file_form) }}
 
     <a href="{{ path('app_book_index') }}">back to list</a>
@@ -72,3 +48,9 @@
 
     {{ include('book/_delete_form.html.twig') }}
 {% endblock %}
+
+
+{% block javascripts %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('files') }}
+{% endblock %}
\ No newline at end of file