Commit 6156828f authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FEAT: add modal for file import logs

parent 0f5a6237
......@@ -227,6 +227,9 @@
</b-button>
</div>
<!-- We also import the modal for showing file import logs here -->
<app-modalFileManagerLog ref="appModalFileManagerLog" />
<!-- And here comes the table -->
<b-table
ref="filesTable"
......@@ -325,6 +328,13 @@
<b-button @click="editFile(data.item.id)">
Edit
</b-button>
<b-button
v-b-tooltip.hover
title="Show import log"
@click="$refs.appModalFileManagerLog.show(data.item.show, data.item.id)"
>
&#128220;
</b-button>
<b-button
variant="danger"
@click="deleteFile(data.item.id)"
......@@ -653,8 +663,14 @@
import axios from 'axios'
import filesize from 'filesize'
import prettyDate from '../mixins/prettyDate'
import modalFileManagerLog from './FileManagerModalLog.vue'
export default {
// include the modal for displaying file import logs
components: {
'app-modalFileManagerLog': modalFileManagerLog
},
// generic functions that we want to use from our mixins folder
mixins: [ prettyDate ],
......
<template>
<div>
<b-modal
id="modal-file-manager-log"
title="File import log"
size="xl"
ok-only
>
<div v-if="loaded">
<div v-if="error">
<b-alert
variant="danger"
show
>
{{ error }}
</b-alert>
</div>
<div v-else>
{{ log }}
<hr>
<div v-if="results.fetch">
<h2>Fetch log</h2>
<b-table :items="results.fetch" />
</div>
<div v-if="results.normalize">
<h2>Normalize log</h2>
<b-table :items="results.normalize" />
</div>
</div>
</div>
<div v-else>
<div align="center">
<img
src="../assets/radio.gif"
width="96"
alt="loading data"
><br>
Loading file import log...
</div>
</div>
</b-modal>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
loaded: false, // flag to indicate if log is loaded
slug: null, // the show's slug of the log's file
id: null, // the id of the log's file
log: '', // the log output
error: '', // potential error message
results: null, // the results object for the logs
}
},
methods: {
loadLog: function () {
let uri = process.env.VUE_APP_API_TANK + 'shows/' + this.slug + '/files/' + this.id + '/logs'
this.log = ''
this.error = ''
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.results = response.data.results
this.log = 'Available logs: ' + Object.keys(response.data.results).join(', ')
this.loaded = true
}).catch(error => {
this.error = 'Error: could not fetch import log from tank. See console for details.'
this.loaded = true
if (error.response) {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
} else if (error.request) {
this.$log.error(error.request)
} else {
this.$log.error(error.message)
}
})
},
show: function (slug, id) {
this.loaded = false
this.slug = slug
this.id = id
this.$bvModal.show('modal-file-manager-log')
this.loadLog()
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment