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';
     }
   }
 }