84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Files</h1>
|
|
|
|
<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 }}
|
|
<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>
|
|
<td><a :href="'/file/delete/'+file.id" @click.prevent="deleteFile(file.id)" class="link-danger">remove</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import {EventBus} from "../event-bus";
|
|
|
|
export default {
|
|
name: 'Files',
|
|
components: {
|
|
EventBus
|
|
},
|
|
data() {
|
|
return {
|
|
files: []
|
|
}
|
|
},
|
|
props: {
|
|
bookId: {type: Number, default: null}
|
|
},
|
|
mounted() {
|
|
this.getFiles();
|
|
},
|
|
created() {
|
|
window.EventBus.$on('fileUploaded', this.getFiles);
|
|
},
|
|
methods: {
|
|
deleteFile: function (fileId) {
|
|
axios.get(window.location.origin + '/file/delete/' + fileId).then(() => this.getFiles())
|
|
},
|
|
formatSize: function (bytes) {
|
|
if (bytes === 0) {
|
|
return "0.00 B";
|
|
}
|
|
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(this.getFilesEndpoint()).then(response => this.files = response.data)
|
|
},
|
|
getFilesEndpoint: function () {
|
|
if (this.bookId) {
|
|
return '/book/' + this.bookId + '/files';
|
|
}
|
|
return '/file/all';
|
|
}
|
|
}
|
|
}
|
|
</script> |